企業微信
酷網科技公司
當前位置: 建站知識  >>  瀏覽文章
時間:2016年06月04日 信息來源:互聯網

圖標制作!如何從零開始繪制一枚線性圖標實戰篇

編者按:今天的教程除了一枚線性圖標的操作演示,更重要的是幫同學們領會UI設計師必備的化繁為簡,抽絲剝繭的能力。初學圖標繪制的同學,絕對需要里邊提到的這個方法~

幾何

對于初學者來說,我們可以這樣理解,任何東西都可以用這四種圖形組合而成:

圖標設計 產品圖標 線性圖標 如何制作圖標

當我想要用圖標來表現一個物體時,我會先仔細觀察,然后盡可能將其拆分為最簡單的形狀。譬如,水滴可以用一個三角形和一個圓圈組成。

圖標設計 產品圖標 線性圖標 如何制作圖標

心形圖標可以由兩個圓圈和一個三角形組成。

圖標設計 產品圖標 線性圖標 如何制作圖標

我通常會使用Adobe Illustrator來制作這些圖形。矢量圖形的線條粗細、節點以及圖形之間的關系都非常易于控制。在Illustrator中,圖形和線條間的互相轉換也非常便捷。這些信息也許非?;A,但卻是我制作大多數,甚至是復雜圖標的方法。下面這個例子細節略多,是我最近為bill of rights所做的圖標,其中,我也完全使用了相同的方式。

圖標設計 產品圖標 線性圖標 如何制作圖標

界面圖標

我最近正在為一款超贊的iPhone應用Parker Planner制作一組圖標。我很喜歡這個項目,這組用戶界面圖標的要點是在易于理解和功能性強的同時,具有美觀性,幫助用戶在這款略為復雜的應用中進行導航。

圖標設計 產品圖標 線性圖標 如何制作圖標

下面,讓我們來細看一下這些圖標,并且分析我的制作步驟。我們就以垃圾桶圖標為例,它就是由三個圓角矩形和三根線條組成的。

1、選擇圓角矩形工具

圖標設計 產品圖標 線性圖標 如何制作圖標

2、拖拽鼠標,畫出形狀

圖標設計 產品圖標 線性圖標 如何制作圖標

3、根據所需調整線條粗細

圖標設計 產品圖標 線性圖標 如何制作圖標

我通常會在整套圖標中選用一到兩種粗細的線條。

圖標設計 產品圖標 線性圖標 如何制作圖標

這樣可以保持所有圖標的整體性和一致性。

4、畫出另一個圓角矩形,作為蓋子。

圖標設計 產品圖標 線性圖標 如何制作圖標

5、再用一個圓角矩形畫出蓋子的把手。

圖標設計 產品圖標 線性圖標 如何制作圖標

6、擦去把手底部的半個圓角矩形。

圖標設計 產品圖標 線性圖標 如何制作圖標

7、現在,在桶身上繪制三條直線。

圖標設計 產品圖標 線性圖標 如何制作圖標

8、好啦,一個垃圾桶圖標就此誕生!你可以根據所需,調整顏色和線條粗細。

圖標設計 產品圖標 線性圖標 如何制作圖標

另有一些有用的工具,對制作圖標很有幫助——路徑查找器:可對各類形狀進行切割、組合以及合并。

圖標設計 產品圖標 線性圖標 如何制作圖標

線條/填充工具:形狀的線條色和填充色之間的轉換。

圖標設計 產品圖標 線性圖標 如何制作圖標

再有我最愛的工具——線條面板:將圖形轉折點由直角轉為圓角。

圖標設計 產品圖標 線性圖標 如何制作圖標

當完成一整套圖標設計后,我通常將它們肩并肩放成一排,來檢查是否有哪個特別奇怪,隨之進行調整。

圖標設計 產品圖標 線性圖標 如何制作圖標

最后,我會將它們置入應用進行檢驗,看看它們是否作用良好。

圖標設計 產品圖標 線性圖標 如何制作圖標

總結一下,制作優秀圖標不止是學習Illustrator的使用訣竅,當然,熟練掌握軟件也是必不可少的。更重要的是,你要練習將所見的事物分解為簡單的圖形。這項關鍵技能是助你成為圖標設計大師的秘訣!加油!

原文地址:Awwwards

譯文地址:doo-plus

延伸閱讀:

  • 盤點:科技公司的圖標演化史
  • 小Q畫筆:快速在圖片上涂涂寫寫 截圖標注就靠它
  • 關于手機上的 Emoji 圖標,這幾個背后的故事你應該沒聽過
  • AI教程!手把手教你繪制一組清新簡約的微圖標


(編輯:小酷)

 


上一篇:線條之美!20個優秀網頁告訴你如何善用線性圖標
下一篇:留白技巧!如何通過留白打造簡潔有效的設計
聯系
客服

掃碼添加客服微信

服務熱線
服務熱線
0411-62888851
公眾號

掃碼關注公眾號

回到頂部