欢迎来到叶设计自习室

持续更新·设计要点

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

大家好！

到了自习室。

坐下来，玩得开心！

同学们，祝你们开学顺利！

今天叶哥就给大家分享一下我画的100个店铺图标的设计思路。 在画的过程中，一开始我还是觉得SK不如AI。 后来我总结了一些实用的技巧，于是我对SK更加感兴趣了。 新的认识（真好吃），效率提高了很多。

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

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

首先，这100个图标是这样的。 我主要用在公司产品的后台界面。 当然，您也可以在任何商店类型的 UI 界面中使用它们。

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

下面是我的画图过程：

#01

首先画 100 个 24px 的正方形。 当然，你不需要一一绘制。 叶兄很早之前就写过一篇关于插件推荐的文章。 你可以再回顾一下。 这里用到了SK必备神器Craft的复制功能。 。

#02

大主题是商店图标。 接下来，我要思考我在工作中常用的图标类型是什么？

当时因为我只是需要一个图标来表示商店正在休息，所以我先画了一个咖啡杯来代表它。 然后我想我可以开始画店里的食物了（我把这家店定为类似罗森的店）。 （便利店），我画了张照片表示我饿了，并发朋友圈问大家想吃什么。 于是乎，就有了很多吃货。

画了一排我最喜欢的食物后，我决定接下来的图标类型重点放在商店里常用的工具上，比如商店主页、开门、时间、收银、支付等，还有收银机、打印机和收据机。 、体重秤等设备（此时该店定义为超市）。

我为主页、账单和比例图标提供了多个选项。 您可以使用任何您想要的。

#03

按照规范继续绘制（24px以内，2px描边，2px圆角）。 注意：绘制完图标后，不要删除背景中的方块。 将其变成一个没有填充或描边的透明小图标，并将其放置在图标的底部。 并将图标和方块分组在一起，保证所有图标大小相同，输出到前端时不会出现错误。

持续优化：图标是24*24px吗？ 是2px的笔划吗？ 有2px的圆角吗？ （个别图标的圆角可根据具体情况确定）还要注意结构的平衡和图标的辨识度。 对于汉堡包图标，我首先在中间画了一块“肉”，并用圆角矩形来表示。 后来我在中间画了一块“肉”。 优化的时候觉得这块肉让图标太拥挤了，所以我把它改成了一块“蔬菜”，并用波浪线来表示。

#04

转换为轮廓，合并形状，检查分组（组名建议使用英文）。 调整图标的位置，利用格式塔原理将同类型的图标放在一起：比如我的第一排是食物，最后一排是水果，中间是基本功能。 细心的同学肯定会说……第五排的图标几乎都是圆形的。 为什么其中两个掉到了第六排？ 这是因为（本来就头晕现在才注意到+_+）

#05

最后一步是剪切图像，每个图标都被剪切成svg。

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

最后你可以打包并发送给前端人员，让他上传到图标库，或者你也可以自己上传。

12点了，该睡觉了，明天继续写……

又是元气满满的一天！

叶哥接着给大家分享了一些绘制图标的技巧：

01 剪刀工具✂️

当你需要画咖啡杯的把手（那个半圆）时你会怎么做？

当你【编辑】图形的时候，你有没有遇到过如下图的情况，你想要删除一个锚点，但是其他的线却自动连接起来了？

如果直接删除锚点，肯定会遇到这种情况。 叶哥就哭着给大家介绍这个隐藏的实用工具——剪刀工具！

现在打开您的计算机，看看工具栏上是否没有它。 让我们找到它：右键单击工具栏，用两根手指指向 mac 触摸板，然后选择“自定义工具栏”。 找到✂️剪刀工具，将其拖到工具栏上，然后单击完成，就完成了！ 同样的，你可以把不想出现在工具栏上的工具拖出来，它们就会消失。

上面是压缩后的GIF图片

一旦拥有它，你就可以做任何你想做的事。

如果不需要任何线条，只需将其剪掉即可！

是不是超级好用呢？

02 快速找到线段的中点

选择形状图层，进入编辑模式，将鼠标指向一条线，按住shift，点击该线时，会自动在该线段的中点添加一个锚点。 接下来，您可以继续向该线添加中点。

03 如何画波浪线

如果想要在AI中得到波浪线，可以使用效果工具，那么如何调整呢？

叶哥的笨办法就是这样，哈哈哈。 如果有更好的方法，欢迎分享！

按快捷键L，切换到直线工具，画一条线。 绘图时按住 Shift 键可保持线条水平或垂直。

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

选择“编辑”工具，在线上添加两个锚点，分别选择它们，然后使用键盘的箭头键向左移动一个，向右移动一个。

选择一个新的锚点，按住 Shift 键，然后选择另一个锚点。 此时，两个锚点都被选中。 在右侧的属性栏中，我们将它们的半径增加到最大值（即全圆角）。 啦）

至此，平滑的波浪线就画好了！

04 如何画微笑☺

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

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

画一个正圆，复制它，然后手动缩小，或者调整右侧的宽度和高度。不要使用工具栏上的缩放功能，因为它也会缩放描边值。

画眼睛有一个小技巧：眼睛要与小圆圈的顶部对齐

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

哭脸也是一样，翻转半圆即可sketch怎么合并图层，不过细节还是可以优化的，因为笑脸可以大一点，哭脸可以嘴巴小一点，感觉委屈，所以需要用新的加法在笑脸的基础上。 使用锚点和剪刀工具使嘴变小一点。 最后，记住哭脸的嘴要与小圆圈的底部对齐。

05 关于合并形状 ✋

要将图标导出为 svg，需要合并形状，然后才能在图标库中正常使用。 如果你看不懂，说明你需要和前端小伙多沟通。

在内部，合并形状时需要注意以下几点：

合并后，如果有内容缺失，需要展开合并组，选择图层名称右侧的【无】。

您只能分别合并填充图层和描边图层。 您无法将填充层和描边层合并在一起。 下图演示了如果强制合并会发生什么。

svg图标必须是一个整体才能正常使用，那么如何解决两者不能同时合并的问题呢？ 只需选择描边图层，然后按 cmd+shift+o 将其转换为轮廓。 这时，描边会变成填充，你可以将它与填充图层合并。 但是，轮廓操作是不可逆的，这意味着您以后无法更改笔画大小。 解决办法是：备份。 每个人都要养成节约工作路径的习惯，给自己留下一颗后悔药。 我的操作是：画完后，将画板导出为svg文件，在AI中打开，批量勾勒（快捷键相同），然后一一检查合并状态，这是最安全的方法！

06 如何画一颗心❤️

最后但并非最不重要的。

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

使用快捷键R绘制一个矩形，将半径拉伸到最大，将其变成一个全圆角矩形。

复制一个，旋转一个45度，另一个旋转-45度（不要使用对称函数，会出问题），形成一个X形状

合并形状（记得选择“无”），在两个圆角矩形的交点处添加锚点，然后使用剪刀工具剪掉多余的线条。

完毕！ 给南方宝贝一颗小小的心

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

100 个商店图标

©️超级夜·

获得方法

如有侵权请联系删除！