亲宝软件园·资讯

展开

滑动开关素材图片 Photoshop手工制作立体质感的UI控件开关图标

开关图标 人气:0
Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片,教程前半部分主要在AI里面把主要的形状绘制出来,然后到PS里面调整质感效果。效果图

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

在AI建1200px*800px画板

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

绘制一个400px*70px矩形

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

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

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

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

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

最后绘制出这样的图形

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

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

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

背景拉个渐变e7e3dc到f7f5f3

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

小圆拉个c2c0be到d6d6d6

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

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

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

描边

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

渐变叠加

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

投影

里面的样式

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

渐变叠加f28b00,e75300,db7500

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

内发光

里面的一圈a4a4a4到e8d7be

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

最外层的渐变d0d0d0到ffffff

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

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

最好完成图

Photoshop手工制作立体质感的UI控件开关图标,滑动开关素材图片

加载全部内容

相关教程
猜你喜欢
用户评论