乾貨!設計中最容易上手的配色方法

乾貨!設計中最容易上手的配色方法

乾貨!設計中最容易上手的配色方法

文章很長,但是值得一看,對於初學者瞭解色彩的幫助很大~

以下知識點請牢記!(一萬個非常重要~~~)

色相環:360度 adobe軟件中色條首尾相連就是色相環;

色料三原色(印刷 繪畫):青、品紅、黃 三者之間相距120度,如下圖;

色料三間色:橙、綠、紫 三者之間相距120度;

色彩三要素:色相(Hue)、純度(飽和度Suturation)、明度(Brightness)。

乾貨!設計中最容易上手的配色方法

生活中普通人是這樣認識顏色的,如紅色這樣形容的,最紅最紅的紅、淺紅色、粉紅色、桃紅色、玫紅色、暗紅色、櫻桃紅等等,千變萬化,為什麼產生了這些叫法呢,是個人感受以及生活參照物導致的。實際是跟上面我們提到的色彩三要素息息相關。第一是物體色相對人的影響,第二是顏色中的飽和度與明度的變化。如果你畫過顏料畫就很好理解了(繪畫功底比較強的童鞋可以開會小差~~~)

下面老鐵帶著大家模擬一下繪畫中的調色方法,當我們看到一個顏色,給人的感官無非就是發粉、發暗、發灰,從顏料盒中調一個顏色,然後在通過觀察它的視覺感受,無非就是通過感受調入白色、黑色、灰色(黑白都有了就是調入灰色)當黑多白少為暗灰色,白多黑少淺灰色。這樣一個看到的顏色就還原出來了。繪畫中還有一個媒介是加水調成半透明,使得畫面能夠疊加出不同的層次感。軟件裡可不能加水的,他是通過降低圖層的不透明度來實現的。

我們通過下面這張圖來觀察顏色的飽和度與明度,首先看右上角這個藍色HSB值中當SB(都為100是純色);在最右上端純色到白的過渡稱作為明色調(飽和度變化);最右上端純色到黑色的過渡稱作為暗色調(明度變化);最左下端黑色到白色的過渡稱作為灰色調(灰度變化);最右上端純色到左下角的黑色的過渡稱作為濁色調(飽和度與明度同時變化)這些都是顏色發生色彩三要素中的明度與飽和度的變化,我們從色條中可以更改色相。

是不是再讓你觀察顏色你就很清晰明瞭了~~~

乾貨!設計中最容易上手的配色方法


以上的理論都是為了觀察調出一個準確的顏色。

2.認識色調

下面我們來認識一下畫面中色調的形成原理,請看下圖在讀文字。色調是通過飽和度與明度的降低與升高來完成的。如純色調是SB值都是100,向左添加白色分別為明色調與淡色調,分別是混入的白色多少決定的,沒有加入黑色喲~~。純色調加入黑色降低B的值S還是100,為暗色調。純色加入黑白(SB都降低)稱作為濁色調(黑白差不多一樣)、淡濁色調 (白多黑少)。當HSB(SB為0 0 H0-360)情況下為黑色調,當HSB(SB為0 100 H0-360)情況下為白色調,中間過渡的為灰色調。

有時候我們在不確定一個顏色如何命名的時候也可以稱作為藍綠色,哪個名稱在前給我們的視覺感受就多一些,好比吃飯的時候點個菜,西紅柿炒雞蛋一定是西紅柿多,除非你說雞蛋炒西紅柿,老闆陪了(但如果多掏錢也是允許的),應該很好理解吧。

色調還與心理相關比如說是浪漫的、純真的、優雅的、柔和的、安穩的、和緩的、希望的、進步的、優雅的、女性的、沉穩的、朦朧的、自然的、可愛的、稚嫩的、甜美的、俏皮的、單純的、革命的、歡喜的、氣派的、豪華的、奢華的、快樂的等等。這些都是我們的心理感受並沒有確定的顏色指向只能用心去感受。

乾貨!設計中最容易上手的配色方法

學習完上面的顏色以及色調了,我們就開始來研究畫面中的顏色是如何搭配的。還是先來認識一下色彩在色相環中的角度產生的對比關係,以180度為基準,180度相對的兩個顏色對比最強,隨著角度的降低,會逐漸減弱的。

下面這張圖是老鐵喜歡用來提取顏色的網頁,我叫它配色神器。

配色網站地址 http://www.peise.net/tools/web/

乾貨!設計中最容易上手的配色方法

通過上面的圖解我整理出顏色的對比法則有以下幾點:

單色:通過改變一個顏色純度(飽和度)與明度來完成色彩搭配。

同類色:兩個顏色相隔15度以內。

類似色:兩個顏色相隔30度。

鄰近色:兩個顏色相隔60度-90度。

對比色:兩個顏色相隔120度-150度。(三角形搭配 矩形搭配)

互補色:兩個顏色相隔180度。

黑白色:當改變黑與白的明度色彩,會產生不同的灰色,在兩端的黑與白也是最強對比。任何有彩色與無彩色(黑白)都是對比,在有彩色中黃色明度比較高,上面如果放白色的形狀會看不清,我們可以將所有有彩色去色後發現其中也有明度的深淺變化,當白色放到有彩色上觀察能不能夠看清楚再去合理使用。

通過上面顏色在色相環上不同的角度產生的對比關係,我們來分析一下版面中的顏色搭配方法是使用了哪種對比!!!想把畫面的顏色搭配好需要考慮的方面很多,畫面中色彩給人的感受,這是在感性認識。我們還要從理性的角度分析與色彩三要素息息相關。一個顏色純度(飽和度)和明度不同,給受眾的視覺感受也大不相同。在色調確定上應該將一個顏色明度與純度以及同類色、類似色、鄰近色都考慮在內。面積的大小是我們確定的標準,同類色、類似色、鄰近色是為了豐富畫面的視覺效果必不可少的因素。有時我們還以色彩的冷暖為依據來形容畫面的色調。

下面我們拿幾個廣告版面去分析色彩搭配分析,版面中色彩需要遵循以下幾點來進行色彩搭配:

色調:畫面中面積最大的色彩傾向,或冷或暖。

對比:在色相環中的角度,以及面積多少都能產生不同視覺感受。

視覺流程:色彩的搭配是否符合視覺閱讀的先後順序。

造型:色彩與造型密不可分,畫面中的版式創意以及與產品之間的關係,這些都是建立在色彩的基礎之上。

色彩的黃金法則 60:30:10

主色是60%的比例,次要色彩是30%(對比關係的顏色)的比例,輔助色彩是10%的比例。世界最好的設計基本上都脫不了這個法則,這是很簡單的道理,但我們往往都會忽略它。有一雙會發現色彩的眼睛很重要。我們經常去旅遊,也拍了很多照片,更多人會熱衷於對美景的讚歎和對當地的風土人情的介紹,但是很少人對色彩有分析。其實60:30:10多少也是得到了自然界的啟發。我想在我們整個自然生涯中,旅行就是很好的色彩課。

勿忘黑色

現在我們看到很多所謂現代簡約風格都會利用黑色,但是要靈巧運用黑色,而不是用太多的黑色。黑色能夠讓任何一個色彩看起來乾淨,但它本身並不是一個重點,它能夠給家庭營造一種對比平衡。巧妙的運用黑色,可以是一個黑色的箱子,畫框,做一種點綴,效果是十分不錯的。

乾貨!設計中最容易上手的配色方法

色調:明色調(暖色調或橘紅色調)

對比:同類色(橘紅、橘黃、大紅、白色)

視覺評論:背景的主色為明色調中運用了橘紅、橘黃通過改變了它們的明度與純度來豐富畫面的空間感,模特的衣服也是運用了大紅色也是同類色與背景反差不是很大。文案的字體運用了白色很明顯符合視覺流程以及對比關係,排在第一位。蘇寧大家電爽11主場文字在背景明度比較低上非常明顯突出但字體比較小沒搶主體文字,排在第二位,其次才是下面文案與背景顏色差別不大屬於同類色排在第三位。以及做為點元素的產品起到點綴作用顏色上給了不透明度以及反光的黃色。模特有時候在畫面中與主文案一起排在第一位有的高於文案跳出來作為第一位都是合理的,當前這張排在字前面,字的地方有所遮擋,這與版式構成有關聯。也遵循著視覺從左而右從上而下,在結合顏色就更好的體現了。畫面虛實結合、動靜結合、點線面運用合理。

乾貨!設計中最容易上手的配色方法

色調:明色調(暖色調或橙色調)

對比:類似色(橘紅、橘黃、大紅、黃色、白色)

視覺評論:背景主色運用了橘紅與橙色的相互疊加產生的類似色對比關係。白色的主文案為了能夠更加突出採用白色(加入了比背景色更重一些的橘紅為了投影突出文字)。畫面中產品的冷灰色給畫面增加了冷暖對比,以及其它地方的點綴元素也用了灰色(帶有一定的色相)。左上角的標誌也運用明度的變化更好的把標誌凸現出來。主要產品為帶有色相灰色錯落擺放在前面,以及運用了與背景有所區別的類似色黃色來進行突出。

乾貨!設計中最容易上手的配色方法

色調:暗色調(暖色調或大紅色調)

對比:鄰近色(大紅、黃色、白色)

視覺評論:背景的暗色調只是B的值降低了一些但不是很多,有些許的明暗顏色的變化,通過模特衣服紅色明度、飽和度的變化產生了空間感。以及模特的身體影子,還與背景中點的元素(三角形有光線的變化)的運用密不可分。畫面中的黃色以及產品中略帶有的黃色,相機的紅色這些面積都不是很大。但是很好的構成了鄰近色對比關係,畫面也拉開了層次關係。5折以及超省來襲的廣告運用了黃色來進行鄰近色進行對比來突出文案的作用性。還有畫面中的白色(主文案以及產品的白色)與紅色的對比關係也很明確符合視覺流程的主次關係。

乾貨!設計中最容易上手的配色方法

色調:純色調(冷色調或藍色調)

對比:對比色(藍色、青色、黃色、白色)

視覺評論:背景採用藍色作為主色調加入了漸隱的青色進行過渡,運用點的元素與線的元素進行豐富畫面增加空間感。產品都是藍灰色比較暗沒有搶主文案的視覺。只有聯想電腦的橘黃色很明顯的跳出來,但是面積比較小沒有搶到作為畫面主視覺的模特與字體(字體給人的感覺是安排在人物的後面,正字可以很明確的看到處理在人的後面)以及處理投影關係也很好的增加了空間感。

乾貨!設計中最容易上手的配色方法

色調:暗色調(冷色調或紫色調)

對比:互補色(紫色、黃色、白色)

視覺評論:背景採用紫色作為主色,加入了點元素線元素以及飽和度降低的淺色增強了畫面的空間感。與上一張的造型表現比較相似,但在顏色的處理上採用色相環上相距180度的互補色,採用的是原色與間色的對比關係。還有白色與紫色的對比以及少許的紅起不到大的影響作為點綴出現,可以被作為區分層次以及裝點畫面的作用。周圍的產品顏色都做了不透明度的處理與背景融合在一起起到很好的融合作用。


分享到:


相關文章: