學好三色配色,輕鬆駕馭各種色彩應用(下)
雙色之後再升一個難度就是三色,三色搭配也有很多種,這裡總結了四種比較具有代表性的。
首先第一種就是黑、白、灰。理論上來講黑白灰的配色可以看作是單色,也可以看作是雙色,也可以看成三色,都對,為了便於大家理解這裡給它們劃分的更具體了一些。
如果說黑白配色給人的印象是強烈、直接,那麼黑白灰的配色會緩和許多,給人更多的是一種層次感和遞進關係。
這個海報整體分為三個層次,最底層是黑色,然後是灰色,最上層是白色。
這個海報跟上一個差不多也是黑白灰配色,只不過背景換成了白色。
這個海報的黑白灰不像前兩個那麼直接,而是通過圖形和圖像的色調來表現的,但是整體上也是黑白灰配色。
然後是有彩色的第一種三色形式,近似三色。
顧名思義,近似三色就是三個近似色組合在一起的色彩搭配,比如畫面中的這幾組配色都是近似三色。
這個海報的背景是綠色,上方插圖的顏色使用了紅色和黃色,整體的配色屬於近似三色。
這個海報中的圖形使用的也是近似三色,既能很好的區分色塊同時又能達成整體協調統一的效果。
這個海報屬於純文字版式,通過色塊來增加變化,使用的配色類型也是近似三色。
然後是對比三色,也是使用比較多的三色搭配。
三個對比色組合在一起對比效果強烈鮮明,通常給人的第一印象很搶眼。但是當色彩使用數量從三色往上開始,我們就要注意一個我們之前講過的色彩概念了,就是調和,因為對比強烈,所以色彩的純度和明度就顯得格外重要。
這個海報中使用的三個顏色就是典型的對比三色紅綠藍。
這個海報也是紅綠藍的對比三色,但是跟上一個海報相比色調要更亮一些。
這個海報有些復古的感覺,顏色上也是使用的對比三色,有些鬼魅的感覺,跟主題也是相符的。
然後是分裂補色,前面我們講過互補色就是在色相環上距離180°左右的色彩,而分裂補色就是一個顏色和它對應的補色兩側相鄰的顏色搭配。
這種配色既有補色的對比同時又通過分裂出的補色來緩和這種對比,可以起到適當的中和作用,通常配色效果都很好。
這個海報使用的三個顏色就是分裂補色,整體色調統一配色效果非常和諧。
這個海報的背景使用了灰色,在上方使用了分裂補色的有彩色,通過面積的分布來做調和。
這個海報雖然使用了不同色調,紅色的純度和明度比較高,但是整體分裂補色的配色特徵還是有的。關於單色、雙色、三色的幾種最常見的形式已經介紹完了,這些都是最基本、最實用的方法,至於四色、五色、甚至更多的色彩,其實已經跟色相的關係不大了,更多的是使用色彩調和,通過色相的對比以及調和的緩衝來達成協調美觀的配色效果。
最後我們來看看案例演示。這次我們設計一個品牌時裝的網頁首屏,首先創建版面拉出網格,這裡我們使用的十六欄網格。
先用黑白灰創建版面,填充色塊。
然後將文字內容編排到版面上方,根據網格約束擺放位置,提取關鍵信息放大處理編排到版面下方。
因為要使用到圖片,所以要留出圖片的空間,先用色塊來代替大致的擺放位置。
然後向下移做一些出血處理,並且增加圖片的大小對比,打破版面呆板的佈局。
然後將圖片填充到色塊位置。
下方底層文字由於被圖片遮擋影響識別,所以我們可以在空白處做一個重複編排。
最後將其餘信息依次編排進來,這個版面就設計完成了,這個黑白效果還是不錯的。這裡教大家一個小技巧,就是你在設計的時候先用黑白灰來填充顏色,如果這個版面在黑白灰的狀態下看上去都很美觀,那麼其實你之後的配色只要不是太差基本上都不會出問題,而如果你的版面在黑白灰的狀態下看上去都很彆扭,那麼一方面可能是色彩面積和佈局的問題,另一面可能就是版式的問題,這個小技巧可以幫助大家做自我檢查。
版式我們設計完了,接下來我將本期教程中的所有配色方法都用在了這個版式上,首先是單色中的第一種方法,有彩色加黑白灰。
然後是有彩色加不同純度。
有彩色加不同明度。
有彩色加不同色調。
然後我們再來看雙色,首先是黑白配色。
然後是同類色。
近似色。
中差色。
對比色。
互補色。
最後是三色,首先是黑白灰。
然後是近似三色。
接下來是對比三色。
最後是分裂補色。
這就是我們所謂的彩虹稿,開個玩笑,不過大家自己在做配色練習的時候,還是有必要多去嘗試的。至於在實際工作中具體選擇什麼樣的配色,還要根據體色相的氣質來決定,比如我設計的這個頁面是關於女性和春裝的,所以綠色、粉色、黃色都是可以的。而如果你的老闆或客戶是傻13的話,那你也來個彩虹型配色。
本期教程到這裡就結束了,主要為大家講解了配色訓練的一個流程,就是從色彩的數量出發,先從單色開始練習,然後是雙色,最後是三色,如果這幾種數量的配色沒問題的話,下個階段就可以練習更多的配色,四色、五色甚至是多色。其實無論是多少種顏色只要你瞭解了色彩之間的關係以及配色的規律,那麼在你眼中都是一樣的,並且在自己練習的過程中也可以收集相關的設計作品,長此以往的做這些收集和配色訓練,你的配色能力一定會有所提高。