AI進(jìn)階教程！手把手教你繪制20個(gè)Apple Watch的圖標(biāo)

編者按：今天的AI教程比較考驗(yàn)大家的耐心，但是繪制一套完整的圖標(biāo)和一個(gè)圖標(biāo)的收獲絕對(duì)大不一樣，這篇教程提到很多AI的實(shí)用技巧，設(shè)置圖標(biāo)的齒輪怎么畫才方便？活動(dòng)圖標(biāo)的漸變?nèi)绾巫兊糜匈|(zhì)感？練個(gè)手你就知道了！

圖標(biāo)展示：

1. Apple Watch 圖標(biāo)準(zhǔn)則

Apple Watch 的圖標(biāo)被設(shè)計(jì)成與其他iOS圖標(biāo)非常相似的新潮的扁平化風(fēng)格，一個(gè)引人注目的特定特征：圖標(biāo)是圓形的。 你可以下載一個(gè)非常漂亮的矢量圖標(biāo)模版，讓你工作變得更容易。

如果你對(duì)制作Apple Watch圖標(biāo)的更深入的理論有興趣，我強(qiáng)烈推薦你去看官方的Apple Watch界面準(zhǔn)則和規(guī)范。

2. 創(chuàng)建時(shí)間，郵件，和音樂App圖標(biāo)

第1步

首先打開其中一個(gè)圖標(biāo)模版（單擊上面的鏈接即可下載。這個(gè)教程中，我們將使用80x80px的圖標(biāo)模版，適用于38mm 手表）。 轉(zhuǎn)到視圖>隱藏網(wǎng)格，使網(wǎng)格不可見，但是要確保智能參考線和對(duì)齊功能可見。

第2步

讓我們創(chuàng)建我們第一個(gè)圖標(biāo)，創(chuàng)建一個(gè)4x4 px的圓。 雙擊橢圓工具（L）調(diào)用彈出的選項(xiàng)窗口，然后前往對(duì)齊面板，使圓在畫板的水平和垂直放向上對(duì)齊。 用橙色（#FF9506）填充這個(gè)圓。

第 3 步

用矩形工具（M）創(chuàng)造一個(gè)2 x 40 px的矩形用作秒針。用相同的橙色填充，然后把它放中心參考線上，如截圖顯示的一樣。

你可以通過按住 Alt 鍵的同時(shí)單擊圓對(duì)齊關(guān)鍵對(duì)象和秒針。

第4步

讓我們復(fù)制秒針，使它變得更短一點(diǎn)然后選擇-60度，如下面顯示那樣放在參考線上。

現(xiàn)在我們將繪制分針的身體。 制作一個(gè)黑色4 x 30 px的矩形，然后通過拉動(dòng)小圓圈標(biāo)記使尾端變圓，利用直接選擇工具使他們最大化。（在我們這個(gè)例子中是2 px的圓角半徑）。

第5步

放這個(gè)指針在參考線旁邊的位置（你可以使它小一點(diǎn)，這樣它適合圖標(biāo)底子內(nèi)部的圓形）

第6步

創(chuàng)建另一個(gè)4 x 20 px尺寸的矩形作為我們的時(shí)針。 使其變圓，旋轉(zhuǎn)60度然后放在與分針相反的一變。

第7步

最后，用橢圓工具（L）創(chuàng)建一個(gè) 80 x 80 px 白色的橢圓作為圖標(biāo)的底子，然后放在其他所有圖標(biāo)的下面。 太好了！ 我們的第一個(gè)圖標(biāo)就緒。讓我們轉(zhuǎn)到下一個(gè)吧。

第8步

現(xiàn)在我們將創(chuàng)建郵件圖標(biāo)。 首先用一個(gè)任意顏色，50 x 33 px的矩形制作一個(gè)信封。

用多邊形工具或鋼筆工具創(chuàng)建一個(gè)有3邊的三角形，并且添加2 pt的描邊。 對(duì)象>擴(kuò)展使這個(gè)三角形變得彎曲。

第9步

在信封底子的上面添加另一個(gè)三角形，用擴(kuò)展形狀使其最下面的角變圓潤(rùn)。 你可以用橡皮擦工具（Shift-E）擦去頂部和底部的矩形，因?yàn)槲覀儾恍枰鼈儭?/p>

用橡皮擦工具（Shift-E）刪除頂部較低的三角形，然后在路徑查找器中合并這部分三角形。 最后，拷貝底子信封形狀（Control-C > Control-F），選擇矩形和頂部的形狀，然后用路徑查找器的交集功能切掉信封外面的部分。

第10步

再次選擇矩形和條紋，然后應(yīng)用路徑查找器的減去頂層功能切除這些線。

將信封的顏色轉(zhuǎn)為白色，然后為我們的圖標(biāo)添加一個(gè)圓形的底子，用線性漸變從頂部的深藍(lán)色（#2066F0） 到底部的亮藍(lán)色（#1DD4FD） 填充。

第11步

我們接下來的圖標(biāo)是音樂App，僅包含一個(gè)元素：一個(gè)音符標(biāo)志。 首先創(chuàng)建一個(gè)27 x 11 px的矩形，用直接選擇工具選中形狀左邊的錨點(diǎn)，然后向下拉使形狀發(fā)生偏斜。

第12步

用矩形工具 （M）創(chuàng)建2個(gè)形狀，形成符號(hào)的“腿”。

第13步

用直接選擇工具選中下面方塊的3個(gè)錨點(diǎn)然后使其角圓化。 然后在路徑查找器中合并這些形狀，并且利用活動(dòng)角的特點(diǎn)使其變得圓潤(rùn)。

第14步

添加這個(gè)符號(hào)的第二部分，使總體形狀更加光滑圓潤(rùn)。

制作底子，填充從橙色（#FA5D3B）到粉色（#FF2968）線性漸變。

3. 世界時(shí)鐘，秒表，定時(shí)器和鬧鐘圖標(biāo)

第1步

現(xiàn)在我們將轉(zhuǎn)到一套與時(shí)間有關(guān)的圖標(biāo)。 首先創(chuàng)建一個(gè)48 x 48 px的圓，在里面創(chuàng)建一個(gè)小圓。 使用路徑查找器中的減去頂層功能，創(chuàng)建一個(gè)圓環(huán)。

第2步

在第一個(gè)形狀中創(chuàng)建一個(gè)更小的橢圓環(huán)并且添加2個(gè)交叉線，居中對(duì)齊。

在這個(gè)形狀的上面部分添加一個(gè)水平線，在效果>變形>弧的幫助下與其混合。 設(shè)置水平彎曲值為-35%。

第3步

在我們球的底部添加另一個(gè)彎曲線。

用深橘色（#ff7632）和頂部亮橘色（#ff9408）的線性漸變繪制底子。

添加一個(gè)更小的深橘色 （#e45221）圓并且藏在球形形狀的后面，給予更多的對(duì)比。

第4步

為了下一個(gè)圖標(biāo)秒表，我們將使用之前創(chuàng)建的世界時(shí)針圖標(biāo)的底子。

從秒表中心制作一個(gè) 8 x 8 px的橢圓，與一個(gè) 2 x 25 px的矩形對(duì)齊作為手表的秒針。

第5步

利用矩形工具 （M）在我們的秒表的頂部添加次要的細(xì)節(jié)。 為了使秒表的底部更圓滑，利用活動(dòng)角并且設(shè)置角半徑為1.4px。

第6步

讓我們轉(zhuǎn)到計(jì)時(shí)器圖標(biāo)上 —— 它與秒表有著同樣的底子。

用矩形工具（M）在圓環(huán)頂部的中心創(chuàng)建一個(gè)2.5 x 13 px的條紋。 然后用多邊形工具，設(shè)置邊數(shù)為3，或者用鋼筆工具（P）畫一個(gè)三角形。放置如下圖。

第7步

選中基本白色圓環(huán)和三角形，然后用減去底層功能減去圓環(huán)左邊部分。 在外面圖標(biāo)的中心添加一個(gè)6 x 6 px的圓。

第8步

最后，旋轉(zhuǎn)這個(gè)圓，使它上面的錨點(diǎn)大約向左偏45度。 用直接選擇工具（A）拉動(dòng)錨點(diǎn)，擴(kuò)大形狀。

用點(diǎn)擊錨點(diǎn)工具 （Shift-C）轉(zhuǎn)化選中的錨點(diǎn)為角，因此將我們的形狀變?yōu)槭直淼闹羔槨?/p>

第9步

我們這一組最后圖標(biāo)是鬧鐘。 它與之前的橘色圖標(biāo)具有相同的底子以及白色的圓環(huán)。 鬧鐘的指針是由矩形工具（M）制作的兩個(gè)狹窄的條紋形成的。

第10步

讓我們利用橢圓工具（L）制作的圓來繪制一個(gè)鬧鐘的上部分，用剪刀工具（C）點(diǎn)擊側(cè)錨點(diǎn)的方法，把圓形劃分為2個(gè)相等的部分。 在鬧鐘底部放置半圓，然后添加兩個(gè)小"腿"在底部，完成這個(gè)圖標(biāo)。

4. 創(chuàng)建天氣，相機(jī)應(yīng)用圖標(biāo)

第1步

用深藍(lán)色（#2066f0）頂部到淺藍(lán)色（#1dd4fd）底部的線性漸變填充基本的天空形狀。

在圖標(biāo)的左邊部分添加一個(gè)黃色（線性漸變從#ffc505到#fee403）的圓作為太陽(yáng)。 用兩個(gè)圓形成云：一個(gè)25.5 x 25.5 px 的圓在模版中心，和一個(gè)21 x 21 px 的圓在這個(gè)圖標(biāo)的右邊部分。

第2步

創(chuàng)建一個(gè)43 x 16 px矩形并且使其角有8 px角半徑的圓潤(rùn)。 對(duì)齊這個(gè)矩形和圓形，然后在路徑查找器中合并3個(gè)形狀，形成一個(gè)光滑圓潤(rùn)的云。

第3步

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

第4步

讓我們轉(zhuǎn)到照相機(jī)圖標(biāo)。 制作一個(gè)灰色的底部圓，用底部深灰色 （#dadcdd）到頂部淺灰色 （#dadcdd） 的線性漸變填充，

創(chuàng)建一個(gè)深灰色 （#3c3c3c） 圓角矩形形成相機(jī)的側(cè)影。

在頂部添加一個(gè)小的 30 x 17 px的矩形，然后使其左上的角有7px 圓角半徑的圓潤(rùn)。

合并這些形狀，然后也使這些形狀之間的角變圓。

第9步

在照相機(jī)的上端添加一個(gè)狹窄的條紋，然后用減去頂層將它減去。

用9 x 4 px的矩形創(chuàng)建快門圖標(biāo)，然后放在我們模版的中央。 用鋼筆工具添加一個(gè)箭頭來指向快門，設(shè)置描邊寬度為4 pt，然后在描邊面板中使端點(diǎn)和邊角圓滑。

第10步

為我們的照相機(jī)添加最后的細(xì)節(jié)：創(chuàng)建一個(gè)6 x 6 px 大小的亮黃色（#fac81b）指示燈。 此外，創(chuàng)建一個(gè)有4pt 描邊寬度的大圓。 如截圖顯示那樣，將這個(gè)圓放在照相機(jī)右邊角底部的位置上。

第11步

對(duì)象>擴(kuò)展這個(gè)大圓，轉(zhuǎn)換它為圓環(huán)。 選中圓環(huán)和照相機(jī)，然后應(yīng)用減去頂層減去圓環(huán)，形成對(duì)象-玻璃。 選擇相機(jī)深灰色的部分并且按下 Control-8轉(zhuǎn)變它們?yōu)閱为?dú)組合形狀。

最后，利用形狀生成工具（Shift-M）或路徑查找器中的相交功能，切除我們照相機(jī)圖標(biāo)外面不需要的部分。

5. 制作電話，短信，和遠(yuǎn)程應(yīng)用圖標(biāo)

第1步

讓我們?yōu)殡娫拡D標(biāo)制作一個(gè)話筒。 創(chuàng)建一個(gè)8 x 40 px的矩形，然后到效果>扭曲>弧，選擇27%的垂直彎曲值，彎曲矩形的左邊。 在頂部和底部的話筒添加2個(gè)17 x 20 px的矩形，然后使它們的角圓潤(rùn)，使形狀光滑。 在路徑查找器中合并全部話筒的部分。

第2步

通過用刪除錨點(diǎn)工具刪除不需要的錨點(diǎn)，使聽筒左邊變得光滑，然后利用活動(dòng)角使內(nèi)部變得圓潤(rùn)。

最后，旋轉(zhuǎn)電話45度，并且把它放在圖標(biāo)底部的上邊，用淺綠色 （#86fb71）到深綠色 （#0fd51c）的線性漸變填充。

第3步

讓我們用之前用過的相同綠色的底子形成短信圖標(biāo)。 制作一個(gè) 40 x 40 px的白色圓，然后延伸一點(diǎn)邊，使形狀壓扁到 48 x 40 px。

在白色形狀的底部加一個(gè)小小的三角形，形成一個(gè)言語泡泡。 使三角形下面的角稍微變圓一點(diǎn)。 利用-36%垂直彎曲值的弧彎曲效果，使三角形稍微變?yōu)榛⌒巍?/p>

這里顯示了完整圖標(biāo)的樣子。

第4步

我們接下來的圖標(biāo)是遠(yuǎn)程應(yīng)用圖標(biāo)，這也是一個(gè)包含單個(gè)元素的非常簡(jiǎn)單的圖標(biāo)。

首先，形成一個(gè)漸變的底子（從深藍(lán)色#2066f0的底部到淺藍(lán)色#1dd4fd的頂部）。 添加5.3pt寬的白色描邊，然后從內(nèi)部對(duì)齊。 在我們的圖標(biāo)的中心放置一個(gè)30 x 30 px白色三角形。

第5步

最后，使三角形的角有2.5角半徑。 太好了！ 這個(gè)圖標(biāo)已經(jīng)到位，所以讓我們轉(zhuǎn)到下一個(gè)。

6. 創(chuàng)建外出，設(shè)置和照片App圖標(biāo)

第1步

外出圖標(biāo)描繪了一個(gè)風(fēng)格化的跑步者的身影。

用頂部黃綠色（#c2ec38）和底部綠色（#a3fc3f） 的線性漸變來填充，創(chuàng)建一個(gè)明亮的底子。

用鋼筆工具（P）創(chuàng)建分離的線作為彎曲胳膊，腿，和軀干，添加3 pt 描邊寬度以及圓形的端點(diǎn)和邊角。

增加軀干的描邊寬度的厚度到6 pt，然后添加一個(gè)9 x 9 px圓形作為頭部。

第2步

對(duì)象>擴(kuò)展線條，然后用黑色填充這個(gè)形狀。

第3步

設(shè)置的圖標(biāo)包含一個(gè)齒輪。 繪制一個(gè)48 x 48 px的圓，切掉中間部分形，制成了一個(gè)環(huán)。

添加3個(gè)有3 pt 描邊寬度線條，在圖標(biāo)模版的中心相互連接。

第4步

現(xiàn)在我們需要添加波紋到我們的齒軌。

制作一個(gè) 5 x 9 px的矩形，然后使上端稍微窄一點(diǎn)。 使上面的角有1.6px角半徑的圓潤(rùn)。 放這個(gè)波紋在齒軌的頂部和底部。

用旋轉(zhuǎn)工具（R）選中全部波紋，雙擊旋轉(zhuǎn)工具（R）調(diào)用彈出選項(xiàng)窗口，然后設(shè)置旋轉(zhuǎn)值為360/18。 這種方式， Adobe Illustrator將會(huì)自動(dòng)計(jì)算出18個(gè)形狀的合適值。 按下拷貝按鈕。

第5步

按下Control-D多次重復(fù)我們上一個(gè)動(dòng)作，添加更多波紋。 為了完成這個(gè)圖標(biāo)，選擇所有波紋，轉(zhuǎn)換顏色為白色，然后將所有的波紋一起旋轉(zhuǎn)-10度。

第6步

我們接下來的圖標(biāo)是一個(gè)風(fēng)格化的照片App。 首先創(chuàng)建一個(gè)20 x30 px且具有10 px角半徑的圓角矩形，這樣可以作為花瓣。

復(fù)制花瓣，然后放其拷貝在圖標(biāo)模版的底部，如下面截圖所示。

選擇全部花瓣用旋轉(zhuǎn)工具（R）制作8份花瓣拷貝，應(yīng)用 360/8角值，然后按下拷貝按鈕。

第7步

按下 Control-D數(shù)次形成八瓣花。 轉(zhuǎn)換花瓣為正片疊底混合模式且降低透明度到80%。 讓我們應(yīng)用喜愛的顏色到每片花瓣，從中間最上的開始順時(shí)針移動(dòng)：橙色 （#fa9700），黃色（#f0e22c），綠色（#b5d558），綠松石色 （#6ec19d），藍(lán)色（#71b5e1），紫羅蘭色（#8f60c3），粉色 （#d782a4）和紅色（#ff2c2c）。

將花放在白色的圖標(biāo)底板上。

7. 股票，活動(dòng)，存折和日歷圖標(biāo)

第1步

股票圖標(biāo)包含一個(gè)極簡(jiǎn)圖。 先創(chuàng)建一個(gè)深色（#3f3f3f）的圖標(biāo)底板，然后用直線工具制作一個(gè)淺藍(lán)色（＃02a6f5）3pt大小的豎線形成的圖。 把它放在模版的中間，

添加一個(gè)藍(lán)色的小圓圈并且應(yīng)用一個(gè)深灰色（#3f3f3f） 1pt 的描邊，為了使它在視覺上分隔開來。 添加另外4條線在這個(gè)圖標(biāo)的兩邊，用淺灰色（#555555）的3pt 描邊 。

對(duì)象>擴(kuò)展線條，并且切除圖標(biāo)底部不需要的部分，用形狀生成工具（Shift-M）或路徑查找器都可以。

第2步

用鋼筆工具（P）畫一個(gè)有一個(gè)1.5pt 描邊的鋸齒狀線條，添加到圖上以結(jié)束這個(gè)圖標(biāo)的制作。

第3步

這個(gè)活動(dòng)圖標(biāo)包含3個(gè)彩色的漸變圓環(huán)。 為了形成這樣一個(gè)圓環(huán)，首先需要制作一個(gè)混合組。

制作2個(gè)相同的6 x 7 px的矩形，其中一個(gè)粉色（#ff2b91）一個(gè)紅色（#f1281e）。選中矩形然后找到對(duì)象>混合>建立。

你可以在對(duì)象>混合>混合選項(xiàng)編輯這個(gè)設(shè)置，應(yīng)用順滑顏色制作一個(gè)漂亮的無縫混合。 拖動(dòng)創(chuàng)建的混合組到筆刷面板，然后創(chuàng)建一個(gè)新的默認(rèn)設(shè)置的藝術(shù)畫筆。

第4步

創(chuàng)建一個(gè)深灰色 （#393839）的圓作為我們圖標(biāo)的底子，然后在它的頂部放置另一個(gè)圓，用我們創(chuàng)建的畫筆作為描邊。 調(diào)整圓的尺寸，以便它符合圖標(biāo)模版的外部邊緣。 設(shè)置描邊寬度為1 pt，然后選擇對(duì)象>擴(kuò)展外觀，將筆刷描邊變?yōu)樾螤睢?如果需要，用鏡像工具（O）旋轉(zhuǎn)或水平地翻動(dòng)形狀，以便我們有一個(gè)從左邊粉紅到右邊紅色的圓環(huán)。

創(chuàng)建一個(gè)粉紅色 （#ff2b91）的小圓環(huán)，放在彩色圓環(huán)中間頂部的區(qū)域，使它符合形狀的高度，用來隱藏兩個(gè)顏色之間的聯(lián)系。

第5步

現(xiàn)在我們需要添加一個(gè)微妙的陰影。 你可能會(huì)注意到，這個(gè)環(huán)在我們擴(kuò)展它后被分為幾個(gè)部分。 這正是我們所需要的！

選擇圓環(huán)頂部紅色的片段，拷貝它然后粘貼在前面（Control-C > Control-F）。 在拷貝層上添加深紅色 （#a11b17）到白色的線性漸變，然后轉(zhuǎn)換為正片疊底的混合模式，因此漸變使白色的末端不可見。

第6步

用相同的技術(shù)在第一個(gè)形狀的里面創(chuàng)建兩個(gè)更多彩的圓環(huán)。 創(chuàng)建藝術(shù)畫筆從黃色（#d8ff06）和綠色（#86e402）的混合組和一個(gè)從綠松石色 （#06ffaa） 到藍(lán)色 （#06e3f9）的混合組。 添加小圓和應(yīng)用柔和的陰影來完成這個(gè)圖標(biāo)的制作。

第7步

接下來是存折圖標(biāo)，包含4個(gè)小小的象形圖：一個(gè)信用卡，一個(gè)飛機(jī)，一個(gè)攝像機(jī)和一個(gè)咖啡杯。 這些象形圖都是簡(jiǎn)約的，并且都由基本的形狀在路徑查找器和活動(dòng)角特征的幫助下制成的。 你可以從下面一步步的截圖看到每個(gè)象形圖標(biāo)是怎樣連接而成的。

第8步

這個(gè)圖標(biāo)的底子由4個(gè)不同顏色的條紋構(gòu)成：紅色（#ff4e46），藍(lán)色 （#439eca），綠色 （#3dca36）和橙色（#ffa02b），每個(gè)高度都是 20 px。 在形狀生成器工具（Shift-M）的幫助下創(chuàng)建一個(gè)默認(rèn)的80×80px 圖標(biāo)的圓形底子，通過選擇所有對(duì)象，同時(shí)按住Alt鍵，然后單擊不需要的部分，刪除不需要的條紋。

第9步

創(chuàng)建一個(gè)3.5 x 3.5 px的圓，與橙色條紋的頂部相交，拷貝的同時(shí)按住Alt和Shift鍵拉動(dòng)形狀。 按住Control-D，以形成圓的更多的復(fù)本。 然后，選中所有復(fù)本并且通過按Control-8轉(zhuǎn)化為組合路徑。 選中圓形和橙色的條紋，應(yīng)用減去頂層功能切割出洞。

最后，在我們圖標(biāo)的中心放置我們之前創(chuàng)建的象形圖，對(duì)齊它們。

我們一套圖標(biāo)最后一個(gè)是日歷圖標(biāo) 它是由Helvetica Neue 字體制成的文字和一個(gè)簡(jiǎn)單的白色圖標(biāo)底子構(gòu)成。

很好！ Apple Watch主屏幕圖標(biāo)已經(jīng)完成！我們已經(jīng)創(chuàng)建了總計(jì)20個(gè)組屏幕應(yīng)用的圖標(biāo)，使用了一些基本形狀，彎曲效果和一些技巧。 希望你能享受跟隨這個(gè)指南的過程，并且發(fā)現(xiàn)一些有趣的技術(shù)。

「優(yōu)設(shè)字體設(shè)計(jì)好文最新集錦」

灰晝大大的字體推薦：
《灰晝的字體庫(kù)！10款常用的經(jīng)典基礎(chǔ)英文字體推薦（已打包）》

字體排印指南：
《新手福利！一份詳盡全面的UI設(shè)計(jì)字體與排版指南》

谷歌免費(fèi)字體網(wǎng)站：
《Google Fonts 網(wǎng)站全新設(shè)計(jì)，免費(fèi)下載八百種英文字體！》

原文地址：design.tutsplus

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com