如果您喜欢『PS学习网』,请推荐给您身边的朋友!本站永久域名:www.ps-xxw.cn

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

当前位置 : PS学习网 > 实例教程 > 正文来源:网络作者:网络时间:2017-03-25人气:

本教程主要使用新注册送分捕鱼可下分结合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教程

回顶部
博聚网