讓你的配色自帶主角光環「研習社」

以下是圖文版:

讓你的配色自帶主角光環「研習社」

在我們設計配色的過程中容易忽視一點就是通過色彩來強調主角,主角的刻畫可以對版面的優劣起到決定性作用,所以在選擇完基本色之後一定要通過色彩來強調主角,這樣才能達到一個良好的版面效果。本期教程就為大家講解幾種強調主角的配色方式。

讓你的配色自帶主角光環「研習社」

一說到主角相信很多人就會把它跟主色聯繫到一起,其實主角和主色是兩個完全不同的概念,所以我們首先需要進行一下區分。

讓你的配色自帶主角光環「研習社」

所謂主角通常指的就是畫面中最突出的主體或者是想要突出的主體,所佔的面積不一定很大但卻非常重要。而主色我們之前的文章也有講過,就是畫面中最主要的顏色,所佔的面積通常都比較大。

比如這張照片,如果問主色是什麼相信大家都能答出來就是背景色。

讓你的配色自帶主角光環「研習社」

那麼主角色呢?主角色實際上就是人物的顏色,所以主色和主角是不同的概念。

如果從主色、副色、點綴色的角度來看,這裡的主角色就是副色和點綴色了。為什麼要明確主角呢?因為配色都是從最主要的色彩開始的,無論是主色還是主角都是如此,配色之前先確定主角的位置,後面的配色才會有章可循,並且也可以從配色的角度突出主體。

讓你的配色自帶主角光環「研習社」

比如這四張圖片相信大家都能夠分辨出主角是誰,但你是靠什麼來分辨出的主角呢,可能有的人會說是主角本身的突出性,但其實並不是,因為真正突出和強調主角的是色彩。

讓你的配色自帶主角光環「研習社」

我們將圖片調整成黑白就可以很明顯的看出來,主角就沒有彩色的圖片那麼好識別了,這就是使用色彩來強調主角的重要性。

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

這個海報我們首先注意到的肯定是上方的女性人物和廣告語,但是主角並不是人物,而是下方的純淨水商品。為了強調和突出主角,上方的人物圖片很巧妙的處理成了黑白,與下方的有彩色藍色形成了對比,可以讓觀者的視線很自然的轉向下方的產品。而LOGO使用白色放在右下角又給主角留出了很大的領地空間,從而更加強調了主角的地位。

讓你的配色自帶主角光環「研習社」

這個海報的主角很明顯是產品,但是為了營造畫面的氛圍和強調產品的口味,周圍使用了相關的元素和色彩,但是我們仍然能夠很容易的識別出主角,因為這裡是通過色相差來襯托主角的,也就是星巴克LOGO的綠色與整體的紅色形成了色相對比從而強調了主角,並且也讓草莓的顏色顯得更加鮮豔,可以說綠色的使用明確了畫面的中心,確保了整個版面的的穩定感。

讓你的配色自帶主角光環「研習社」

瞭解了什麼是主角之後我們來看看如何通過配色強調主角,這裡我總結了六種方法,分別是:通過增大色相差異襯托主角、通過提高純度差異襯托主角、通過提高明度差異襯托主角、通過添加其他顏色襯托主角、通過減弱配角色彩襯托主角、通過加強領地空間襯托主角。

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

色相差有強弱之分,與色相對比一樣在色相環上彼此的距離越遠對比就越強差異也就越大,也就是說主角的色相與其他色相的差異越大主角的地位就越突出。

讓你的配色自帶主角光環「研習社」

這個海報的主角很明顯就是立體的英文,而這裡正是通過較大的色相差來襯托主角的,淺綠色的文字在藍色的背景上十分明顯。如果主角的顏色換成與背景差異不大的色相就沒那麼突出了。

讓你的配色自帶主角光環「研習社」

這個海報的主色是大面積背景色,而主角是身穿綠色的兩個兒童,綠色與紅色形成強烈的互補關係,所以增大色相差可以很大程度的襯托出主角。

讓你的配色自帶主角光環「研習社」

這個海報的主角與背景使用了對比色紅色和藍色,也是通過色相差來襯托主角,並且主角和背景也形成了很好的冷暖對比,如果主角使用同類色就會顯得非常弱了。

讓你的配色自帶主角光環「研習社」

第二種方法就是通過提高純度差異來襯托主角。當我們想要強調主角時除了拉開色相差也可以通過提高純度,讓主角更加突出和穩定。

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

這個海報不僅使用了色相差的方法而且還運用了純度差,我們將主角的紅色降低純度就可以看出來了,雖然通過色相差還是能夠分辨出主角,但是並沒有高純度時那麼明顯。

讓你的配色自帶主角光環「研習社」

這個海報也是同樣的道理,主角使用了非常鮮明的黃色,如果將主角的純度調整成與背景色一樣整個畫面的色調就更加明確了,但是主次關係就不那麼明顯了。

不知道大家有沒有發現,我們改的所謂的反面案例其實就是我們之前講過的統一純度的配色方式,這裡我們並不是說後改的就是完全不可行的,只是說如果從凸顯主角的程度來看原作品會更好一些。

讓你的配色自帶主角光環「研習社」

純度可以形成差異明度當然也可以,無彩色中白色和黑色的搭配效果是最醒目的,因為它們之間的明度差最大。而在有彩色之間不同的明度差所帶來的視覺效果也是不一樣的,如果想要主角突出醒目提高主角與其他色彩的明度差也是不錯的方式。

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

這個海報的主角顯然是紅色的雞頭,而背景和文字都用了明度較高的顏色,這就讓明度較低的紅色異常醒目。而如果將紅色的明度提高到與背景色的明度相近,整體的色調是統一了但是對於想要突出和強調主角這就不是很好了。

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

這種方式起到的是錦上添花的作用,因為原本主角已經明確了,只是在這個基礎上讓主角變得更突出,讓整體配色顯得更加清晰和鮮明,給人主角穩定的感覺。

讓你的配色自帶主角光環「研習社」

這個海報就是典型的添加其他顏色來襯托主角,這裡使用了類似油畫塗抹的肌理,與主角人物的單色形成了鮮明的對比,並且在構圖上也是很有講究的。而如果將圖片調整成黑白或者將彩色肌理去掉,整體的感覺不僅顯得單調而且主角也沒那麼鮮明瞭。

讓你的配色自帶主角光環「研習社」

這個海報的主角就是兩個甜品,通過添加色塊來陪襯會讓版面更加緊湊,並且主角得到了加強,整個畫面的色彩層次也更加豐富,主角堅實的印象讓人一眼就能感受到。而如果去掉色塊主角就是孤零零的存在,而且畫面也顯得凌亂和鬆散。

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

之前的方式都是從主角的角度出發,我們也可以換個思路從配角的角度出發,要想設計出強調主角的配色就要減少配角色彩的強度,只要對配角的色彩稍加抑制就可以讓主角凸顯出來。

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

這個海報的主角如果從大範圍來看就是圖形組,而如果細分的話就是黃色的圖形,原因就是色彩的使用,這裡運用的就是減弱配角的方式,將其他兩個圖形填充白色,從而凸顯了黃色的主角地位。而如果白色的圖形也填充黃色,那麼毋庸置疑主角就是這三個圖形組,但是無論是從美觀度還是版面的協調性上來看都不如原圖的效果好。

讓你的配色自帶主角光環「研習社」

這個海報除了背景的無彩色白色以外就是咖啡色,但是我們依然能夠分辨出主角是裝著咖啡的杯子,這裡不僅是因為咖啡上有價格的原因,最主要的就是其他的顏色都適當的減弱了,從而讓主角的咖啡色能夠凸顯出來。而如果我們將其他的顏色都調整成與主角一致,這時再去尋找主角就沒有那麼容易了。

讓你的配色自帶主角光環「研習社」

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

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

當元素周圍的領地狹窄也就是留白麵積較小並且色彩強度差不多的情況下,元素就比較混亂搞不清誰是主角。而如果擴大領地空間主角就會變的醒目,即使沒有色彩強弱差也能夠清晰地分辨出主角,這就是領地空間的作用。

讓你的配色自帶主角光環「研習社」

這個海報的主角顯然是位於版面中心的圖像,而文字信息圍繞著主角安排在四個角落裡,並且給主角留有恰當的空間領地,即使主角所佔的面積沒有足夠大,但是通過周圍的留白很好的強調了主角。而如果我們將主角嘗試著放大一些主角就失去了領地空間,與周圍的文字是一種曖昧不清的關係,而且由於它的不適當的突出導致了版面不夠協調,因此美觀度相應的也就差了很多。

讓你的配色自帶主角光環「研習社」

這個海報看似只是照片和文字的組合,其實並不簡單,因為這裡對於圖片大小的把控非常關鍵,海報中為主角留有領地空間,文字並沒有依附其上,沒有影響到主角的地位。而如果我們將圖片放大一些,文字還是保持原來的位置和大小,這時主角的領地空間就受到了侵佔,效果顯然沒有原圖好。

讓你的配色自帶主角光環「研習社」

這個海報就是圖疊字的情況,整個圖片和文字充滿了版面,圖片的色調也相差不多,我們依靠什麼去分辨主角呢,就是領地空間,因為中間坐在沙發上的人物沒有文字的疊壓,所以我們的目光自然而然的就會被它吸引,所以它就是主角。而如果文字的編排充滿了版面,沒有什麼空間,整個文字和圖像就會形成一個整體,讓我們很難分辨出誰是主角想要強調的是誰。

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

最後我們就用一個案例來為大家演示。通過文案信息能夠了解到我們需要設計的是關於檸檬果汁的招貼海報,根據本期教程的內容首先我們需要提取關鍵信息來確定主角,針對這個海報顯然把產品當作主角來刻畫是最適合的。

讓你的配色自帶主角光環「研習社」

第一步先創建版面,然後大致的確定下使用什麼樣構圖形式,這裡我們想設計一個整體成上下結構的版面,然後其中又細分為左中右的形式,然後根據這個構圖進行細化。

讓你的配色自帶主角光環「研習社」

細化後的版式已經很清晰了,接下來就需要根據這個構圖的形式來對文案信息進行編排。這裡為了體現果汁飲料的柔潤感和香甜感,中文我們選擇偏柔和一些的潤圓體,英文搭配的是偏年輕的Din字體。

讓你的配色自帶主角光環「研習社」

把編輯好的文字組放進版面就是這個樣子,將主角產品放置在事先留好的空餘位置,找一張相關的圖片當作背景,然後調整文字的顏色將文字暫且填充白色。

這個畫面最大的問題就是色彩和文字的識別性,現在這個背景的飽和度相對來說有些高,檸檬的鮮豔度甚至超過了產品,所以觀看這個畫面的人首先注意的肯定是背景圖片,這就與我們想強調產品為主角的初衷相違背了,所以我們需要調整底圖的色彩。

根據我們之前所講的方法,我們就從純度和明度的角度來看,因為背景的純度有些高,所以我們先降低背景的純度。

讓你的配色自帶主角光環「研習社」

降低純度之後效果仍然不明顯,那我們可以提高明度來增大與主角的差異。這樣與主角產品在色彩上就拉開了一些差異,我們之前講的方法中還有添加其他顏色、減弱配角顏色以及增加領地空間,對於這個版面來說不適合添加其餘顏色,因為會影響到整個版面的調性,而減弱配角其實我們已經用到了,就是調整背景的純度和明度,那麼增加領地空間呢,雖然這裡主角有它自己的位置,但是我們看這個版面下半部分的文字識別性並不好,所以我們可以在下面增加個白色塊。

讓你的配色自帶主角光環「研習社」

然後吸取背景中的綠色填充到下放到文字上,那麼現在版面的色彩已經很合理了,文字的識別性也沒有問題,但是我們看背景的檸檬與主角的距離有些近,對主角的地位會造成干擾,所以將圖片的整體位置向上移動,這樣就變相的加強了主角產品的領地空間了,到此這個海報就設計完成了。

讓你的配色自帶主角光環「研習社」

那麼肯定有人會想可不可以讓產品和背景的檸檬共同成為主角,其實也是可以的,只要你有這個想法,所以我們也做了一個方案。

讓你的配色自帶主角光環「研習社」

這個方案保留了背景圖片的顏色,但是為了強調檸檬和產品的黃色,所以將背景圖片中黃色以外顏色進行了去色處理,這樣檸檬與產品的顏色自然就形成了一個組合來充當畫面的主角,並且這裡我們也調整了主標題,將主標題放置在左上角,同時也為檸檬增加了一些領地空間,沒有了文字的遮擋檸檬也就凸顯出來了。

讓你的配色自帶主角光環「研習社」

讓你的配色自帶主角光環「研習社」

到此本期的教程就結束了,我們通過欣賞相關的設計作品來理解了強調主角的六種方法,當然方法不只這六種,並且當我們在為設計配色時也並不是說這些方法都要用上,有時候也許只簡單的使用一種方法就可以達到強調主角的目的,所以一定要靈活變通,不能死腦筋。就比如說並不是每一個設計都要用到主角或者需要強調主角一樣,只是說如果你需要去強調主角那麼這六種方法就可以為你提供幫助,希望大家可以領會這個道理。我是本期的講師無我,我們以後見。


分享到:


相關文章: