功能圖標是指獨立App中或獨立產品中的整體圖標，從菜單欄圖標到類別信息導視性圖標都屬於功能圖標。功能圖標最重要的特點就是統一性。很多初學者一遇到需要統一整個產品的圖標時就頭大，要麼是畫的圖標大小總是不一致，要麼就是圖標的重心不一致。今天米醋就以一套線性風格的圖標來教大家如何繪製統一的功能圖標。
首先先來說說功能圖標設計規範
功能圖標的統一性主要體現在大小統一、風格統一和層級統一上。我們先來看看大小統一。很多初學者認為在統一大小的方框內繪製的圖標就能保證圖標大小的一致性，其實並不是這樣。見圖中這3個圖標都是在一個大小相同的方框內繪製的，但是在視覺上給人的感覺卻是大小不一。
視覺大小不統一的圖標
明明圖標是在一個方框內設計的，為什麼看起來不對呢？我們來看看Google圖標的繪製規範，幫助大家理解這個問題。在Google圖標的設計規範圖中，可以看到正方形、圓形和長方形的位置。
Google圖標繪製規範
由於正方形具有完全填充的特性，所以正方形的邊設定成了中間的寬度，而長方形的長度和圓形的直徑一致。
正方形、圓形和長方形繪製規範
在介面設計中，通常會把圖標統一為3個大小（48像素×48像素、32像素×32像素和24像素×24像素）。由於iOS的基礎規範是以8像素為單位進行設定的，所以圖標的大小也需要設定成8像素×8像素的倍數。
圖標尺寸設計規範
好啦！現在就到了功能圖標繪製的過程！
接下來我們就完全按照上面所講的設計規範來教大家如何繪製一套統一性很強的功能圖標（以線性圖標為例）。在講繪製過程之前，先介紹幾個繪製或調整路徑的常用工具，這幾個工具的用法大家務必完全熟練。
- 鋼筆工具：用於繪製路徑。
- 添加錨點工具：用於在路徑上添加錨點。
- 轉換點工具 ：用於調整路徑的圓角和角度。
- 路徑選擇工具：用於選擇單個或多個路徑。
- 直接選擇工具：用於調整路徑上的錨點的位置。
製作方法
（1）啟動PhotoshopCC 2017，按【Ctrl+N】組合鍵新建一個1920像素×1080像素的文檔。
新建文檔
（2）首先來製作繪製圖標的規範背景。使用【矩形工具】繪製一個48像素×48像素大小的正方形，將填充色設置為灰色，同時禁用描邊功能。
繪製正方形1
繼續繪製一個44像素×44像素大小的正方形，將填充色設置為白色，同時禁用描邊功能。
繪製正方形2
再次繪製一個40像素×40像素大小的正方形，將填充色設置為紅色，同時禁用描邊功能。
繪製正方形3
（3）將上面繪製的3個正方形複製3份，同時在這4個規範背景上分別繪製出圓形、正方形（圓角為8像素）、圓角長方形（圓角為8像素）和圓角三角形。
規範基礎圖形的繪製模式
請仔細看清楚這4個圖形在規範背景中的占位與對齊模式，我們將在這個模式下繪製整套的功能圖標，以達到相對精確的統一性。下面選擇4個具有代表性的圖標（審核圖標、郵箱圖標、主頁圖標和夜間模式圖標）來講解繪製過程。
要繪製的圖標
（4）首先來繪製「審核」圖標。使用【圓角矩形工具】在規範背景上繪製一個44像素×44像素的圓角矩形，然後在【屬性】面板中關閉填充功能，同時將描邊顏色設置為黑色，將描邊寬度設置為2像素，將圓角大小設置為8像素。
繪製圓角矩形
（5）繼續使用【圓角矩形工具】在上一步繪製的圓角矩形的上方繪製一個17像素×17像素的圓角矩形，然後在【屬性】面板中設置圓角大小為4像素。
繼續繪製圓角矩形
（6）使用【添加錨點工具】在需要刪減的位置（左右兩邊）上添加兩個錨點。
然後使用【直接選擇工具】框選上部的錨點。
按【Delete】鍵刪除錨點，得到如圖中效果。
（7）使用【 鋼筆工具】在圖標內部繪製審核的符號（對號√）。注意，在選擇鋼筆的繪製模式時要選擇【形狀】模式。
繪製對號
（8）繪製完圖標以後，開始對局部進行調整。為了加強圖標線條的層次感，統一將內部的線條描邊寬度設置為1像素，並將【描邊選項】的【端點】設置為【圓形】端點。
繪製好的審核圖標效果。
（9）下面製作「郵箱」圖標。為了保證統一性，可以直接將「審核」圖標複製一份，然後刪除內部圖形，接著將圓角矩形的大小設置為48像素×40像素。
修改圓角矩形
（10）按【Ctrl+J】組合鍵複製一個圓角矩形，將大小修改為48像素×48像素。
按【Ctrl+T】組合鍵進入自由變換狀態，接著按住【Shift】鍵將圓角矩形順時針旋轉45°。
（11）使用【添加錨點工具】在需要刪減的位置（左右兩邊）上添加兩個錨點。
使用【直接選擇工具】框選上部的錨點，接著按【Delete】鍵刪除錨點，得到如圖中的效果。
最後將內部線框的描邊寬度設置為1像素，郵箱圖標就製作完成了，效果如圖。
好啦！今天我們學會了繪製「審核」與「郵箱」圖標，米醋將在明天的學習中跟大家繼續講解其他圖標的繪製方法，不見不散哦！