今天的AI教程考验的是大家的耐心，但是画一套完整的图标的收获和画一个图标是绝对不一样的。本教程提到了很多AI的实用技巧。设置图标的档位怎么画比较方便？活动图标的渐变如何变得有质感？练手就知道了！

图标显示:

1.苹果手表图标指南

Apple Watch的图标被设计成与其他iOS图标非常相似的新潮扁平风格，有一个引人注目的特定特征:图标是圆形的。你可以下载一个非常漂亮的矢量图标模板，让你的工作更容易。

如果你对制作Apple Watch图标的更深层次的理论感兴趣，我强烈建议你去官方的Apple Watch界面指南和规范。

2.创建时间、邮件和音乐应用程序图标

步骤1

首先打开一个图标模板(点击上面的链接下载。在本教程中，我们将使用80x80px图标模板，它适用于38毫米手表。转到视图>:隐藏网格使其不可见，但确保智能参考线和对齐功能可见。

步骤2

让我们创建我们的第一个图标，并创建一个4×4像素的圆圈。双击椭圆工具(L)调用弹出选项窗口，然后转到对齐面板，在画板上水平和垂直对齐圆。用橙色(#FF9506)填充圆圈。

步骤3

使用矩形工具(m)为秒针创建一个2 x 40像素的矩形。用同样的橙色填充，然后放在中心参考线上，如截图所示。

您可以通过按住Alt键同时点按圆圈来将关键点对象与秒针对齐。

步骤4

让我们复制秒针使其变短，然后选择-60度，并将其放置在参考线上，如下所示。

现在我们将绘制分针的主体。做一个黑色4 x 30 px的矩形，然后拉小圆圈标记把尾端圆化，用直接选择工具最大化。(在我们的例子中，它是2 px的半径)。

步骤5

将此指针放在参考线旁边(您可以将其变小，使其适合图标底部的圆圈)

步骤6

创建另一个4 x 20像素的矩形作为我们的时针。做成圆形，旋转60度，然后换成分针对面的样子。

步骤7

最后，使用椭圆工具(L)创建一个80 x 80 px的白色椭圆作为图标的基础，然后将其放在所有其他图标下。太棒了！我们的第一个图标准备好了。让我们继续下一个。

步骤8

现在我们将创建一个邮件图标。先做一个长方形50 x 33 px任意颜色的信封。

使用多边形工具或钢笔工具创建一个有3条边的三角形，并添加2磅笔画。对象>:扩展使三角形弯曲。

步骤9

在信封底部添加另一个三角形，并用一个扩展的形状围绕底部的角。你可以使用橡皮擦工具(Shift-E)来擦除顶部和底部的矩形，因为我们不需要它们。

使用橡皮擦工具(Shift-E)删除顶部较低的三角形，然后在路径查找器中合并三角形的这一部分。最后复制基础包络形状(control-c >: Control-F)，选择矩形和顶部的形状，然后利用寻路器的相交功能，将包络的外部切掉。

步骤10

再次选择矩形和条纹，然后应用路径查找器的减去顶层功能来切断这些线。

把信封的颜色调成白色，然后给我们的图标加一个圆形背景，用从顶部深蓝色(#2066F0)到底部亮蓝(#1DD4FD)的线性渐变填充。

步骤11

我们的下一个图标是音乐应用，它只包含一个元素:音符符号。首先，创建一个27 x 11 px的矩形，使用直接选择工具选择形状左侧的锚点，然后下拉以扭曲形状。

步骤12

使用矩形工具(m)创建两个形状来形成符号的“腿”。

步骤13

使用直接选择工具选择下面框中的三个锚点，并圆角化它们的角。然后，这些形状在路径查找器中合并，并利用活动角度的特征进行圆角。

步骤14

添加这个符号的第二部分，使整体形状更加平滑和圆润。

制作一个背景，用从橙色(#FA5D3B)到粉色(#FF2968)的线性渐变填充。

3.世界时钟、秒表、计时器和闹钟图标

步骤1

现在我们将转向一组与时间相关的图标。首先创建一个48 x 48 px的圆，在里面创建一个小圆。使用路径查找器中的减去顶层函数创建一个圆。

步骤2

在第一个形状中创建一个较小的椭圆环，并添加两个十字准线，它们在中心对齐。

在这个形状的上部加一条水平线，效果里加一条水平线>:变形>:借助弧线。将水平弯曲值设置为-35%。

步骤3

在我们球的底部再加一条弯线。

用深橙色(#ff7632)和顶部亮橙色(#ff9408)的线性渐变绘制背景。

添加一个较小的深橙色(#e45221)圆圈，并将其隐藏在球形后面，以提供更多的对比度。

步骤4

对于下一个图标秒表，我们将使用之前创建的世界时针图标的基础。

从秒表的中心画一个8 x 8像素的椭圆，并将其与一个2 x 25像素的矩形对齐，作为手表的秒针。

步骤5

使用矩形工具(m)在我们的秒表顶部添加次要细节。为了使秒表底部更平滑，请使用可移动角度，并将角度半径设置为1.4px。

步骤6

让我们转向计时器图标——它与秒表有着相同的基础。

使用矩形工具(m)在环的顶部中心创建一个2.5 x 13像素的条纹。然后用多边形工具设置边数为3，或者用钢笔工具(P)画一个三角形。如下图所示放置。

步骤7

选择基本的白色圆和三角形，然后用减去底层的功能减去圆的左边部分。在外部图标的中心添加一个6 x 6 px的圆圈。

步骤8

最后，旋转圆，使其上的锚点向左45度。使用直接选择工具(a)拉锚点并放大形状。

使用点击锚点工具(Shift-C)将选定的锚点转换成一个角度，从而将我们的形状更改为手表的指针。

步骤9

我们组最后一个图标是闹钟。它的背景和白色圆圈与之前的橙色图标相同。闹钟的指针是由一个长方形的工具(M)做成的两条窄条纹组成的。

步骤10

我们用椭圆工具(L)做的圆画一个闹钟的上半部分，用剪刀工具(C)点击侧锚点，把圆分成两等份。在闹钟底部放一个半圆，然后在底部加两个小“腿”，完成这个图标。

4.创建天气、相机应用程序图标

步骤1

用从深蓝色(#2066f0)顶部到浅蓝色(#1dd4fd)底部的线性渐变填充基本日空形状。

在图标的左侧添加一个黄色圆圈(从#ffc505到#fee403的线性渐变)作为太阳。用两个圆组成一个云:一个25.5 x 25.5 px的圆在模板的中心，一个21 x 21 px的圆在这个图标的右边。

步骤2

创建一个43 x 16像素的矩形，并以8像素的角半径圆角。将矩形与圆形对齐，然后在路径查找器中合并三个形状，形成平滑的圆形云。

步骤3

用白色填充云，并将透明度降低到90%。

步骤4

我们来看看相机图标。制作一个灰色的底部圆圈，用从底部深灰色(#dadcdd)到顶部浅灰色(#dadcdd)的线性渐变填充它。

创建一个深灰色(#3c3c3c)的圆角矩形，以形成相机的轮廓。

在顶部添加一个30 x 17px的小矩形，然后将其左上角做成圆角，圆角半径为7px。

将这些形状合并，然后也将它们之间的角圆化。

步骤9

在相机顶部加一条窄条纹，然后减去顶层再减去。

创建一个9 x 4像素矩形的快门图标，并把它放在我们模板的中心。使用钢笔工具添加一个指向快门的箭头，将笔画宽度设置为4磅，然后在笔画面板中平滑端点和角。

步骤10

为我们的相机添加最后的细节:创建一个大小为6 x 6像素的亮黄色(#fac81b)指示灯。另外，创建一个4pt笔画宽度的大圆。如截图所示，将圆圈放在相机右下角。

步骤11

对象>:展开大圆，变换成圆环。选择环和相机，然后应用顶层减去环，形成物体玻璃。选择相机的深灰色部分，然后按下Control-8将它们转换为单独的组合形状。

最后，利用形状生成工具(Shift-M)或路径查找器的相交功能，我们将相机图标外不必要的部分切掉。

5.制作电话、短信和远程应用程序图标

步骤1

让我们为手机图标制作一个麦克风。创建一个8 x 40 px的矩形，然后转到效果>:扭曲>:圆弧，选择27%的垂直弯曲值，弯曲矩形的左侧。在顶部和底部麦克风上添加两个17 x 20 px的矩形，然后将它们的角圆化，使形状平滑。在寻路器中组合所有麦克风的部分。

步骤2

通过使用删除锚点工具删除不必要的锚点，手机的左侧变得平滑，然后使用活动角度使内部变圆。

最后，将手机旋转45度，放在图标底部的顶部，用从浅绿色(#86fb71)到深绿色(#0fd51c)的线性渐变填充。

步骤3

让我们使用与以前相同的绿色背景来形成短信图标。做一个40 x 40 px的白圈，然后延伸一点边缘把形状展平到48 x 40 px。

在白色形状的底部添加一个小三角形，形成一个语音气泡。把三角形下面的角弄圆一点。利用-36%垂直弯曲值的弧形弯曲效果，使三角形略呈弧形。

下面是完整图标的样子。

步骤4

我们的下一个图标是远程应用程序图标，它也是一个非常简单的带有单个元素的图标。

首先形成渐变背景(从深蓝色#2066f0的底部到浅蓝色# 1dd4fd的顶部)。添加一个5.3磅宽的白色线条，并从内部对齐。在我们的图标中心放置一个30 x 30像素的白色三角形。

步骤5

最后，使三角形的角半径为2.5。太棒了！这个图标已经就位了，我们来看下一个。

6.创建输出、设置和照片应用程序图标

步骤1

图标描绘了一个风格化的跑步者。

用顶部黄绿色(#c2ec38)和底部绿色(#a3fc3f)的线性渐变填充它，以创建明亮的背景。

使用钢笔工具(p)创建分开的线条，如弯曲的手臂、腿和躯干，并添加3磅的笔画宽度以及圆的端点和角。

把树干笔画宽度的粗细增加到6 pt，再加一个9 x 9 px的圆作为头部。

步骤2

对象>:扩展线条并用黑色填充形状。

步骤3

设置图标包含一个齿轮。画一个48 x 48 px的圆，切掉中间部分，做一个圈。

添加3条3 pt笔画宽度的线条，在图标模板中心互相连接。

步骤4

现在我们需要在机架上添加波纹。

做一个5 x 9 px的长方形，然后把上端稍微窄一点。将上角做成圆角，圆角半径为1.6px。将此波纹放在机架的顶部和底部。

用旋转工具(r)选择所有波纹，双击旋转工具(r)调出选项窗口，然后将旋转值设置为360/18。这样，Adobe Illustrator将自动为18个形状计算适当的值。按下复印按钮。

步骤5

按几次Control-D重复我们最后的动作，增加更多涟漪。要完成此图标，请选择所有波纹，将颜色改为白色，然后将所有波纹一起旋转-10度。

步骤6

我们的下一个图标是一个风格化的照片应用程序。首先创建一个圆角半径为10 px的20 x30 px圆角矩形，可以作为花瓣使用。

复制花瓣放在图标模板底部，如下图所示。

选择所有花瓣，用旋转工具(R)复制8个花瓣，应用360/8角度值，然后按复制按钮。

步骤7

按几次Control-D，形成八片花瓣。将花瓣转换为正底部混合模式，并将透明度降低到80%。让我们将我们最喜欢的颜色应用到每个花瓣上，并从中间的顶部顺时针移动:橙色(#fa9700)、黄色(#f0e22c)、绿色(#b5d558)、绿松石(#6ec19d)、蓝色(#71b5e1)、紫色(#8f60c3)、粉色(#。

把花放在白色图标基板上。

7.股票、活动、存折和日历图标

步骤1

股票图标包含一个最小图表。首先创建一个深色(#3f3f3f)图标基板，然后用直线工具做一个浅蓝色(#02a6f5)3pt垂直线。放在模板中间，

添加一个蓝色小圆圈，并涂上一笔深灰色(#3f3f3f) 1pt，以直观地将其分开。在这个图标的两边再加四行，用浅灰色(#555555) 3pt笔画。

对象>:通过使用形状生成工具(Shift-M)或路径查找器，扩展线条并切断图标底部不必要的部分。

步骤2

使用钢笔工具(p)绘制一条1.5磅的锯齿线，并将其添加到绘图中以结束该图标的制作。

步骤3

此活动图标包含三个彩色渐变环。为了形成这样一个环，首先要做一个混合群。

做两个相同的6 x 7 px的矩形，一个是粉色(#ff2b91)，一个是红色(#f1281e)。选择矩形并找到对象>:混合>:建立。

您可以单击对象>:混合>:混合选项编辑此设置并应用平滑的颜色来创建美丽的无缝混合。将创建的混合组拖到画笔面板，然后使用默认设置创建新的艺术画笔。

步骤4

创建一个深灰色的圆圈(#393839)作为我们的图标的基础，然后在它上面放置另一个圆圈，并使用我们创建的画笔作为笔画。调整圆的大小，使其符合图标模板的外边缘。将笔画宽度设置为1磅，然后选择对象>:扩展外观并将画笔笔画更改为形状。如有必要，使用镜像工具(O)水平旋转或翻转形状，这样我们就有了一个从左边粉色到右边红色的圆。

创建一个粉红色的小圆环(#ff2b91)，并将其放置在彩色圆环的中间顶部区域，使其符合形状的高度，从而隐藏两种颜色之间的联系。

步骤5

现在我们需要添加一个微妙的阴影。您可能会注意到，在我们扩展后，这个环被分成了几个部分。这正是我们所需要的！

选择戒指顶部的红色夹子，复制并粘贴在前面(控制-c >:控制-F).在复制层上添加一个从深红色(#a11b17)到白色的线性渐变，然后切换到正片堆叠底部的混合模式，这样渐变就使白色端不可见。

步骤6

使用相同的技术在第一个形状内创建两个更多颜色的环。创建一个由黄色(#d8ff06)和绿色(#86e402)组成的艺术画笔混合组，以及一个由绿松石(#06ffaa)到蓝色(#06e3f9)组成的混合组。添加一个小圆圈，并应用一个软阴影来制作这个图标。

步骤7

接下来是存折图标，它包含四个小图标:信用卡、飞机、相机和咖啡杯。这些象形图很简单，是在寻路器和主动角度功能的帮助下由基本形状制成的。您可以从下面的分步截图中看到每个象形图标是如何连接的。

步骤8

这个图标的基础由四个不同颜色的条纹组成:红色(#ff4e46)、蓝色(#439eca)、绿色(#3dca36)和橙色(#ffa02b)，每个条纹的高度为20像素。借助形状生成器工具(Shift-M)，创建一个默认的80×80px图标的圆底，选中所有对象，同时按住Alt键，然后点击不需要的部分，删除不需要的条纹。

步骤9

创建一个与橙色条纹顶部相交的3.5 x 3.5像素的圆，并在复制时按住Alt和Shift键拖动形状。按住Control-D可以形成更多的圆形副本。然后，选择所有副本，并通过按下Control-8将它们转换为组合路径。选择圆形和橙色条纹，通过减去顶层功能来挖洞。

最后，将我们之前创建的象形图放在图标的中心，并对齐它们。

我们设置的最后一个图标是日历图标，它由Helvetica新字体和一个简单的白色图标组成。

非常好！Apple Watch主屏幕图标已完成！我们已经为群组屏幕应用程序创建了总共20个图标，使用了一些基本形状、弯曲效果和一些技巧。我希望你能喜欢遵循这个指南，并发现一些有趣的技术。