南设公众号，第2篇原创教程，本文1802字，阅读需要约5分钟，记得点击上方蓝字关注我哦

这次给大家分享一个二分钟学会的糖果色图标，糖果色与图标结合，可以带来哪些创意的碰撞呢？是不是激发起了你的想象力，快跟我一起一起看吧。

糖果色图标合集

使用SKETCH软件绘制的糖果色图标，效果是不是还不错，下面是制作的技法细节拆分。

单个案例拆分

看到一个复杂的图形通常会使用拆分法（比较经典的案例有坦克建模拆分，把坦克拆分成单独的小零件最后进行组合。），本次图标拆分成五个部分：背景、线、矩形框、几何图案、投影，下面进行的细节拆分设计。

1、背景

画一个圆形的背景可以有两种方法：圆形工具、矩形工具。

圆形工具：在sketch的顶部栏中找到形状，鼠标点击会出现一个下拉框（快捷键“O”）。

有一个需要注意的小细节，在画圆时需要按住shift按键，这样就可以得到一个正圆形，如果不按住shift得到的就是一个椭圆（如上图所示）。

矩形工具：在sketch的顶部栏中找到形状，鼠标点击会出现一个下拉框（快捷键“R”）。

在绘制时需要按住“shift”按钮，可以得到一个正方形，选中绘制的正方形（未选中图形，右侧栏不显示半径功能选项），看右侧栏，找到“半径”，可以鼠标拖动蓝色线条上面的点，也可以在最右侧输入数值进行调节。（根据个人习惯二者任选其一）。

2、线

线：点击顶部栏，鼠标右键出现“工具栏”，拖入矢量和轮廓工具到顶部栏中。

使用矢量工具画出轮廓，绘制完后使用鼠标点击填充——颜色前方的小方格，点击取消下面边框选项，得到形状图形。（如上图所示）

得到基础型后分为三个效果叠加：线性渐变、边框渐变、内阴影。

线性渐变：点击填充——颜色上方的色块，出现一个弹窗（如上图），选中第二个线性渐变，设置下方渐变的颜色色值，角度为从上到下（上面浅色，下面深色），渐变条的最右边有一个向右的箭头可以调整渐变角度，也可以手动进行调节。

边框渐变：点击边框——颜色上方的色块，出现一个弹窗（如上图），选中第二个线性渐变，设置下方渐变的颜色色值，这里需要注意中间色值为深色，且Alpha指为0，角度为从上到下。

内阴影：点击内阴影——颜色上方的色块，修改颜色为#D4AFF，设置完成后增加模糊的数值。（数值只是参考可根据实际效果进行调整）。做完后得到一个完整的线条效果。

3、矩形框

矩形框：分为三个效果叠加：线性渐变、边框渐变、内阴影。

线性渐变：点击填充——颜色上方的色块，出现一个弹窗（如上图），选中第二个线性渐变，设置下方渐变的颜色色值，角度为从上到下（上面浅色，下面深色），渐变条的最右边有一个向右的箭头可以调整渐变角度，也可以手动进行调节。

边框渐变：点击边框——颜色上方的色块，出现一个弹窗（如上图），选中第二个线性渐变，设置下方渐变的颜色色值，这里需要注意中间色值为深色，且Alpha值为0，角度为从上到下。

内阴影：点击内阴影——颜色上方的色块，修改颜色为#D4AFF，设置完成后增加模糊的数值。（数值只是参考可根据实际效果进行调整）。做完后得到一个完整的矩形框效果。

4、几何图案

几何图案：使用矩形工具绘制一个长矩形（这里不需要按shift），选中长矩形，在右侧设置半径值为最大，得到了一个圆角矩形，复制一个使用圆角矩形开始旋转，然后我们使用顶部栏的联集效果，这样就得到了一个几何图形。选中基础图形依次增加填充——阴影——内阴影。

填充：色值：#FFF2A4——#FF8636的线性渐变。

阴影：色值：#000000的单色，设置模糊值和Y（纵坐标）的数值。

内阴影：色值：#FFF8DD的单色，设置模糊值和Y（纵坐标）的数值。

添加效果完成得到几何图形的效果图，旁边的小圆和这个方法一致，也可以使用快捷方法：复制当前图层样式（快捷键：command+C），黏贴到圆形上即可（快捷键：command+V）。

5、投影

投影：复制一个前面完成的矩形框，点击顶部导航栏找到“缩放工具”输入数值80%，点击确定，得到一个80%矩形框，选中当前缩放后的矩形框，点击右侧栏中的透明度选项输入数值为50%，在下方增加模糊模块，高斯模糊模式模糊值为8（数值可根据图形大小进行更改调整）。这样就得到了一个投影效果。

把前面绘制的图形进行组合就是一个完整的图标。

总结

看完了教程是不是想动手尝试一下呢？做一个专属自己的糖果色图标，所有的参数和颜色都是活的，不用刻意去记数值，希望可以帮助到你，期待你做出更多颜色的糖果色图标。

没看够还想“在看”！