在 UI 设计中，「图标」举足轻重，针对不同的使用场景和功能需求，选择适合的图标表现形式，不但可以保证页面整体效果，还可以更好的引导用户。

今天我们为大家带来一组通用面性图标的临摹教程，覆盖了电商、社交、教育三个较为日常的使用场景，通用性强且简单易学。

依据图标的分类，我们规划了三天的临摹进程，当然你也可以选择较为关注的类别进行学习，相信通过三天的递进式临摹，你能够掌握一定的面性图标的设计技巧。

DAY 1 电商类

各大电商平台 618 年中大促火热进行中。设计需求激增，相信广大设计师及团队也都在倾力支持。

我们就紧跟时事，首先带来一组电商类面性图标的临摹。

打开 MasterGo ，进入工作台，创建一个新文件

点击右侧链接进入 MasterGo： MasterGo

优惠卷图标

Step 1

选择 48 x 48 网格容器

优惠券：使用矩形工具（R），绘制 36 x 26 长矩形，圆角 4；使用圆形工具（O），绘制 10 x 10 的圆形，将圆心对准矩形左侧边；复制圆形，圆心对准矩形右侧边；

钱币符号：使用钢笔工具（P）绘制一个 6 X 4 的「V」，描边 2 ，描边设置边角为圆角，端点为圆形；绘制宽为 10 的横线，复制一条向下移动 3 次；绘制一条高 8 的竖线，与之前的图形拼接在一起；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」；

选中新图形，使用布尔运算，选择「拼合」；

框选左右两侧半圆切口锚点，修改圆角为 2；

优惠券图标就完成啦~

红包图标

Step 1

选择 48 x 48 网格容器

红包袋：使用矩形工具（R），绘制一个 28 x 32 方矩形，圆角 4；

红包盖：使用圆形工具（O），绘制一个 34 x 34 的圆形，描边为 2；将圆形与「红包袋」水平居中对齐，向下移动 10；

钱币符号：使用钢笔工具（P）绘制一个 6 X 4 的「V」，描边 2，描边设置边角为圆角，端点为圆形；绘制宽为 10 的横线，复制一条向下移动 3 次；绘制一条高 8  的竖线，与之前的图形拼接在一起；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」；

红包图标就完成啦~

VIP 图标

Step 1

选择 48 x 48 网格容器

钻石：使用三角形工具，绘制一个 40 x 40 的三角形，角数改为 5，旋转 180°；选中五边形中间两个端点，按住 shift+ 方向键向上 1 次；选中图形，修改圆角为 4；

V 字：使用钢笔工具，绘制一个 8 x 6 的「V」字，描边为 2，端点为圆形；放置于「钻石」之上；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」

VIP 图标就完成啦~

钱包图标

Step 1

选择 48 x 48 网格容器

钱包主体：使用矩形工具（R），绘制一个 32 x 26 的长矩形，圆角为 4；

钱包扣：矩形工具（R），绘制一个 12 x 8 的长矩形，左上和左下圆角为 4，水平右对齐，垂直居中对齐「钱包主体」；圆形工具（O），绘制一个 6 x 6 的圆形，左对齐矩形方向键向右 2 次；

钱包：框选两个矩形，使用布尔运算，选择「减去顶层」；框选新图形与圆形，使用布尔运算，选择「联集」；

Step 2

钱币：复制「钱包主体」，旋转 -25°；使用矩形工具（R），绘制一个 40 x 30 的长矩形，底边对齐「绿色边框」；框选两个图形，使用布尔运算，

选择「减去顶层」；框选「钱包」与「钱币」，使用布尔运算，选择「联集」；

钱包的图标就完成啦~

购物袋图标

Step 1

选择 48 x 48 网格容器

袋子：使用矩形工具（R），绘制一个 32 x 32 的方举行，圆角为 4；选择左上端点，方向键向右 3 次；选择右上端点，方向键向左 3 次；

提手：使用圆形工具（O），绘制一个 12 x 12 的圆形，无填充，描边为 2；选择顶部端点删除，得到一个 12 x 6 的半圆形描边形状，路径端点修改为圆形；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」

购物袋的图标就完成啦~

DAY 2 社交类

现代的工作生活都与社交密不可分，点赞、评论、关注、收藏......都是日常极为高频的词汇！

看看这些线上社交中常用图标，是如何被创造出来的

打开 MasterGo ，进入工作台，创建一个新文件

点击右侧链接进入 MasterGo： MasterGo

评论图标

Step 1

选择 48 x 48 网格容器

气泡：使用圆形工具（O），绘制一个 36 x 36 的圆形；

省略号：使用圆形工具（O），绘制一个 4 x 4 的圆形，复制出另外两个，水平居中对齐，间距为 4；

箭头：使用钢笔工具（P），绘制一个 16 x 14 的直角三角形；，选中左边的端点圆角改为 1；

Step 2

框选「气泡」和「省略号」图形，使用布尔运算，选择「减去顶层」；

框选新图形和「箭头」，使用布尔运算，选择「联集」；

评论图标就完成啦~

ps：如果做多彩的图标，可以不使用布尔运算；

点赞图标

Step 1

选择 48 x 48 网格容器

手：使用矩形工具（R），绘制一个 28 x 24 的长矩形，左上和左下圆角为 0，右上和右下圆角为 4；选中右下端点，方向键向左 4 次，向下 2 次；

大拇指：使用矩形工具（R），绘制一个 10 x 10 的长矩形，左上和右上圆角为 5，左下和右下圆角为 0；

袖子：使用矩形工具（R），绘制一个 8 x 28 的长矩形，圆角为 2；

Step 2

框选「手」和「大拇指」，使用布尔运算，选择「联集」，再选择「拼合」；选中大拇指和手的左侧链接端点修改圆角为 3；

框选所有图层，使用布尔运算，选择「联集」；

点赞图标就完成啦~

ps：如果做多彩的图标，可以不使用布尔运算「联集」；

照片图标

Step 1

选择 48 x 48 网格容器

山体：使用矩形工具（R），绘制一个 40 x 34 的矩形；

山峰：使用钢笔工具（P），在矩形上横边中间添加新锚点，选中锚点按住 shift+ 方向键向下移动 2 次；选中左上端点，方向键向右移动 13，向上移动 10；选中右上端点向左移动 13，向下移动 10；修改左右两个端点圆角为 4；中间端点圆角为 1；

太阳：使用圆形工具（O），绘制一个 8 x 8 的圆形，放置在右上角；

Step 2

框选所有图层，使用布尔运算，选择「联集」；

复制图标就完成啦~

ps：如果做多彩的图标，可以不使用布尔运算「联集」；

用户图标

Step 1

选择 48 x 48 网格容器

头部：使用圆形工具（O），绘制一个 20 x 20 的圆形；

身体：使用矩形工具（R），绘制一个 36 x 12 的长矩形，圆角为 8；在上横边添加两个锚点，选中两个锚点方向键向上移动 4 次；

Step 2  

选择所有图层，使用布尔运算，选择「联集」；

用户图标就完成啦~

ps：如果做多彩的图标，可以不使用布尔运算「联集」；

喜欢图标

Step 1

选择 48 x 48 网格容器

心形：使用矩形工具（R），绘制一个 20 x 32 的矩形；左上和右上端点圆角为 10，左下和右下端点圆角为 0；旋转 45°；复制该图形，进行水平翻转

Step 2

框选两个圆形，使用布尔运算，选择「联集」；

喜欢图标就完成啦~

ps：如果做多彩的图标，可以不使用布尔运算「联集」；

DAY 3 教育类

最后是一组教育类图标设计。

无论是线上教育还是在线培训，亦或是学习打卡、运动成就，我们获得的信息和知识，从未如此丰富多彩。

打开 MasterGo ，进入工作台，创建一个新文件

点击右侧链接进入 MasterGo： MasterGo

课程图标

Step 1

选择 48 x 48 网格容器

笔记本：使用矩形工具（R），绘制 32 x 34 长矩形，圆角 4；

书脊：选择钢笔工具绘制一条高为 34 的竖线，描边为 2，距离「笔记本左侧 6 px」；

书签：使用矩形工具（R）选择绘制一个 6 x 10 的矩形，圆角为 1；在矩形下横边新增一个锚点，选中方向键向上移动 2 次；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」；

课程图标就完成啦~

计算器图标

Step 1

选择 48 x 48 网格容器

背景：使用矩形工具（R），绘制一个 36 x 36 方矩形，圆角 8；

加号：使用钢笔工具（P），绘制一条高为 6 的竖线，描边为 2，复制一个旋转 90°，两者居中对齐，距离「背景」上边距 8，左边距 7 的位置放置；

减号：使用钢笔工具（P），绘制一条宽为 6 的横线，描边为 2，距离「加号」6 放置；

乘号：复制「加号」旋转 45°，距离加号5的位置放置；

除号：复制减号，上下添加 2 x 2 的圆形，距离「减号」7 的位置放置

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」；

计算器图标就完成啦~

课堂图标

Step 1

选择 48 x 48 网格容器

背景：使用矩形工具（R），绘制一个 36 x 32 长矩形；

上下边框：使用矩形工具（R），绘制一个 40 x 4 的长矩形，圆角为 2；复制一个长矩形，分别对齐「背景」的顶部和底部；

横格：使用钢笔工具（P），绘制一条宽为 24 的横线，描边为 2，端点为圆形；将其复制两次；三条横线纵向间距为 7，再将中间的横线宽度改为 18；

Step 2

选择「背景」和「横格」图层，使用布尔运算，选择「联集」；

框选所有图层，使用布尔运算，选择「减去顶层」

课堂图标就完成啦~

体育课图标

Step 1

选择 48 x 48 网格容器

球体：使用圆形工具（O），绘制一个 38 x 38 的圆形；

直线纹路：使用钢笔工具（P），点击新增一个锚点后按住 shift 键，绘制一条 45° 的斜线；将斜线的宽高改为 28 x 28，描边为 2；复制该路径水平翻转；居中对齐「球体」

曲线纹路：使用圆形工具（O），绘制一个 40 x 40 的圆形；删除填充，描边为 2；复制圆形向左向上移动 40；选中两个圆拖拽置「球体」上方，居中对齐；

Step 2

框选所有图层，使用布尔运算，选择「减去顶层」

体育课的图标就完成啦~

Powered by Froala Editor