[UI設計]這2招配色訣竅,零基礎的小白也能輕松學會!
2020-08-10
配色/干貨/教學/零基礎
今天將要分享的是一個我們在設計中經常會用到的「配色」。
很多設計師工作幾年后還是對配色摸不著頭腦,每次做設計依舊沒有頭緒,不知道如何下手,不知道選擇什么顏色搭配自己相關的設計,看完今天的教程分享后希望對配色有困難的你有所幫助。
首先我需要告訴大家的是,我這里分享的配色方法并不是網絡上或者書本上看到的那些理論性超強的文字敘述。在我的配色技巧中,沒有那么多的約束,也不需要記住那么多理論性的知識。不過大家能記住理論知識是最好的,記不住也沒有關系,因為我將會帶給你超簡單的配色方法。
其實很多人也許看過了關于配色技巧的文章,或者知道很多配色網站自帶大量的配色模板,但是當你自己動手設計的時候,還是不知道如何在那么多配色體系中選擇合適的色彩,來搭配自己的作品。這是什么原因呢?
其實配色并不是單獨存在的,很重要的是要考慮你設計的主體。不同的設計主體,所要達到的目標不一樣,就決定了配色理論也會存在差異。書本,文章都在寫配色的理論,每個人講的配色理論有很多相同的地方,但是最核心的理論往往都不是相同的。因為大家講的相同部分,大多都是色彩的理論部分,這部分而大家所講的不同部分,則通常是作者在自己所在領域總結的一套配色規則。
因此,并非每篇文章的配色理論都適合你,這也是當你學習完很多配色方法和理論后,仍然不知道怎么配色以及配不好色的原因。事實就告訴我們在學習配色時,完全學習配色理論是完全不夠的。的作用。
舉個簡單的例子,這里分別需要兩張海報。
第一張海報:主體是咖啡(這里的咖啡海報只需要達到宣傳的作用即可,不需要促銷)。
第二張海報:主體是促銷女裝(通過文字主體可以植入這張海報的目的,那就是促銷,需要達到吸引用戶的眼球,最終引發購買的欲望)。
首先來看我們的第一張咖啡的海報,這里的設計主體是“咖啡”,我們還要知道咖啡的使用場景一般就是休閑時光,和放松自己才會選擇替代的。那么通過這兩點,我們就要明白設計所要達到的目標「給人一種放松愉悅的心情,能在緊繃的神經下看到你的海報放松,得到輕松的心情?!?/span>
那么我們可以簡單地做兩個海報做一下對比:
這兩張海報的尺寸都是完全一致的,除了背景顏色和字體的顏色不同。對于這兩張海報,在你一眼看到后,你會更喜歡哪一張呢呢?
我的答案是:咖啡海報一。
也許會有很多人都會選擇第一張白色背景的,為什么呢?在這里我給大家簡單的分析一下吧。
首先已經提到咖啡的使用場景和作用,是為了幫助疲勞的人得到放松的,白色就能很好的讓人放松,咖啡色看起來就給人一種沉悶的感覺,并且在咖啡色背景上,咖啡豆的品質也很難得到很好的展現,相反的是白色,干凈的背景以及大量的留白空間,能很好的給人一種放松和舒適感,咖啡豆在白色背景的映襯下也更好的展現出它的品質。
接下來,再看看我們的第二張海報──促銷女裝。
海報所有人:促銷女裝(通過文字主體可以植入這張海報的目的,那就是促銷,需要達到吸引用戶的眼球,最終導致購買的欲望。)
不難理解,這里的海報目的當然是達到促銷熱賣的效果,能夠極大地吸引用戶并且完成購買操作,這樣才能達到我們的目的。
促銷海報對于色彩而言是很重要的,設計師需要通過對海報色彩的選擇吸引用戶看到你的海報,既然是促銷,那么熱鬧的肯定肯定是不可能的。
我們還是直接通過一張簡單的色彩對比海報來直觀的體會色彩的本質吧。
同樣的,兩者張海報的布局都是一樣的,除了背景色彩和文字的顏色不同,那么這兩張海報哪一張尺寸對齊和促銷效果呢?
我的答案依舊是:促銷女裝海報一。
因為紅色本身就給人一種熱鬧的,促銷的,大降價的活動感。和背景紅色的選擇和模特本身的服裝顏色也是很接近的,雖然都是紅色,但是明度不一樣,所以并不會影響模特主體人物服裝。而白色背景的海報看起來沒有促銷感,也和模特本身不搭,和主題文字的風格也不搭配。
這里我為什么會選擇白色和紅色做對比呢?
因為我要告訴大家的是配色的使用場景,以及整個設計所要達到的目標,這句話的本質??梢钥吹轿业膬蓚€海報色彩搭配,咖啡海報采用白色就會很容易,但是促銷女裝海報采用就格格不入,如果把紅色換到咖啡海報背景色,那也是完全不搭的。
上面說了這么多,只是告訴你們在選擇配色時需要注意的配色的使用場景,以及整個設計所要達到的目標,這個也是我們在配色時非常重要的。
到底應該怎么配色呢?怎么選擇合適的顏色呢?接下來就教給大家2個簡單實用的方法。
從圖片吸取色值搭配
也就是說我們可以從主題一致或接近的圖片上,吸取色值作為我們的配色,當然我們需要選擇合適的,好的配色圖片作為吸取色值的對象。
體現:設計一張冰淇淋海報。
那么我們就在網站上找一下冰淇淋的圖片,我找到的如下:
從圖片吸取的顏色有:
做出的海報:
粉色是給人甜美,溫柔和純真,浪漫的感覺,冰淇淋也是夏天女孩的喜愛,冰淇淋帶給人甜蜜,清涼的,和粉色色彩搭配是完全可以的。
此外,我在網站上找到的第二張顏色參考圖如下:
從圖片吸取的顏色有:
做出的海報:
這張海報主要的就是淡藍色,一種冰涼的感覺,夏天就是要這樣的冰涼,搭配冰淇淋產品更是再合適不過。
雖然是做冰淇淋的海報,但不是說只找冰淇淋相關的圖片做吸色的參考。同樣的,其他好的配色圖片我們一樣可以拿過來運用到我們的色彩搭配中。
我們找到下面兩張夏天的創意背景參考圖:
分別吸取色值:
運用到海報中的效果:
接下來說一下配色的第二種方法。
從產品/素材中吸取搭配
通過對主體或者素材中的吸取色值運用到自己的配色中,當然不能一味的只知道吸取,不知道靈活的改變。一些微調,從而達到不影響主體,還能更加適合整個版面的協調性。
以下面這個模特人物為主體,做一張女裝促銷海報,主題還是以國潮為主。
原本吸取的色值:
調整后的色值:
分別做出的海報:
△原本吸取的色值做出的海報
△調整后的色值做出的海報
對比一下就出來了不是,如果直接吸取模特衣服的顏色作為背景,就會使整個海報看起來和我們的主題完全不搭,并且也不能很好的突出我們模特身上的形象和氣質。
通過對色值明暗的調整,海報的檔次一下就提升了,并且更加符合國潮風格的氣質。
例如下面這一張圖,以“大暑”為主題設計海報。
我們分別吸取圖片荷葉一處亮部的色值和一處暗部的色值。
△亮部
△暗部
分別做出兩張背景色不一樣的海報:
△吸取荷葉亮部圖片得到的海報
△吸取荷葉暗部圖片得到的海報
兩張不一樣的海報就出來了,但是給人的感覺卻是大不相同的。第一張亮綠的海報給人的感覺就是背景色和素材荷花圖片的色彩很不協調,不統一,風格也不一樣,和整個海報看起來沒有質感。
相反的,深色背景的海報給人的感覺會變得高檔很多,并且圖片素材和背景的顏色非常接近,整個畫面就會出現統一的和諧很多,中國風的視覺體驗也會更加強烈。