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

2016-03-18 05:57 5 1 收藏

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

【 tulaoshi.com - PS 】

最终效果



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


图1



图2



图3


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


图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

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



图14



图15
tuLaoShi.com


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


图16


(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)
图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


图28


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


图29




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


来源:http://www.tulaoshi.com/n/20160318/1873930.html

延伸阅读
先看角的的三个颜色,比如用白色做底,那么白色面的四个角就需要有白色,如红色与蓝色之间的夹角的颜色就是白、红、蓝,你看着这个角你就把它往红色和蓝色(以中心块为颜色标准)之间的角放。
标签: 服务器
LNMP系列教程之二:删除站点及域名绑定 上一篇,笔者分享到"LNMP系列教程之一:添加域名建立站点",如果我们有遇到在该VPS中不想建立该网站,想移动到其他的空间中的时候。我建议大家还是删除原VPS中的站点绑定和数据,一来是为了原VPS中数据的干净度,二来可以便于其他人协同管理。如果你在这个VPS中出现其他站点数据,时间久...
标签: PS PS基础
先看效果图。 1、新建文档,尺寸自定,背景白色,建新层,画一黑色圆角矩形。 2、分别添加投影、描边这两个图层样式。 效果如下图所示。 3、创建一个新图层,使用圆角矩形工具制作一个小一点的白色矩形,你可以使用自由变换调整它的大小和位置,如图所示。 4、为白色的圆角矩形添加投影、内阴影、渐变叠加和描边这几...
标签: PS PS基础
先看看效果图 打开photoshop,新建空白文档。 为了不让白色背景看起来乏味,增加一个渐变叠加效果。渐变颜色为# f3f3f3到# c6c6c6。 选择圆角矩形工具,创建按钮的的主要形状,半径为5 px。 添加渐变叠加图层样式。渐变颜色从#0d3079到#557bc9。 现在让按钮从背景中突显出来,添加1 px描边,颜色为深蓝色(#0b2258)。 ...
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮,参见范例网页。这称之为鼠标翻转效果,这是根据英文rollover翻译而来的,其实不是很符合中文的语境。其原理是利用两张图片,平时显示一幅,当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作,首先在Photoshop中将它们制作...

经验教程

597

收藏

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