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

2016-01-29 17:28 44 1 收藏

Photoshop网页设计教程:制作简洁风格黑色导航条按钮,本例为Photoshop网页设计实例教程,主要学习如何运用PS制作简洁风格黑色导航条按钮,运用的工具主要有图层样式、图层混合模式以及渐变填充的运用,制作过程比较简单,有兴趣的朋友可以动手试试哦~~

【 tulaoshi.com - PS 】

本文由 中国 zixuan_gzs 编译,转载请保留此信息!

在学习中遇到问题可以到 论坛Photoshop求助研讨版块 发贴交流!

  本例为Photoshop网页设计实例教程,主要学习如何运用PS制作简洁风格黑色导航条按钮,运用的工具主要有图层样式、图层混合模式以及渐变填充的运用,制作过程比较简单,有兴趣的朋友可以动手试试哦~~

最终效果:

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

练习的过程中自由发挥,多改变下参数的设置,你会得到更多意想不到的效果哈!

1:新建一个600*600的文件

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

2:把背景层填充为灰色,在新建一层,画一个矩形的选区,填充为黑色:

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

3:给矩形层添加图层样式(内发光),参数如图:

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

4:继续添加图层样式(渐变叠加)这里看看渐变条的设置:

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

5:渐变叠加的参数:

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

6:继续添加图层样式(描边),参数如图:

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

7:得到的效果如图:

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

8:在新建一层,按CTRL+刚刚的矩形层,载入选区,在新的图层上面拉一个透明到白色的渐变:

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

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

9:把渐变层图层模式改成柔光:

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

10:做到这里的效果如图:

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

11:在新建一层,画一个圆用白色填充,这里放大文件好操作些哈:

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

12:给圆层添加图层样式(渐变叠加),这里是渐变条的设置:

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

13:渐变叠加参数:

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

14:继续添加图层样式(描边):

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

15:效果如图:

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


[next]

16:放大图层,新建一层,在画如图的一个圆并填充为白色:

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

17:给内部的这个小圆添加图层样式(投影):

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

18:继续添加图层样式(内阴影):

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

19:继续添加图层样式(内发光):

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

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

20:再继续添加图层样式(渐变叠加):

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

21:效果如图:

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

22:放大图层,新建一层,选择椭圆工具画出选区,并填充白色:

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

23:降低图层的不透明度50%:

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

24:效果如图:

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

25:把第一步到这里的这些图层添加到一个新组呢:

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

26:在复制4个组,排序并命名好:

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

27:再进每个组改变下渐变叠加的颜色:

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

28:加上文字层,得到最终效果:

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

对本文感兴趣的朋友请到这里与作者交流:http://bbs.jcwcn.com/viewthread.php?tid=282125

来源:https://www.tulaoshi.com/n/20160129/1501552.html

延伸阅读
标签: PS PS基础
先看效果图。 新建文档500x300像素,背景黑色,新建图层,画一半径200的白色圆角矩形。 添加图层样式。 效果如下。 新建图层,再画一个小的白色圆角矩形,图层不透明度50%。 下面制作倒影,复制大的圆角矩形图层,新建图层1,然后合并2个图层得到图层1,ctrl+T垂直翻转挪到底部。 添加蒙版黑白直线渐变,图层不透...
最终效果: 1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形, 选择“添加图层样式—斜面浮雕—描边”: 得到如下效果: 2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下: 右键单击钢笔路径转换成选取并填充白色。 黑色的圆角矩形框载入选区--ctrl+左击图层,选...
最终效果图 1、新建一个图片大小为376x188像素,背景白色,创建一个新图层,然后画一个黑色的圆角矩形。 2、选择“图层—图层样式”,添加内发光、描边、渐变叠加这3种图层样式。 效果如下。 3、创建一个新图层,使用“圆角矩形工具”画一白色的圆角矩形,如图所示。 ...
       本例主要为大家介绍用Photoshop制作一个Windows 7风格的导航菜单。先看看最终效果: 最终效果   制作背景: 1、新建一文件,大小自定,这里是600*400为例。设置前景色:#1592d7,背景颜色:#136da2,选择径向渐变工具。从中间拖动得到下面效果: 图1   2、添加散射...
标签: PS PS基础
来看看效果图: PS:教程中涉及的颜色可以根据自己喜欢来设定,改变下参数,会做出大家意想不到的效果哦,所以请练习的朋友灵活运用! 制作步骤: 1:新建一个700*300的文件 2:用圆角矩形工具画一个稍等小一点的形状 3:转换为选区 4:新建一层,填充为任意颜色 5:给新建的层添加图层样式,1---投影效果 6:继续...

经验教程

267

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部