當前位置:首頁 >教程首頁 > U I 設計 > AI+UX設計大師班 >設計師必備配色小技巧

設計師必備配色小技巧

發布時間:2022-06-24 09:33:37

當你把做好的設計拿給客戶或者同事看,得到的反饋竟然是“說不上來,反正不太好看”。這樣的反饋讓大部分設計師頭疼,修改方向到底在哪裏?不好看的原因大多數情況就是整體配色出了問題,所以今天給大家帶來一些關於配色的小技巧。

大家先來看一組海報。

1.jpg

這是2022年除夕主題的海報,內容和布局完全一樣,區別就是色調不同。大家覺得如果你是老板,你會選哪一種?相信大家都會選擇紅色的。為什麼呢?因為紅色看起來喜慶,符合除夕的主題。過年了門上貼的對聯,窗戶上的窗花,小孩子放的鞭炮都是紅色的,所以過年就給人感覺是紅色的。

我們再來看另外一組海報。

2.jpg

這是反對校園霸淩的公益海報,內容和布局還是完全一樣,還是用了不同的色調區分。大家覺得哪一個顏色比較合適?答案是黑色的,你答對了麼?

因為校園霸淩是一個不好的現象,反對校園霸淩是嚴肅、認真的,所以不適合做的五彩繽紛。而且采用了黑白色調之後,主標題的“NO”就能更加醒目,給人更強的視覺衝擊。

我們來總結一下海報設計配色技巧的第一個要點:整體色調要與海報的主題相吻合。

讓我們來做一個小練習,看看大家掌握的怎麼樣。

3.jpg

這是情人節的海報,文字已經做好了,背景暫時是黑色,我們需要先選擇一個色調。

情人節會有哪些聯想呢?愛情、浪漫、玫瑰花、巧克力等,這些都是與情人節有關的關鍵詞。我們可以選擇玫瑰花的顏色來作為海報的主色調。接下來在下方添加海報文案。再在周圍空餘區域加上禮盒、彩帶等裝飾。一個情人節海報就做好了。

5.jpg

看起來好像挺容易,其實在剛剛這個案例裏麵有一個關鍵的要點,那就是玫瑰花的顏色到底選什麼樣的。有顏色深一些的,還有淺一些的。我們把深淺兩種顏色也做成海報看一看。

6.jpg

通過對比我們很容易看出,左邊深色的海報色調過於暗沉,感覺心情很糟糕,不符合情人節浪漫的主題。右邊淺色的海報色調倒是比較明亮,但是由於背景過亮,導致主題文字不夠突出,也不合適。

我們通過軟件的幫助,來看看該如何選顏色。

7.jpg

這是PS軟件的拾色器工具,我們選擇了玫紅色。

拾色器從左往右,是色彩的飽和度越來越高。從下往上,是色彩的明度越來越高。簡單來說就是上麵色彩亮,下麵色彩暗,左麵色彩淡,右麵色彩濃。所以右上角就是最鮮豔的顏色了。

我們把拾色器分成9個格子,分別用數字1到9標注。然後我們來看看之前的情人節海報的色調都是從哪個格子裏取色的。

8.jpg

先看深色的那一版,是從6號格子取的顏色。再看看淺色的那一版,是從2號格子取的顏色。最後是正常的那一版,是從3號格子取的顏色,也是顏色最鮮豔的一個格子。所以我們選擇顏色時盡可能的選擇飽和度和明度都相對比較高的顏色。

9.jpg

所以3號格子的顏色是我們優先選擇的。當然,凡事不能絕對,在一些特殊情況時,2號和6號格子也是可以選的。我們來看下麵兩個案例。

10.png

左邊的是世界讀書日的海報,整體選擇了藍色色調,背景也是藍天白雲的場景。從拾色器裏可以看到,藍色是選擇的2號格子的淡藍色。整個畫麵非常明亮,給人一種清新、寧靜的感覺,很契合讀書的主題。

右邊是我們之前看過的除夕主題的海報,整體是紅色色調。我們之前說過紅色是喜慶的,有過年的感覺。這裏背景紅色選擇了6號格子裏的深紅色,這是因為海報中隻有文字信息,為了突出文字,所以整體把背景顏色調暗了。

那我們來總結一下海報設計配色技巧的第二個要點:

單色盡可能的選擇飽和度和明度相對比較高的顏色。優先選擇拾色器裏3號格子的顏色,根據需要,2號和6號格子的顏色也可以使用。

好了,到目前為止,我們所用的顏色都是單色,也就是單獨一種顏色,沒有變化,接下來我們就講講漸變顏色的使用技巧。還是用剛剛情人節的海報做例子,最左邊的是原版,右邊兩張的背景都做了漸變處理,你看出來了嗎?

11.png

我們把內容去掉,再看看,從中間往四周有一點點微弱的顏色變化。

12.jpg

這種漸變技巧其實很簡單。利用我們剛剛講的拾色器9宮格。優先選擇的顏色是3號格的,那麼漸變我們就從2號格漸變到3號格,或者3號格漸變到6號格。

這種屬於同色相漸變,是同一個顏色的飽和度和明度發生了變化。而且2號格到3號格,或者3號格到6號格,距離都很近,色彩差異並不大。這樣的漸變比較微弱,既有了色彩上的豐富,也很協調。你學會了麼?

下麵我們來講講不同色相的顏色之間的漸變。首先我們需要了解一下色環,色環就是顏色的排列順序,在這裏我們隻需要了解其中6個顏色就可以了。

13.jpg

先要了解的是紅,綠,藍,三種顏色。這是光學的三原色。也就是最基本的顏色。其他任何顏色都是他們相互混合得出來的。順便記住這三種顏色的英文首字母。紅色是R,綠色是G,藍色是B,這個後麵要用到。用紅色和綠色混合可以得出黃色,綠色和藍色混合可以得出青色,藍色和紅色混合可以得出紫色。黃色、青色、紫色,由三原色直接調出的,也就是三間色。

好,簡單了解一下色環上的顏色順序就可以了。我們把色環放在一邊,先來做一個實驗。我們先從紅色開始來,從紅色的拾色器3號格選擇一個顏色,色值是:紅色204、綠色26、藍色26。紅色在色環上左右離得最近的分別是黃色和紫色,那麼我們在做漸變時就漸變到這兩種顏色。先來試一下黃色,剛剛我們講過紅色加綠色可以得到黃色。那麼我們就在原來色值裏加綠色,把綠色的26加到86,其他都不變。紅色混合了一些綠色後就會變黃。因為加的綠色不多,所以不會完全變成黃色,隻會有一些偏橙色。這樣就夠了,我們來看看漸變的效果。

14.jpg

接下來我們再試試紅色到紫色的漸變。紅色依然保留,這次我們把藍色的26加到86,看看得到了什麼樣的顏色。

15-1.jpg15-2.jpg

如果你想讓顏色再多一些,我們可以把剛剛的三種顏色都連起來做漸變,當然順序別弄亂了。根據色環上的順序,從橙到紅再到紫,或者反過來,從紫到紅再到橙也可以。

這種就是鄰近色漸變,因為顏色在色環上都很接近,所以做出來的漸變比較柔和,沒有很強的衝突,適合初學者使用。我們接下來再換一個顏色試試。

16.jpg

我們這次選擇三間色當中的青色,記得還是在拾色器3號格取色。色值是:紅色29、綠色176、藍色189。青色在色環上左右離得最近的是綠色和藍色。

我們分別把綠色的176加上60得到236。把藍色的189加上60得到249。為什麼每次都加六十呢?這隻是一個技巧,你也可以加50、70、甚至80都可以,但不要再多,再多就不是鄰近色了。

我們總結一下海報設計配色技巧的第三個要點:

一種是同色相漸變,及同一個拾色器裏2號格到3號格或者3號格到6號格的漸變。

另一種是鄰近色漸變。選擇色環上鄰近的顏色做漸變,通過調色值的方式可以更準確。

最後,我們再來做一個案例,把我們之前講的三個要點都運用起來。這是一個網紅培訓課的海報。素材和文字都準備好了。大家根據這個主題和模特,看看背景可以換成什麼顏色。

17.jpg

首先直播網紅這個主題是比較時尚、新潮的。帶有流行元素。那我們在選擇顏色時盡量選擇活潑的、靚麗的顏色。盡量是拾色器3號格的。其次圖中模特身上的花衣服,紅、橙、黃、綠都有。所以這個海報可以搭配很多的顏色。例如偏女性化的紫色、時尚的青綠色、有活力感的橙紅色。為了體現活潑的感覺,都選擇了高飽和度高明度。

18.jpg

我們再把定好的顏色做一下鄰近色漸變。紫色漸變到紅色。青色漸變到綠色。橙色漸變到黃色。

19.jpg

總結一下海報配色的三個要點。

第一、整體色調要與海報的主題相吻合。

第二、盡可能的選擇飽和度和明度相對比較高的顏色。

第三、漸變可以選擇同色相漸變,或者鄰近色漸變。

今天的配色技巧就說這麼多,你們學會了麼?

作者:陶恒

來源:視覺半徑公眾號

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定