网页常用按钮制作教程之二

feihuahaha

feihuahaha

2016-03-18 05:57

下面图老师小编要向大家介绍下网页常用按钮制作教程之二,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
最终效果



1.新建一个500*250象素的窗口,填充绿色(R:52,G:175,B:125),再新建一层命名为"按钮--底",选择“圆角矩形工具”如图1,半径数值为“25”如图2,绘制如图3所示的圆角矩形。


图1



图2



图3


2.如下图所示锁定透明象素

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

3.选择渐变工具,颜色设置如下图5,由上至下绘制渐变效果如图6


图5



图6


4.在“按钮-底”上新建一层命名为“按钮--高光”,调出“按钮--底”的选区如图7,选择菜单:选择 修改 收缩,数值为3,再填充白色,按Ctrl + D取消选区。


图7



图8



图9


5.如图10在“按钮--高光”这层添加蒙版,再用黑白渐变工具如图11由上往下绘制渐变,效果如图12


图10



图11



图12

6.回到"按钮--底"这层,调出图层样式,分别调节:内阴影,描边。相关设置分别如图13,图14,效果如图15


图13



图14



图15
tuLaoShi.com


7.在"按钮--底"这层上面新建一层命名为“按钮--测光”,调出“按钮--底”的选区如图16,选择菜单:选择 修改 收缩,数值为1,再填充白色,用矩形选取工具适当的把选区向右移几个象素如图19然后按"Delete"键删除选区部分如图20


图16



图19



图20

8.按Ctrl+D取消选区,再用橡皮工具选适当的大小插除下面的部分如图21


图21


9.按Ctrl + J 把"按钮--侧光"复制一层,选择:编辑 变形 垂直翻转,再选择:编辑 变形 水平翻转,把翻转后的图片移到右侧适当的位置如图22


图22


10.在"按钮--底"上面新建一层命名为“按钮--边”调出"按钮--底"的选区如图23,再选择菜单:编辑 描边 设置如图24再按Ctrl + D 取消选区。效果如图25


图23



图24



图25

11.在"按钮--高光"上面新建一层命名为“按钮--文字”,在上面打上"WWW.68PS.COM",字体颜色用白色.如图26


图26


12.按Ctrl + J 把文字复制一层,把下面的文字隐藏,为上面文字加投影效果,设置如图27,再回到下面的文字层,删格化图层,选择菜单 编辑 变形 垂直翻转 把文字拖到合适的位置如图28

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


13.如下图添加蒙版用黑白渐变从上至下绘制渐变,制作文字的倒影。


图29




可以根据需要制作有底纹的效果 PSD文件下载


展开更多 50%)
分享

猜你喜欢

网页常用按钮制作教程之二

PS PS基础 ps平面设计教程 ps去水印教程
网页常用按钮制作教程之二

网页常用按钮制作教程之一

PS PS基础 ps平面设计教程 ps去水印教程
网页常用按钮制作教程之一

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

XML简易教程之二

Web开发
XML简易教程之二

调色练习教程之二

PS PS教程
调色练习教程之二

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页常用水晶按钮的制作

PS PS基础 ps平面设计教程 ps去水印教程
网页常用水晶按钮的制作

Photoshop制作网页常用质感按钮图标

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作网页常用质感按钮图标

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PS制作玻璃水晶按钮

PS制作玻璃水晶按钮

金属质感圆形按钮

金属质感圆形按钮
下拉加载更多内容 ↓