夜郎 发表于 2009-1-26 22:34:10

Photoshop精细制作Vista风格网站导航条

利用Photoshop制作Vista风格网站导航条，效果还算可以。

新建立文件500px * 50px，制作480px * 30px的一个选区。

http://www.sz41.com.cn/attachments/135120/images/200912610254042677801.jpg


执行“选择”->“修改” ->“平滑”，设置半径为 2px。效果如下。

http://www.sz41.com.cn/attachments/135120/images/200912610254049677802.jpg


创建一个新图层，填充选择为任何颜色。

应用图层样式。渐变颜色为 #313332到 #46474a

http://www.sz41.com.cn/attachments/135120/images/200912610254053677803.jpg


描边颜色为 #676767。

http://www.sz41.com.cn/attachments/135120/images/200912610254059777804.jpg


选择上面的部分。

http://www.sz41.com.cn/attachments/135120/images/200912610254065777805.jpg


新建立一图层，从上到下用白色到透明进行渐变填充。

http://www.sz41.com.cn/attachments/135120/images/200912610254068777806.jpg


图层模式改为线性减淡，不透明度35%。

http://www.sz41.com.cn/attachments/135120/images/200912610254089777807.jpg


效果如下。

http://www.sz41.com.cn/attachments/135120/images/2009126102541777808.jpg


再建新图层，使用单行选框工具在上部选择1px区域。

http://www.sz41.com.cn/attachments/135120/images/20091261025418777809.jpg


填充为白色。

http://www.sz41.com.cn/attachments/135120/images/2009126102541137778010.jpg


按Ctrl单击最下面的图层

http://www.sz41.com.cn/attachments/135120/images/2009126102541247778011.jpg


执行“选择” ->“反选”，按Del。

http://www.sz41.com.cn/attachments/135120/images/2009126102541378778012.jpg


http://www.sz41.com.cn/attachments/135120/images/2009126102541468778013.jpg


改变图层混合模式为柔光，不透明度为60%。

http://www.sz41.com.cn/attachments/135120/images/2009126102541528778014.jpg


下面添加一些字符。创建一 130px * 24px 选区，然后“选择” ->“修改” ->“平滑”，设置半径为2px。

http://www.sz41.com.cn/attachments/135120/images/2009126102541568778015.jpg


建立新图层，任意颜色填充选区，添加图层样式，渐变设置 #000000到 #2f3233。

http://www.sz41.com.cn/attachments/135120/images/2009126102541658778016.jpg


描边设置 #0f1011到 #575858。

http://www.sz41.com.cn/attachments/135120/images/2009126102541728778017.jpg


创建新层，然后按Ctrl单击图层，执行“编辑” ->“描边”设置如下。

http://www.sz41.com.cn/attachments/135120/images/2009126102541768778018.jpg


图层不透明度设置为15%。

http://www.sz41.com.cn/attachments/135120/images/2009126102541838778019.jpg


选择一半创建新图层填充颜色，然后从上到下应用白色到透明的渐变效果。

http://www.sz41.com.cn/attachments/135120/images/2009126102541878778020.jpg


不透明度设置为80%。

http://www.sz41.com.cn/attachments/135120/images/2009126102541989778021.jpg


添加字符，字体为Verdana 字号11pt，白色。

http://www.sz41.com.cn/attachments/135120/images/200912610254249778022.jpg


我们在文字中间添加分隔线．创建新层，使用单列选框工具选择区域，填充颜色为#1a1b1c，向右移动选区1px再次填充为#5d5f60再向右移动1px填充为#232526

http://www.sz41.com.cn/attachments/135120/images/2009126102542149778023.jpg


用20px柔笔刷擦除上下的部分，图层不透明度设置为50%

http://www.sz41.com.cn/attachments/135120/images/2009126102542189778024.jpg


复制该图层移动到下一个位置．

http://www.sz41.com.cn/attachments/135120/images/2009126102542269778025.jpg


最终效果如下。

http://www.sz41.com.cn/attachments/135120/images/2009126102542309778026.jpg

meing 发表于 2009-6-28 19:50:20

很感谢这么详细的讲解！

李力李力 发表于 2015-4-8 22:54:14

学习了谢谢

daith 发表于 2019-1-27 09:42:08

专业的培训
页: [1]
查看完整版本: Photoshop精细制作Vista风格网站导航条