Photoshop制作精美的网页按钮教程

2016-02-16 07:03 1 1 收藏

今天图老师小编给大家精心推荐个Photoshop制作精美的网页按钮教程教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - PS 】

先看效果图。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

1、新建文档,尺寸自定,背景白色,建新层,画一黑色圆角矩形。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

2、分别添加投影、描边这两个图层样式。

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

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

效果如下图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

3、创建一个新图层,使用圆角矩形工具制作一个小一点的白色矩形,你可以使用自由变换调整它的大小和位置,如图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

4、为白色的圆角矩形添加投影、内阴影、渐变叠加和描边这几种图层样式,如图所示。

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

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

效果如下图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

5、新建一个图层,按下Ctrl键单击白色矩形图层的缩略图载入选区,并填充黑色,然后用钢笔工具制作出下图所示的路径,然后按Ctrl+Enter把选区转化为路径,再添加一个图层蒙版,如图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

6、设置图层混合模式为柔光,不透明度为70%,如图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

8、背景填充黑色,然后使用文字工具输入一些文字,并为文字图层添加外发光图层样式,如图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

9、多复制几个按钮,并添加不同的文字,最终效果如下图所示。

Photoshop制作精美的网页按钮教程,PS教程,图老师教程网

来源:https://www.tulaoshi.com/n/20160216/1569492.html

延伸阅读
标签: PS PS基础
先看效果图 新建文档350x230像素,背景填充浅灰色#dddddd,之后建新层,前景色#f00000画一个圆角矩形。 添加图层样式。 效果如下。 建新层,画一矩形选区,白到透明径向渐变。 去掉选区,调出圆角矩形选区,添加蒙版,图层模式改为柔光。 输入白色文字添加内阴影样式,效果如下。 最后添加倒影,最终效...
最终效果 第一步:使用圆角矩形制作一个红色的矩形。 第二步:然后我们给该矩形形状添加下面图层样式,阴影: 内发光: 渐变叠加: 描边: 效果如下: 第三步:按住Ctrl单击按钮层选择,使用使用矩形选框工具设置如下。 第四步:使用矩形选框工具把选区移动到左部,...
来源:PS联盟 作者:Sener 彩带重点是褶皱部分的刻画,不同部分的彩带受光不同,褶皱颜色,深浅等略有不同,制作的时候需要先把不同弧度的彩带分段,然后逐段渲染。 最终效果 1、新建一个1000 * 800像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变作为背景。 图1 图2 2、我们把彩带分成三段来制作。由顶部开始。先...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息! 1、打开PHOTOSHOP,新建一个300X300像素,背景为白色的文档。 2、新建一个图层,用圆角矩形工具  画一个长圆角矩形,并打开图层样式,选择渐变叠加,具体设置如下图 [next] 3、新建一个图层,用铅笔工具  给按钮画上1个像素的细线。 ...

经验教程

323

收藏

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