网页导航栏制作:[1]怎么用PS制作炫酷导航栏
1、打开PS,新建一文件,大小设置为“200*800”,背景色设为“透明”。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/3b8fb4d7726b0ce24c0681bbef781423bfb9b675.jpg)
2、选择“工具栏”中的“圆角矩形工具”项,并设置合适的“半径”(如20像素),然后在绘图区域进行绘制,效果如图所示:可以通过按键盘组合键“Ctrl+T”对其进行调整。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/9b2098254193cee887e5e1af5a0ff2260c9aa875.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/430174fec314f1c5d10ff4753c27ac5307889d75.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/dda98e4800fc77f7d7efea94c8715fdb37209075.jpg)
3、切换至“路径”面板,点击“将路径作为选区载入”按钮。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/dccb47de45078801659160f5b18ca608a40f8275.jpg)
4、接着返回“图层”面板,选择“工具栏”中的渐变工具,并设置合适的渐变色进行填充。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/5c9c964ce54a2f278c0e9db2e00192dd3240f475.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/256eb672941fbee44e3b45eac1237971ff1de775.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/a68c126efbf202b3f3362ccf30f4da5873dadb75.jpg)
5、接着双击该图层,为其添加“浮雕 图层样式”,参数如图:
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/2f2909e951e10ef8cbb760892324d8e9cdd2cc75.jpg)
6、新建一个“图层2”,接着选择“圆角艏婊锬曛矩形工具”,将半径设置为“10像素”,并绘制如图所示的图形。然后切换至“路径”面板,点击“将路径作为选区载入”按钮,然后返回图层面板,填充一种纯色,如“黄色”。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/3b03be7aa010bc334ed9810f92efa25f0d143f7a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/7efc527c34b33c41825b66f5887de137c8762e7a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/c99358fe474ec283f05e8e5bbe4f50b8b53e1c7a.jpg)
7、双击“图层2”,为其添加“图层样式”,参数及效果如图所示:
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/def3c219ce2c5b1bcf3f41682b39131fcfec0e7a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/58021a0148fe1e42838ab165c2299a883813037a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/e9a4f2eeadbcbe2fa091f3ac54dae43b3a86787a.jpg)
8、接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”,接着选择“移动”工具将“图层2 副本”移动到合适的位置。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/03605157935653bb08c1d14f1d0b31210461717a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/f9617afb960b3121f180b117dee983aee9d76d7a.jpg)
9、按住键盘上“Ctrl”键不放的同时,点击“图层2 副本”以选中该图像,然后为其填充另一种颜色,如“红色”。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/30601b6104a355e9744f5d63d22ae3efe178687a.jpg)
10、至此,基本的导航栏结构已经做好啦。下面我们来创建切片。点击“工具栏”中的“切片”工具,然后对整个图像区域进行划分,其中的一种分割方式如图:
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/e996472ae3efe078e8d06a02b96c576698cf657a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/332d496699cf02532d8196316b36e29146e85f7a.jpg)
11、最后点击“文件”→“存储为Web所有格式”项,选择文件类型为“JPEG”格式,接着点击“存储”按钮,在打开的“另存为”窗口中将“存储类型”设置为“网敌颉缪莽页和图像”,最后点击“保存”按钮。到此,利用PS制作导航栏的过程完成。在下一讲中,小编将教大家将导航栏图片放入网页中的夜方法。
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/e3d059e833e0397234e10e5eb58630486043567a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/d695563104ebf6a74ded379fffee1c324a184f7a.jpg)
![网页导航栏制作:[1]怎么用PS制作炫酷导航栏](https://exp-picture.cdn.bcebos.com/27725684cde34b2c480ccecb0d0e7c75e4f4437a.jpg)