想想图标绘制的历史，最开始PS是用面切法加布尔运算来切，有时候线条也是用面切出来的。随着直线图标的流行和普及，就抛弃了面切法，直接用钢笔工具来画，这样也能控制线条的直角和圆角。当你能用PS画图标的时候，你会发现换用AI会更快更方便。软件在界面设计中占有一席之地，在其中快速绘制图标也是设计师需要掌握的技能。

图标的绘制方法包括面切割法、钢笔绘制法、锚点法、圆形切割法。

接下来我们从、、、三个软件讲一下基本的软件工具。我想了很久，案例绘制要包含基础知识点，使用工具要多。最终选定的图标是齿轮和信号。其中齿轮是最经典的案例，也是绘制图标的必修课。

我。

PS中绘制图标的基本工具有白色工具、黑色工具、布尔运算、钢笔工具、锚点。

1.1 第一步，打开，按ctrl+k，勾选矢量工具，与变化和像素网格对齐。

1.2 小黑、小白的二人转

1.3 钢笔工具、贝塞尔曲线

关于贝塞尔曲线的文章很多都太官方了，我对它不是很了解，也不知道从何下手，我只是总结一下在工作中使用时应该注意什么。

a.锚点两侧手柄应保持在同一水平线上，倾斜锚点的手柄也应保持在同一水平线上。

b.当前手柄的长度不能超出下一个锚点的水平线。

c.上下左右边缘的点肯定是锚点所在的点，其他地方选择锚点需要多加练习才能找到合适的锚点位置。

c.用笔绘图时，尽量不要将两个锚点放得太近，因为这样会导致两个锚点的手柄没有移动的空间。

最后，如果觉得贝塞尔曲线还是比较难画的话，可以先用里面的钢笔工具画一下，多练习就会好起来。之前也觉得里面的钢笔工具比较难画，不过今天写了个教程，试了一下，还是很好用的，曲线也可以调得很柔和。

1.4 布尔运算

布尔运算是通过绘制规则形状，然后进行合并、减去、相交、排除等操作来获得新形状。

1.5 主题图标面板绘制

在设计主题的时候，大师们都采用了很有特色的踢脚线。

1.6 齿轮和信号箱演示

二.

AI中绘制图标的基本工具有填充、描边、钢笔、路径查找器、形状生成器、对齐、锚点圆角、扩展。

2.1 方便地将直角改为圆角。

2.2 路径查找器的形状模式相当于PS的布尔运算（上面介绍过）。路径查找器下面的6个工具在日常生活中很少用到，我就不多说了，有兴趣的可以自己研究一下。钢笔锚点的使用方法和PS中一样。

2.3 路径描边可以通过延长线将线变成面，但是在画线型图标时不要延长线，因为放大缩小不会改变线的粗细，而延长成面则会随着放大缩小而改变。有时候我们在画线型图标比较难画的曲线时，可以先试着画出这个形状，然后再转成描边。

2.4 在绘制对称图标时，有时我们只需要绘制一半，镜像，然后通过对齐——垂直或水平分布间距，将其很好地闭合。（对齐——显示选项——对齐关键对象——垂直或水平分布间距）

2.5 形状生成器工具，可以直接绘制所有可以闭合的形状。

三。

其中绘制图标的基本工具有编辑、旋转、钢笔、剪刀、布尔运算、轮廓、展平。

4.如何将完成的Ai转移到PS？

4.1 Ai做完后，进入Ps，在Ai里复制一份备份，然后-，ctrl+c复制，ctrl+v粘贴进Ps，选择形状图层，不要选择智能对象。然后用白色工具调整细节，让每个锚点都和像素网格对齐。

4.2 制作完Ai后，ctrl+c复制，ctrl+v粘贴sketch 图标打组，调整参数尽量为偶数。因为小数点问题比较多。改数值或者看下图标整体感觉。

5.如何实现视觉平衡？

很多人一开始并不遵循规范sketch 图标打组，只是在一个固定的尺寸内画，其实这也是可以的，但最后还是需要对图标进行个别的微调，才能达到视觉上的统一。

比如把所有图标绘制在56*56px的固定大小区域内，并且不要超出这个范围。然后看看哪些需要根据视觉比例放大，放大都是按2的倍数进行的。

56-2 的倍数，例如 56px、54px、52px……

6.如何界定标准？

比如在一定的尺寸范围内，如何确定一个像素？

以48*48尺寸为例，看上去好像剩下一个像素，但上下左右还各剩下两个像素，和上面的视觉平衡一样，是以2个像素为基准，这个标准同样适用于88*88px等更大的尺寸。

7.如何统一风格？

我在《如何系统学习功能图标》中已经基本总结了图标风格，大家可以分析总结各个风格的特点，快速做出来。很多人发给我自己画的图标，会同时用两三种风格。也有人自己在总结出新风格之前就自己尝试。尽量不要先尝试新的风格，之前整理过的应该就够了。

​

总结 虽然这些都是简单的基础教程，但也是必须掌握的。掌握以上基础教程不仅适用于图标，在插画、图形绘制中也能派上用场。这篇教程的AI部分比较短，AI和圆的切割方法没有写出来。在下一篇《瑜伽式怎么学？》中会详细讲解。最后，感谢大家的观看。

如有侵权请联系删除！