当前位置:首页 > PS教程 > 鼠绘教程

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

  • 2020-10-23 09:32:58
  • 来源/作者:互联网/佚名
  • 己被围观

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

先看看效果图

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

在AI建1200px*800px画板

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

绘制一个400px*70px矩形

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

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

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

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

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

最后绘制出这样的图形

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

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

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

背景拉个渐变e7e3dc到f7f5f3

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

小圆拉个c2c0be到d6d6d6

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

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

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

描边

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

渐变叠加

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

投影

里面的样式

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

渐变叠加f28b00,e75300,db7500

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

内发光

里面的一圈a4a4a4到e8d7be

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

最外层的渐变d0d0d0到ffffff

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

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

最好完成图

Photoshop绘制立体风格的UI控件开关,PS教程,PS家园网

 

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • 人物近照转手绘过程详解 人物近照转手绘过程详解
  • PS+SAI人物照片转手绘教程 PS+SAI人物照片转手绘教程
  • 将真人照片转成可爱的卡通漫画效果 将真人照片转成可爱的卡通漫画效果
  • 细致唯美的人物转手绘教程 细致唯美的人物转手绘教程
  • PS绘制漂亮的动漫插画 PS绘制漂亮的动漫插画
  • 鼠绘必学之飘逸的发丝 鼠绘必学之飘逸的发丝
  • 非常细腻的鼠绘眼睛教程(手绘提高) 非常细腻的鼠绘眼睛教程(手绘提高)
  • 鼠绘一只愤怒的小鸟 鼠绘一只愤怒的小鸟