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

软件发布|下载排行|最新软件

当前位置:首页photoshop教程实用技巧

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

软件云   2020-10-30 我要评论

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们