Photoshop制作一个质感的网页导航按钮

2016-02-16 06:52 13 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的Photoshop制作一个质感的网页导航按钮,希望大家看完后能赶快学习起来。

【 tulaoshi.com - PS 】

先看看效果图

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

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

1.填充背景为深灰色,设置前景色,新建图层1,绘制圆色矩形

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

2.为图层1添加图层样式(投影,内阴影,外发光,渐变叠加,描边);

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

3.选择图层1,使用滤镜杂色添加杂色(根据情况调整杂色的数量);

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

4.按CTRL键点击图层1,调出图层1的图形选区之后,新建图层2,填充任意色彩,选择矩形选框工具,按向上方向键,将选区向上移动1个像表的距离,再按删除键删除选区内的色彩.再CTRL+D,取消选区.这样我们就得到了按钮底部的高光了

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

5.选图层2,添加图层样式(渐变叠加);

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

6.按CTRL键,点击图层1,调出层1选区,再新建图层3,使用渐变工具(径向渐变,白到黑色,从按钮的上中位置拖到按钮的下右位置),CTRL+D取消选区,改变层3的图层样式;如图设置

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

7.选择圆角矩形工具,建立与按钮同等宽度的圆色矩形路径,再选用转换点工具,移动右下角两个节点.使其变成梯形,新建图层4,设置前景色为白色,进入路径面板,填充路径(白色).按CTRL键点击层1,选图层4,为图层4添加图层蒙板.再设置图层混合模式,产生按钮的高光效果

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

8.输入文字,添加图层样式

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

完成最终效果

Photoshop制作一个质感的网页导航按钮,PS教程,图老师教程网

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

来源:http://www.tulaoshi.com/n/20160216/1569395.html

延伸阅读
标签: PS PS基础
先看效果图。 新建文档550550像素,背景黑色,建新层,前景色4c73f1画一个正圆形状,复制3个,副本1图层缩小5%左右,副本2层缩小位置如下,颜色改为白色。 选择形状1,隐藏其它层,添加图层样式。 描边颜色请采样我的截图,效果如下。 选择副本层,添加图层样式。 效果如下。 选择副本2,填充归零,添...
PS绘制质感导航按钮 标签式按钮常常用在附属导航中,线条非常漂亮,效果图如下: 按钮具体的绘制步骤如下: 一、Ctrl+N新建一个文档,580像素宽,290像素高,白色背景,其他选项默认。给前景色选择一种灰色,我这里用的颜色是#898989,使用Alt+Delete键给背景图层填充此颜色。然后新建一个图层,选择圆角矩形工具(U),工具栏...
标签: PS PS基础
先看看效果图 让我们开始!创建一个新的文件,本ps教程分辨率为500×300,填补这个白色画布。然后选择圆角矩形工具(半径30像素)绘制一个形状使用#d61d23的颜色。 之后,应用下面的图层样式到这一层: 内阴影 渐变叠加 您的按钮应该看起来像我的: 现在,时间,使反射按钮。使用Ctrl + J键复制当前层,然后创建一个新...
本教程介绍金属质感效果的制作方法。主要是利用光照效果的纹理通道来制作质感。其它还用到一些滤镜效果来加强质感。制作的时候需要根据图形的实际大小来设置参数。 最终效果 1、新建一个600 * 600 像素的文件,如下图。 2、选择子定义形状工具,选出自己喜爱的图形。 3、新建一个图层,拉出图形效果,颜色选择灰色,如下图。 ...
标签: PS PS基础
先看看最终效果图 首先建立背景 然后用圆角矩形 圆角5px 尺寸和颜色图片有说明 这里使用软画笔提亮背景,笔触300像素大小 原教程中没有的步骤,为了让字体有一点突出感,我加了点投影,细微的变化 拉渐变,可以直接用矩形选框,距离外框10px即可,然后渐变图层透明度为5% 写上目录,选自己喜欢的颜色和字体 ...

经验教程

391

收藏

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