Photoshop制作好看的网页按钮教程

2016-02-16 04:02 10 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享Photoshop制作好看的网页按钮教程吧。

【 tulaoshi.com - PS 】

先看看效果图

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

打开photoshop,新建空白文档。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

为了不让白色背景看起来乏味,增加一个渐变叠加效果。渐变颜色为# f3f3f3到# c6c6c6。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

选择圆角矩形工具,创建按钮的的主要形状,半径为5 px。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

添加渐变叠加图层样式。渐变颜色从#0d3079到#557bc9。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在让按钮从背景中突显出来,添加1 px描边,颜色为深蓝色(#0b2258)。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

为了增加按钮立体感,添加一个1像素内发光。颜色为白色(#FFFFFF),减少不透明度到30%。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在给按键添加杂色,新建图层,按ctrl+图层蒙版缩略图,选择油漆桶工具,填充颜色为黑色(#000000)。按ctrl+d取消选区。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

选择滤镜-杂色-添加杂色,数量为33%。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

设置图层混合模式为滤色,不透明度为15%。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

新建图层,按ctrl+图层蒙版缩略图,选择油漆桶工具,填充颜色为白色(#FFFFFF)。按ctrl+d取消选区。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在开始创建漂亮的灯光效果,选择矩形工具,选中按钮的一半。按delete键删除选区,设置图层的不透明度不10%。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

添加文字,字体为Arial(Bold,14pt)。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

现在给文字添加雕刻效果,最简单的方式是复制文字层(ctrl + J),然后移动复制到原文字图层下方。添加一个深色的叠加颜色。右键点击混合选项 混合叠加颜色 #124d89。分别向上,向左移动1px。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

选择自定义形状工具,画的放大镜,应用上一步骤方法,制作雕刻效果。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

设置按钮高光效果。新建一组,命名为light effect,设置混合模式为颜色减淡。按ctrl+图层蒙版缩略图。选择画笔工具,大小80px,硬度为0,给按钮添加高光。

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

最终效果图

Photoshop制作好看的网页按钮教程,PS教程,图老师教程网

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

延伸阅读
这是一篇photoshop按钮制作教程,教程中将为大家介绍如何使用photoshop中的图层样式功能制作出水晶按钮的透明和立体效果,大家一起来动手制作吧。 先看效果图。 1、新建文档,尺寸自定,背景白色,建新层,画一黑色圆角矩形。 2、分别添加投影、描边这两个图层样式。 效果如下图所示。 ...
最终效果 第一步:使用圆角矩形制作一个红色的矩形。 第二步:然后我们给该矩形形状添加下面图层样式,阴影: 内发光: 渐变叠加: 描边: 效果如下: 第三步:按住Ctrl单击按钮层选择,使用使用矩形选框工具设置如下。 第四步:使用矩形选框工具把选区移动到左部,...
标签: PS PS教程
本文由 中国 龟爬树(邓志峰) 原创,转载请保留此信息! 1、打开PHOTOSHOP,新建一个300X300像素,背景为白色的文档。 2、新建一个图层,用圆角矩形工具  画一个长圆角矩形,并打开图层样式,选择渐变叠加,具体设置如下图 [next] 3、新建一个图层,用铅笔工具  给按钮画上1个像素的细线。 ...
标签: PS PS基础
效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选...

经验教程

106

收藏

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