AI进阶教程!手把手教你绘制20个Apple Watch的图标 - 优设-UISDC

AI进阶教程!手把手教你绘制20个Apple Watch的图标

2016/06/21 27845评论区

ai-20-apple-watch-icons-1

编者按:今天的AI教程比较考验大家的耐心,但是绘制一套完整的图标和一个图标的收获绝对大不一样,这篇教程提到很多AI的实用技巧,设置图标的齿轮怎么画才方便?活动图标的渐变如何变得有质感?练个手你就知道了!

图标展示:

apple-watch-icons

1. Apple Watch 图标准则

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

如果你对制作Apple Watch图标的更深入的理论有兴趣,我强烈推荐你去看官方的Apple Watch界面准则和规范。

2. 创建时间,邮件,和音乐App图标

第1步

首先打开其中一个图标模版(单击上面的链接即可下载。这个教程中,我们将使用80x80px的图标模版,适用于38mm 手表)。 转到视图>隐藏网格,使网格不可见,但是要确保智能参考线和对齐功能可见。

open the 38 mm 80 px icon template

第2步

让我们创建我们第一个图标,创建一个4×4 px的圆。 双击椭圆工具(L)调用弹出的选项窗口,然后前往对齐面板,使圆在画板的水平和垂直放向上对齐。 用橙色(#FF9506)填充这个圆。

place a 4x4 px even circle in the centre of the template

第 3 步

用矩形工具(M)创造一个2 x 40 px的矩形用作秒针。用相同的橙色填充,然后把它放中心参考线上,如截图显示的一样。

add a second hand with the rectangle tool

你可以通过按住 Alt 键的同时单击圆对齐关键对象和秒针。

align to the key object

第4步

让我们复制秒针,使它变得更短一点然后选择-60度,如下面显示那样放在参考线上。

add the base for the minute hand

现在我们将绘制分针的身体。 制作一个黑色4 x 30 px的矩形,然后通过拉动小圆圈标记使尾端变圆,利用直接选择工具使他们最大化。(在我们这个例子中是2 px的圆角半径)。

第5步

放这个指针在参考线旁边的位置(你可以使它小一点,这样它适合图标底子内部的圆形)

place the hand along the guide line

第6步

创建另一个4 x 20 px尺寸的矩形作为我们的时针。 使其变圆,旋转60度然后放在与分针相反的一变。

create the hour hand

第7步

最后,用椭圆工具(L)创建一个 80 x 80 px 白色的椭圆作为图标的底子,然后放在其他所有图标的下面。 太好了! 我们的第一个图标就绪。让我们转到下一个吧。

create the circle icon base

第8步

现在我们将创建邮件图标。 首先用一个任意颜色,50 x 33 px的矩形制作一个信封。

make the rectangle envelope base

用多边形工具或钢笔工具创建一个有3边的三角形,并且添加2 pt的描边。 对象>扩展使这个三角形变得弯曲。

add a triangle and expand it

第9步

在信封底子的上面添加另一个三角形,用扩展形状使其最下面的角变圆润。 你可以用橡皮擦工具(Shift-E)擦去顶部和底部的矩形,因为我们不需要它们。

add another triangle at the top

用橡皮擦工具(Shift-E)删除顶部较低的三角形,然后在路径查找器中合并这部分三角形。 最后,拷贝底子信封形状(Control-C > Control-F),选择矩形和顶部的形状,然后用路径查找器的交集功能切掉信封外面的部分。

cut off the unneeded shapes with intersect

第10步

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

将信封的颜色转为白色,然后为我们的图标添加一个圆形的底子,用线性渐变从顶部的深蓝色(#2066F0) 到底部的亮蓝色(#1DD4FD) 填充。

finish the mail icon

第11步

我们接下来的图标是音乐App,仅包含一个元素:一个音符标志。 首先创建一个27 x 11 px的矩形,用直接选择工具选中形状左边的锚点,然后向下拉使形状发生偏斜。

form the rectangle top of the note

第12步

用矩形工具 (M)创建2个形状,形成符号的“腿”。

Add details to the note with the rectangles

第13步

用直接选择工具选中下面方块的3个锚点然后使其角圆化。 然后在路径查找器中合并这些形状,并且利用活动角的特点使其变得圆润。

unite the shapes and make the corners rounded

第14步

添加这个符号的第二部分,使总体形状更加光滑圆润。

制作底子,填充从橙色(#FA5D3B)到粉色(#FF2968)线性渐变。

make the overall shape more smooth and add the icon base

3. 世界时钟,秒表,定时器和闹钟图标

第1步

现在我们将转到一套与时间有关的图标。 首先创建一个48 x 48 px的圆,在里面创建一个小圆。 使用路径查找器中的减去顶层功能,创建一个圆环。

form the base with Minus Front function

第2步

在第一个形状中创建一个更小的椭圆环并且添加2个交叉线,居中对齐。

create a ring inside the base of the globe

在这个形状的上面部分添加一个水平线,在效果>变形>弧的帮助下与其混合。 设置水平弯曲值为-35%。

use Arc Warp Effect to bend the line

第3步

在我们球的底部添加另一个弯曲线。

用深橘色(#ff7632)和顶部亮橘色(#ff9408)的线性渐变绘制底子。

添加一个更小的深橘色 (#e45221)圆并且藏在球形形状的后面,给予更多的对比。

make the orange base for the globe icon

第4步

为了下一个图标秒表,我们将使用之前创建的世界时针图标的底子。

从秒表中心制作一个 8 x 8 px的椭圆,与一个 2 x 25 px的矩形对齐作为手表的秒针。

form the second hand of the stopwatch

第5步

利用矩形工具 (M)在我们的秒表的顶部添加次要的细节。 为了使秒表的底部更圆滑,利用活动角并且设置角半径为1.4px。

add minor details and make the button rounded

第6步

让我们转到计时器图标上 —— 它与秒表有着同样的底子。

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

add a triangle on top of the timer icon base

第7步

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

cut out the unneeded part of the timer icon

第8步

最后,旋转这个圆,使它上面的锚点大约向左偏45度。 用直接选择工具(A)拉动锚点,扩大形状。

用点击锚点工具 (Shift-C)转化选中的锚点为角,因此将我们的形状变为手表的指针。

form the second hand of the timer icon

第9步

我们这一组最后图标是闹钟。 它与之前的橘色图标具有相同的底子以及白色的圆环。 闹钟的指针是由矩形工具(M)制作的两个狭窄的条纹形成的。

form the hands of the clock

第10步

让我们利用椭圆工具(L)制作的圆来绘制一个闹钟的上部分,用剪刀工具(C)点击侧锚点的方法,把圆形划分为2个相等的部分。 在闹钟底部放置半圆,然后添加两个小”腿”在底部,完成这个图标。

add details to the top of the alarm

4. 创建天气,相机应用图标

第1步

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

在图标的左边部分添加一个黄色(线性渐变从#ffc505到#fee403)的圆作为太阳。 用两个圆形成云:一个25.5 x 25.5 px 的圆在模版中心,和一个21 x 21 px 的圆在这个图标的右边部分。

make a sun and start forming the cloud for the weather icon

第2步

创建一个43 x 16 px矩形并且使其角有8 px角半径的圆润。 对齐这个矩形和圆形,然后在路径查找器中合并3个形状,形成一个光滑圆润的云。

add the bottom part of the cloud with the rectangle tool

第3步

用白色填充云,降低透明度到90%。

make the cloud white and semi-transparent

第4步

让我们转到照相机图标。 制作一个灰色的底部圆,用底部深灰色 (#dadcdd)到顶部浅灰色 (#dadcdd) 的线性渐变填充,

创建一个深灰色 (#3c3c3c) 圆角矩形形成相机的侧影。

在顶部添加一个小的 30 x 17 px的矩形,然后使其左上的角有7px 圆角半径的圆润。

合并这些形状,然后也使这些形状之间的角变圆。

form the camera base from the rounded rectangle

第9步

在照相机的上端添加一个狭窄的条纹,然后用减去顶层将它减去。

use Minus Front to make a dividing stripe

用9 x 4 px的矩形创建快门图标,然后放在我们模版的中央。 用钢笔工具添加一个箭头来指向快门,设置描边宽度为4 pt,然后在描边面板中使端点和边角圆滑。

Form the shutter icon

第10步

为我们的照相机添加最后的细节:创建一个6 x 6 px 大小的亮黄色(#fac81b)指示灯。 此外,创建一个有4pt 描边宽度的大圆。 如截图显示那样,将这个圆放在照相机右边角底部的位置上。

Add the final details to our camera

第11步

对象>扩展这个大圆,转换它为圆环。 选中圆环和照相机,然后应用减去顶层减去圆环,形成对象-玻璃。 选择相机深灰色的部分并且按下 Control-8转变它们为单独组合形状。

cut out the object-glass in the camera

最后,利用形状生成工具(Shift-M)或路径查找器中的相交功能,切除我们照相机图标外面不需要的部分。

cut off the unneeded parts to finish up with the icon

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

第1步

让我们为电话图标制作一个话筒。 创建一个8 x 40 px的矩形,然后到效果>扭曲>弧,选择27%的垂直弯曲值,弯曲矩形的左边。 在顶部和底部的话筒添加2个17 x 20 px的矩形,然后使它们的角圆润,使形状光滑。 在路径查找器中合并全部话筒的部分。

form the handset base

第2步

通过用删除锚点工具删除不需要的锚点,使听筒左边变得光滑,然后利用活动角使内部变得圆润。

最后,旋转电话45度,并且把它放在图标底部的上边,用浅绿色 (#86fb71)到深绿色 (#0fd51c)的线性渐变填充。

edit the handset outlines

第3步

让我们用之前用过的相同绿色的底子形成短信图标。 制作一个 40 x 40 px的白色圆,然后延伸一点边,使形状压扁到 48 x 40 px。

在白色形状的底部加一个小小的三角形,形成一个言语泡泡。 使三角形下面的角稍微变圆一点。 利用-36%垂直弯曲值的弧弯曲效果,使三角形稍微变为弧形。

form a speech bubble from the ellipse and triangle

这里显示了完整图标的样子。

message icon

第4步

我们接下来的图标是远程应用图标,这也是一个包含单个元素的非常简单的图标。

首先,形成一个渐变的底子(从深蓝色#2066f0的底部到浅蓝色#1dd4fd的顶部)。 添加5.3pt宽的白色描边,然后从内部对齐。 在我们的图标的中心放置一个30 x 30 px白色三角形。

form the base and triangle shape

第5步

最后,使三角形的角有2.5角半径。 太好了! 这个图标已经到位,所以让我们转到下一个。

make the corners of the triangle rounded

6. 创建外出,设置和照片App图标

第1步

外出图标描绘了一个风格化的跑步者的身影。

用顶部黄绿色(#c2ec38)和底部绿色(#a3fc3f) 的线性渐变来填充,创建一个明亮的底子。

用钢笔工具(P)创建分离的线作为弯曲胳膊,腿,和躯干,添加3 pt 描边宽度以及圆形的端点和边角。

增加躯干的描边宽度的厚度到6 pt,然后添加一个9 x 9 px圆形作为头部。

create separate lines with the pen tool

第2步

对象>扩展线条,然后用黑色填充这个形状。

fill the shapes with black color

第3步

设置的图标包含一个齿轮。 绘制一个48 x 48 px的圆,切掉中间部分形,制成了一个环。

添加3个有3 pt 描边宽度线条,在图标模版的中心相互连接。

form the cog base

第4步

现在我们需要添加波纹到我们的齿轨。

制作一个 5 x 9 px的矩形,然后使上端稍微窄一点。 使上面的角有1.6px角半径的圆润。 放这个波纹在齿轨的顶部和底部。

用旋转工具(R)选中全部波纹,双击旋转工具(R)调用弹出选项窗口,然后设置旋转值为360/18。 这种方式, Adobe Illustrator将会自动计算出18个形状的合适值。 按下拷贝按钮。

add the ripples to our cog

第5步

按下Control-D多次重复我们上一个动作,添加更多波纹。 为了完成这个图标,选择所有波纹,转换颜色为白色,然后将所有的波纹一起旋转-10度。

rotate the objects and fill them with white

第6步

我们接下来的图标是一个风格化的照片App。 首先创建一个20 x30 px且具有10 px角半径的圆角矩形,这样可以作为花瓣。

复制花瓣,然后放其拷贝在图标模版的底部,如下面截图所示。

选择全部花瓣用旋转工具(R)制作8份花瓣拷贝,应用 360/8角值,然后按下拷贝按钮。

forming the petal from a rectangle

第7步

按下 Control-D数次形成八瓣花。 转换花瓣为正片叠底混合模式且降低透明度到80%。 让我们应用喜爱的颜色到每片花瓣,从中间最上的开始顺时针移动:橙色 (#fa9700),黄色(#f0e22c),绿色(#b5d558),绿松石色 (#6ec19d),蓝色(#71b5e1),紫罗兰色(#8f60c3),粉色 (#d782a4)和红色(#ff2c2c)。

将花放在白色的图标底板上。

from the 8 petal flower and color it

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

第1步

股票图标包含一个极简图。 先创建一个深色(#3f3f3f)的图标底板,然后用直线工具制作一个浅蓝色(#02a6f5)3pt大小的竖线形成的图。 把它放在模版的中间,

添加一个蓝色的小圆圈并且应用一个深灰色(#3f3f3f) 1pt 的描边,为了使它在视觉上分隔开来。 添加另外4条线在这个图标的两边,用浅灰色(#555555)的3pt 描边 。

对象>扩展线条,并且切除图标底部不需要的部分,用形状生成工具(Shift-M)或路径查找器都可以。

form the lines of the diagram

第2步

用钢笔工具(P)画一个有一个1.5pt 描边的锯齿状线条,添加到图上以结束这个图标的制作。

add a zigzagged line for the graphic

第3步

这个活动图标包含3个彩色的渐变圆环。 为了形成这样一个圆环,首先需要制作一个混合组。

制作2个相同的6 x 7 px的矩形,其中一个粉色(#ff2b91)一个红色(#f1281e)。选中矩形然后找到对象>混合>建立。

你可以在对象>混合>混合选项编辑这个设置,应用顺滑颜色制作一个漂亮的无缝混合。 拖动创建的混合组到笔刷面板,然后创建一个新的默认设置的艺术画笔。

create the art brush from the blend group

第4步

创建一个深灰色 (#393839)的圆作为我们图标的底子,然后在它的顶部放置另一个圆,用我们创建的画笔作为描边。 调整圆的尺寸,以便它符合图标模版的外部边缘。 设置描边宽度为1 pt,然后选择对象>扩展外观,将笔刷描边变为形状。 如果需要,用镜像工具(O)旋转或水平地翻动形状,以便我们有一个从左边粉红到右边红色的圆环。

创建一个粉红色 (#ff2b91)的小圆环,放在彩色圆环中间顶部的区域,使它符合形状的高度,用来隐藏两个颜色之间的联系。

apply the brush and expand the shape

第5步

现在我们需要添加一个微妙的阴影。 你可能会注意到,这个环在我们扩展它后被分为几个部分。 这正是我们所需要的!

选择圆环顶部红色的片段,拷贝它然后粘贴在前面(Control-C > Control-F)。 在拷贝层上添加深红色 (#a11b17)到白色的线性渐变,然后转换为正片叠底的混合模式,因此渐变使白色的末端不可见。

add shadow to the ring

第6步

用相同的技术在第一个形状的里面创建两个更多彩的圆环。 创建艺术画笔从黄色(#d8ff06)和绿色(#86e402)的混合组和一个从绿松石色 (#06ffaa) 到蓝色 (#06e3f9)的混合组。 添加小圆和应用柔和的阴影来完成这个图标的制作。

create more art brushes from blends

第7步

接下来是存折图标,包含4个小小的象形图:一个信用卡,一个飞机,一个摄像机和一个咖啡杯。 这些象形图都是简约的,并且都由基本的形状在路径查找器和活动角特征的帮助下制成的。 你可以从下面一步步的截图看到每个象形图标是怎样连接而成的。

create pictograms from basic shapes

第8步

这个图标的底子由4个不同颜色的条纹构成:红色(#ff4e46),蓝色 (#439eca),绿色 (#3dca36)和橙色(#ffa02b),每个高度都是 20 px。 在形状生成器工具(Shift-M)的帮助下创建一个默认的80×80px 图标的圆形底子,通过选择所有对象,同时按住Alt键,然后单击不需要的部分,删除不需要的条纹。

create a striped icon base

第9步

创建一个3.5 x 3.5 px的圆,与橙色条纹的顶部相交,拷贝的同时按住Alt和Shift键拉动形状。 按住Control-D,以形成圆的更多的复本。 然后,选中所有复本并且通过按Control-8转化为组合路径。 选中圆形和橙色的条纹,应用减去顶层功能切割出洞。

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

add perforation to the orange stripe and place the pictograms

我们一套图标最后一个是日历图标 它是由Helvetica Neue 字体制成的文字和一个简单的白色图标底子构成。

calendar icon with font

很好! Apple Watch主屏幕图标已经完成!我们已经创建了总计20个组屏幕应用的图标,使用了一些基本形状,弯曲效果和一些技巧。 希望你能享受跟随这个指南的过程,并且发现一些有趣的技术。

Final result

「优设字体设计好文最新集锦」

灰昼大大的字体推荐:
《灰昼的字体库!10款常用的经典基础英文字体推荐(已打包)》

字体排印指南:
《新手福利!一份详尽全面的UI设计字体与排版指南》

谷歌免费字体网站:
《Google Fonts 网站全新设计,免费下载八百种英文字体!》

原文地址:design.tutsplus

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ai-20-apple-watch-icons

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里