宗卓然 发表于 2013-11-28 08:54:30

PS制作一款超酷的黑色网站导航条

你是否有自己的网站呢?你的网站是否也有本教程中所示的超酷的黑色导航条呢?本教程我们就利用photoshop快速有效的制作一款酷黑导航添加到你的网站中.
先看酷酷的最终效果图吧:

步骤1:基本要领
新建新的psd文档,宽度700px,高度160px,背景色以黑灰色(#2b2b2b)填充。
创建图层,图层属性为“导航条”,选取圆角矩形工具,设定前景色为黑色(#000000)见下图相同画一矩形条(长度与宽度可自行处理)。

步骤2:设定图层样式
双击“导航条”图层或选取“导航条”图层,单击右键,在下拖菜单中选取混合选项菜单,把出现“图层样式对话框”。
单击左半复选项框中的“外发光”,并且见下图执行设定:

再单击左半复选项框中的“斜面与浮雕”,并且见下图执行设定:


                                                           
      然后,单击左半复选项框中的“渐变叠加”,见下图执行设定:

做完上面过程后,你的导航条把会是这个样子:

步骤3:提高高光
创建图层,设定前景色为白色(#ffffff),选取矩形工具,用白色矩形条覆遮导航条的上半部,选取橡皮工具擦除左上角与右上角的白色,显示导航条的圆角外形,见下图:

将此图层的透明度降低为4%,导航条把会见下图:

步骤4:制造发光
创建图层,设定前景色为#2a5368。
从画笔工具中选取预设画笔,并设定大小为360px。运用画笔,在导航条上面中央画一圆形区域,设定图层透明度为65%(个人可斟酌减少或者提高),选取橡皮工具擦除不属于导航条的发光区域,见下图:

剩下要做的就是加上菜单按钮(自行设计),运用白色或者灰色就可以了。
完好的导航条华丽丽的出炉了:

但愿你喜爱!

颛孙雪羽 发表于 2013-11-28 09:04:44

众里寻他千百度,蓦然回首在这里!

邬世韵 发表于 2013-11-29 20:24:13

我也是坐沙发的

闻人逸致 发表于 2013-11-29 20:27:58

好帖必须得顶起

花清嘉 发表于 2013-11-30 09:00:59

支持,楼下的跟上哈~

锺楠楠 发表于 2014-3-19 21:20:41

打酱油的人拉,回复下赚取积分

高文静 发表于 2014-3-23 17:30:05

是爷们的娘们的都帮顶!大力支持

王浓绮 发表于 2014-3-25 21:57:35

为保住菊花,这个一定得回复!

晏洛灵 发表于 2014-4-3 11:00:00

非常好,顶一下

陶金枝 发表于 2014-4-8 13:42:31

大人,此事必有蹊跷!

郦幻香 发表于 2014-4-8 19:06:16

围观 围观 沙发在哪里!!!

通菁英 发表于 2024-8-20 18:09:47

路过的帮顶

墨含香 发表于 2024-11-2 08:17:32

高手云集 果断围观

相珑玲 发表于 2024-12-9 10:14:32

我只是路过,不发表意见

相珑玲 发表于 2025-1-27 22:42:38

边撸边过

司马蓓蕾 发表于 2025-3-12 08:14:32

发发呆,回回帖,工作结束~

雍旎旎 发表于 2025-4-10 16:02:41

不错 支持下

刘吉帆 发表于 2025-4-27 09:05:30

回个帖子,下班咯~

阳怡然 发表于 2025-5-6 14:25:45

确实不错,顶先

尉迟琴雪 发表于 2025-5-10 07:35:50

我是个凑数的。。。
页: [1]
查看完整版本: PS制作一款超酷的黑色网站导航条