如何用AI制作线性图标
前天在手机里看了张碧晨的极光演唱会,感觉小姐姐唱歌好听,长的又好看,会说好几种国家的语言,还会弹钢琴。这样优秀又努力的女孩子真是好迷人。所以啊,哪个行业不是如此呢,一定要狠狠的努力,才会成为自己想要变成的样子啊。
第一次正儿八经也教程,写给自己看,总结给自己看,大神轻拍(先立个flag吧,一周最少写一篇)
虽然说AI是矢量绘图软件,PS是位图软件,但是PS同样也可以做矢量图形。当我们切图给前端小姐姐的时候,我们输出的是png。png是一种位图格式,所以放大缩小的时候还是会有一定程度上的失真。所以怎样解决这个问题呢,目前,很多公司都已经不切png了,而是输出一种叫svg格式的矢量图,我就很好奇前端是怎样用css来改变svg的样式的,所以我决定这周来好好研究下。 (我好像说跑题了哈,马上回来,嘿嘿~)
AI做图标的好处还是挺大的,就拿我这个长年都是cpu占用率高达90%的电脑来说,用AI做图标算是个福音了。打个比方,如果我要做40来个图标,用PS做的话,在电脑卡死的同时文件大小也得有70多M,如果用AI做的话,就会很流畅,文件大小可能就20M左右。操作起来也是比较方便的(个人觉得)。
以下是正式内容
![](https://img.haomeiwen.com/i4358656/1377177908f9c563.png)
图标一:
![](https://img.haomeiwen.com/i4358656/f3d796ed84b5900c.png)
在AI中,对应的布尔运算叫做“路径查找器”,
![](https://img.haomeiwen.com/i4358656/be3db6807d26dd1b.png)
1.用四个圆和一个矩形拼成云彩的形状
![](https://img.haomeiwen.com/i4358656/2d0f979de433a3ec.png)
2.选中路径查找器中的联集后,用钢笔工具去掉多余的锚点。
![](https://img.haomeiwen.com/i4358656/31c747a0f57f7387.png)
3.用矩形工具画一个矩形,拖动白色圆圈做出如下图所示的圆角矩形
![](https://img.haomeiwen.com/i4358656/61064aa0fc4a38b9.png)
4.使用小白工具把多余的锚点都删掉,如下图
![](https://img.haomeiwen.com/i4358656/fba97b3eb36af316.png)
5.使用剪刀工具将云彩底部不要的部分都剪掉。
![](https://img.haomeiwen.com/i4358656/66837e7d52a2595b.png)
6.将以上图形拼成如下图所示,即完成。
![](https://img.haomeiwen.com/i4358656/20fa3357d40504ce.png)
图标二
![](https://img.haomeiwen.com/i4358656/7109ce63c74388b8.png)
1.画一个矩形和直角三角形。
![](https://img.haomeiwen.com/i4358656/f894528e4f4a062e.png)
2.同时选中以上两个图形,使用路径查找器的联集,做出如下图。
![](https://img.haomeiwen.com/i4358656/c9ba15e97872043a.png)
3.拖动白色小圆圈,做出如下所示的圆角。
![](https://img.haomeiwen.com/i4358656/e7bc3ffa65da90c9.png)
4.用圆形工具画出三个小圆点,即完成。
![](https://img.haomeiwen.com/i4358656/939f3b941845ae83.png)
图标三:
![](https://img.haomeiwen.com/i4358656/be4c66fa8db29ddd.png)
1.用圆形工具画一个圆形,再用矩形工具按照图标1的方法画出两个箭头的角角
![](https://img.haomeiwen.com/i4358656/24b54b7dfd0cfa3f.png)
2.用剪刀工具把不要的部分删除掉,即完成。
![](https://img.haomeiwen.com/i4358656/3e93766cc574e8cc.png)
图标四:
![](https://img.haomeiwen.com/i4358656/9a88dfe563af4fa3.png)
1.用矩形工具和圆形工具做出如下图所示的形状
![](https://img.haomeiwen.com/i4358656/32b36bfe5208867e.png)
2.使用小白工具将不要的地方删除掉。
![](https://img.haomeiwen.com/i4358656/799c19b40c379e91.png)
2.用圆形工具,做出如下图。
![](https://img.haomeiwen.com/i4358656/aac01a51fad9d4e4.png)
3.使用剪刀工具将不要的部分删除,即完成。
![](https://img.haomeiwen.com/i4358656/b92de892cb5390ec.png)
图标五:
![](https://img.haomeiwen.com/i4358656/358502fb5c6cd7cd.png)
1.用两个圆和一个等腰三角形拼成如下图所示的形状。
![](https://img.haomeiwen.com/i4358656/0a0a64cdb1fa623e.png)
2.使用路径查找器中的联集,做出如下图所示的形状。
![](https://img.haomeiwen.com/i4358656/7bd96e934b23af4d.png)
3.使用钢笔工具删除不要的锚点,调节两侧杠杆,并调节圆角大小,即完成。
![](https://img.haomeiwen.com/i4358656/9942e5f7f5b2577b.png)
图标六:
![](https://img.haomeiwen.com/i4358656/aa1f1b4d8edf0a95.png)
1.先画出两个圆。
![](https://img.haomeiwen.com/i4358656/bd2439c47880fd2b.png)
2.现在圆环顶部画一个圆角矩形。
![](https://img.haomeiwen.com/i4358656/e38164b58ad8d4c7.png)
3.选中顶部圆角矩形后,按R键,出现绿色的中心点,将其拖至圆环中心。
![](https://img.haomeiwen.com/i4358656/ba40cebae88db257.png)
4.按住alt键在圆环绿色中心点的位置单击一下,出现以下弹框。
![](https://img.haomeiwen.com/i4358656/a5ca53f41182aac0.png)
5.在“旋转”弹框勾选预览,同时将角度改为45°,并点击“复制”按钮。
![](https://img.haomeiwen.com/i4358656/288036862e383ec4.png)
6.按下ctrl+d,复制6次。
![](https://img.haomeiwen.com/i4358656/73e7fd7e7a5bcfed.png)
7.将外环和周围8个圆角矩形同时选中,按下路径选择器的联集,出现下图。
![](https://img.haomeiwen.com/i4358656/16dc03e725d1e06f.png)
8.调节外层拐角处的白色小圆圈,即完成。
![](https://img.haomeiwen.com/i4358656/76451f0586a7e66f.png)
其中,“设置”图标的难度系数最大,一定要让绿色的点点在圆环的中心位置上,不然就要跑偏了。
值得注意的是,当我们在设计一整套图标的时候,一定要保证他们的统一性,诸如线条粗细,整体大小,颜色等。