教會(huì)新手設(shè)計(jì)師的配色攻略
發(fā)布時(shí)間:2021-12-27 10:29 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

如果說主色相對(duì)容易建立,那么副色和點(diǎn)綴色的創(chuàng)建就比較有難度了,難在設(shè)計(jì)師要對(duì)色彩語(yǔ)言有深入的了解,同時(shí)要有深厚的色彩搭配能力。

副色在強(qiáng)調(diào)和突出主色的同時(shí),也必須符合設(shè)計(jì)所需要傳達(dá)的風(fēng)格,在完成傳達(dá)信息的同時(shí)又使得整個(gè)畫面更加飽滿。如果想讓畫面顯得更豐富、熱鬧,可以添加點(diǎn)綴色,點(diǎn)綴色可以裝飾版面并為畫面增添豐富的效果。

本期給大家推薦選擇副色和點(diǎn)綴色的三種實(shí)用方法:運(yùn)用色相環(huán)、使用配色網(wǎng)站、借鑒優(yōu)秀作品。


運(yùn)用色相環(huán)


色彩搭配不只是需要設(shè)計(jì)師具備一定的色感能力,也需要設(shè)計(jì)師理解色彩之間的關(guān)系,合理有效地運(yùn)用它們達(dá)到和諧平衡關(guān)系。色相環(huán)是我們認(rèn)識(shí)顏色關(guān)系的重要工具。

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

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

我們選取其中某一種色相做為基準(zhǔn)色相,通過色相環(huán)可以很容易了解到基準(zhǔn)色和其他五種色相之間的關(guān)系,色相離得越近搭配越柔和,相隔越遠(yuǎn)對(duì)比越強(qiáng)烈。

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

橙色與紅色色相距離較近,對(duì)比比較柔和,橙色的產(chǎn)品在紅色背景上顯得協(xié)調(diào)統(tǒng)一;綠色與紅色色相相隔較遠(yuǎn),對(duì)比較強(qiáng)烈,綠色的產(chǎn)品在紅色背景上顯得比較突出。

色彩之間的搭配大體上可以分為兩種:對(duì)比柔和的配色,對(duì)比強(qiáng)烈的配色。

在主色調(diào)選取中曾說過大自然的顏色是無(wú)窮無(wú)盡的,新手設(shè)計(jì)師只需記住六種基礎(chǔ)色相即可。比如本次示范選取藍(lán)色為基準(zhǔn)色,通過色相環(huán)可以知道與之最接近的顏色為紫色和綠色,對(duì)比比較柔和。與之距離較遠(yuǎn)的是紅色和黃色,對(duì)比比較強(qiáng)烈。橙色是距離藍(lán)色最遠(yuǎn)的顏色,所以對(duì)比最強(qiáng)烈。了解這些關(guān)系之后,配色實(shí)踐就變得簡(jiǎn)單多了。

對(duì)比柔和的配色:?jiǎn)紊钆洹⑾嗨粕钆洹?/p>

1. 單色搭配

在同一色相上進(jìn)行純度、明度變化,搭配上并沒有形成顏色的層次,但形成了明暗的變化,單色搭配可以產(chǎn)生低對(duì)比度的和諧美感,給人協(xié)調(diào)統(tǒng)一的感覺。

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

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

2. 相似色搭配

色相具有較強(qiáng)的相似色因素,但也存在適度的對(duì)比,是既有對(duì)比又協(xié)調(diào)統(tǒng)一的色彩基調(diào)。這也是新手設(shè)計(jì)中最常用而不容易出錯(cuò)的一種配色方式。

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

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

對(duì)比柔和的配色特點(diǎn):

  • 優(yōu)點(diǎn):對(duì)比比較柔和、容易把控;
  • 缺點(diǎn):沖擊性弱,運(yùn)用不得當(dāng)會(huì)單調(diào)、缺少視覺層次感。需要通過純度和明度的變化拉開畫面層次,避免產(chǎn)生單調(diào)、呆板的感覺。

對(duì)比強(qiáng)烈的配色:對(duì)比色搭配、互補(bǔ)色搭配。

3. 對(duì)比色搭配

對(duì)比色的對(duì)比是指在色相環(huán)中相距 120° 左右的色彩所產(chǎn)生的對(duì)比。對(duì)比色對(duì)比由于色彩差異比較大通常產(chǎn)生的視覺效果強(qiáng)烈而鮮明。

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

藍(lán)色和黃色、紅色屬于對(duì)比色,具有強(qiáng)烈的對(duì)比,視覺效果豐富、富有動(dòng)感。

4. 互補(bǔ)色搭配

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

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

藍(lán)色和橙色是互補(bǔ)色,對(duì)比性最為強(qiáng)烈,高亮的橙色可以很好的緩解深藍(lán)色的沉悶,增加畫面的愉悅氣氛。

對(duì)比強(qiáng)烈的配色特點(diǎn):

  • 優(yōu)點(diǎn):視覺沖擊力強(qiáng),層次豐富、富有跳躍性;
  • 缺點(diǎn):容易產(chǎn)生不協(xié)調(diào)、雜亂刺眼的感覺,比較難把控。

要控制好畫面的色彩比例,選出一方作為主色調(diào),另一方作為輔助色或者點(diǎn)綴色;可以降低明度、飽和度,調(diào)和其對(duì)抗性;黑白灰是萬(wàn)能的調(diào)和色,可以在畫面加入黑白灰緩沖其強(qiáng)烈的對(duì)抗性。


使用配色網(wǎng)站


目前有大量的配色網(wǎng)站可以用來(lái)輔助配色,對(duì)于配色基礎(chǔ)薄弱的新人會(huì)有很大的幫助。在這里給大家推薦的是 Adobe 公司出品的一款極為高效的在線配色工具:Adobe Color。我們可以使用其「色輪」、「從圖像擷取」 、「探索」、「趨勢(shì)」四大核心功能來(lái)輔助配色。

1. 從「色輪」創(chuàng)建顏色

可以選擇一個(gè)基礎(chǔ)顏色利用七種不同的調(diào)色規(guī)則創(chuàng)建顏色主題。在設(shè)置了基礎(chǔ)顏色之后,另外四個(gè)關(guān)聯(lián)顏色會(huì)自動(dòng)生成。然后使用色盤、亮度以及不同顏色模式的滑塊來(lái)建立顏色。

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

調(diào)色規(guī)則 7 種模式從上到下分別為:類比、單色、三元群、補(bǔ)色、復(fù)合、濃度、自定。

接下來(lái)使用 Adobe Color 進(jìn)行配色示范。

選擇橙色為基礎(chǔ)顏色,會(huì)自動(dòng)生成四個(gè)關(guān)聯(lián)顏色,把生成的顏色配置到設(shè)計(jì)好的畫面中:

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

2. 從圖片創(chuàng)建顏色

可以從本地上傳圖片,選擇規(guī)則后,會(huì)自動(dòng)從圖片中提取顏色。調(diào)色規(guī)則有彩色、亮色、柔和、深色、暗色、自定。

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

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

3. 從「探索」創(chuàng)建顏色

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

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

4. 從「趨勢(shì)」創(chuàng)建顏色

此功能是從 Behance 和 Adobe Stock 的創(chuàng)意社群,獲得以下幾個(gè)類別的色彩趨勢(shì):

  • 時(shí)尚:透過流行時(shí)裝探索色彩;
  • 圖形設(shè)計(jì):Behance 上最佳平面設(shè)計(jì)作品的色彩趨勢(shì);
  • 插圖:從 Behance 插圖收藏館方案中所擷取的調(diào)色盤;
  • 建筑:從室內(nèi)設(shè)計(jì)到未來(lái)城市風(fēng)貌,一應(yīng)俱全;
  • 游戲設(shè)計(jì):探索 Behance 游戲設(shè)計(jì)師的最新色彩趨勢(shì);
  • 荒野:運(yùn)用自然界的動(dòng)態(tài)調(diào)色盤尋找色彩靈感;
  • 風(fēng)味:透過美食攝影中的最新趨勢(shì),探索豐富的色彩;
  • 旅行:透過旅游圖像中所收集的調(diào)色盤。

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

可以看到利用 Adobe color 可以很輕松地做出多個(gè)設(shè)計(jì)方案,但是配色是復(fù)雜思考、反復(fù)調(diào)整的過程,配色方案只是給設(shè)計(jì)師一個(gè)參考,更需要根據(jù)具體的版面進(jìn)行調(diào)整。雖然通過配色工具可以獲得大量的配色方案,但并不是每一組配色方案都適合我們的設(shè)計(jì),最終還是要根據(jù)客戶的需求、受眾的喜好、產(chǎn)品的特點(diǎn)去考慮。

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


借鑒優(yōu)秀作品


初學(xué)者學(xué)習(xí)設(shè)計(jì)都是從模仿開始的,模仿優(yōu)秀的版式,模仿優(yōu)秀的字體設(shè)計(jì)等,當(dāng)然還包括模仿優(yōu)秀的配色,這是新手最簡(jiǎn)單、最有效的配色方法。

通過多看多分析優(yōu)秀作品中的配色,可以提高自己的色彩敏感度,并訓(xùn)練自己調(diào)色以及分析作品的能力,這是快速提升配色水平的有效方法。

1. 配色示范

我們的案例偏年輕時(shí)尚與潮流風(fēng)格,可以相應(yīng)的尋找類似風(fēng)格的作品來(lái)進(jìn)行借鑒:

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

要注意并不是任何優(yōu)秀作品的顏色都適合你的設(shè)計(jì),只是照搬顏色并不能保證做出好的設(shè)計(jì)。設(shè)計(jì)之前要對(duì)設(shè)計(jì)作品所要傳達(dá)的內(nèi)容進(jìn)行仔細(xì)的思考和分析,然后觀察作品中的色相、色調(diào)、明度、氣質(zhì)、氛圍等等是否適合自己的設(shè)計(jì),更要加入主動(dòng)性創(chuàng)作。


總結(jié)


配色常常從確定主色開始,根據(jù)作品主題和視覺訴求的需要,選擇一種居于支配的色彩作為主調(diào)色彩,構(gòu)成畫面的整體色彩傾向。然后選擇副色,添加點(diǎn)綴色,按照色彩組合的原則,顏色平淡可加入適當(dāng)對(duì)比色來(lái)使頁(yè)面產(chǎn)生變化;顏色凌亂可以適當(dāng)加入同類色、類似色或者黑白灰進(jìn)行調(diào)和。

本次文章給大家提出了四種確定主色調(diào)和三種選擇副色、點(diǎn)綴色的方法,希望對(duì)于新手設(shè)計(jì)師有所幫助。當(dāng)然這些配色方法只是眾多配色方法中的滄海一粟,如果想成為優(yōu)秀的設(shè)計(jì)師還需要進(jìn)一步深入地去學(xué)習(xí)色彩理論知識(shí),多看優(yōu)秀的配色作品提升審美,最后還是要多實(shí)踐和多思考,才能成為合格的「色」計(jì)師。

PhotoshopCC2020視頻教程
我要自學(xué)網(wǎng)商城 ¥120 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC