当前位置:首页ps教程Photoshop制作仿真塑料导航
Photoshop制作仿真塑料导航
°
  • 素材类型: 资源-素材
  • 上传时间:

本教程主要用Photoshop来绘制一个塑料效果的网站导航条,最终效果非常的时尚,符合现在的网页设计潮流.

先看看效果吧!:)

Photoshop制作仿真塑料导航

第一步:新建文件800x259px,选择渐变(快捷键G)背景色#8caab8 ,前景颜色#e1e8eb

Photoshop制作仿真塑料导航

第二步:选择圆角矩形,大小为763x80px,颜色为#7fa1b3,然后选择图层样式>内阴影内阴影颜色#7dc8e8,如图所示:

Photoshop制作仿真塑料导航

第三步:在圆角矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),填充颜色#86a6b5,取消选区(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为1.8px),然后选择滤镜>模糊>动感模糊(值为90度,41px),再用高斯模糊(值为1.8px),设置该层的不透明度为85%。效果如图所示:

Photoshop制作仿真塑料导航

第四步:在圆角矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),填充颜色为#678a9f,取消选区(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为4.5px)效果如图:

Photoshop制作仿真塑料导航

第五步:在圆形矩形下面新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向下移动10px,选择渐变工具(快捷键G),从透明到#6d838f,从左下角中步右下角拉渐变,如图箭头所示:

Photoshop制作仿真塑料导航

第六步:取消选择(快捷键ctrl+D),选择滤镜模糊高斯模糊(值为3.6px)。 第七步:在最上方新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向下移动1px,选择渐变工具(快捷键G)从#92c2da到透明,从上到下10px左右高度

第六步:取消选择(快捷键ctrl+D),选择滤镜>模糊>高斯模糊(值为3.6px)。

Photoshop制作仿真塑料导航

第七步:在最上方新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向下移动1px,选择渐变工具(快捷键G)从#92c2da到透明,从上到下10px左右高度内拉渐变,参考图:

Photoshop制作仿真塑料导航

第八步:新建层,载入圆角矩形选区(按ctrl+鼠标点击图层),向上移动40px,选择渐变工具(快捷键G),从#bcd2db到透明,取消选区(快捷键ctrl+D)然后选择滤镜模糊高斯模糊(值为3.6),参考图:

Photoshop制作仿真塑料导航

第九步:新建层,使用45px软刷,颜色为#b8c9d1,然后选择滤镜>模糊>高斯模糊(值为4px),设置不透明度为50%,如图所示:

Photoshop制作仿真塑料导航

第十步:新建层,选择80px软刷,颜色为#d3e7f1,给导航增加反光效果,如图所示:

第十一步:新建层,载入圆角矩形选区(按ctrl+鼠标点击图层)向下移动1px,选择渐变(快捷键G),从#fbfcfd到透明(径向),取消选区(ctrl+D),选择 >滤镜 >模糊 >高斯模糊(值为3.0),用软刷在右上角增加反光,如图所示:

Photoshop制作仿真塑料导航

Photoshop制作仿真塑料导航

Photoshop制作仿真塑料导航

第十二步:输入自己喜欢的文字,选择图层样式投影外发光如图所示: 第十三步:输入第二种文字,设置图层样式外发光描边,设置如图: 第十四步:输入第三种文字,设置图层样式外发光,如图所示: 看下最终效果吧!

第十二步:输入自己喜欢的文字,选择图层样式>投影>外发光如图所示:

Photoshop制作仿真塑料导航

第十三步:输入第二种文字,设置图层样式>外发光>描边,设置如图:

Photoshop制作仿真塑料导航

第十四步:输入第三种文字,设置图层样式>外发光,如图所示:

Photoshop制作仿真塑料导航

看下最终效果吧!

Photoshop制作仿真塑料导航

温馨提示:

文章标题:Photoshop制作仿真塑料导航

文章链接:https://www.4tu.cn/photoshop/19379.html

更新时间:2024年08月15日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
ps教程

Photoshop合成人体被钢丝分割效果教程

2024-8-15 9:13:35

ps教程

Photoshop合成恐怖的断裂手臂效果

2024-8-15 9:14:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索