woaiquqiao 发表于 2016-12-5 01:24:04

PS结合AI设计一枚开关图标

设计一个滑动开关按钮，主要利用AI和PS制作，AI负责设计外形，PS负责按钮的质感，有兴趣的可以一起跟着教程练习一下。先看看效果图
http://pic1.16xx8.com/allimg/161115/15461S491-0.jpg
作者：yao66298出处：UI中国

woaiquqiao 发表于 2016-12-5 01:24:04

在AI建1200px*800px画板
http://pic1.16xx8.com/allimg/161115/15461U439-1.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

绘制一个400px*70px矩形
http://pic1.16xx8.com/allimg/161115/15461S1Q-2.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

边角设置35px ,好像只有cc版本可以直接设置圆角
http://pic1.16xx8.com/allimg/161115/15461S625-3.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

偏移一个矩形出来，在向里偏移3px的矩形(向里设置负数)
http://pic1.16xx8.com/allimg/161115/15461T352-4.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

最后绘制出这样的图形
http://pic1.16xx8.com/allimg/161115/15461SZ1-5.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

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

http://pic1.16xx8.com/allimg/161115/15461T209-6.jpg
www.16xx8.com

woaiquqiao 发表于 2016-12-5 01:24:04

背景拉个渐变e7e3dc到f7f5f3
http://pic1.16xx8.com/allimg/161115/15461V404-7.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

小圆拉个c2c0be到d6d6d6
http://pic1.16xx8.com/allimg/161115/15461TA5-8.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

按钮做描边渐变叠加投影的处理
http://pic1.16xx8.com/allimg/161115/15461R411-9.jpg

http://pic1.16xx8.com/allimg/161115/15461U331-10.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

描边
http://pic1.16xx8.com/allimg/161115/15461Q312-11.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

渐变叠加
http://pic1.16xx8.com/allimg/161115/15461T141-12.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

投影里面的样式
http://pic1.16xx8.com/allimg/161115/15461QX9-13.jpg

http://pic1.16xx8.com/allimg/161115/15461U214-14.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

渐变叠加f28b00，e75300，db7500
http://pic1.16xx8.com/allimg/161115/15461VP7-15.jpg

woaiquqiao 发表于 2016-12-5 01:24:04

内发光里面的一圈a4a4a4到e8d7be
http://pic1.16xx8.com/allimg/161115/15461TE2-16.jpg
页: [1] 2
查看完整版本: PS结合AI设计一枚开关图标