繪製 iOS 7 風格的 glyph 細線圖標有何技巧?


用 Adobe Illustrator CC 鋼筆工具畫路徑:

栗子:
1、直接畫線這樣

2、加上粗細(菜單-窗口-描邊):

3、點上「變換」中的"對齊像素網格"(菜單-窗口-窗口):

4、你就看到:

其他栗子:

原地址:Dribbble - Opera CN 9 by Yang Xinlin

原地址:Dribbble - China Icons by Yang Xinlin
這樣寫,隨便一個人都看得懂么,有疑問隨時補充親。
畫好,直接導出分分鐘就給開發用了。
另外這個大家應該都懂的。


好熱鬧的話題~看來最近大家真的是畫很多這樣的圖標。經驗已經總結很多了,我就補充一點偏門的吧:

1. 我是 PS 黨,用路徑自帶的描邊來畫這類圖標,但是記得盡量把 stroke 設成 align 到路徑中央,這樣以後如果需要等比放大縮小的時候調整起來簡單一點

2. 畫圖標時候可以把圖標放在跟最後輸出尺寸相同的智能對象里,然後複製這個對象,以反色的效果同時顯示,這樣畫的時候就有更多的參照了。差不多就像畫畫的時候經常把畫面水平鏡像進行檢查一樣。同理,也可以複製若干份把圖標實時地放到不同背景下檢查效果,如果最終設計是需要兼顧各種背景的話。

3. 縮小到 1x1 大小再取色來保證灰度統一。因為圖標的形狀各不相同,兩個單形/線條圖標之間的面積或者說灰度差別大部分時候我們只能靠肉眼去識別和感覺,但也有一個簡單的方法去實際測量,以供設計整套的時候可以有參考:把圖標做成黑色,放到某個固定尺寸的白背景圖裡面(比如 64x64 大小),合併掉圖層之後把圖片縮小到 1x1,然後這唯一像素點的顏色深淺就能視作為該圖標的面積了。


事實上個人感覺這種風格的圖標跟普通圖標沒有太大區別。繪製完一個普通的圖標,描邊設置填充為0%不就完了?你不需要為這種風格的圖標再花費多餘的勞動力就能得到兩套圖標。以下示例:

一枚羽毛圖標。

1像素描邊,填充設置為0%。


作為不是 GUI/UI/UE... 為職業的 業餘 愛好者,為各位初學者科普一下!專業人士請路過!


先上圖,iOS 7 的這種 icon 是這個樣子的。

那麼,技巧就是:

  1. 在畫圖前需要打好底框,讓每一個圖標都具有大致相當的體量。
  2. 所有線條保持統一粗細。
  3. 整體高度抽象化,且弱化太細小的細節,以免顯得雜亂。
  4. 明確的語意,越是簡單抽象的圖標,越是要把意思表達完整、明確,避免歧義。
  5. 整個圖標要有足夠的「透氣性」,即不要畫得太滿,注意留白。

比如要畫最常見的垃圾桶圖標,先找一張具象圖做參考:

然後,在底框上大致畫出輪廓(注意,用單線條勾勒就好了)

然後設置一個合適的線條粗細,並把每根線條調整到位(這時候底框的作用就顯示出來了),底框將畫面10等分,調整比例的時候,可以用0.1等分作為步長。

繼續調整線條,並增加細節(不用太多,點到為止),然後調整線條末端樣式為圓頭(這個圖標里圓頭的線條更符合整體感覺,平頭顯得太硬了)

最後,記得將線條轉化為輪廓,讓它更加自由!


ai 單曲線拉,控制好留白大小。對於i7這種風格,留白和線與線之間的間隙很重要。


直接用Sketch畫,Ai也是個不錯的選擇


要考慮到選中狀態的形


用AI繪,千萬別用PS


推薦閱讀:

如何製作出 Webshocker 那樣風格獨特的寫實應用圖標?
為什麼災害預警會以顏色表示等級?
怎樣直觀地告訴用戶「該圖標需要長按才能出現效果」?

TAG:圖標設計 | 用戶界面設計 | iOS7 | Glyph | iOSDesign |