页面载入中...

Photoshop绘制立体风格的UI控件开关

xingphotoshop, 2016-11-150

 

来源:UI中国  作者:yao66298   

先看看效果图

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

在AI建1200px*800px画板

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

绘制一个400px*70px矩形

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

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

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

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

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

最后绘制出这样的图形

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

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

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

背景拉个渐变e7e3dc到f7f5f3

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

小圆拉个c2c0be到d6d6d6

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

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

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

描边

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

渐变叠加

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

投影

里面的样式

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

渐变叠加f28b00,e75300,db7500

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

内发光

里面的一圈a4a4a4到e8d7be

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

最外层的渐变d0d0d0到ffffff

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

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

最好完成图

Photoshop绘制立体风格的UI控件开关,PS教程,素材中国网

 


分享:

设计原的发展离不开您的支持与帮助,如果您觉得设计原对您有所帮助 可以用微信扫描

相应二维码打赏设计原,赏金将全部用于网站建设

微信