Candy_icon 糖果图标-学习过程记录
candy icon图标学习过程
前言：
第一次在UI中国上发经验的文章，随便写写的哈，发出来是想和大家一起学习学习，说不定有更简单的实现办法。如果有不喜欢的，在线卑微求勿喷，请直接忽略哈，谢谢。
正文：
前段时间做了一个图标打卡的计划，刚好翻到追波上Man King的candy icon，直接安排上。在临摹学习到自创的过程中，做了一下学习的记录。因为一开始学习的时候想找一下有没有相关的临摹文章，到处找不到，索性自己研究一下能不能做出来。
先附上大神作品链接：https://dribbble.com/shots/7111268-Candy-Icon/attachments/113806?mode=media
上大神原图：
学习步骤：
一、观察、总结特点：
临摹前通过观察总结了糖果图标的几个核心特点，先放大图标来看看都有那些细节。
特点总结：
1. 通透感：使用弥散投影和内发光以及透明度营造。
2. Q弹感：用大圆角营造Q感。
3. 立体感：利用内阴影营造。
4. 层次感：最少为三层，底层为深色渐变层，，中层为浅色半透明渐变层，顶部为亮色小物件。
5. 总结一下，这类效果比较适合面线性图标。
二、思考、实践分析手法：
分析特点之后，我通过观察和初尝试，大概可以使用以下的手法达到。
手法：渐变 / 透明蒙版 / 内发光/ 外投影 / 内投影 / 弥散投影（ 高斯模糊/羽化） / 颜色蒙层
三、实现过程：
底层(主图形)：45度渐变打底，内发光营造立体通透感。底层背景颜色饱和度要高，才能透出中层。
中层(毛玻璃层)：中层的毛玻璃层不是白色层降低透明度的，而是吸取主色降低饱和度之后调整透明度实现的。可以用蒙版降低中间透明度，营造微玻璃边缘较白的质感。适当加一下微投影，能显得更透，同时把层次分分开。
顶层：小物件形式基本都一致，都为黄橙渐变，再加内阴影和内发光营造立体感。部分内发光效果不够明显的，可叠加高光形状羽化。底部加主色投影。
最底层：最底部的弥散阴影并不是直接加投影，而是用主形状，缩小做高斯模糊或者羽化。且弥散投影要大，营造出一种粉粉的感觉。
透明蒙版：最后，底层调一点小小的透明度，或者加一个透明蒙版，更显通透感。
小tip:使用投影和发光时，不同图标之间最好不要使用全局光，以免一个调整，影响其他。
copy版本：(看下最后的copy效果)
先copy了一版，感觉还可以，边临摹边思考如何做成这个效果，和原稿又有什么区别，同时总结特点，运用到下一个图标
四、收获&创作：
1.收获：
临摹不只是照着画，而是在不断比对的过程中进行学习思考。
临摹不要一开始就直接跟着画，而是先观察分析，经过思考之后再临摹。
临摹过程中可以把一些心得记下来，后期可回头看看，进行升华思考。
2.创作：
临摹总结之后，紧绕candy图标特点，尝试做一组创作。（手法同上，具体图标根据实际情况做微调）
底部附上了临摹源文件，需要的小伙伴可下载。
