Photoshop导航条的制作.docx

04导航条设计（一）

导航条的制作并不是几款按钮的简单组合，他们需要与logo和背景元素结合起来。通过学习，能够掌握导航条的制作全过程以及各种处理的方法。

1、 制作底板

第一步：新建一个图像文件，宽度为780象素，高度为100像素

第二步：按快捷键Ctrl+A，将图像全部选中，在工具箱中设置前景色（如：R：54，G：62，B：89），按快捷键Alt+Delete，将前景色填充到背景中，Ctrl+D取消选择。

第三步：新增一个图层，重新命名为“导航底图”，选取渐变工具，在工具选项栏上单击“渐变色条”，打开渐变编辑器对话框

第四步：选择黑色和白色渐变，选中左侧的色标，设置一种颜色（R：

114，G：128，B：164）

第五步：选中右侧的色标，设置颜色（R：72，G：85，B：117），单击确定按钮，完成设置。

第六步：用鼠标从图像的上端拖动到下端，对图层进行渐变填充

第七步：选取多边形套索工具，在图像上单击鼠标，创建出一个选区

第八步：按Delete键，删除选取中的图形，显示出背景色

第九步：按Ctrl+D，取消选择，双击“导航底图”图层，打开图层样式对话框，选择“斜面和浮雕”样式，在“高光模式”中设置一种颜色（R：255，G：253，B：221），设置好其他参数

第十步：选择“投影”样式，设置不透明度为39%，设置好其他参数，单击确定按钮，完成图层样式的添加。

第十一步：选取多边形套索工具，在图像的上端选取一个选区，按

Delete键，删除选区中的图形

第十二步：执行“选择”—〉“修改”—〉“收缩”命令，打开“收缩选区”对话框，设置“收缩量”为1像素

第十三步：新增一个图层，设置前景色为白色，按Alt+Dlete，将选

取填充为白色，按Ctrl+D取消选择

第十四步：双击新增图层的缩略图，打开“图层样式”对话框，选择“渐变叠加”选项，单击“渐变色条”，打开“渐变编辑器”对话框，选中左侧的色标，设置一种颜色（R：96，G：98，B：120），选中右侧的色标，设置一种颜色（R：120，G：120，B：138），单击确定按钮，完成样式的设计。

2、制作文字效果

第一步：选取横排文字工具，在窗口中单击，输入文字“Hosting”，选中文字，在“工具选项栏”上设置文字的属性，选取移动工具，调整好文字的位置

第二步：右键单击文字层，从弹出的菜单中选择“删格化文字”命令，将文字图层转化为普通图层

第三步：双击图层的缩略图，打开图层样式对话框，选择“外发光”样式，选择混合模式为正常，选择颜色为黑色

第四步：选择渐变叠加样式，单击渐变色条，打开渐变编辑器对话框，选中左侧的色标，设置颜色为黑色，在中间位置处单击，加入一个色标，给他设置一个颜色（R：159，G：139，B：105），选中右侧的色标，为他设置颜色（R：255，G：251，B：229），单击确定按钮，返回到图层样式对话框，设置其他参数，单击确定按钮，完成图层样式的设置。

第五步：此时的文字产生了渐变的效果

第六步：按住Ctrl键，在图层面板中单击文字图层的缩略图，创建

一个文字选区，执行“选择”—〉“修改”—〉“扩展”，设置扩展量为5像素，单击确定按钮

第七步：选中“导航底图”图层，按Delete键，删除选区中的图形，

按Ctrl+D取消选择

第八步：选取横排文字工具，输入文字“有限公司”，选取移动工具，调整好文字的位置，用鼠标右键单击文字层，从弹出的菜单中选择“删格化文字”命令，将文字图层转化为普通图层，双击图层的缩略图，打开图层样式对话框，选择“外发光”样式，选择混合模式为正常，选择颜色为黑色。

第九步：选择渐变叠加样式，单击渐变色条，打开渐变编辑器对话框，

选中左侧的色标，设置一种颜色（R：255，G：166，B：30），选中右侧的色标，设置一种颜色（R：255，G：210，B：81），单击确定

按钮，返回到图层样式对话框，设置其他参数，完成图层样式的设置，此时的文字产生了渐变的效果。

第十步：按住Ctrl键，在图层面板中单击文字图层的缩略图，创建一个文字选区，执行“选择”—〉“修改”—〉“扩展”，设置扩展量为3像素，单击确定按钮

第十一步：选中“导航底图”图层，按Delete键，删除选取中的图形，按Ctrl+D，取消选择。至此，文字效果制作完成。

3、按钮的制作

第一步：在工具箱中设置前景色为白色，选取“圆角矩形”工具，在工具选项栏上设置半径为10，绘制出圆角矩形

第二步：执行图层—〉删格化—〉形状命令，将矢量蒙板图层转化为普通图层，重新命名图层为按钮，在图层面板中，将“按钮”图层调整到“导航底图”图层的下方

第三步：双击“按钮”图层的缩略图，打开图层样式对话框，选择渐

变叠加样式，单击渐变