head-first-design-line-icons-1

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

幾何

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

shapes

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

drops

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

heart

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

billofrights

界面圖標

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

parkerplanner

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

1、選擇圓角矩形工具

rectangle

2、拖拽鼠標,畫出形狀

draw

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

stroke

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

thickness

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

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

lid

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

handle

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

erase

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

3lines

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

adjustment

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

pathfinder

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

stroke-fill

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

how-to-create-effective-icons-17

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

set

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

review

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

【信息圖達人的必由之路】:

再來一波工具:
《拿走不謝!21款超實用的酷炫「數據可視化工具」》

設計方法在此:
《超實用!四個方法幫你搞定數據可視化界面設計(附神器)》
《當紅設計趨勢!揭秘信息可視化圖表的設計方法》

原文地址:Awwwards
譯文地址:doo-plus

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

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

點贊
收藏 4

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏