前几天在某个群中，看到了一位小伙伴发来的疑问，说：这种果冻质感的图标怎么制作？

作为新一代雷锋的我们，对于这种问题当然是力所能及，授人以鱼不如授人以渔。

安排！

于是我在简短的时间内，对这张图片疯狂梳理了一番。

大致如下：

1、以基础的组合形状拼接为底；

2、采用轻快渐变颜色为主；

3、同色系高明度的效果质感；

4、添加噪点质感；

5、添加凸显主体特征图形；

6、添加高光质感；

7、制作底部阴影；

Ok，主体梳理完毕，那我们就开始执行吧，以AI+PS为主要制作工具。

第一步：以基础的组合形状拼接为底；

如图所示的一些图标形状并不复杂，都是一些简单的基础图形拼接而成。

以图中蓝色铃铛为例，采用形状生成器，四个圆角矩形组合而成。

第二步：采用轻快渐变颜色；

颜色的选择上，饱和度不要太高，选中一个颜色后，另一端渐变的颜色网右下拉一点，不要太过，产生渐变的效果即可。（AI中执行）

第三步：同色系高明度的效果质感；

将图标复制为智能对象到PS；

制作图标的效果，首先来一层内阴影，混合模式为变亮。如果觉得效果不够明显，可以再叠一层不透明度较低的变亮效果。（1和3）

接着来一层左上向右下的正片叠底模式的内阴影，目的就是把果冻内凹的感觉做出来；（2）

再加一层内发光，可以把受颜色环境影响的内部氛围感营造起来；（5）

最后铺一层叠加模式的内阴影，增强颜色反光的感觉（4）

原谅我标记的过程中手有点抖…

第四步：添加噪点质感；

颜色层上还有一层带有噪点效果质感的小细节，选择柔边画笔，画笔不要太大，混合模式调整为溶解，在边缘上点一笔就行，嵌入主图图层。

因为这个细节配合上高光才会让整组图标看起来比较有质感。如果觉得不够的话可以加点杂色的滤镜。

第五步：添加凸显主体特征图形；

图标最重要的就是传递图标的意思，以识别性为主。加上能够说明主体特征的相关元素。

找了一圈，发现其他的图标内部特征制作比较简单，就选了铃铛小图标这个稍微难一点的。虽然没有内部特征图形，但是其他地方的制作难度还是有的。

第六步：添加高光质感；

果冻图标的punchline就是这个高光，虽然制作比较简单，白色渐变加上圆角矩形运用布尔运算组合起来，但却是必不可少的一个细节。

第七步：制作底部阴影；

最后一点就是让果冻“浮”起来。

复制一个主体图形，依据情况扩大并往下移，然后用高斯模糊即可完成。注意颜色一定不能太暗，要保持轻快明亮（调色板往上半部分靠中间的颜色选）。

总结 

1、用简单图形拼接

我们在做图标的过程中首先保证能够识别，再去考虑其他的要素。如果识别性有了，那就可以在风格质感，或者图标差异化中下功夫。图标的分数就是这样一点一点累积起来的

2、颜色轻快明亮

我们可以给自己一个设想，如果我们把颜色用的很深，那在实际的运用场景中是不是会看起来很脏，视觉感很重。

那这肯定不是我们想要的效果。我们就可以放心大胆的往高明度和中偏上的饱和度去调整颜色，在调色板的右上方调整即可。

3、多做拆解练习

对于一组比较有难度的图标，我的第一想法就是：都是用这些相同的工具做出来的，为什么别人就能做出来？还是得要多练习，多掌握几个图标风格。到时候用起来脑子里才会有货，甚至可以几种风格融合，产生新的质感图标。

好啦，以上就是果冻图标质感的全过程啦，之前还集中了一段时间把市面上中等难度的图标全都重新做了一遍，发现自己对于图标的理解又加深了亿点点。

点个赞，继续加油吧！

Powered by Froala Editor