免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

标题: PS新手教程:设计师教你快速制作圆形渐变图标 [打印本页]

作者: flash8    时间: 2014-9-13 11:12     标题: PS新手教程:设计师教你快速制作圆形渐变图标

20140530-0.png
看到有人问这种圆型 icon 要怎么做,觉得很有趣稍微思考一下原理,做了个简易快速版本。比不上原版精致、只是记录思考方式。

中间的渐层色
20140530-1.png
画一个圆,设图层样式,角度。

凹进去的部份
20140530-2.png
其实是用迭的,再画一个半圆,设内阴影。

中心
20140530-3.png
画一个圆,用图层样式设定,一层就能解决厚度和高光问题。
20140530-4.png
20140530-5.png

外框

用形状工具、重迭两个圆画出圆环。同样用图层样式设定,一层就解决厚度和高光。
20140530-7.png
20140530-8.png
20140530-9.png
20140530-10.png
阴影

复制需要阴影的那个图层、高斯模糊,复制一层略缩小85%,调整透明度和重迭部份,阴影会比较立体。共有外框、中心、整体这 3 个部份要处理。


20140530-11.png
20140530-12.png
20140530-13.png
如果这颗 icon 小于 300x300px 、又不是主力 icon 只是个配角、且走扁平化风格的话,用图层样式一层解决高光和厚度是很方便快速的作法。但如果是拟物风就得把这几层拆开独立制作。比较有趣的部份是「角度渐层」,平时很少使用这种渐层方式、明明是凹陷的部份却以迭加一个圆的方式制造假阴影也扭转平时的作图想法。果然多临摹大师作品可以学到很多不同的思维方式。

原文地址:akanelee.me

图片附件: 20140530-0.png (2014-9-13 11:10, 77.99 KB) / 下载次数 448
http://www.flash8.utmall.com/attachment.php?aid=129&k=d31ad376469c7cfbd152a492f8ee0932&t=1757313163&sid=e88kcV



图片附件: 20140530-1.png (2014-9-13 11:11, 128.73 KB) / 下载次数 496
http://www.flash8.utmall.com/attachment.php?aid=130&k=b9447b2f19039733e52679c801445363&t=1757313163&sid=e88kcV



图片附件: 20140530-2.png (2014-9-13 11:13, 131.42 KB) / 下载次数 436
http://www.flash8.utmall.com/attachment.php?aid=131&k=01748b28575062dcd65faac3352dad60&t=1757313163&sid=e88kcV



图片附件: 20140530-3.png (2014-9-13 11:13, 142.97 KB) / 下载次数 461
http://www.flash8.utmall.com/attachment.php?aid=132&k=bf3a887581d704138f42d467e1a5f74f&t=1757313163&sid=e88kcV



图片附件: 20140530-4.png (2014-9-13 11:13, 137.92 KB) / 下载次数 481
http://www.flash8.utmall.com/attachment.php?aid=133&k=e8550190b4445ab3d82747d24a3181f2&t=1757313163&sid=e88kcV



图片附件: 20140530-5.png (2014-9-13 11:13, 138.08 KB) / 下载次数 485
http://www.flash8.utmall.com/attachment.php?aid=134&k=a6f7374766c404c14eae0f0577aaf340&t=1757313163&sid=e88kcV



图片附件: 20140530-6.png (2014-9-13 11:13, 152.62 KB) / 下载次数 414
http://www.flash8.utmall.com/attachment.php?aid=135&k=76368343dcd7003295b51c4b1a1585a2&t=1757313163&sid=e88kcV



图片附件: 20140530-7.png (2014-9-13 11:13, 153.31 KB) / 下载次数 464
http://www.flash8.utmall.com/attachment.php?aid=136&k=cadb3ee095f2816075f397b763ddc759&t=1757313163&sid=e88kcV



图片附件: 20140530-8.png (2014-9-13 11:14, 142.68 KB) / 下载次数 437
http://www.flash8.utmall.com/attachment.php?aid=137&k=b51efd92d0250e29ad39463eca809f06&t=1757313163&sid=e88kcV



图片附件: 20140530-9.png (2014-9-13 11:14, 154.17 KB) / 下载次数 462
http://www.flash8.utmall.com/attachment.php?aid=138&k=928dc8da8b5bca411479ae1297c834ab&t=1757313163&sid=e88kcV



图片附件: 20140530-10.png (2014-9-13 11:14, 171 KB) / 下载次数 480
http://www.flash8.utmall.com/attachment.php?aid=139&k=df56b6f648e6cd606604471527bbc248&t=1757313163&sid=e88kcV



图片附件: 20140530-11.png (2014-9-13 11:22, 62.72 KB) / 下载次数 481
http://www.flash8.utmall.com/attachment.php?aid=140&k=737deac3f27f2bfed1fd79533571c9e2&t=1757313163&sid=e88kcV



图片附件: 20140530-12.png (2014-9-13 11:22, 66.79 KB) / 下载次数 464
http://www.flash8.utmall.com/attachment.php?aid=141&k=c39c4b31dcbdc93c9075b8e1747823df&t=1757313163&sid=e88kcV



图片附件: 20140530-13.png (2014-9-13 11:22, 77.99 KB) / 下载次数 439
http://www.flash8.utmall.com/attachment.php?aid=142&k=b4d41177a1ff1dd02fc63e781fbacf35&t=1757313163&sid=e88kcV


作者: 北去候鸟    时间: 2016-7-22 08:42

提示: 作者被禁止或删除 内容自动屏蔽




欢迎光临 自由动画制作论坛【教程】图片【视频】交流 (http://www.flash8.utmall.com/) Powered by Discuz! 7.2