編按：

部落窩教育今天為大家?guī)硪黄狝dobe illustrator教程（AI進(jìn)階教程），全套Apple Watch的圖標(biāo)繪制，作者很用心的解讀每一個Icon繪制的細(xì)節(jié)，每一個Icon都是完全還原Apple的設(shè)計。希望大家好好看好好學(xué)，量的積累才能讓你的技術(shù)得到質(zhì)的飛越。想要下載APP圖標(biāo)模板的童鞋可以加入QQ群344434216下載。

AI圖標(biāo)制作教程的圖標(biāo)展示：

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

Apple Watch 的Icon被設(shè)計成與其他iOS圖標(biāo)非常相似的新潮的扁平化風(fēng)格，一個引人注目的特定特征：圖標(biāo)是圓形的。如果你對制作Apple Watch圖標(biāo)的更深入的理解有興趣，我強(qiáng)烈推薦你去看官方的Apple Watch界面準(zhǔn)則和規(guī)范。

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

時間圖標(biāo)

第1步

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

第2步

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

第 3 步

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

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

第4步

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

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

第5步

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

第6步

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

第7步

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

郵箱圖標(biāo)

第1步

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

用多邊形工具或鋼筆工具創(chuàng)建一個有3邊的三角形，并且添加2 pt的描邊。 對象>擴(kuò)展使這個三角形輪廓和填充分離。

第2步

在信封底子的上面添加另一個三角形，用擴(kuò)展形狀使其最下面的角變圓潤。 你可以用橡皮擦工具（Shift-E）擦去頂部和底部的矩形，因為我們不需要它們。

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

第3步

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

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

音樂圖標(biāo)

第1步

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

第2步

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

第3步

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

第4步

添加這個符號的第二部分，使總體形狀更加光滑圓潤。

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

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

世界時鐘圖標(biāo)

第1步

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

第2步

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

在這個形狀的上面部分添加一個水平線，在效果>變形>弧的幫助下進(jìn)行彎曲。 設(shè)置水平彎曲值為-35%。

第3步

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

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

添加一個更小的深橘色 （#e45221）圓并且放在球形形狀的后面，讓畫面有對比。

秒表圖標(biāo)

第1步

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

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

第2步

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

第3步

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

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

第4步

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

第5步

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

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

鬧鐘圖標(biāo)

第1步

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

第2步

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

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

天氣圖標(biāo)

第1步

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

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

第2步

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

第3步

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

照相機(jī)圖標(biāo)

第1步

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

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

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

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

第2步

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

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

第3步

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

第4步

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

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

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

電話圖標(biāo)

第1步

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

第2步

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

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

短信圖標(biāo)

第1步

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

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

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

遠(yuǎn)程應(yīng)用圖標(biāo)

第1步

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

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

第2步

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

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

外出圖標(biāo)

第1步

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

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

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

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

第2步

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

設(shè)置圖標(biāo)

第1步

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

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

第2步

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

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

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

第3步

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

照片圖標(biāo)

第1步

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

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

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

第2步

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

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

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

股票圖標(biāo)

第1步

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

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

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

第2步

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

活動圖標(biāo)

第1步

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

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

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

第2步

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

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

第3步

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

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

第4步

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

存折圖標(biāo)

第1步

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

第2步

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

第3步

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

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

日歷圖標(biāo)

第1步

它是由Helvetica Neue 字體制成的文字和一個簡單的白色圖標(biāo)底子構(gòu)成。

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

Illustrator教程相關(guān)推薦：

《AI教程！繪制叮當(dāng)貓手機(jī)殼》

…………………………………………………………………………………………………………………

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

作者：Yulia Sokolova  譯者：匿名

譯文出處：優(yōu)設(shè)網(wǎng)

原文出處：design.tutsplus

手機(jī)微信掃下面小程序，學(xué)習(xí)更多教程。