當前位置:
首頁 > 天下 > Oh my god!學配色原來那麼簡單!

Oh my god!學配色原來那麼簡單!

寫在前面:

你沒眼花,這個是2018年11月我的最牛X教程關於配色系列教程的最後一篇,一年之後,帶你重溫這一系列色彩教程,保證你看完又發現新的收穫!

好了,說正經事,看教程。

--------------------------------------------

前面幾期的色彩教程,我拆分的講了單個色彩的色彩屬性以及搭配效果。這一期是總結篇。

之前的教程裡面我們講過,色彩的產生,是由於光線照射到物體上之後,會被吸收、反射或透射出來,也就是說物體表現了什麼顏色也就是反射了什麼顏色的光。

但是,作為一個專業的設計師,只知道顏色的用法,不知道顏色從何而來,那肯定會被人認為是初級的設計師。

那麼,顏色從哪兒來的呢?

廢話!當然是從太陽那裡來的!

但是陽光中除了給我們顏色之外,還給了我們什麼東西?

做了一張比較牛逼的圖,方便你理解一下陽光的本質。

不用點擊看大圖了,

我給你準備了大圖。

基本上,大家都可以看得懂吧?

如果沒懂,我簡單說幾句,我們看到的光線顏色,只是太陽給我們射過來的一大堆東西中的其中一小撮可以被肉眼看到的,看不到的還有很多很多不同的波。(封面的綠巨人,就是被波長最短的伽馬射線輻射出來的。)

知道這個有什麼用?

簡單說點生活小知識吧,如果我們知道了紅外線之外的波段輻射對人體幾乎都是無害的,那麼我們就不用擔心對著電腦長時間輻射會不會致癌啊?

當然不會,幾乎對你身體絲毫不會影響。

這個,見過沒?好生意啊!

如果人人都像我這麼懂科學,很多生意要黃啊!

畢竟這種所謂的防手機電腦輻射的衣服,效果和你到佛廟裡面拜拜的效果是一樣的,全都是心裡舒服。

十塊八塊的材料成本,賣你幾百塊,真好!

這個賣的不是產品,而是賣一種心理安穩感,這麼一說,貌似就不貴了。

好了,我們知道了紅外線及更長波段都是無害,紫外線及更短波段都有害之後,我們就理解了為什麼手機有一個護眼模式是偏黃了,因為去掉了藍光。(其實可見光都是沒啥害的,要相信科學啊小朋友)

好了,今天不講產品,不講營銷,就單純地講一下色彩的使用科學。

豐富多樣的顏色可以分成兩個大類無彩色系和有彩色系,有彩色系的顏色具有三個基本特性:色相、純度、明度。在色彩學上也稱為色彩的三大要素或色彩的三屬性。

色相是有彩色的最大特徵,即色彩的相貌,比如紅、黃、藍等顏色。

指色彩的純凈程度,它表示顏色中所含有色成分的比例。同一種顏色含有灰色的成分越多,純度越低,也就是我們常說的「臟」。

明度是指色彩的明亮程度。各種有色物體由於它們的反射光量的區別而產生顏色的明暗強弱。

有彩色的色相、純度和明度三要素是不可分割的,應用時必須同時考慮這三個因素。

我們每天都生活在充滿色彩的世界裡,每個人都不知不覺受到色彩的影響,慢慢的色彩就會與你的情感相關聯。

現實生活中,不同民族、地域、性別和年齡差異都會導致對色彩的認知會有不同,但是整體來說,人類對於色彩的情感聯想存在一定的共性。

下面我們就分別來講講色彩的視覺特性以及在生活中的應用。

------------

1 冷暖色

------------

色彩本身並沒有冷暖的溫度差別,之所有有冷暖色的差別是因為人們的心理聯想。

比如說看到紅色就聯想到太陽、火焰、熱血等,久而久之,就會產生溫暖、熱烈、危險的心理聯想。同樣,看到藍色,人們就會聯想到太空、冰雪、海洋等,此時則容易產生寒冷、理智、平靜的感覺。

冷暖主要與色相有關,據科學研究,冷色與暖色的心理溫差大概是3℃

冷暖色的生活應用:

冷色的裝修看起來比較涼爽,適合天氣比較炎熱的地區

暖色的裝修則看起來比較溫暖,適合天氣比較寒冷的地區。

同時室內燈光的色溫也會放大冷暖的感受,比如說夏天如果室內開暖黃色的燈光,則房間看起來會更加炎熱。

夏天適合穿冷色系的衣服,冬天則適合穿暖色系的衣服。

---------------------

2 膨脹、收縮色

--------------------

注意看上圖中的兩個小點,白色的小點看起來會比黑色的小點面積更大一些,而實際上它們是一樣大小的,這就是色彩的膨脹和收縮特性。

膨脹和收縮特性與色彩的明度和色溫都有關,明度高、暖色,有膨脹、擴大感,反之明度低、冷色則顯小。

膨脹收縮色的生活應用:

黑絲襪能瘦腿,這已經是絕大部分女生都知道的秘密。

現在選擇白色車的人越來越多,其中一個重要的因素就是:相對深色的車,白車看起來更大,,,大氣!買!

在裝修時,如果房子面積比較大,你可以選擇深色的牆面和地板,這樣可以收縮視覺空間。同時搭配高明度、暖色等膨脹色的傢具和裝飾,這樣可以很好的在視覺上將空間填充滿,讓房間看起來不再是空蕩蕩的。

而小房型則恰恰相反,你需要選擇淺色的牆面和地板,放大視覺空間,再搭配收縮色的傢具,這樣房間整體看起來就不會過於擁擠。

---------------------

3 前進、後退色

---------------------

由各種不同波長的色彩在人眼視網膜上的成像有前後,紅、橙等光波長的色在後面成像,感覺比較迫近,藍、紫等光波短的色則在外側成像,在同樣距離內感覺就比較後退。這就使得色彩具有前進、後退的特性。

暖色、高明度的顏色,有前進的感覺,看起來離我們更近。相反,冷色、低明度的顏色,則有後退的感覺。

明黃色的色塊,看起來向上凸出,看起來離我們更近,

而深藍色則有點向下凹陷,看起來更遠些。

前進後退色的生活應用:

還是選車的問題,前面我們說了,白色的車會更顯大。除此之外呢,白色還是前進色,在馬路上更容易被對方司機觀察到,因此在安全性上會更勝一疇。

到底有多安全呢?

看一組數據:

嗯,在光線不好的情況下,黑色車的事故率比白色車多了三倍多!所以說學點色彩知識搞不好能救命啊!

當然,車廠也意識到這個問題 了,把車輛的燈光做得越來越亮,這樣對方車輛遠遠就能看到,燈廠奧迪了解一下?

另外,你幾乎沒見到過黑色的大巴車吧?這也能說明一些問題了。

----------------

4 軟、硬色

---------------

色彩的軟硬度主要來自明度的變化,明度越高的感受越軟,明度越低感覺越硬。

當然這跟物體的造型也很有關係,一般來說,圓滑的造型 高明度的色彩,在觀感上會更軟,在心理感受上會給人親近感。

反之,尖銳的造型 低明度的色彩,會顯得很硬。會給人威嚴、力量感。

軟硬色的應用:

軟妹紙大概就是這樣了,高明度的粉嫩顏色,圓圓造型,看起來就很軟。

對女生來說,如果想變得更加職業、有權威感,在著裝上可以選擇低明度的色彩,線條上更平直一些,這樣可以給客戶更強的信賴感。

低明度的色彩,平直的線條,這樣就看起來很硬朗。

有些男生的審美是直男癌,如果想變得更加親和一些,可以嘗試更明亮一些的色彩,以及柔和一些的線條。

我們再來看看武則天劇中的妝容,左邊是武媚娘時期,妝容的色彩比較明亮,造型也比較柔和,風格明顯更軟,主要突出女性特徵。而右邊就不一樣了,妝容的色彩更厚重,眼睛和眉毛都更銳利,通過更加硬朗的造型來強化權威感。

---------------------

5 興奮、沉靜色

---------------------

色彩給人的興奮度主要由色相決定,紅橙黃等鮮艷而明亮的暖色給人興奮感。而藍、綠、紫等色使人感到沉著、平靜。

純度對色彩的興奮感也有一定影響,高純度色更讓人興奮,低純度色使人沉靜。

興奮/沉靜色的應用:

酒吧通過高飽和度的色彩刺激,讓你放飛自我嗨起來~

辦公室一般就是「性冷淡」風格了,目的是讓人平靜下來,好好乾活~

促銷廣告通過大紅大紫讓消費者興奮起來,趕緊買買買~

品牌網站則通過低純度的配色讓用戶冷靜下來,靜靜的感受逼格。

----------------------

6 活潑、莊重色

---------------------

色彩的活潑與否,主要是由色彩的豐富度有關。

暖色、高純度色、豐富多彩色、強對比色,這些會給人跳躍、活潑、有朝氣的感覺。

反之,冷色、低明度低純度的顏色,則給人莊重、嚴肅的感覺。

實際上這是一種色彩搭配方式,並不是單一的色彩能形成的感受。

活潑/莊重色的應用:

年幼的小孩色彩感知系統還沒發育成熟,只對活潑的色彩敏感。為了培養他的色彩感受力,我們一般將小孩的空間布置成高飽和度的五顏六色。

成年人則更喜歡平靜一些的感受,過於活潑的色彩會讓他們感到煩躁不安。

還有人的著裝也是一樣,隨著年紀的增長,會越來越趨向於沒什麼情緒的低飽和度色彩。這不僅僅是因為審美的變化,而是社會角色所要求的。

---------------------

7 華麗、樸素色

---------------------

色彩的三要素對華麗及質樸感都有影響,其中純度關係最大。

明度高、純度高的色彩,豐富、強對比 色彩感覺華麗、輝煌。

明度低、純度低的色彩,單純、弱對比的色彩感覺質樸、古雅。

但無論何種色彩,如果帶上光澤,都能獲得華麗的效果。

華麗/質樸色應用:

少數民族為了彰顯自己的民族特色,所以會將本民族最傳統的特色工藝,以及盛產的材質等全部在服飾上體現出來,這造就了民族服飾複雜材質和顏色變化,看起來十分華麗。

而現代社會的民族,則由於文化的相互融合,民族特色已經越來越少,衣著回歸本質,更強調實用性,簡單舒適成為主流。

前面講了很多色彩給人的心理感受,細心的你可能發現了,其實有些特性是重合的,比如說膨脹色和前進色,他們在某種程度上是相似的。

色彩有這麼多特性,要怎麼才能記住並在工作中應用?

不要著急,我給你做了一個色彩屬性的座標分布圖,只要找到相應的情緒關鍵詞,你大概就能知道對應的是什麼顏色了。

顏色分布

色彩的情緒關鍵詞分布

全球各大品牌LOGO色彩分類

從上面這張圖片可以看出來,大部分商業公司還是選擇了比較穩妥的兩大主流色系——紅和藍。

講完了色彩的心理感受,我們再來說說配色時需要遵守的基本原則。

第一大原則——主色要突出

要一眼能看出來整個畫面是什麼色調的。

第二大原則——畫面色彩不超過3種

這裡的3種色彩是指3種色相,比如淺藍與深藍其實算一種顏色。另外黑白一般不包括在內。

3種色彩一般被劃分為主色、輔色、點綴色,這樣可以讓你比較容易的控制畫面整體的色彩。

第三大原則——大協調,小衝突。

畫面的整體色彩要看起來協調,但是在局部可以有強烈的對比色,這樣可以提升視覺層次感。

除了以上的三大原則之外,還有日本設計師很早就總結出來的配色黃金比例。

一般來說,顏色越少畫面就越簡潔,作品也會顯得越成熟。同時,顏色少還有助於我們控制畫面,不至於玩脫。

一些特定主題,比如說節日,需要畫面表現出很強烈的視覺衝突,這時多幾種顏色有助於提升頁面的活躍度,但是顏色越多越要按嚴格的比例調配好,不然畫面很容易失控。

當然,這些規則和量化標準,在初期的學習階段你需要反覆的去嘗試,去對比,等你成為老手之後,你就會忘記這些了,那時你就無招勝有招,在設計中放飛自我了。

好了,知道了大概的配色原則之後,我們再來看,幾種顏 色具體要怎麼搭配。

同類色

簡單來說就是相似色配色,色彩的選擇限制在色環中30°之間的色相。這是一種最不容易出錯的配色方式。

同類色對比很弱,容易產生統一、含蓄、穩重的效果,但是也會比較單調,呆板。

配色關鍵詞

和諧、統一

案例展示

鄰近色

相比同類色來說,鄰近色的色相之間被拉開了不少,相比同類色更豐富、活潑,視覺層次感更強,但同時又不失和諧與穩健。

配色關鍵詞

調和、穩健

案例展示

對比色

一般整個設計最亮點的地方,往往就是對比最強烈的地方。因此,我們做設計的時候要時刻記得,重要的信息要用對比來強化。

顏色的對比不只是色相對比,明度和純度的對比也很重要。

配色關鍵詞

華麗、強烈

案例展示

來看看非主流的賓士。。。在陽光下綠的耀眼

互補色

互補色是色環上正對面的兩組色,它是衝突最強烈的一組色彩。比如紅與綠、黃與紫等。效果強烈、眩目、響亮、極有力,但若處理不當,易產生幼稚 、原始、粗俗、不安定、不協調等不良感覺。

配色關鍵詞

衝突、對比

案例展示

四角色

四角色就是全色系,它分別分布在色環對等的四個角,是色相最豐富的一組色彩。

這種配色方式是最難駕馭的,雖然是多彩色,但是一般還是得以其中一種為主色彩,再添加適當比例的其它幾種顏 色。

許多業務線比較豐富的平台公司喜歡用四角色來做LOGO,因為多色具有非常好的延展性,每項子業務都可以有專屬的某種色彩作為品牌色,與其它業務差異化。

配色關鍵詞

多彩、豐富

案例展示

分別以低對比度配色和高對比度配色兩種方式來做案例。

----------------------------

案例一

女裝新品海報

設計關鍵詞:品牌感

----------------------------

設計思路:

在這個案例中,我會使用同類色這種低對比度的配色方案,前面我們分析過,低對比度的配色方式對比度弱,容易形成含蓄、穩重的效果。不宜用來做促銷海報,適合新品發布這類偏品牌展示類的海報。

設計素材:

來自某服飾品牌模特

STEP 1

背景色選取和模特身上比較接近的顏色,這樣整個畫面的顏色顯得十分協調。

將大致的文案排上去,試圖尋找排版方向。

圖上可以看出,模特佔了豎向空間,但是又不夠飽滿,這讓文字的排版會顯得有點局促。

STEP 2

尋找合理的版式

模特旋轉一下試試?

好像有點意思,版面空間一下子就出來了,用模特的身體曲線來分割上下版面。

STEP 3

細化一下文字排版

一張有點形式感的海報就這樣產生了。做完海報的同時,也治好了我多年未愈的頸椎病。

PS:海報設計中輔助型的小文字,對版面排版起著很重要的平衡作用。一般我的原則是整體要對齊,然後局部做一起變化,這樣就能形成比較好的視覺節奏感。

----------------------------

案例二

運動鞋海報

設計關鍵詞:視覺衝擊力

----------------------------

設計思路:

運動類的設計一般都要求比較強烈的視覺衝擊力,比較適合高對比的配色方案。

設計素材:

如圖,來自某大牌運動鞋。

STEP 1

摳好圖,選取好背景色

根據球鞋本身的顏色,我選取了純度比較高的藍色作為背景色,這種高亮的顏色能在第一時間吸引住用戶眼球。

STEP 2

商品圖以及背景的細節處理。

這一步看起來比較細微,但是對設計品質感影響很大。

STEP 3

字體顏色來自鞋子上的點綴色黃色,與背景的藍色形成強烈的對比。字體改為更隨性的手繪體,再加上大LOGO,濃濃的運動風。

STEP 4

完善細節信息。

所有的元素都很大,大LOGO、大字體,強烈的顏色對比,簡單的垂直居中排版,粗暴有力,這很符合運動品「囂張」的氣質。

---------------------分隔線-----------------------

好了,這是色彩的最後一篇,不知道有多少位同學是從頭看到這裡,一共7期。

希望我花了接近半年完成的這7期色彩教程可以打開你的色彩感知的大門,讓你不再害怕理論知識,其實學習可以很輕鬆。

為了讓你可以在需要的時候裝一下B,我已經為你準備好了每一期的PPT文件,只需要在公眾號回復:配色PPT,即可獲得免費下載地址

寫完了配色的全套教程了,接下來大家想學哪方面的設計知識?可以留言說一下,根據大家的需求給大家最有效的學習方法和技巧!

如果你剛剛關注沒多久

回復:排版教程或者色彩教程,看到推送直接哭了!

-------------------------

往期精華文章導讀:

雜誌風!好看到沒朋友!

今天,給你講一下這群年輕人的故事。

搞定聖誕設計,看這一篇就夠了!

-END-

越努力,越幸運。

這裡是龐門正道。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 龐門正道 的精彩文章:

是時候安利一下《慶余年》了
男孩子看到這個,馬上就激動了!