当前位置:首页 > 实例> 正文

Photoshop制作简单时尚的网页开关图标

时间:2015/6/4 10:27:29来源:旧版远程网作者:xiangxuhui浏览:2157 次

制作之前我们先找一些实物照片来分析一下开关的质感,色彩表现等。然后分解开关,了解它的结构。再设定材质为塑料,设定好光源位置就可以绘制了。

制作之前我们先找一些实物照片来分析一下开关的质感,色彩表现等。然后分解开关,了解它的结构。再设定材质为塑料,设定好光源位置就可以绘制了。

最终效果

QQ截图20171023155053.png

先建立一个1136 * 640的画布。

QQ截图20171023155112.png

在这个画布上,用椭圆工具勾绘出一个圆形,作为按钮侧面,命名图层为“按钮-下”。

QQ截图20171023155127.png

建立一个新图层,画一个同样大小的同心圆,再选中底边锚点,向上拖到锚点位置如图,作为按钮正面,命名图层为“按钮-上”。

QQ截图20171023155143.png

编辑“按钮-上”,绘制开关按钮正面的形状和质感,图层样式如下图。

QQ截图20171023155155.png

 

QQ截图20171023155216.png

 

QQ截图20171023155234.png

 

QQ截图20171023155239.png

 

QQ截图20171023155300.png

接着我们编辑“按钮-上”,绘制开关按钮侧下方的形状和质感,图层样式如下。

QQ截图20171023155315.png

 

QQ截图20171023155336.png

 

QQ截图20171023155349.png

 

QQ截图20171023155355.png

 

QQ截图20171023155409.png

接着我们画用来按钮按钮的凹槽位。同样的方法我们画一个稍大一些的同心圆,图层名“凹槽”,然后添加下图所示的样式。

QQ截图20171023155422.png

 

QQ截图20171023155438.png

 

QQ截图20171023155451.png

 

QQ截图20171023155504.png

 

QQ截图20171023155517.png

至此,我们已经完成了70%了,需要再加上阴影。阴影层,我使用了一个稍微“瘦”一些的椭圆形状,这样形成的阴影看起来更加真实。

QQ截图20171023155533.png

最后我们再打上OFF,ON的字样,再增加一点泛红光的效果,完成最终效果。

QQ截图20171023155544.png

新手上路
注册会员
帮助中心
联系我们
如何学习
关于我们
关于我们
网站简介
团队风采
老师招聘

周一至周六(8:30-17:30)

服务热线:
400-83-80291

技术支持:长沙市时进信息网络有限公司  湖南成才职业培训学校

Copyright@2010-2030  法律顾问:叶舟   本网站备案编号:湘ICP备11010880号-2   湘公网安备 43010502000181号

湘公网安备 43010502000181号