好的网站从“头”开始 Photoshop打造网站导航按钮

  本教程中我们学习一种简单的网站导航按钮制作方法,运用选框和画笔工具,再用渐变叠加并添加文字和图层排版就可以制作出常见风格的网站导航按钮。

  设计工具为PS CS3,先看一下做好的完成图:

好的网站从“头”开始 Photoshop打造网站导航按钮

  设计过程如下:

  步骤1:用外形工具或选项框工具设计出菜单的背景来,见下图:

好的网站从“头”开始 Photoshop打造网站导航按钮

  步骤2:创建一图层,用缩放工具放大到1000%,用画笔在这个创建图层上勾出一条恰当长度的1px竖线,色彩为#ffffff;见下图:

好的网站从“头”开始 Photoshop打造网站导航按钮

  步骤3:给这个PS图层加"渐变叠加"这个混合选项,设定如下:

好的网站从“头”开始 Photoshop打造网站导航按钮

好的网站从“头”开始 Photoshop打造网站导航按钮

  1处的色彩为白色竖线的下端四周的背景色彩值,2处的色彩为白色竖线的上端四周的背景色彩值,3处的色彩为#d7d7d7。效果如下:

好的网站从“头”开始 Photoshop打造网站导航按钮

步骤4:
  拷贝这个图层,用箭头工具把拷贝的图层朝左拖动1px,更改渐变参数,见下图:
  

好的网站从“头”开始 Photoshop打造网站导航按钮

<script language="JavaScript" type="text/javascript">resizeImage('/dabaoku/uploads/allimg/091005/222025D59-7.jpg','image0')</script>
  效果如下:
  

好的网站从“头”开始 Photoshop打造网站导航按钮
<script language="JavaScript" type="text/javascript">resizeImage('/dabaoku/uploads/allimg/091005/2220251520-9.jpg','image1')</script>

100%比例下的效果如下:

好的网站从“头”开始 Photoshop打造网站导航按钮

  剩下的工作就是添加文字和拷贝图层及排版的问题了,这儿不细说了。