web2.0风格网站导航面板设计教程


来源:未知 作者: 日期:2009-11-21 Tag: 设计 教程 面板 网站导航 风格 选择 快捷 效果 ctrl

我们先来看看效果图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
最终效果

  制作过程:

  1、新建文件,选择径向渐变,设置前景颜色为#b3a773,背景颜色为#877948。效果如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图1

  2、创建圆角矩形(半径为10px)大小为220x50px,颜色#212121,如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图2

  3、选择图层样式>渐变>描边,效果如图。

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图3

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图4

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图5

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图6

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
4、新建层,选择选区工具(快捷键M)大小为15x100px,填充白色,效果如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图8

  5、复制白色线条层2次(快捷键ctrl+J),移动20px,合并3个白线层,效果如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图9

  6、选择变换(快捷键ctrl+T)。

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图10

  7、载入圆角矩形选区(按ctrl+鼠标点击圆角矩形层),选择白线层,反选(快捷键shift+ctrl+i),删除多余白线。

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图11

  8、设置还层不透明为5%。

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图12

  9、添加自喜欢的文字和图标:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图13

10、选择圆角矩形,半径为10 px,颜色为#2f2f2f,如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图14

  11、调整图层的顺序。

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图15

  12、选择图层样式>外发光(柔光)>内发光>描边,设置如下图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图16

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图17

#p#分页标题#e#Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图18

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图19

13、选择文本工具(快捷键T)输入文字,如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图20

  14、新建层,选择画笔(快捷键B)创建200x1px细线,颜色为#292929,如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图21

  15、新建层,选择选区工具(快捷键M),大小为8x3px,填充白色,效果如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图22

  16、选择图层样式>外发光,设置如下图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图23

  17、复制图层(快捷键ctrl+J),效果如图:

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图24

  完成!

Photoshop制作时尚web2.0风格导航面板,PS教程,思缘教程网
图25 

相关推荐