UI知識,圖標的認知與設計步驟(3)

來源:站酷 作者:Jenny1314 學習:6937人次

1 必須明確設計需求

即從開始到結束必須牢記并且明確說設計的圖標說代表的功能需求。

比如在設計電話圖標時不能偏離打電話這一需求。這樣設計出來的圖標才會實用,好用,易用

UI知識,圖標的認知與設計步驟_m.theoat.com.cn

2明確設計風格

即必須定一個設計風格,是擬物化,扁平化,還是卡通圖標。在定了風格后要嚴格按所定的風格去設計其它圖標。保持統(tǒng)一性。

3草圖設計

在定了設計風格后,開始草圖設計,用草圖繪出你要設計的圖標形態(tài)。繪制草圖是一個很重要的步驟,可以用手繪或一些軟件。個人建議用手繪,如下圖所示。

UI知識,圖標的認知與設計步驟_m.theoat.com.cn UI知識,圖標的認知與設計步驟_m.theoat.com.cn

4低保真設計

根據草圖用自己所熟悉的設計軟件設計出整個圖標的形狀,等所有元素。如下圖的梅花圖標,先設計出此圖標的所有元素。

UI知識,圖標的認知與設計步驟_m.theoat.com.cn UI知識,圖標的認知與設計步驟_m.theoat.com.cn

5高保真設計(視覺稿)

在低保真的基礎上添加顏色,高光與陰影等細節(jié),最終完成視覺稿如右上圖的梅花圖標所示。

6輸出圖標的格式

一般是png,jpg等

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
花樣錦年2018-05-25 02:37
太棒了
東臨碣石2018-02-25 09:25
瞧瞧
雨傷time2017-05-28 05:29
動手練練

關注大神微博加入>>

網友求助,請回答!