如何制作有效的圖標

幾何

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

如何制作有效的圖標_m.tgudhdp.cn

 


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

如何制作有效的圖標_m.tgudhdp.cn

 


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

如何制作有效的圖標_m.tgudhdp.cn


 

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

如何制作有效的圖標_m.tgudhdp.cn


界面圖標

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

如何制作有效的圖標_m.tgudhdp.cn

 

 

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

 

1 選擇圓角矩形工具?

如何制作有效的圖標_m.tgudhdp.cn


2 拖拽鼠標,畫出形狀

如何制作有效的圖標_m.tgudhdp.cn


3 根據(jù)所需調(diào)整線條粗細

如何制作有效的圖標_m.tgudhdp.cn

 

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

如何制作有效的圖標_m.tgudhdp.cn

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


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

如何制作有效的圖標_m.tgudhdp.cn


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

如何制作有效的圖標_m.tgudhdp.cn


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

如何制作有效的圖標_m.tgudhdp.cn


7 現(xiàn)在,在桶身上繪制三條直線。

如何制作有效的圖標_m.tgudhdp.cn

 


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

如何制作有效的圖標_m.tgudhdp.cn

 


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

如何制作有效的圖標_m.tgudhdp.cn

 


線條/填充工具:形狀的線條色和填充色之間的轉(zhuǎn)換。

如何制作有效的圖標_m.tgudhdp.cn

 


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

 

如何制作有效的圖標_m.tgudhdp.cn


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

 

如何制作有效的圖標_m.tgudhdp.cn

 

 

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

 

如何制作有效的圖標_m.tgudhdp.cn


 

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

全教程完,學完記得交作業(yè)。如果本教程對您有所幫助,請推薦給你的朋友。

學習 · 提示

  • 打開ps,跟著教程做一遍,做完的圖要到這里交作業(yè):提交作業(yè)
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:ps新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們微博:@photoshop教程論壇
  • 想學更多的同學,可以訂閱我們郵件,每天都有新教程發(fā)給你:http://t.cn/Rzm5o8Y
PS教程自學網(wǎng) 歡迎投稿原創(chuàng)或轉(zhuǎn)載教程:http://i.16xx8.com
    只為等你13144 說: 棒
    大內(nèi)密探玖 說: 簽到
    欠費樓 說: 給力
    忠勇戰(zhàn)士 說: 感謝老師無私奉獻
    一眼蒼涼 說: 學習了,好東東