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

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

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

【 tulaoshi.com - PS 】

先看效果图。

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

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

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

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

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

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

效果如下图所示。

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

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

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

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

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

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

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

效果如下图所示。

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

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

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

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

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

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

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

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

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

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

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

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

延伸阅读
来源:站酷 作者:690266 作者制作霓虹字的思路非常不错。首先自制一个较暗的背景,然后输入文字(图形也可以),文字分为两层,底部的文字模糊处理,顶部的文字用图层样式加上发光效果即可。 最终效果 1、打开纹理质感的墙。 2、复制一层。混合模式为正片叠底,不透明度为50%。 3、在图层调板底部的调整,选择图层色相/饱和度,打开...
标签: PS PS基础
本教程教我们用PS做出逼真的皮革材质效果。自己手工做素材,能让自己学到不少东西,可以增加自己的设计经验。但却是没有用素材来的快(素材效果一般都好)。用素材还是用自己做的,看自己的选择。 效果图: 1、新建一个图层600*600,填充白色,确保你的前景色为黑色、背景色为白色。点击、滤镜》》纹理》》染色玻璃。单元格大小、边框粗细,...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息! 1、打开PHOTOSHOP,新建一个300X300像素,背景为白色的文档。 2、新建一个图层,用圆角矩形工具  画一个长圆角矩形,并打开图层样式,选择渐变叠加,具体设置如下图 [next] 3、新建一个图层,用铅笔工具  给按钮画上1个像素的细线。 ...
效果图为写实风格图标,制作之前需要找类似的图标或日历实物图参考一下;然后把实物拆分一下,并把各部分的光影,材质,细节等都掌握好;最后逐层刻画即可。 最终效果 1、观察这个图标,我们将它分成三个部分来制作,如下图所示。①日历的卷页 ②日历的夹子和金属环 ③底座。 2、新建一个700*800的画布,如下图所示。 3...
这是一篇photoshop按钮制作教程,教程中将为大家介绍如何使用photoshop中的图层样式功能制作出水晶按钮的透明和立体效果,大家一起来动手制作吧。 先看效果图。 1、新建文档,尺寸自定,背景白色,建新层,画一黑色圆角矩形。 2、分别添加投影、描边这两个图层样式。 效果如下图所示。 ...

经验教程

698

收藏

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