[UI設(shè)計(jì)]這2招配色訣竅,零基礎(chǔ)的小白也能輕松學(xué)會(huì)!
2020-08-10
配色/干貨/教學(xué)/零基礎(chǔ)
今天將要分享的是一個(gè)我們?cè)谠O(shè)計(jì)中經(jīng)常會(huì)用到的「配色」。
很多設(shè)計(jì)師工作幾年后還是對(duì)配色摸不著頭腦,每次做設(shè)計(jì)依舊沒有頭緒,不知道如何下手,不知道選擇什么顏色搭配自己相關(guān)的設(shè)計(jì),看完今天的教程分享后希望對(duì)配色有困難的你有所幫助。
首先我需要告訴大家的是,我這里分享的配色方法并不是網(wǎng)絡(luò)上或者書本上看到的那些理論性超強(qiáng)的文字?jǐn)⑹?。在我的配色技巧中,沒有那么多的約束,也不需要記住那么多理論性的知識(shí)。不過(guò)大家能記住理論知識(shí)是最好的,記不住也沒有關(guān)系,因?yàn)槲覍?huì)帶給你超簡(jiǎn)單的配色方法。
其實(shí)很多人也許看過(guò)了關(guān)于配色技巧的文章,或者知道很多配色網(wǎng)站自帶大量的配色模板,但是當(dāng)你自己動(dòng)手設(shè)計(jì)的時(shí)候,還是不知道如何在那么多配色體系中選擇合適的色彩,來(lái)搭配自己的作品。這是什么原因呢?
其實(shí)配色并不是單獨(dú)存在的,很重要的是要考慮你設(shè)計(jì)的主體。不同的設(shè)計(jì)主體,所要達(dá)到的目標(biāo)不一樣,就決定了配色理論也會(huì)存在差異。書本,文章都在寫配色的理論,每個(gè)人講的配色理論有很多相同的地方,但是最核心的理論往往都不是相同的。因?yàn)榇蠹抑v的相同部分,大多都是色彩的理論部分,這部分而大家所講的不同部分,則通常是作者在自己所在領(lǐng)域總結(jié)的一套配色規(guī)則。
因此,并非每篇文章的配色理論都適合你,這也是當(dāng)你學(xué)習(xí)完很多配色方法和理論后,仍然不知道怎么配色以及配不好色的原因。事實(shí)就告訴我們?cè)趯W(xué)習(xí)配色時(shí),完全學(xué)習(xí)配色理論是完全不夠的。的作用。
舉個(gè)簡(jiǎn)單的例子,這里分別需要兩張海報(bào)。
第一張海報(bào):主體是咖啡(這里的咖啡海報(bào)只需要達(dá)到宣傳的作用即可,不需要促銷)。
第二張海報(bào):主體是促銷女裝(通過(guò)文字主體可以植入這張海報(bào)的目的,那就是促銷,需要達(dá)到吸引用戶的眼球,最終引發(fā)購(gòu)買的欲望)。
首先來(lái)看我們的第一張咖啡的海報(bào),這里的設(shè)計(jì)主體是“咖啡”,我們還要知道咖啡的使用場(chǎng)景一般就是休閑時(shí)光,和放松自己才會(huì)選擇替代的。那么通過(guò)這兩點(diǎn),我們就要明白設(shè)計(jì)所要達(dá)到的目標(biāo)「給人一種放松愉悅的心情,能在緊繃的神經(jīng)下看到你的海報(bào)放松,得到輕松的心情。」
那么我們可以簡(jiǎn)單地做兩個(gè)海報(bào)做一下對(duì)比:
這兩張海報(bào)的尺寸都是完全一致的,除了背景顏色和字體的顏色不同。對(duì)于這兩張海報(bào),在你一眼看到后,你會(huì)更喜歡哪一張呢呢?
我的答案是:咖啡海報(bào)一。
也許會(huì)有很多人都會(huì)選擇第一張白色背景的,為什么呢?在這里我給大家簡(jiǎn)單的分析一下吧。
首先已經(jīng)提到咖啡的使用場(chǎng)景和作用,是為了幫助疲勞的人得到放松的,白色就能很好的讓人放松,咖啡色看起來(lái)就給人一種沉悶的感覺,并且在咖啡色背景上,咖啡豆的品質(zhì)也很難得到很好的展現(xiàn),相反的是白色,干凈的背景以及大量的留白空間,能很好的給人一種放松和舒適感,咖啡豆在白色背景的映襯下也更好的展現(xiàn)出它的品質(zhì)。
接下來(lái),再看看我們的第二張海報(bào)──促銷女裝。
海報(bào)所有人:促銷女裝(通過(guò)文字主體可以植入這張海報(bào)的目的,那就是促銷,需要達(dá)到吸引用戶的眼球,最終導(dǎo)致購(gòu)買的欲望。)
不難理解,這里的海報(bào)目的當(dāng)然是達(dá)到促銷熱賣的效果,能夠極大地吸引用戶并且完成購(gòu)買操作,這樣才能達(dá)到我們的目的。
促銷海報(bào)對(duì)于色彩而言是很重要的,設(shè)計(jì)師需要通過(guò)對(duì)海報(bào)色彩的選擇吸引用戶看到你的海報(bào),既然是促銷,那么熱鬧的肯定肯定是不可能的。
我們還是直接通過(guò)一張簡(jiǎn)單的色彩對(duì)比海報(bào)來(lái)直觀的體會(huì)色彩的本質(zhì)吧。
同樣的,兩者張海報(bào)的布局都是一樣的,除了背景色彩和文字的顏色不同,那么這兩張海報(bào)哪一張尺寸對(duì)齊和促銷效果呢?
我的答案依舊是:促銷女裝海報(bào)一。
因?yàn)榧t色本身就給人一種熱鬧的,促銷的,大降價(jià)的活動(dòng)感。和背景紅色的選擇和模特本身的服裝顏色也是很接近的,雖然都是紅色,但是明度不一樣,所以并不會(huì)影響模特主體人物服裝。而白色背景的海報(bào)看起來(lái)沒有促銷感,也和模特本身不搭,和主題文字的風(fēng)格也不搭配。
這里我為什么會(huì)選擇白色和紅色做對(duì)比呢?
因?yàn)槲乙嬖V大家的是配色的使用場(chǎng)景,以及整個(gè)設(shè)計(jì)所要達(dá)到的目標(biāo),這句話的本質(zhì)。可以看到我的兩個(gè)海報(bào)色彩搭配,咖啡海報(bào)采用白色就會(huì)很容易,但是促銷女裝海報(bào)采用就格格不入,如果把紅色換到咖啡海報(bào)背景色,那也是完全不搭的。
上面說(shuō)了這么多,只是告訴你們?cè)谶x擇配色時(shí)需要注意的配色的使用場(chǎng)景,以及整個(gè)設(shè)計(jì)所要達(dá)到的目標(biāo),這個(gè)也是我們?cè)谂渖珪r(shí)非常重要的。
到底應(yīng)該怎么配色呢?怎么選擇合適的顏色呢?接下來(lái)就教給大家2個(gè)簡(jiǎn)單實(shí)用的方法。
從圖片吸取色值搭配
也就是說(shuō)我們可以從主題一致或接近的圖片上,吸取色值作為我們的配色,當(dāng)然我們需要選擇合適的,好的配色圖片作為吸取色值的對(duì)象。
體現(xiàn):設(shè)計(jì)一張冰淇淋海報(bào)。
那么我們就在網(wǎng)站上找一下冰淇淋的圖片,我找到的如下:
從圖片吸取的顏色有:
做出的海報(bào):
粉色是給人甜美,溫柔和純真,浪漫的感覺,冰淇淋也是夏天女孩的喜愛,冰淇淋帶給人甜蜜,清涼的,和粉色色彩搭配是完全可以的。
此外,我在網(wǎng)站上找到的第二張顏色參考圖如下:
從圖片吸取的顏色有:
做出的海報(bào):
這張海報(bào)主要的就是淡藍(lán)色,一種冰涼的感覺,夏天就是要這樣的冰涼,搭配冰淇淋產(chǎn)品更是再合適不過(guò)。
雖然是做冰淇淋的海報(bào),但不是說(shuō)只找冰淇淋相關(guān)的圖片做吸色的參考。同樣的,其他好的配色圖片我們一樣可以拿過(guò)來(lái)運(yùn)用到我們的色彩搭配中。
我們找到下面兩張夏天的創(chuàng)意背景參考圖:
分別吸取色值:
運(yùn)用到海報(bào)中的效果:
接下來(lái)說(shuō)一下配色的第二種方法。
從產(chǎn)品/素材中吸取搭配
通過(guò)對(duì)主體或者素材中的吸取色值運(yùn)用到自己的配色中,當(dāng)然不能一味的只知道吸取,不知道靈活的改變。一些微調(diào),從而達(dá)到不影響主體,還能更加適合整個(gè)版面的協(xié)調(diào)性。
以下面這個(gè)模特人物為主體,做一張女裝促銷海報(bào),主題還是以國(guó)潮為主。
原本吸取的色值:
調(diào)整后的色值:
分別做出的海報(bào):
△原本吸取的色值做出的海報(bào)
△調(diào)整后的色值做出的海報(bào)
對(duì)比一下就出來(lái)了不是,如果直接吸取模特衣服的顏色作為背景,就會(huì)使整個(gè)海報(bào)看起來(lái)和我們的主題完全不搭,并且也不能很好的突出我們模特身上的形象和氣質(zhì)。
通過(guò)對(duì)色值明暗的調(diào)整,海報(bào)的檔次一下就提升了,并且更加符合國(guó)潮風(fēng)格的氣質(zhì)。
例如下面這一張圖,以“大暑”為主題設(shè)計(jì)海報(bào)。
我們分別吸取圖片荷葉一處亮部的色值和一處暗部的色值。
△亮部
△暗部
分別做出兩張背景色不一樣的海報(bào):
△吸取荷葉亮部圖片得到的海報(bào)
△吸取荷葉暗部圖片得到的海報(bào)
兩張不一樣的海報(bào)就出來(lái)了,但是給人的感覺卻是大不相同的。第一張亮綠的海報(bào)給人的感覺就是背景色和素材荷花圖片的色彩很不協(xié)調(diào),不統(tǒng)一,風(fēng)格也不一樣,和整個(gè)海報(bào)看起來(lái)沒有質(zhì)感。
相反的,深色背景的海報(bào)給人的感覺會(huì)變得高檔很多,并且圖片素材和背景的顏色非常接近,整個(gè)畫面就會(huì)出現(xiàn)統(tǒng)一的和諧很多,中國(guó)風(fēng)的視覺體驗(yàn)也會(huì)更加強(qiáng)烈。