配色方法,三種UI的選擇配色方法(3)

來源:站酷 作者:悟思VOOSSI 學(xué)習(xí):10014人次

3、 調(diào)整透明度(1%-100%隨意,省心的做法是直接鍵入一個(gè)整數(shù)值,比如:輕質(zhì)感類頁(yè)面可以選20%-40%,重質(zhì)感感類可以鍵入60%或以上)

如下圖(將色塊使用“柔光”混合模式,調(diào)整不一樣的數(shù)值得到不同的效果)

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

同樣的方法:界面中的字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用這樣的方法取色使用這個(gè)方法的優(yōu)點(diǎn)是:色彩獲得比較簡(jiǎn)單 , 無需了解色彩的指數(shù)和直方圖 , 不用看色輪.....只需要設(shè)計(jì)師具備色彩的審美 , 能夠合理的應(yīng)用。

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

方法三: 色彩提取法

這個(gè)方法是從現(xiàn)有的自然色、圖片色中提取所要的顏色,給應(yīng)用和搭配贏得了不少的時(shí)間。

1、找圖

找一張符合所要設(shè)計(jì)界面風(fēng)格的圖(本教程用圖為Galaxy S4自帶壁紙)

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

2、提取顏色

將圖片放入PS中,點(diǎn)擊“存儲(chǔ)web所有格式”(Windows快捷鍵為Ctrl+shift+Alt+s),格式選擇png,色塊選擇8。

在顏色顯示區(qū)域會(huì)留下8種顏色,點(diǎn)擊顏色區(qū)域右側(cè)下拉按鈕,會(huì)找到“存儲(chǔ)顏色表”,把他存儲(chǔ)到桌面上或者你容易找到的地方。然后用PS打開,色板中會(huì)顯示剛才提取到的顏色。

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

成功提取出8種顏色

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

3、應(yīng)用

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

配色方法,三種UI的選擇配色方法_www.theoat.com.cn

具體的顏色應(yīng)用為:

1、導(dǎo)航文字及l(fā)ogo的顏色為最淺的藍(lán)色;

2、Banner區(qū)域既大背景,這里用了開始的圖片。上面的大標(biāo)題logo則用了最深的藍(lán)色;

3、內(nèi)容區(qū)域出現(xiàn)的提取到的三個(gè)色相的色彩,如果只是排列剩下的幾個(gè)顏色的話,顏色會(huì)很沖,所以用了幾張圖片來過度顏色調(diào)整畫面的節(jié)奏。現(xiàn)在看來效果還不錯(cuò),內(nèi)容區(qū)域的文字顏色與導(dǎo)航文字一致,都是最淺的藍(lán)色;

4、內(nèi)容區(qū)域的幾個(gè)按鈕并沒有用提取的顏色,而是用白色疊加然后調(diào)整透明度出來的。

總結(jié) : 以上的三種配色方法思路是完全不一樣的,希望多多少少能帶給大家一些收獲。在學(xué)習(xí)新的方法的同時(shí),也要學(xué)會(huì)舉一反三,結(jié)合自己已有的經(jīng)驗(yàn)和設(shè)計(jì)師獨(dú)有的對(duì)色彩的感覺,形成一套屬于自己的配色方法。

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

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

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

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