wordzhanggaoyi 发表于 2015-4-23 14:51:23

手把手教你设计锤子图标

分享一篇关于UI图标临摹的设计教程,这次又是模仿猴子浏览器的图标,上次已经分享过一篇,希望大家喜欢。

大家还可以结合@琴瑟飘渺 写的这一篇相同图标的设计教程《
浏览器UI图标!ps cc模仿锤子浏览器图标
》一起学习。做完记得交作业。
http://www.16xx8.com/photoshop/jiaocheng/2014/135929.html最终效果:
http://pic.16xx8.com/allimg/150421/14333U5I-0.jpg
提示:教程详细步骤在二楼!想下载该教程的可以到这里下载:点击进入下载页教程编号:137275 作者:看不见的敌人28 出处:未知

wordzhanggaoyi 发表于 2015-4-23 14:51:23

教程开始,第一步新建,500*500画布 拉个白到灰的径向渐变。
http://pic.16xx8.com/allimg/150421/14333Q062-1.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

椭圆工具拉个300*300的圆居中对齐填充灰色。
http://pic.16xx8.com/allimg/150421/14333Wb6-2.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

添加图层样式。
http://pic.16xx8.com/allimg/150421/14333V424-3.png

http://pic.16xx8.com/allimg/150421/14333S305-4.png

http://pic.16xx8.com/allimg/150421/14333Q3R-5.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

再画一个较小的圆形。
http://pic.16xx8.com/allimg/150421/14333Q564-6.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

添加图层样式:内阴影和投影。
http://pic.16xx8.com/allimg/150421/14333UE2-7.png

http://pic.16xx8.com/allimg/150421/14333Q642-8.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

复制刚刚添加图层样式的图层,右键清除图层样式 Ctrl+t按住alt+shift同比缩小2到4px左右。
http://pic.16xx8.com/allimg/150421/14333R0O-9.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

给黑圆添加渐变,注意是角度渐变。
http://pic.16xx8.com/allimg/150421/14333T531-10.jpg

wordzhanggaoyi 发表于 2015-4-23 14:51:23

添加渐变后的样子。
http://pic.16xx8.com/allimg/150421/14333S152-11.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

椭圆工具再画一个圆,放在上面。
http://pic.16xx8.com/allimg/150421/14333WU7-12.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

添加图层样式。
http://pic.16xx8.com/allimg/150421/14333R5V-13.png

http://pic.16xx8.com/allimg/150421/14333U3S-14.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

复制刚刚添加图层样式的圆形,清除图层样式,稍微放大2个像素左右。
http://pic.16xx8.com/allimg/150421/14333T5U-15.jpg

wordzhanggaoyi 发表于 2015-4-23 14:51:23

再来添加图层样式。
http://pic.16xx8.com/allimg/150421/14333V424-16.png

http://pic.16xx8.com/allimg/150421/14333U525-17.png

http://pic.16xx8.com/allimg/150421/14333V962-18.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

再画一个同等大小的。
http://pic.16xx8.com/allimg/150421/14333Q0K-19.png

wordzhanggaoyi 发表于 2015-4-23 14:51:23

羽化一下调整下透明度。
http://pic.16xx8.com/allimg/150421/14333TR1-20.jpg
页: [1] 2
查看完整版本: 手把手教你设计锤子图标