讓你的配色自帶主角光環(huán)【研習(xí)社】
以下是圖文版:

在我們?cè)O(shè)計(jì)配色的過程中容易忽視一點(diǎn)就是通過色彩來強(qiáng)調(diào)主角,主角的刻畫可以對(duì)版面的優(yōu)劣起到?jīng)Q定性作用,所以在選擇完基本色之后一定要通過色彩來強(qiáng)調(diào)主角,這樣才能達(dá)到一個(gè)良好的版面效果。本期教程就為大家講解幾種強(qiáng)調(diào)主角的配色方式。

一說到主角相信很多人就會(huì)把它跟主色聯(lián)系到一起,其實(shí)主角和主色是兩個(gè)完全不同的概念,所以我們首先需要進(jìn)行一下區(qū)分。

所謂主角通常指的就是畫面中最突出的主體或者是想要突出的主體,所占的面積不一定很大但卻非常重要。而主色我們之前的文章也有講過,就是畫面中最主要的顏色,所占的面積通常都比較大。
比如這張照片,如果問主色是什么相信大家都能答出來就是背景色。

那么主角色呢?主角色實(shí)際上就是人物的顏色,所以主色和主角是不同的概念。
如果從主色、副色、點(diǎn)綴色的角度來看,這里的主角色就是副色和點(diǎn)綴色了。為什么要明確主角呢?因?yàn)榕渖际菑淖钪饕纳书_始的,無論是主色還是主角都是如此,配色之前先確定主角的位置,后面的配色才會(huì)有章可循,并且也可以從配色的角度突出主體。

比如這四張圖片相信大家都能夠分辨出主角是誰,但你是靠什么來分辨出的主角呢,可能有的人會(huì)說是主角本身的突出性,但其實(shí)并不是,因?yàn)檎嬲怀龊蛷?qiáng)調(diào)主角的是色彩。

我們將圖片調(diào)整成黑白就可以很明顯的看出來,主角就沒有彩色的圖片那么好識(shí)別了,這就是使用色彩來強(qiáng)調(diào)主角的重要性。

這就跟電影和電視劇是一樣的道理,每部電影或電視劇中都會(huì)有主角,然后以主角為中心搭配與主角對(duì)抗或者襯托主角的角色,這樣才能將整個(gè)故事串聯(lián)起來。如果主角不明確會(huì)讓人很難有代入感,比如一些明星扎堆的電影百分之八十都是爛片,當(dāng)然這個(gè)問題也只是其中一個(gè)小因素而已。

下面我們來看看相關(guān)的設(shè)計(jì)作品,感受一下主角的重要性。這個(gè)海報(bào)給人的第一印象雖然是大面積背景色粉色,但是主角卻是產(chǎn)品或者是產(chǎn)品和人物形成的組合,而標(biāo)題和裝飾性元素的配色也都是以主角為核心進(jìn)行搭配的,用來營造整個(gè)畫面的氛圍。

這個(gè)海報(bào)我們首先注意到的肯定是上方的女性人物和廣告語,但是主角并不是人物,而是下方的純凈水商品。為了強(qiáng)調(diào)和突出主角,上方的人物圖片很巧妙的處理成了黑白,與下方的有彩色藍(lán)色形成了對(duì)比,可以讓觀者的視線很自然的轉(zhuǎn)向下方的產(chǎn)品。而LOGO使用白色放在右下角又給主角留出了很大的領(lǐng)地空間,從而更加強(qiáng)調(diào)了主角的地位。

這個(gè)海報(bào)的主角很明顯是產(chǎn)品,但是為了營造畫面的氛圍和強(qiáng)調(diào)產(chǎn)品的口味,周圍使用了相關(guān)的元素和色彩,但是我們?nèi)匀荒軌蚝苋菀椎淖R(shí)別出主角,因?yàn)檫@里是通過色相差來襯托主角的,也就是星巴克LOGO的綠色與整體的紅色形成了色相對(duì)比從而強(qiáng)調(diào)了主角,并且也讓草莓的顏色顯得更加鮮艷,可以說綠色的使用明確了畫面的中心,確保了整個(gè)版面的的穩(wěn)定感。

了解了什么是主角之后我們來看看如何通過配色強(qiáng)調(diào)主角,這里我總結(jié)了六種方法,分別是:通過增大色相差異襯托主角、通過提高純度差異襯托主角、通過提高明度差異襯托主角、通過添加其他顏色襯托主角、通過減弱配角色彩襯托主角、通過加強(qiáng)領(lǐng)地空間襯托主角。

首先我們來看通過增大色相差襯托主角,這個(gè)說法有些太像專業(yè)術(shù)語了,說白了就是色相對(duì)比。色相對(duì)比可能大家在平時(shí)配色時(shí)都會(huì)用到,但是很少有人專門為了襯托主角而去使用,其實(shí)色相對(duì)比對(duì)于主角的襯托有著非常大的影響,比如同樣的主角和背景使用對(duì)比色、互補(bǔ)色和使用同類色、近似色得到的效果完全是不一樣的。


色相差有強(qiáng)弱之分,與色相對(duì)比一樣在色相環(huán)上彼此的距離越遠(yuǎn)對(duì)比就越強(qiáng)差異也就越大,也就是說主角的色相與其他色相的差異越大主角的地位就越突出。

這個(gè)海報(bào)的主角很明顯就是立體的英文,而這里正是通過較大的色相差來襯托主角的,淺綠色的文字在藍(lán)色的背景上十分明顯。如果主角的顏色換成與背景差異不大的色相就沒那么突出了。

這個(gè)海報(bào)的主色是大面積背景色,而主角是身穿綠色的兩個(gè)兒童,綠色與紅色形成強(qiáng)烈的互補(bǔ)關(guān)系,所以增大色相差可以很大程度的襯托出主角。

這個(gè)海報(bào)的主角與背景使用了對(duì)比色紅色和藍(lán)色,也是通過色相差來襯托主角,并且主角和背景也形成了很好的冷暖對(duì)比,如果主角使用同類色就會(huì)顯得非常弱了。

第二種方法就是通過提高純度差異來襯托主角。當(dāng)我們想要強(qiáng)調(diào)主角時(shí)除了拉開色相差也可以通過提高純度,讓主角更加突出和穩(wěn)定。


無彩色黑白灰是沒有純度的,而有彩色中純度最高的就是純色,但并不是說主角就得使用純度高的顏色,只要讓主角和其他顏色的純度有較大的落差,主角自然就會(huì)得到相應(yīng)的突出。

海報(bào)的主角使用了鮮艷的黃色,與背景的低純度色形成鮮明的對(duì)比,讓主角非常引人注目。如果將主角的純度調(diào)整成和背景色相同,可能看上去色調(diào)更加一致了,但同時(shí)主角卻被淹沒和平庸化了。

這個(gè)海報(bào)不僅使用了色相差的方法而且還運(yùn)用了純度差,我們將主角的紅色降低純度就可以看出來了,雖然通過色相差還是能夠分辨出主角,但是并沒有高純度時(shí)那么明顯。

這個(gè)海報(bào)也是同樣的道理,主角使用了非常鮮明的黃色,如果將主角的純度調(diào)整成與背景色一樣整個(gè)畫面的色調(diào)就更加明確了,但是主次關(guān)系就不那么明顯了。
不知道大家有沒有發(fā)現(xiàn),我們改的所謂的反面案例其實(shí)就是我們之前講過的統(tǒng)一純度的配色方式,這里我們并不是說后改的就是完全不可行的,只是說如果從凸顯主角的程度來看原作品會(huì)更好一些。

純度可以形成差異明度當(dāng)然也可以,無彩色中白色和黑色的搭配效果是最醒目的,因?yàn)樗鼈冎g的明度差最大。而在有彩色之間不同的明度差所帶來的視覺效果也是不一樣的,如果想要主角突出醒目提高主角與其他色彩的明度差也是不錯(cuò)的方式。



無彩色中明度最高的是白色,最低的是黑色。無論是無彩色還是有彩色只要明度差大主角就會(huì)更加鮮明,而明度差小相反主角就會(huì)顯得不夠清晰不夠引人注目了。

這個(gè)海報(bào)的配色使用的都是無彩色,整個(gè)畫面由黑白灰組成,從顏色上來看主角已經(jīng)很明確了就是版面中心的白色字母,黑色和白色的明度差是最大的,所以黑底白字當(dāng)然也就非常顯眼了。而如果將白色降低明度變成灰色雖然也能分辨出主角,但是整體卻變的模糊甚至帶有臟兮兮的感覺。

這個(gè)海報(bào)的整體色調(diào)都比較偏淡,文字的識(shí)別性也保持在適中的程度,文字組和背景色形成一個(gè)色調(diào)組合,而產(chǎn)品椅子卻用了比其他色彩明度低的顏色,這樣就與其他顏色形成了明度差,主角的地位自然而然的就明確了。而如果略微的提高明度,效果和原圖相比就太過平淡了,主角的地位也不夠明顯。

這個(gè)海報(bào)的主角顯然是紅色的雞頭,而背景和文字都用了明度較高的顏色,這就讓明度較低的紅色異常醒目。而如果將紅色的明度提高到與背景色的明度相近,整體的色調(diào)是統(tǒng)一了但是對(duì)于想要突出和強(qiáng)調(diào)主角這就不是很好了。

之前的三種方式是從色彩三要素的角度出發(fā)的屬于比較直接的方式,而除此之外也有一些比較間接的方法,比如通過添加其他顏色來襯托主角。

這種方式起到的是錦上添花的作用,因?yàn)樵局鹘且呀?jīng)明確了,只是在這個(gè)基礎(chǔ)上讓主角變得更突出,讓整體配色顯得更加清晰和鮮明,給人主角穩(wěn)定的感覺。

這個(gè)海報(bào)就是典型的添加其他顏色來襯托主角,這里使用了類似油畫涂抹的肌理,與主角人物的單色形成了鮮明的對(duì)比,并且在構(gòu)圖上也是很有講究的。而如果將圖片調(diào)整成黑白或者將彩色肌理去掉,整體的感覺不僅顯得單調(diào)而且主角也沒那么鮮明了。

這個(gè)海報(bào)的主角就是兩個(gè)甜品,通過添加色塊來陪襯會(huì)讓版面更加緊湊,并且主角得到了加強(qiáng),整個(gè)畫面的色彩層次也更加豐富,主角堅(jiān)實(shí)的印象讓人一眼就能感受到。而如果去掉色塊主角就是孤零零的存在,而且畫面也顯得凌亂和松散。

這個(gè)海報(bào)的主角就是創(chuàng)意性的人臉,通過周圍添加的色塊形成了有彩色和無彩色的對(duì)比,從而凸顯出主角的地位。如果不添加色塊或者色塊也是無彩色就會(huì)與主角融為一體,不能起到很好的襯托和強(qiáng)調(diào)的作用。

之前的方式都是從主角的角度出發(fā),我們也可以換個(gè)思路從配角的角度出發(fā),要想設(shè)計(jì)出強(qiáng)調(diào)主角的配色就要減少配角色彩的強(qiáng)度,只要對(duì)配角的色彩稍加抑制就可以讓主角凸顯出來。


降低配角的純度或者提高配角的明度都可以起到抑制配角的作用。當(dāng)主角使用純度較高的顏色時(shí)其他配角就盡量避免使用純色或暗色,用淡色或淡濁色都可以起到突顯主角的作用,反過來也是同樣的道理。

這個(gè)電影的海報(bào)整體為暗色調(diào)的紅色,但是女主角卻用了黑白處理,只有銜接處使用了一些紅色,我們說減弱配角色可能有的人就比較死板,真的就以為只能減弱配角色,其實(shí)只要主角與配角存在對(duì)比其實(shí)都可以達(dá)到目的。而如果將主角色與其他顏色混為一體就很難分辨出主角了,并且整個(gè)版面的色彩也是非常沉悶的。

這個(gè)海報(bào)的主角如果從大范圍來看就是圖形組,而如果細(xì)分的話就是黃色的圖形,原因就是色彩的使用,這里運(yùn)用的就是減弱配角的方式,將其他兩個(gè)圖形填充白色,從而凸顯了黃色的主角地位。而如果白色的圖形也填充黃色,那么毋庸置疑主角就是這三個(gè)圖形組,但是無論是從美觀度還是版面的協(xié)調(diào)性上來看都不如原圖的效果好。

這個(gè)海報(bào)除了背景的無彩色白色以外就是咖啡色,但是我們依然能夠分辨出主角是裝著咖啡的杯子,這里不僅是因?yàn)榭Х壬嫌袃r(jià)格的原因,最主要的就是其他的顏色都適當(dāng)?shù)臏p弱了,從而讓主角的咖啡色能夠凸顯出來。而如果我們將其他的顏色都調(diào)整成與主角一致,這時(shí)再去尋找主角就沒有那么容易了。

領(lǐng)地空間我們可以簡單的理解成留白,無論是文字還是圖片周圍都會(huì)有一定的留白面積。而元素周圍的留白面積決定了元素的重要程度,所以只要擴(kuò)大領(lǐng)地空間就會(huì)讓主角被襯托得很強(qiáng)。


當(dāng)元素周圍的領(lǐng)地狹窄也就是留白面積較小并且色彩強(qiáng)度差不多的情況下,元素就比較混亂搞不清誰是主角。而如果擴(kuò)大領(lǐng)地空間主角就會(huì)變的醒目,即使沒有色彩強(qiáng)弱差也能夠清晰地分辨出主角,這就是領(lǐng)地空間的作用。

這個(gè)海報(bào)的主角顯然是位于版面中心的圖像,而文字信息圍繞著主角安排在四個(gè)角落里,并且給主角留有恰當(dāng)?shù)目臻g領(lǐng)地,即使主角所占的面積沒有足夠大,但是通過周圍的留白很好的強(qiáng)調(diào)了主角。而如果我們將主角嘗試著放大一些主角就失去了領(lǐng)地空間,與周圍的文字是一種曖昧不清的關(guān)系,而且由于它的不適當(dāng)?shù)耐怀鰧?dǎo)致了版面不夠協(xié)調(diào),因此美觀度相應(yīng)的也就差了很多。

這個(gè)海報(bào)看似只是照片和文字的組合,其實(shí)并不簡單,因?yàn)檫@里對(duì)于圖片大小的把控非常關(guān)鍵,海報(bào)中為主角留有領(lǐng)地空間,文字并沒有依附其上,沒有影響到主角的地位。而如果我們將圖片放大一些,文字還是保持原來的位置和大小,這時(shí)主角的領(lǐng)地空間就受到了侵占,效果顯然沒有原圖好。

這個(gè)海報(bào)就是圖疊字的情況,整個(gè)圖片和文字充滿了版面,圖片的色調(diào)也相差不多,我們依靠什么去分辨主角呢,就是領(lǐng)地空間,因?yàn)橹虚g坐在沙發(fā)上的人物沒有文字的疊壓,所以我們的目光自然而然的就會(huì)被它吸引,所以它就是主角。而如果文字的編排充滿了版面,沒有什么空間,整個(gè)文字和圖像就會(huì)形成一個(gè)整體,讓我們很難分辨出誰是主角想要強(qiáng)調(diào)的是誰。


最后我們就用一個(gè)案例來為大家演示。通過文案信息能夠了解到我們需要設(shè)計(jì)的是關(guān)于檸檬果汁的招貼海報(bào),根據(jù)本期教程的內(nèi)容首先我們需要提取關(guān)鍵信息來確定主角,針對(duì)這個(gè)海報(bào)顯然把產(chǎn)品當(dāng)作主角來刻畫是最適合的。

第一步先創(chuàng)建版面,然后大致的確定下使用什么樣構(gòu)圖形式,這里我們想設(shè)計(jì)一個(gè)整體成上下結(jié)構(gòu)的版面,然后其中又細(xì)分為左中右的形式,然后根據(jù)這個(gè)構(gòu)圖進(jìn)行細(xì)化。

細(xì)化后的版式已經(jīng)很清晰了,接下來就需要根據(jù)這個(gè)構(gòu)圖的形式來對(duì)文案信息進(jìn)行編排。這里為了體現(xiàn)果汁飲料的柔潤感和香甜感,中文我們選擇偏柔和一些的潤圓體,英文搭配的是偏年輕的Din字體。

把編輯好的文字組放進(jìn)版面就是這個(gè)樣子,將主角產(chǎn)品放置在事先留好的空余位置,找一張相關(guān)的圖片當(dāng)作背景,然后調(diào)整文字的顏色將文字暫且填充白色。
這個(gè)畫面最大的問題就是色彩和文字的識(shí)別性,現(xiàn)在這個(gè)背景的飽和度相對(duì)來說有些高,檸檬的鮮艷度甚至超過了產(chǎn)品,所以觀看這個(gè)畫面的人首先注意的肯定是背景圖片,這就與我們想強(qiáng)調(diào)產(chǎn)品為主角的初衷相違背了,所以我們需要調(diào)整底圖的色彩。
根據(jù)我們之前所講的方法,我們就從純度和明度的角度來看,因?yàn)楸尘暗募兌扔行└撸晕覀兿冉档捅尘暗募兌取?/p>
降低純度之后效果仍然不明顯,那我們可以提高明度來增大與主角的差異。這樣與主角產(chǎn)品在色彩上就拉開了一些差異,我們之前講的方法中還有添加其他顏色、減弱配角顏色以及增加領(lǐng)地空間,對(duì)于這個(gè)版面來說不適合添加其余顏色,因?yàn)闀?huì)影響到整個(gè)版面的調(diào)性,而減弱配角其實(shí)我們已經(jīng)用到了,就是調(diào)整背景的純度和明度,那么增加領(lǐng)地空間呢,雖然這里主角有它自己的位置,但是我們看這個(gè)版面下半部分的文字識(shí)別性并不好,所以我們可以在下面增加個(gè)白色塊。

然后吸取背景中的綠色填充到下放到文字上,那么現(xiàn)在版面的色彩已經(jīng)很合理了,文字的識(shí)別性也沒有問題,但是我們看背景的檸檬與主角的距離有些近,對(duì)主角的地位會(huì)造成干擾,所以將圖片的整體位置向上移動(dòng),這樣就變相的加強(qiáng)了主角產(chǎn)品的領(lǐng)地空間了,到此這個(gè)海報(bào)就設(shè)計(jì)完成了。

那么肯定有人會(huì)想可不可以讓產(chǎn)品和背景的檸檬共同成為主角,其實(shí)也是可以的,只要你有這個(gè)想法,所以我們也做了一個(gè)方案。

這個(gè)方案保留了背景圖片的顏色,但是為了強(qiáng)調(diào)檸檬和產(chǎn)品的黃色,所以將背景圖片中黃色以外顏色進(jìn)行了去色處理,這樣檸檬與產(chǎn)品的顏色自然就形成了一個(gè)組合來充當(dāng)畫面的主角,并且這里我們也調(diào)整了主標(biāo)題,將主標(biāo)題放置在左上角,同時(shí)也為檸檬增加了一些領(lǐng)地空間,沒有了文字的遮擋檸檬也就凸顯出來了。


到此本期的教程就結(jié)束了,我們通過欣賞相關(guān)的設(shè)計(jì)作品來理解了強(qiáng)調(diào)主角的六種方法,當(dāng)然方法不只這六種,并且當(dāng)我們?cè)跒樵O(shè)計(jì)配色時(shí)也并不是說這些方法都要用上,有時(shí)候也許只簡單的使用一種方法就可以達(dá)到強(qiáng)調(diào)主角的目的,所以一定要靈活變通,不能死腦筋。就比如說并不是每一個(gè)設(shè)計(jì)都要用到主角或者需要強(qiáng)調(diào)主角一樣,只是說如果你需要去強(qiáng)調(diào)主角那么這六種方法就可以為你提供幫助,希望大家可以領(lǐng)會(huì)這個(gè)道理。我是本期的講師無我,我們以后見。