想想圖標的繪制也是有歷史的，從剛開始 ps 用面切法運用布爾運算去切，有時候線條也是用面切面得到。隨著線性圖標的火爆和普及，開始放棄面切法，轉用鋼筆工具直接繪制，還可以很好的控制線的直角和圓角。當你會使用 Ps 繪制圖標了，換成 ai 你會發現更加的快捷方便。隨著 Sketch 軟件在界面設計中有一席之地，在 Sketch 里快速繪制圖標也是設計師需要掌握的一門技能。
圖標的繪制方法有面切法，鋼筆繪圖法，錨點法，圓切法。
下面會從 Photoshop、Illustrator、Sketch 三個軟件去細講基本軟件工具。繪制案例想了很久要含有基本的知識點，使用更多的工具。最后選擇的圖標為齒輪、信號，其中齒輪是最經典的案例了，也是繪制圖標的必修課。
一、 Photoshop篇
在 ps 里面繪制圖標使用的基本工具有小白、小黑、布爾運算、鋼筆工具、錨點。
1. 第一步打開 ps，ctrl+k，勾選將矢量工具與變化和像素網格對齊。
2. 小黑、小白二人轉
3. 鋼筆工具、貝塞爾曲線
貝塞爾曲線很多文章寫的太官方了，不太懂，也不知道如何下手。我還是總結我工作使用中應該注意哪幾點。
- 錨點兩邊的手柄要保持在同一水平線上。傾斜的錨點的手柄也要保持在同一水平線上。
- 當前手柄的長度不能超越下一個錨點的水平線。
- 上下左右最邊上的肯定是錨點存在的點，其他地方錨點的選擇需要多練習才能找到合適錨點的位置。
- 鋼筆繪制的時候盡量不要讓兩個錨點靠的太近，會讓兩個錨點的手柄沒有施展的空間。
最后如果你感覺貝塞爾曲線還是很難，可以先用 Illustrator 里面的鋼筆工具繪制，用多了就好了。我之前也感覺 Photoshop 里的鋼筆工具繪制好難用，今天寫教程做案例試了試還是很好用的，曲線也可以調整的很柔美。
4. 布爾運算
布爾運算是通過繪制規則的形狀進行合并、減去、相交、排除等方式得到新的形狀。
5. 主題圖標面板繪制
在主題設計的時候大神們的底板用的都很有特色。
6. 齒輪、信號案例演示
二、 Illustrator篇
在 ai 里面繪制圖標使用的基本工具填充、描邊、鋼筆、路徑查找器、形狀生產器、對齊、錨點圓角、擴展。
1. cc2015自帶直角變圓角。
2. 路徑查找器的形狀模式等同于 ps 的布爾運算（上面已講），路徑查找器下的6個工具在平時使用較少所以就忽略，感興趣的自己研究下。鋼筆錨點和 ps 使用是一樣的。
3. 路徑描邊可以通過擴展讓線變成面，但是在繪制線性圖標時不要把線進行擴展，因為放大縮小不會改變線的粗細，擴展成面會隨著放大縮小而發生變化。有時候我們在繪制線性圖標不好做的曲線，可以嘗試把這個形狀畫出來，然后再變成描邊就ok了。
4. 在繪制對稱圖標的時候，有時候我們只需要繪制一半，通過鏡像復制，然后通過對齊－垂直或水平分布間距就可以很好的閉合在一起。（ 對齊－顯示選項－對齊關鍵對象－垂直或水平分布間距 ）
5. 形狀生產器工具，直接可以繪制有閉合可能的所有形狀。
三、 Sketch篇
在 sketch 里面繪制圖標使用的基本工具編輯、旋轉、鋼筆、剪刀、布爾運算、外形、變平。
四、 Ai制作好如何轉到Ps和Sketch？
1. Ai 制作好轉到 Ps 中，在 Ai 復制備份一個，然后對象－擴展，ctrl+c復制，ctrl+v粘貼到 Ps 里面選擇形狀圖層，不要選擇智能對象。再用小白工具調整細節，讓每個錨點都和像素網格對齊。
2. Ai 制作好轉到 Sketch，ctrl+c復制，ctrl+v粘貼到 Sketch，調整參數盡可能是偶數整數。因為大量存在小數點的問題。改變數值還是要看下一圖標整體感覺。
五、 如何達到視覺平衡？
很多人剛開始不會說按照規范來，主要在固定大小里面繪制就好了，其實這樣也可以，但是最終還是要個別微調圖標達到視覺上的統一。
比如在56*56px固定大小的區域繪制好全部圖標，不要超出這個范圍。然后整體看哪些視覺比重大需要縮放，縮放是以2的倍數放大縮小。
56-2的倍數，比如56px、54px、52px…...
六、 如何定義規范？
比如在一定大小內，如何制定出一像素？
以48*48大小為例。看似留了一像素，上下左右還是兩個像素，跟上面的視覺平衡是一樣的，都是以2像素為一個基準。這種規范大一點的尺寸也是適用的比如88*88px。
七、 如何統一風格？
圖標的風格我在《如何系統學習功能圖標？來看資深設計師的全面總結！》基本都概括出來了，可以分析總結每個風格的特點，快速的制作。也有不少人發我看他們繪制的圖標，會用到倆三種風格同時用到圖標上面，還有就是總結出來的還沒學會就開始自己去嘗試新風格，盡量還是不要先去嘗試新的風格，之前整理的應該夠用了。
總結雖然講的都是簡單的基本教程，但是也是必須要掌握的，掌握上面基礎教程不單單只適用于圖標，在插畫，圖形繪制中都可以用到。
歡迎關注作者的微信公眾號：「水手哥學設計」
圖片素材作者：Laura Reen
「圖標設計新手指南」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 19 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓