欢迎来到叶设计自习室

持续更新设计干货

工具自学|体验教程|素材分享

大家好！

到自习室。

坐下来，享受乐趣！

祝朋友们重返工作岗位一切顺利！

明天叶哥就给大家分享一下我画的100个店面图标的设计思路。 在画草图的过程中，一开始我还认为SK不如AI，但后来总结了一些实用的技巧，于是对SK有了新的认识（真香），效率也提高了很多。

后台回复文末提到的关键词即可获取我的源文件（格式为.ai、svg）。 您还可以在线搜索、下载单个图标并在线更改颜色。

好吧，话不多说，让我们开始吧。

首先，这100个图标是这样的。 我主要用在公司产品的后台界面。 事实上，您还可以在任何店面 UI 界面中使用它们。

所有图标均由24px*24px正圆+2px遮罩+2px圆角组成。 素描过程主要使用形状工具+布尔运算（这样制作出来的图标会更加规范），部分图标需要使用铅笔工具来绘制。

下面是我的素描过程：

#01

首先画 100 个 24px 的完美圆。 事实上，你不需要将它们一一绘制。 叶哥N很久写过插件推荐文章了。 你可以再回顾一下。 这里用到了SK的必备工具Craft的复制功能。

#02

大主题是店面图标，所以我必须考虑在我的工作中使用什么类型的图标？

当时因为我只是需要一个商店正在休息的图标，所以我先画了一个奶茶杯来展示。 之后我想我可以开始画店里的乳制品了（我为这家店做了一个类似罗森的便利店）。 画画的时候肚子饿了，发了一圈同学问想吃什么，一众馋嘴炸了

画了一排喜欢的东西后，我决定重点关注店面的常用工具，比如店面首页、开门、时间、收银、支付等，还有收银机、打印机、小票机、体重秤等设备（此时店面定义为超市）。

我为首页、账单、秤的图标提供了多种选择，大家可以使用自己想要的。

#03

继续按照规范进行绘制（24px、2px蒙版、2px圆角内）。 注意：绘制图标后，不要删除背景中的正圆。 使其成为一个没有填充和遮罩的小透明物体，将其放置在图标的顶部，并将图标和完美的圆圈组合在一起。

持续优化：图标是24*24px吗？ 它是 2px 蒙版吗？ 有2px的圆角吗？ （部分图标的圆角可根据具体情况确定。）另外，还要注意结构的平衡和图标的辨识度。 和披萨图标一样，我一开始在中间画了一块“肉”，用圆角正方形表示。

#04

转换为轮廓、合并形状、检测组（建议使用英文组名称）。 调整图标的位置，利用格式塔原理将同类型的图标放在一起：比如第一行是食物，最后一行是香蕉，中间是基本功能。 有心的朋友肯定会说……第五排图标几乎都是圆形的。 为什么我把两个放到了第六排？

#05

最后就是对图片进行剪切，每个图标都分割成svg。

为了保险起见（导入的图标有时会出现奇怪的问题），我将整个画板导入为svg文件，然后在AI中打开，检查合并，确认无误后，将其拖至【资源导入】（“窗口”中可以找到），一键导入为svg。

最后你可以打包发给后端小哥让他上传到图标库，也可以自己上传。

12点了，我要睡觉了，今天继续写……

又是充满活力的三天！

叶哥接下来给大家分享一些制作图标的小方法：

01 剪刀工具✂️

当你需要勾勒出奶茶杯的杯柄（那种半圆形）时你会怎么做？

当您编辑图表时，您是否想删除右图中的锚点，但其余腰线是手动连接的？

直接删除锚点肯定会遇到这些情况。 叶哥哭着给你介绍这个隐藏的实用工具——剪刀工具！

现在打开浏览器，看看工具栏中是否缺少它。 我们来找一下：右键工具栏sketch 画三维图标，用两只手教mac的触摸板，选择“自定义工具栏”，找到✂️剪刀工具，拖到工具栏上，然后点击完成，就大功告成了！ 同样的，你也可以把不想出现在工具栏中的工具往下拉，它们就会消失。

GIF 图像被压缩为

有了它，你可以做任何你想做的事。

剪掉多余的腰围，剪掉就好！

是不是超级好用？

02 快速取线段的中点

选择形状蒙版，进入编辑模式，将键盘指向一条线，然后按住 Shift 键。 这时，你点击这条线，你就会在线段的中点处手动添加一个锚点。 然后你可以继续在这条线上添加中点。

03 如何画波浪线

如果你想在AI上得到波浪纹，你可以使用治疗工具，那么你应该怎么做呢？

叶哥的笨办法就是这样，哈哈哈，如果有更好的办法，欢迎交流！

按快捷键L，切换到直线工具，画一条线，画的时候按住shift可以保持腰线水平或垂直

选择绘制的腰线，按cmd++c复制腰线样式，选择上一步中的腰线，按cmd++v粘贴样式

选择“编辑”工具，在腰线上添加两个锚点，分别选中它们，用鼠标方向键将其中一个向左移动，另一个向右移动

选择一个新添加的锚点，按住shift，然后选择另一个锚点。 此时，两个锚点都被选中。 在左侧的属性栏中，我们将它们的直径拉到最大（即全圆角）

至此sketch 画三维图标，平滑的波浪线已经画好了！

04 如何画笑脸☺

笑脸是一种非常神奇的表情，因为不同的位置和弧度会传达不同的感情。 我们绘制的笑脸图标希望传达给用户一种快乐、温柔的感觉，而不是板着脸、讽刺，所以手臂的比例非常重要！

大家可以参考我的想法，尽量让图标更加规范，不要乱放。

画一个正圆，复制一个，自动缩小，或者调整左边的宽度和高度。不要使用工具栏上的缩放功能，因为它也会缩放遮罩的值

画鼻子，这里有一个小方法：耳朵要对准小圆圈的底部

选择小圆圈，选择剪刀工具，减去上半圆，就会出现美丽的微笑

哭脸也是一样，翻转半圆即可，不过细节可以优化，因为笑脸可以笑得大一点，而哭脸眼睛小一点会感觉委屈，所以我们需要在笑脸的基础上使用新的锚点和剪刀工具把眼睛变小，最后记住哭脸的眼睛要对准小圆圈的顶部

05 关于合并形状 ✋

要将图标导入为 svg，您需要合并图标库中正常使用的形状。 如果听不懂，说明你需要和后端小哥多沟通。

如上所述，合并形状需要注意以下事项：

合并后，如果缺少某些内容，需要展开合并组，在视口名称左侧选择【无】

您只能单独合并填充视口和蒙版视口，而不能将填充和蒙版组合在一起。 右图演示了如果强制合并会发生什么

svg图标必须作为一个整体来使用，那么如何解决两者不能同时组合的问题呢？ 您只需选择蒙版视口并按cmd+shift+o即可将其转换为轮廓。 此时，蒙版将被填充并可以与填充的视口合并。 而且，轮廓操作是不可逆的，也就是说，以后你不能修改蒙版的大小。 解决办法是：备份，你们都有保存工作路径的习惯，要给自己留一颗后悔药。 我的操作是：画完后，将画板导入为svg文件，在AI中打开，批量勾勒（快捷键同上），然后一一检查合并情况，这是最安全的方法！

06 如何画爱心❤️

最后但并非最不重要的。

最后，我将与大家分享一种超快速且标准化的草图方法，其灵感来自于AI中的形状生成器工具。 虽然没那么方便，但也可以“曲线救国”：

快捷键R画圆，直径拉到最大，就变成了一个全圆角的圆角正方形

复制一个，其中一个旋转45度，另一个旋转-45度（不要用对称函数，会有问题），变成X形

合并形状（记得选择“无”），在两个圆角正方形相交处添加锚点，用剪刀工具剪掉多余的腰线

完成！ 一颗心献给南方宝贝

本期内容就分享到这里。 如果您觉得有用，请分享给您的同事！

100 个店面图标

©️超级叶子·

访问方法

如有侵权请联系删除！