當(dāng)前位置:首頁 >影樓數(shù)碼 >數(shù)碼后期 >配色方法,三種UI的選擇配色方法

數(shù)碼后期 配色方法,三種UI的選擇配色方法

文章來源:其他網(wǎng)絡(luò)   我要投稿  
數(shù)碼后期

方法一:色輪配色

色輪由 12 種基本的顏色組成。

首先包含的是三原色( Primary colors ),即藍(lán)、黃、紅。

原色混合產(chǎn)生了二次色( Secondary colors ),用二次色混合,產(chǎn)生了三次色( tertiary colors )。

色輪有五個(gè)同心環(huán)組成,從暗到亮-暗色處于大環(huán),明色處于小環(huán),而中間是顏色的基本色相。

配色方法,三種UI的選擇配色方法_www.16xx8.com

根據(jù)顏色的關(guān)系有以下幾種配色分類

a、單色配色

單色搭配就是以一個(gè)顏色為主,然后利用顏色的深淺來進(jìn)行搭配的方法,即色輪中,一種色相的暗、中、明三種色調(diào),單一顏色是比較單調(diào),所以利用顏色的深淺變化來增加多彩性。

配色方法,三種UI的選擇配色方法_www.16xx8.com

優(yōu)點(diǎn):畫面統(tǒng)一,搭配時(shí)相對簡單而且一般都不會給人難看的感覺,一般不會給人難看的感覺。

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

b、鄰近色配色

在色相環(huán)上相鄰的色彩互為鄰近色

配色方法,三種UI的選擇配色方法_www.16xx8.com

優(yōu)點(diǎn) : 色調(diào)統(tǒng)一,具有低對比度的和諧美感。這種顏色搭配產(chǎn)生了一種令人悅目、低對比度的和諧美感。類比色非常豐富,在設(shè)計(jì)時(shí)應(yīng)用這種搭配同樣讓你輕易產(chǎn)生不錯(cuò)的視覺效果。

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

c、互補(bǔ)色和對比色配色

互補(bǔ)色是在色相環(huán)上180°相對的兩個(gè)顏色,而對比色則是在色相環(huán)上150°到180°范圍內(nèi)相對的兩個(gè)顏色。

配色方法,三種UI的選擇配色方法_www.16xx8.com

優(yōu)點(diǎn):補(bǔ)色和對比色形成強(qiáng)列的對比效果,傳達(dá)出活力、能量、興奮等意義。補(bǔ)色要達(dá)到最佳的效果,最好是其中一種面積比較小,另一種比較大。比如在一個(gè)藍(lán)色的區(qū)域里搭配橙色的小圓點(diǎn)。

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

d、分裂補(bǔ)色配色

如果我們同時(shí)用補(bǔ)色及類比色的方法來確定的顏色關(guān)系,就稱為分裂補(bǔ)色。

配色方法,三種UI的選擇配色方法_www.16xx8.com

優(yōu)點(diǎn):這種顏色搭配既具有類比色的低對比度的美感,又具有補(bǔ)色的力量感。形成了一種既和諧又有重點(diǎn)的顏色關(guān)系。如在上面三種顏色中,紅色就顯得更加突出。

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

e、原色搭配配色

除了在一些兒童的產(chǎn)品中,三原色同時(shí)使用是比較少見的。但是,無論是在中國還是在美國的文化中,紅黃搭配都是非常受歡迎。紅黃搭配應(yīng)用的范圍很廣――從快餐店到加油站,我們都可以看見這兩種顏色同時(shí)在一起。

藍(lán)紅搭配也很常見,但只有當(dāng)兩者的區(qū)域是分離時(shí),才會顯得吸引人,如果是緊鄰在一起,則會產(chǎn)生沖突感。

配色方法,三種UI的選擇配色方法_www.16xx8.com

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

f、二次色搭配

二次色之間都擁有一種共同的顏色――其中兩種共同擁有藍(lán)色,兩種共同擁有黃色,兩種共同擁有紅色,所以它們輕易能夠形成協(xié)調(diào)的搭配。

配色方法,三種UI的選擇配色方法_www.16xx8.com

優(yōu)點(diǎn):如果三種二次色同時(shí)使用,則顯得很舒適、吸引,并具有豐富的色調(diào)。它們同時(shí)具有的顏色深度及廣度,這一點(diǎn)在其它顏色關(guān)系上很難找到。

案例:

配色方法,三種UI的選擇配色方法_www.16xx8.com

方法二: 疊柔配色法

這個(gè)方法,看起來復(fù)雜,但用起來很簡單。

主要分三個(gè)步驟

1、任意選擇一個(gè)白色或黑色 , 或黑白漸變(可以是點(diǎn)、線、面…甚至字體

2、 然后混合模式選擇疊加或柔光

配色方法,三種UI的選擇配色方法_www.16xx8.com

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

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

配色方法,三種UI的選擇配色方法_www.16xx8.com

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

配色方法,三種UI的選擇配色方法_www.16xx8.com

方法三: 色彩提取法

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

1、找圖

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

配色方法,三種UI的選擇配色方法_www.16xx8.com

2、提取顏色

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

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

配色方法,三種UI的選擇配色方法_www.16xx8.com

成功提取出8種顏色

配色方法,三種UI的選擇配色方法_www.16xx8.com

3、應(yīng)用

配色方法,三種UI的選擇配色方法_www.16xx8.com

配色方法,三種UI的選擇配色方法_www.16xx8.com

具體的顏色應(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è)顏色的話,顏色會很沖,所以用了幾張圖片來過度顏色調(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é)會舉一反三,結(jié)合自己已有的經(jīng)驗(yàn)和設(shè)計(jì)師獨(dú)有的對色彩的感覺,形成一套屬于自己的配色方法。

更多影樓遠(yuǎn)程數(shù)碼后期修片教程盡在全影網(wǎng)。

官方微博:@全影網(wǎng) https://weibo.com/7192com

官方微信:想在手機(jī)上獲取最新鮮資訊嗎?添加全影網(wǎng)官方微信:www7192com

免責(zé)聲明:

本站部分內(nèi)容、觀點(diǎn)、圖片、文字、視頻來自網(wǎng)絡(luò),僅供大家學(xué)習(xí)和交流,真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾。如果本站有涉及侵犯您的版權(quán)、著作權(quán)、肖像權(quán)的內(nèi)容,請聯(lián)系我們(0536-8337192),我們會立即審核并處理。

我要評論

當(dāng)前已有loading...個(gè)參與
驗(yàn)證碼: 驗(yàn)證碼,看不清楚?請點(diǎn)擊刷新驗(yàn)證碼

名企招聘

人才求職

婚紗攝影

人才網(wǎng)X 關(guān)閉

掃描訪問手機(jī)版