超多案例!寫給新手設計師的配色攻略(二)

視覺當鋪 發佈 2020-03-26T08:25:52+00:00

調色規則7 種模式從上到下分別為:類比、單色、三元群、補色、複合、濃度、自定。接下來使用 Adobe Color 進行配色示範。

在上期文章我們知道了配色的步驟通常是從確定主色開始,再選擇與之搭配的副色,最後根據造型、排版等方面調整增加多個點綴色。我們也知道了確定主色調的四種方法,本期將繼續講解如何選擇副色和點綴色。

往期回顧:


超多案例!寫給新手設計師的配色攻略(一)

好的配色往往依靠設計師審美搭配出來,但合理的顏色搭配必定存在合理的配色規律和配色方法論的支撐,本期分享簡單有效的配色方法,希望能給新手一些啟發。


如果說主色相對容易建立,那麼副色和點綴色的創建就比較有難度了,難在設計師要對色彩語言有深入的了解,同時要有深厚的色彩搭配能力。

副色在強調和突出主色的同時,也必須符合設計所需要傳達的風格,在完成傳達信息的同時又使得整個畫面更加飽滿。如果想讓畫面顯得更豐富、熱鬧,可以添加點綴色,點綴色可以裝飾版面並為畫面增添豐富的效果。

本期給大家推薦選擇副色和點綴色的三種實用方法:運用色相環、使用配色網站、借鑑優秀作品。

運用色相環

色彩搭配不只是需要設計師具備一定的色感能力,也需要設計師理解色彩之間的關係,合理有效地運用它們達到和諧平衡關係。色相環是我們認識顏色關係的重要工具。

12 色相環由 12 種基本的顏色組成。首先包含的是三原色,即藍、黃、紅。原色混合產生了二次色,用二次色混合,產生了三次色。

我們選取其中某一種色相做為基準色相,通過色相環可以很容易了解到基準色和其他五種色相之間的關係,色相離得越近搭配越柔和,相隔越遠對比越強烈。

橙色與紅色色相距離較近,對比比較柔和,橙色的產品在紅色背景上顯得協調統一;綠色與紅色色相相隔較遠,對比較強烈,綠色的產品在紅色背景上顯得比較突出。

色彩之間的搭配大體上可以分為兩種:對比柔和的配色,對比強烈的配色。

在主色調選取中曾說過大自然的顏色是無窮無盡的,新手設計師只需記住六種基礎色相即可。比如本次示範選取藍色為基準色,通過色相環可以知道與之最接近的顏色為紫色和綠色,對比比較柔和。與之距離較遠的是紅色和黃色,對比比較強烈。橙色是距離藍色最遠的顏色,所以對比最強烈。了解這些關係之後,配色實踐就變得簡單多了。

對比柔和的配色:單色搭配、相似色搭配。

1. 單色搭配

在同一色相上進行純度、明度變化,搭配上並沒有形成顏色的層次,但形成了明暗的變化,單色搭配可以產生低對比度的和諧美感,給人協調統一的感覺。

採用單色對比,需要通過純度和明度的變化拉開畫面層次。

2. 相似色搭配

色相具有較強的相似色因素,但也存在適度的對比,是既有對比又協調統一的色彩基調。這也是新手設計中最常用而不容易出錯的一種配色方式。

藍色和紫色、綠色是距離最近的顏色,既有相似色因素,又存在著適度的對比,視覺效果比較柔和。

對比柔和的配色特點:

  • 優點:對比比較柔和、容易把控;
  • 缺點:衝擊性弱,運用不得當會單調、缺少視覺層次感。需要通過純度和明度的變化拉開畫面層次,避免產生單調、呆板的感覺。

對比強烈的配色:對比色搭配、互補色搭配。

3. 對比色搭配

對比色的對比是指在色相環中相距 120° 左右的色彩所產生的對比。對比色對比由於色彩差異比較大通常產生的視覺效果強烈而鮮明。

藍色和黃色、紅色屬於對比色,具有強烈的對比,視覺效果豐富、富有動感。

4. 互補色搭配

在色輪上直線相對的兩種顏色,是對比最強的搭配,因此在視覺上會產生極大的隔離作用,它們組合在一起,會產生相互襯托、相互抗衡、相互排斥的感覺,並使各自的色相更顯突出,更為艷麗,具有強烈的視覺衝擊力。

藍色和橙色是互補色,對比性最為強烈,高亮的橙色可以很好的緩解深藍色的沉悶,增加畫面的愉悅氣氛。

對比強烈的配色特點:

  • 優點:視覺衝擊力強,層次豐富、富有跳躍性;
  • 缺點:容易產生不協調、雜亂刺眼的感覺,比較難把控。

要控制好畫面的色彩比例,選出一方作為主色調,另一方作為輔助色或者點綴色;可以降低明度、飽和度,調和其對抗性;黑白灰是萬能的調和色,可以在畫面加入黑白灰緩衝其強烈的對抗性。

使用配色網站

目前有大量的配色網站可以用來輔助配色,對於配色基礎薄弱的新人會有很大的幫助。在這裡給大家推薦的是 Adobe 公司出品的一款極為高效的在線配色工具:Adobe Color。我們可以使用其「色輪」、「從圖像擷取」 、「探索」、「趨勢」四大核心功能來輔助配色。(網址:color.adobe.com)

1. 從「色輪」創建顏色

可以選擇一個基礎顏色利用七種不同的調色規則創建顏色主題。在設置了基礎顏色之後,另外四個關聯顏色會自動生成。然後使用色盤、亮度以及不同顏色模式的滑塊來建立顏色。

調色規則 7 種模式從上到下分別為:類比、單色、三元群、補色、複合、濃度、自定。

接下來使用 Adobe Color 進行配色示範。

選擇橙色為基礎顏色,會自動生成四個關聯顏色,把生成的顏色配置到設計好的畫面中:

2. 從圖片創建顏色

可以從本地上傳圖片,選擇規則後,會自動從圖片中提取顏色。調色規則有彩色、亮色、柔和、深色、暗色、自定。

比如我們上傳一張攝影圖片,選擇規則「彩色」,把獲得的五種顏色運用到我們的設計中,就可以做出新的配色方案:

3. 從「探索」創建顏色

從「探索」菜單中可以得到來自於全球各地設計師的配色方案,還可以在此之上進行進一步編輯,或者將該配色下載、保存到「我的主題」。

4. 從「趨勢」創建顏色

此功能是從 Behance 和 Adobe Stock 的創意社群,獲得以下幾個類別的色彩趨勢:

  • 時尚:透過流行時裝探索色彩;
  • 圖形設計:Behance 上最佳平面設計作品的色彩趨勢;
  • 插圖:從 Behance 插圖收藏館方案中所擷取的調色盤;
  • 建築:從室內設計到未來城市風貌,一應俱全;
  • 遊戲設計:探索 Behance 遊戲設計師的最新色彩趨勢;
  • 荒野:運用自然界的動態調色盤尋找色彩靈感;
  • 風味:透過美食攝影中的最新趨勢,探索豐富的色彩;
  • 旅行:透過旅遊圖像中所收集的調色盤。

可以看到利用 Adobe color 可以很輕鬆地做出多個設計方案,但是配色是複雜思考、反覆調整的過程,配色方案只是給設計師一個參考,更需要根據具體的版面進行調整。雖然通過配色工具可以獲得大量的配色方案,但並不是每一組配色方案都適合我們的設計,最終還是要根據客戶的需求、受眾的喜好、產品的特點去考慮。

借鑑優秀作品

初學者學習設計都是從模仿開始的,模仿優秀的版式,模仿優秀的字體設計等,當然還包括模仿優秀的配色,這是新手最簡單、最有效的配色方法。

通過多看多分析優秀作品中的配色,可以提高自己的色彩敏感度,並訓練自己調色以及分析作品的能力,這是快速提升配色水平的有效方法。

1. 配色示範

我們的案例偏年輕時尚與潮流風格,可以相應的尋找類似風格的作品來進行借鑑:

要注意並不是任何優秀作品的顏色都適合你的設計,只是照搬顏色並不能保證做出好的設計。設計之前要對設計作品所要傳達的內容進行仔細的思考和分析,然後觀察作品中的色相、色調、明度、氣質、氛圍等等是否適合自己的設計,更要加入主動性創作。

總結

配色常常從確定主色開始,根據作品主題和視覺訴求的需要,選擇一種居於支配的色彩作為主調色彩,構成畫面的整體色彩傾向。然後選擇副色,添加點綴色,按照色彩組合的原則,顏色平淡可加入適當對比色來使頁面產生變化;顏色凌亂可以適當加入同類色、類似色或者黑白灰進行調和。

本次文章給大家提出了四種確定主色調和三種選擇副色、點綴色的方法,希望對於新手設計師有所幫助。當然這些配色方法只是眾多配色方法中的滄海一粟,如果想成為優秀的設計師還需要進一步深入地去學習色彩理論知識,多看優秀的配色作品提升審美,最後還是要多實踐和多思考,才能成為合格的「色」計師。

關鍵字: