想想圖標的繪制也是有歷史的,從剛開始 ps 用面切法運用布爾運算去切,有時候線條也是用面切面得到。隨著線性圖標的火爆和普及,開始放棄面切法,轉用鋼筆工具直接繪制,還可以很好的控制線的直角和圓角。當你會使用 Ps 繪制圖標了,換成 ai 你會發現更加的快捷方便。隨著 Sketch 軟件在界面設計中有一席之地,在 Sketch 里快速繪制圖標也是設計師需要掌握的一門技能。
圖標的繪制方法有面切法,鋼筆繪圖法,錨點法,圓切法。
下面會從 Photoshop、Illustrator、Sketch 三個軟件去細講基本軟件工具。繪制案例想了很久要含有基本的知識點,使用更多的工具。最后選擇的圖標為齒輪、信號,其中齒輪是最經典的案例了,也是繪制圖標的必修課。
一、 Photoshop篇
在 ps 里面繪制圖標使用的基本工具有小白、小黑、布爾運算、鋼筆工具、錨點。
1. 第一步打開 ps,ctrl+k,勾選將矢量工具與變化和像素網格對齊。
2. 小黑、小白二人轉
3. 鋼筆工具、貝塞爾曲線
貝塞爾曲線很多文章寫的太官方了,不太懂,也不知道如何下手。我還是總結我工作使用中應該注意哪幾點。
錨點兩邊的手柄要保持在同一水平線上。傾斜的錨點的手柄也要保持在同一水平線上。
當前手柄的長度不能超越下一個錨點的水平線。
上下左右最邊上的肯定是錨點存在的點,其他地方錨點的選擇需要多練習才能找到合適錨點的位置。
鋼筆繪制的時候盡量不要讓兩個錨點靠的太近,會讓兩個錨點的手柄沒有施展的空間。
最后如果你感覺貝塞爾曲線還是很難,可以先用 Illustrator 里面的鋼筆工具繪制,用多了就好了。我之前也感覺 Photoshop 里的鋼筆工具繪制好難用,今天寫教程做案例試了試還是很好用的,曲線也可以調整的很柔美。
4. 布爾運算
布爾運算是通過繪制規則的形狀進行合并、減去、相交、排除等方式得到新的形狀。
5. 主題圖標面板繪制
在主題設計的時候大神們的底板用的都很有特色。
6. 齒輪、信號案例演示