找回密码
 注册会员

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 1741|回复: 11
收起左侧

Photoshop制作水晶风格网站导航条

[复制链接]
发表于 2010-9-23 20:09 | 显示全部楼层 |阅读模式
最终效果
导航.jpg
 楼主| 发表于 2010-9-23 20:11 | 显示全部楼层
1、创建一个600 × 140。用圆角矩形工具制作一个圆角矩形。
jc1003052_2.jpg
 楼主| 发表于 2010-9-23 20:13 | 显示全部楼层
本帖最后由 上海地鐵Ⅶ號線 于 2010-9-23 20:25 编辑

2、设置如下(渐变叠加:颜色设置为:#5e80a3,#839db8,#b8c7d6)呈现如图1

图1

图1
QQ截图未命名3.jpg
QQ截图未命名.jpg
QQ截图未命名2.jpg
 楼主| 发表于 2010-9-23 20:18 | 显示全部楼层
本帖最后由 上海地鐵Ⅶ號線 于 2010-9-23 20:24 编辑

3、打上文字,字体Segoe,颜色白色
QQ截图未命名2.jpg
QQ截图未命名.jpg
 楼主| 发表于 2010-9-23 20:27 | 显示全部楼层
本帖最后由 上海地鐵Ⅶ號線 于 2010-9-23 20:32 编辑

4、创建新层,矩形工具,绘制1px的线,用# ffffffs填充。
QQ截图未命名.jpg
 楼主| 发表于 2010-9-23 20:31 | 显示全部楼层
5、复制这个层接着在每个链接之间加线。然后用矩形选框覆盖到所有线条,然后使用选择- >修改- >羽化和应用5px半径。DELETE——再用同样方法做一遍下面
QQ截图未命名.jpg
 楼主| 发表于 2010-9-23 20:32 | 显示全部楼层
本帖最后由 上海地鐵Ⅶ號線 于 2010-9-23 20:33 编辑

6、使用矩形选框工具选取链接的内部 (在两线之间)然后填充任何你想要的颜色。

 楼主| 发表于 2010-9-23 20:33 | 显示全部楼层
本帖最后由 上海地鐵Ⅶ號線 于 2010-9-23 20:34 编辑

7、给这个层混合模式渐变叠加使用颜色: #567595, #728fae #b3c3d3。 他应该呈现这样(如图1)

图1

图1
 楼主| 发表于 2010-9-23 20:37 | 显示全部楼层
8、现在用矩形选框工具2px半径画一个小矩形(就是导航栏的搜索框)使白色填充。
设置 内发光(混合模式:叠加) 渐变叠加: #e6e6e6 — #ffffff   描边: #5e80a3。
如图
QQ截图未命名.jpg
 楼主| 发表于 2010-9-23 20:38 | 显示全部楼层
9、在矩形内输入“search”用Segoe字体,颜色#7b7b7b。
QQ截图未命名.jpg
 楼主| 发表于 2010-9-23 20:39 | 显示全部楼层
最后一步:插入搜索的图标,放入矩形,完成。
最终效果:
导航.jpg
头像被屏蔽
发表于 2010-9-23 21:55 | 显示全部楼层
提示: 该帖被管理员或版主屏蔽

手机版|沪ICP备07025636号

GMT+8, 2020-7-4 12:25 , Processed in 0.032890 second(s), 15 queries , Yac On.

Metrofans © 2006-2014

本页面由 Comsenz Discuz 驱动

快速回复 返回顶部 返回列表