Photoshop制作立体效果的UI开关按钮

2016-04-05 14:13 124 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐Photoshop制作立体效果的UI开关按钮,赶紧看过来吧!

【 tulaoshi.com - ps鼠绘 】

Photoshop制作立体效果的UI开关按钮

   最终效果

Photoshop制作立体效果的UI开关按钮 图老师

  1、先建立一个1136 * 640的Tulaoshi.Com画布。

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

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

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

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

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160405/2123397.html

延伸阅读
标签: PS PS基础
先看看效果图 1.新建文档,大小随意,用椭圆选框工具,按住shift拉一个正圆,新建图层1填充颜色,颜色随意。 2.给正圆图层设置图层样式如下: 3.用椭圆工具拉一个小椭圆,新建图层2编辑填充颜色#d1f900,ctrl+d取消选区。继续执行滤镜--模糊--高斯模糊22 4.用椭圆工具拉一个比正圆小点的圆,新建图层3编辑填...
标签: PS PS基础
最终效果 1、按钮的形状 我个人认为按钮无非就这几种基本形状,请不要做太多奇形怪状,不要忘记按钮本身的作用吸引用户点击。 2、颜色 设计师应该具备审美能力。 3、实验 不断的练习会让你学习到更多的东西,请不要给自己太多压力,你的付出不会仅仅只让你原地踏步,要坚持。 4、教程 下面是我自己随意做的东西。 5、分层...
标签: PS PS基础
本教程主要使用Photoshop绘制绿色风格的网页下载按钮,整体的立体效果表现的非常的漂亮,光泽方面也非常的漂亮,喜欢的朋友让我们一起来学习吧。 先看看效果图 最终效果图

经验教程

842

收藏

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