如果您喜欢『PS学习网』,请推荐给您身边的朋友!本站永久域名:www.ps-xxw.cn
当前位置 : PS学习网 > 实例教程 > 正文

制作立体风格UI控件开关的PS教程

来源:网络作者:网络时间:2017-3-25 17:34:50点击:

本教程主要使用Photoshop结合AI绘制立体质感的UI开关效果图,前半部分主要在AI里面把主要的形状绘制出来,然后到PS里面调整质感,喜欢的朋友一起来学习吧。

先看看效果图

制作立体风格UI控件开关的PS教程

 

在AI建1200px*800px画板

制作立体风格UI控件开关的PS教程

 

绘制一个400px*70px矩形

制作立体风格UI控件开关的PS教程

 

边角设置35px ,好像只有cc版本可以直接设置圆角

制作立体风格UI控件开关的PS教程

 

偏移一个矩形出来,在向里偏移3px的矩形(向里设置负数)

制作立体风格UI控件开关的PS教程

 

最后绘制出这样的图形

制作立体风格UI控件开关的PS教程

 

然后释放图层导出psd格式(不释放会都在一个图层)

制作立体风格UI控件开关的PS教程

 

背景拉个渐变e7e3dc到f7f5f3

制作立体风格UI控件开关的PS教程

 

小圆拉个c2c0be到d6d6d6

制作立体风格UI控件开关的PS教程

 

按钮做描边渐变叠加投影的处理

制作立体风格UI控件开关的PS教程

制作立体风格UI控件开关的PS教程

 

描边

制作立体风格UI控件开关的PS教程

 

渐变叠加

制作立体风格UI控件开关的PS教程

 

投影

里面的样式

制作立体风格UI控件开关的PS教程

制作立体风格UI控件开关的PS教程

 

渐变叠加f28b00,e75300,db7500

制作立体风格UI控件开关的PS教程

 

内发光

里面的一圈a4a4a4到e8d7be

制作立体风格UI控件开关的PS教程

 

最外层的渐变d0d0d0到ffffff

制作立体风格UI控件开关的PS教程

 

方法都差不多 细节要处理好

最好完成图

制作立体风格UI控件开关的PS教程

本站公告
  PS学习网是一个专业的学习交流Photoshop的网站,本站致力于向广大PS爱好者提供一个学习与交流的平台,想要学习提高自己的PS水平,马上从这里开始吧…
  Photoshop 8.0免费下载地址
  Photoshop CS2免费下载地址
  Photoshop CS3免费下载地址
  Photoshop基础入门视频教程
  Photoshop CS5软件视频教程