photoshop设计导航条:黑色蓝色光影效果

铁月情

铁月情

2016-03-19 02:05

下面图老师小编跟大家分享一个简单易学的photoshop设计导航条:黑色蓝色光影效果教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

photoshop设计导航条:黑色蓝色光影效果,提示,简单入门,适合新手练习

最终效果

step9

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

step1

第二步:设置tulaoshi.com图层样式
双击“导航条”图层或者选择“导航条”图层,点击右键,在下拉菜单中选择混合选项菜单,将出现“图层样式对话框”。
点击左边复选框中的“外发光”,并且如下图进行设置:

step2

再点击左边复选框中的“斜面和浮雕”,并且如下图进行设置:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/ps/)

step3

最后,点击左边复选框中的“渐变叠加”,如下图进行设置:

step4

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/ps/)

完成以上步骤后,你的导航条将会是这个样子:

step5

第三步:增加高光
新建图层,设置前景色为白色(#ffffff),选择矩形工具,用白色矩形条覆盖导航条的上半部,选择橡皮擦工具擦去左上角和右上角的白色,显示导航条的圆角形状,如下图所示:

step6

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

step7

第四步:制造发光
新建图层,设置前景色为#2a5368。
从画笔工具中选择预设画笔,并设置大小为360px。使用画笔,在导航条上方中心画一个圆形区域,设置图层透明度为65%(自己可斟酌减少或增加),选择橡皮擦工具擦去不属于导航条的发光区域,如下图所示:

step8

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

step9

完成

展开更多 50%)
分享

猜你喜欢

photoshop设计导航条:黑色蓝色光影效果

PS PS基础 ps平面设计教程 ps去水印教程
photoshop设计导航条:黑色蓝色光影效果

Photoshop网页设计教程:制作简洁风格黑色导航条按钮

PS PS教程
Photoshop网页设计教程:制作简洁风格黑色导航条按钮

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

coreldraw导航条设计

CorelDRAW 电脑应用
coreldraw导航条设计

Photoshop设计制作网页头部导航条

PS PS基础
Photoshop设计制作网页头部导航条

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop制作水晶玻璃效果网站导航条

PS PS基础
Photoshop制作水晶玻璃效果网站导航条

Photoshop制作炫酷蓝色光影文字效果

PS PS基础
Photoshop制作炫酷蓝色光影文字效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PS简单快速几步设计一款米黑色的网页风格

PS简单快速几步设计一款米黑色的网页风格

PS设计商城:大气灰色风格

PS设计商城:大气灰色风格
下拉加载更多内容 ↓