步骤阅读

方法/步骤

>01

打开PS，新建一文件，大小设置为“200*800”，背景色设为“透明”。

共3图>02

选择“工具栏”中的“圆角矩形工具”项，并设置合适的“半径”（如20像素），然后在绘图区域进行绘制，效果如图所示：

可以通过按键盘组合键“Ctrl+T”对其进行调整。

>03

切换至“路径”面板，点击“将路径作为选区载入”按钮。

共3图>04

接着返回“图层”面板，选择“工具栏”中的渐变工具，并设置合适的渐变色进行填充。

>05

接着双击该图层，为其添加“浮雕 图层样式”，参数如图：

共3图>06

新建一个“图层2”，接着选择“圆角矩形工具”，将半径设置为“10像素”，并绘制如图所示的图形。然后切换至“路径”面板，点击“将路径作为选区载入”按钮，然后返回图层面板，填充一种纯色，如“黄色”。

共3图>07

双击“图层2”，为其添加“图层样式”，参数及效果如图所示:

共2图>08

接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”，接着选择“移动”工具将“图层2 副本”移动到合适的位置。

>09

按住键盘上“Ctrl”键不放的同时，点击“图层2 副本”以选中该图像，然后为其填充另一种颜色，如“红色”。

共2图>10

至此，基本的导航栏结构已经做好啦。下面我们来创建切片。点击“工具栏”中的“切片”工具，然后对整个图像区域进行划分，其中的一种分割方式如图：

共3图>11

最后点击“文件”→“存储为Web所有格式”项，选择文件类型为“JPEG”格式，接着点击“存储”按钮，在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”，最后点击“保存”按钮。

到此，利用PS制作导航栏的过程完成。在下一讲中，小编将教大家将导航栏图片放入网页中的夜方法。

经验内容仅供参考，并受版权保护。

本条经验由feifeidown编写