如何用AI制作线性图标

前天在手机里看了张碧晨的极光演唱会，感觉小姐姐唱歌好听，长的又好看，会说好几种国家的语言，还会弹钢琴。这样优秀又努力的女孩子真是好迷人。所以啊，哪个行业不是如此呢，一定要狠狠的努力，才会成为自己想要变成的样子啊。

第一次正儿八经也教程，写给自己看，总结给自己看，大神轻拍（先立个flag吧，一周最少写一篇）

---

虽然说AI是矢量绘图软件，PS是位图软件，但是PS同样也可以做矢量图形。当我们切图给前端小姐姐的时候，我们输出的是png。png是一种位图格式，所以放大缩小的时候还是会有一定程度上的失真。所以怎样解决这个问题呢，目前，很多公司都已经不切png了，而是输出一种叫svg格式的矢量图，我就很好奇前端是怎样用css来改变svg的样式的，所以我决定这周来好好研究下。 （我好像说跑题了哈，马上回来，嘿嘿~）

AI做图标的好处还是挺大的，就拿我这个长年都是cpu占用率高达90%的电脑来说，用AI做图标算是个福音了。打个比方，如果我要做40来个图标，用PS做的话，在电脑卡死的同时文件大小也得有70多M，如果用AI做的话，就会很流畅，文件大小可能就20M左右。操作起来也是比较方便的（个人觉得）。

以下是正式内容

上图为今天要介绍的几种小图标

图标一：

上传

在AI中，对应的布尔运算叫做“路径查找器”，

路径查找器

1.用四个圆和一个矩形拼成云彩的形状

2.选中路径查找器中的联集后，用钢笔工具去掉多余的锚点。

3.用矩形工具画一个矩形，拖动白色圆圈做出如下图所示的圆角矩形

4.使用小白工具把多余的锚点都删掉，如下图

5.使用剪刀工具将云彩底部不要的部分都剪掉。

6.将以上图形拼成如下图所示，即完成。

图标二

消息

1.画一个矩形和直角三角形。

2.同时选中以上两个图形，使用路径查找器的联集，做出如下图。

3.拖动白色小圆圈，做出如下所示的圆角。

4.用圆形工具画出三个小圆点，即完成。

图标三：

刷新

1.用圆形工具画一个圆形，再用矩形工具按照图标1的方法画出两个箭头的角角

2.用剪刀工具把不要的部分删除掉，即完成。

图标四：

购物

1.用矩形工具和圆形工具做出如下图所示的形状

2.使用小白工具将不要的地方删除掉。

2.用圆形工具，做出如下图。

3.使用剪刀工具将不要的部分删除，即完成。

图标五：

喜欢

1.用两个圆和一个等腰三角形拼成如下图所示的形状。

2.使用路径查找器中的联集，做出如下图所示的形状。

3.使用钢笔工具删除不要的锚点，调节两侧杠杆，并调节圆角大小，即完成。

图标六：

设置

1.先画出两个圆。

2.现在圆环顶部画一个圆角矩形。

3.选中顶部圆角矩形后，按R键，出现绿色的中心点，将其拖至圆环中心。

4.按住alt键在圆环绿色中心点的位置单击一下，出现以下弹框。

5.在“旋转”弹框勾选预览，同时将角度改为45°，并点击“复制”按钮。

6.按下ctrl+d,复制6次。

7.将外环和周围8个圆角矩形同时选中，按下路径选择器的联集，出现下图。

8.调节外层拐角处的白色小圆圈，即完成。

其中，“设置”图标的难度系数最大，一定要让绿色的点点在圆环的中心位置上，不然就要跑偏了。

值得注意的是，当我们在设计一整套图标的时候，一定要保证他们的统一性，诸如线条粗细，整体大小，颜色等。