事半功倍：3分钟用AI设计一个UI图标

看过了前面的理论知识和手绘课程，现在我们来试试自己动手来用Adobe illustrator软件(下称AI)，三分钟制作一个手机图标。

有些同学可能了解AI软件是制作矢量图片的软件，而制作图标、logo等需要在不同渠道，不同展示面面积进行缩放的图片，它的特点是放大后图像不会失真。

下面，我们将以摩拜单车的图标为例，带领大家使用AI完整的制作一个栩栩如生的手机图标。

我们的目标是要了解adobe illustrator制作图标的基本操作。首先，我们要设计好图标的底色和样式，然后根据实际的功能，绘制出图标的主体，最后，添加一些阴影和细节，图标看起来更加时尚和美观，完成图标设计并不费事，来跟着下面的指导一步一步去完成吧！

一、背景制作

首先我们开始背景的制作，打开AI软件，我们新建一个文档，点击文件新建。图片大小设置在1024乘1024像素大小就可以，下方的颜色模式使用RGB，分辨率是用72，单击确定。

新建完画板之后，添加一个背景，在左边工具栏中找到矩形，添加至画布。禁用掉描边，接着选择它的填充色，但是选一个橙红色，然后单击确定。接下来设置一个圆角，点击白箭头选中橙红色矩形之后，在属性栏内调整边角数值为180像素。

我们在橙色背景上要画新的图案的时候，会发现用黑箭头去框选，会把这个背景整体移动位置，这时候同时按住command+2，就可以把它锁住了。（Mac端为：command+2；PC端为：Ctrl+2。同理，解锁按键就是command/Ctrl + Alt + 2）

二、主体绘制

1、车轮部分

背景制作完毕之后，开始在中间的部分构建一辆摩拜自行车，先用线条去勾勒轮廓，从自行车轮画开始绘图。

找到圆形，设置为白色，描边粗细设置为12像素，保持比例绘制出一个正圆。但是我们会发现描边的方式，是居中描边，这时候点击描边设置，选择对齐描边的内侧对齐，车轮的内圆就绘制完毕了。

接下来车轮的外圆的制作则需要复制内圆，而粘贴的时候需要注意，原位粘贴要按住command/Ctrl + Shift + v，完全重合。接下来把复制的圆，颜色改为黑色，按之前的步骤把描边方式改为外侧对齐，描边像素加粗为22像素，一个完整的车轮就绘制完毕了。

车轮部分

框选住车轮，按住command/Ctrl + G ，黑白两色车轮就组合为一个组了。调整合适的比例，按住Alt键，复制为两个车轮。单车车轮部分就做好了。

2、车架部分

车架部分

接下来就是单车的车架部分了，选择钢笔工具单击划线，在划线之前也要先设置好描边颜色和描边像素（设置为白色，28像素）。

从车轮的中心点出发，画出单车车架主体，横梁，车把，按住command/Ctrl + 单击空白处，就可以收笔了。

经过车轮的比例和车架主体端点调整，添加部件，我们就得到了一个单车主体的初步框架。

3、车架端角处理

这样的单车图标和摩拜的图标还差得很远。尤其在车架弯折处，锐利的拐角显得特别生硬，这时候需要把它变得圆润一些，就要用到白箭头，框选住车把拐角，设置边角数值为30像素，脚踏板处边角数值设置为50。

下来会发现，拐角部位看上去没那么生硬了，但车架的端点却非常的硬朗刻板，会更方便处理这个圆角。

现在我们选中所有的车架的线，当然，不包括车轮在内。选中车架线之后，找到对象里面的扩展选项，扩展的作用就是把这些线条描边转换成填充的平面来进行下一步处理。

单击确定，这些描边就全部都变成平面向了。接着用白箭头，找到线的端点进行拖拽，柳叶一般的线端就这样完成了，这辆单车基本上就制作完成了。

整体完成

4、信号标识

单车整体基本制作完毕了，现在我们要添加一个无线的信号标识。这个图标虽然有很多种做法，但是有的同学会把它做复杂了。在这我们有一个相对方便的做法供大家参考。

点击直线工具，选择里面的极坐标网格工具，按住Shift画出一个正圆，在画的过程中按上下左右按键能够调整圆内的经纬线。按照相应数值(同心圆分割线:2;径向分割线:3;宽高都为100像素)可作出极坐标网络，增加描边宽度，调整相应大小后得到下图。

极坐标制作信号

现在选择需要极坐标的部分， 把不需要的部分剪切掉。将极坐标整体右键点击选择取消编组直至取消编组选项消失，接着点击橡皮擦工具选项里的剪刀工具，按住command/Ctrl变成黑箭头(松开即可变回剪刀),选中线之间的连接点进行剪切。

接着把不需要的部分删除，留下两条外围弧线，做出相应调整（加粗至10像素，颜色选择黑色，旋转位移至单车握把斜上端，扩展为平面处理边角）

5、光影效果

最后就是单车的阴影，在单车车轮下方位置，画一个椭圆，颜色可以是黑色半透明亦或是用吸管吸取背景色加深色彩，同样可以达到阴影效果。那么现在就有一个问题，如何将阴影图层置于车轮下面呢？按住command/Ctrl + 左中括号（command/Ctrl + Shift + 左中括号为置于最底层），点击致置于车轮下方为止。

光影设计

单车的整体阴影完成了，但是还是略显呆板，空间效果不够明显。希望让它跃然于纸上，可以在单车车身上添加一些轻量化的阴影。接下来以车座为例，在车座下方添加一个透明度为10%的矩形。利用AI软件的一大利器——形状生成器，来处理掉不想要的部分。

用黑箭头选中半透矩形，同时按住Shift点击车座下方支撑车座的白色矩形车架，框选到两个矩形之后启动形状生成器，这时候黑色鼠标所经之处会将矩形独立成一个面，按住alt键单击左右两块半透黑梯形，就可以删掉了。

摩拜图标

同理在车把、车轮、脚踏板位置添加相应阴影，调整透明度至6%，这时候摩拜图标基本就做完了。

三、导出图片

导出图片选择存储为web所用格式，选择PNG-24，这时候圆角空出位置就会变成透明。我们在任意颜色的背景放置图标的时候，圆角位置就会是相应的背景颜色了。

总结

现在这个图标就算是真正做完了。底色和样式绘制出图标背景，根据单车的形态做主题的绘制乃至阴影细节的优化。

这门课程需要的不仅仅是大家对操作的熟悉，更需要的是对整体美感的把握和细节的捕捉，大家可以在闲暇之余找寻一些流行并富有设计美感的APP图标根据步骤进行分步的练习。

互动话题：你工作中有没有遇到过AI图标方面的困难或者心得，欢迎在留言区写下你的想法和观点。

- END -

这是UI设计研究院第4次推送