編者按：今天的AI教程比較考驗大家的耐心，但是繪制一套完整的圖標和一個圖標的收獲絕對大不一樣，這篇教程提到很多AI的實用技巧，設置圖標的齒輪怎么畫才方便？活動圖標的漸變如何變得有質感？練個手你就知道了！

圖標展示：

1. Apple Watch 圖標準則

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

如果你對制作Apple Watch圖標的更深入的理論有興趣，我強烈推薦你去看官方的Apple Watch界面準則和規范。

2. 創建時間，郵件，和音樂App圖標

第1步

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

第2步

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

第 3 步

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

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

第4步

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

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

第5步

放這個指針在參考線旁邊的位置（你可以使它小一點，這樣它適合圖標底子內部的圓形）

第6步

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

第7步

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

第8步

現在我們將創建郵件圖標。 首先用一個任意顏色，50 x 33 px的矩形制作一個信封。

用多邊形工具或鋼筆工具創建一個有3邊的三角形，并且添加2 pt的描邊。 對象>擴展使這個三角形變得彎曲。

第9步

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

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

第10步

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

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

第11步

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

第12步

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

第13步

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

第14步

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

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

3. 世界時鐘，秒表，定時器和鬧鐘圖標

第1步

現在我們將轉到一套與時間有關的圖標。 首先創建一個48 x 48 px的圓，在里面創建一個小圓。 使用路徑查找器中的減去頂層功能，創建一個圓環。

第2步

在第一個形狀中創建一個更小的橢圓環并且添加2個交叉線，居中對齊。

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

第3步

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

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

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

第4步

為了下一個圖標秒表，我們將使用之前創建的世界時針圖標的底子。

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

第5步

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

第6步

讓我們轉到計時器圖標上 —— 它與秒表有著同樣的底子。

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

第7步

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

第8步

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

用點擊錨點工具 （Shift-C）轉化選中的錨點為角，因此將我們的形狀變為手表的指針。

第9步

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

第10步

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

4. 創建天氣，相機應用圖標

第1步

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

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

第2步

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

第3步

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

第4步

讓我們轉到照相機圖標。 制作一個灰色的底部圓，用底部深灰色 （#dadcdd）到頂部淺灰色 （#dadcdd） 的線性漸變填充，

創建一個深灰色 （#3c3c3c） 圓角矩形形成相機的側影。

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

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

第9步

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

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

第10步

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

第11步

對象>擴展這個大圓，轉換它為圓環。 選中圓環和照相機，然后應用減去頂層減去圓環，形成對象-玻璃。 選擇相機深灰色的部分并且按下 Control-8轉變它們為單獨組合形狀。

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

5. 制作電話，短信，和遠程應用圖標

第1步

讓我們為電話圖標制作一個話筒。 創建一個8 x 40 px的矩形，然后到效果>扭曲>弧，選擇27%的垂直彎曲值，彎曲矩形的左邊。 在頂部和底部的話筒添加2個17 x 20 px的矩形，然后使它們的角圓潤，使形狀光滑。 在路徑查找器中合并全部話筒的部分。

第2步

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

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

第3步

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

在白色形狀的底部加一個小小的三角形，形成一個言語泡泡。 使三角形下面的角稍微變圓一點。 利用-36%垂直彎曲值的弧彎曲效果，使三角形稍微變為弧形。

這里顯示了完整圖標的樣子。

第4步

我們接下來的圖標是遠程應用圖標，這也是一個包含單個元素的非常簡單的圖標。

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

第5步

最后，使三角形的角有2.5角半徑。 太好了！ 這個圖標已經到位，所以讓我們轉到下一個。

6. 創建外出，設置和照片App圖標

第1步

外出圖標描繪了一個風格化的跑步者的身影。

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

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

增加軀干的描邊寬度的厚度到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步

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

復制花瓣，然后放其拷貝在圖標模版的底部，如下面截圖所示。

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

第7步

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

將花放在白色的圖標底板上。

7. 股票，活動，存折和日歷圖標

第1步

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

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

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

第2步

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

第3步

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

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

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

第4步

創建一個深灰色 （#393839）的圓作為我們圖標的底子，然后在它的頂部放置另一個圓，用我們創建的畫筆作為描邊。 調整圓的尺寸，以便它符合圖標模版的外部邊緣。 設置描邊寬度為1 pt，然后選擇對象>擴展外觀，將筆刷描邊變為形狀。 如果需要，用鏡像工具（O）旋轉或水平地翻動形狀，以便我們有一個從左邊粉紅到右邊紅色的圓環。

創建一個粉紅色 （#ff2b91）的小圓環，放在彩色圓環中間頂部的區域，使它符合形狀的高度，用來隱藏兩個顏色之間的聯系。

第5步

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

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

第6步

用相同的技術在第一個形狀的里面創建兩個更多彩的圓環。 創建藝術畫筆從黃色（#d8ff06）和綠色（#86e402）的混合組和一個從綠松石色 （#06ffaa） 到藍色 （#06e3f9）的混合組。 添加小圓和應用柔和的陰影來完成這個圖標的制作。

第7步

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

第8步

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

第9步

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

最后，在我們圖標的中心放置我們之前創建的象形圖，對齊它們。

我們一套圖標最后一個是日歷圖標 它是由Helvetica Neue 字體制成的文字和一個簡單的白色圖標底子構成。

很好！ Apple Watch主屏幕圖標已經完成！我們已經創建了總計20個組屏幕應用的圖標，使用了一些基本形狀，彎曲效果和一些技巧。 希望你能享受跟隨這個指南的過程，并且發現一些有趣的技術。

「優設字體設計好文最新集錦」

灰晝大大的字體推薦：
《灰晝的字體庫！10款常用的經典基礎英文字體推薦（已打包）》

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

谷歌免費字體網站：
《Google Fonts 網站全新設計，免費下載八百種英文字體！》

原文地址：design.tutsplus

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com