当前位置: 主页 > 平面设计 > 制作立体风格UI控件开关的PS教程

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

  • 2021-10-23
  • 来源/作者: 网络/ 网络
  • 11 次浏览

本教程主要使用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教程