配色教程,教大家如何規(guī)范配色(2)

來源:站酷 作者:魅惑濃眼貓 學(xué)習(xí):7327人次

整理

整理出界面元素:背景(承載內(nèi)容信息的背景),圖標(biāo)(功能圖標(biāo),豐富內(nèi)容圖標(biāo)),文字,按鈕,線條

整理界面元素樣式:顏色,大小,邊距(據(jù)相鄰元素上下左右邊距,內(nèi)外邊距等)

理清產(chǎn)品的模塊以及界面構(gòu)成

定義

將文字,背景,按鈕,線條顏色進(jìn)行“標(biāo)簽定義” 可以根據(jù)自己的習(xí)慣進(jìn)行定義

(我設(shè)計(jì)的時(shí)候沒有將圖標(biāo)顏色納入規(guī)范,圖標(biāo)是命名好,替換圖片就可以了,具體根據(jù)產(chǎn)品需求來設(shè)計(jì),圖標(biāo)開發(fā)也是可以疊色的)

www.theoat.com.cn_0326424332-2.jpg

輸出

當(dāng)定義好元素后我們就去界面上做標(biāo)記,將你會(huì)復(fù)用,并一直復(fù)用的元素定義為一個(gè)標(biāo)簽,比如文字:進(jìn)行文字序列排號(hào)T1,T2,T3......并命名,一級(jí)標(biāo)題T1,正文文字T2,亮色文字T3...

將每個(gè)標(biāo)簽代表的位置說明寫出來,然后將標(biāo)簽丟到界面上,和開發(fā)信息對(duì)齊,確定好規(guī)則顏色

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!