1. 主页 > 行业资讯 > 设计文章 >

教你手绘20个Apple Watch图标

今天的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个图标,使用了一些基本形状、弯曲效果和一些技巧。我希望你能喜欢遵循这个指南,并发现一些有趣的技术。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/339.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息