漸變質感技法(一):漸變配色之對比用色
前言
漸變這一視覺趨勢,在最近幾年裏可謂如日中天。很多平平淡淡的設計,將平塗改爲漸變,立刻就能增加醒目感。
雖說漸變是一個有效的元素,但爲什麼我們的漸變,還是和大神們的漸變有區別? 我們應該怎樣做出漸變的質感? 爲什麼說用色纔是漸變的精髓?今天我們就來和大家聊聊漸變這個話題,深入瞭解我們似乎以爲自己懂了的漸變,我們將和大家一起分析漸變配色中,利用色彩不同特性之間的對比來用色,以及一些簡單的操作小技巧,比如快速生成一個色輪,以及簡單的利用混合工具來配出漸變配色的色彩。
視頻播放
這篇文章我做成了4個小視頻, 放在了荔枝微課平臺
大家可以點擊這裏到荔枝微課
或者用下面的網址跳轉:
漸變是在色彩上的一個相對緩慢的過度,我們的視覺會隨着這個漸變的過度而產生一種流動感,而這種流動感全憑在色彩上發生的種種變化。是的,我們的重點來了,就是這個變化,需要我們今天深入去加以瞭解。
談到變化,我們自然會想到這個變化的範圍。如果拿出我們的色輪來看,我們就會發現色輪上的變化範圍有大有小,當兩個色彩距離較近時,我們可以說他們是鄰近色,這時難以發現他們的區別,直至我們的肉眼無法分辨。這時候可以說變化範圍較小。
當兩個色彩距離180,在色輪上呈相對,我們可以說這時的色彩變化是最大的,於是也就產生了最強烈的對比。很多撞色的情況,也是在這種對比下發生。我們通常會把這對顏色稱爲互補色。
當然,實際的情況比這要稍微複雜一點,我們一起來看下。
色相對比
剛剛大家可以發現,這個色輪上的色彩的一個特點是什麼?只有色相的變化。沒錯,我們平時也已經習慣了,只用色相來區分色彩。所以,今天要講的第一個對比,也就是色相的對比。
色相的對比,在色輪上就能很直觀的表現。例如紅色和黃色這一段,截取過來以後,就變爲了紅-黃漸變。利用色環就能很輕鬆的實現色相的漸變。距離越遠,漸變色的對比也就越大,互補色之間的對比達到了極值,比如紅-藍漸變的對比就大過紅-黃漸變。
我們這裏首先教給大家一個快速生成色輪的小技巧,這個技巧不需要利用網上的圖片或工具。現做現用,很方便。
小技巧:快速生成色輪
STEP 01
讓我們先用這個自訂形狀工具畫出一個圓環。
STEP 02
然後在圓環裏填充色彩,這裏我們運用一個漸變疊加
漸變疊加的疊加方式爲角度漸變,漸變色這裏選用「色譜」,沒有找到這個漸變的小夥伴記得要追加色譜
這時做出的色輪,在色彩上飽和度達到最大值。因此也能表現最強烈的色相對比。目前比較流行的漸變色是明度偏高,飽和度居中的漸變,也像這樣的糖果色,因此這時大家可以利用調整圖層【色相/飽和度】來增加明度或降低飽和度。
高能提醒:別被參數騙了
可能很容易被初學者忽略的是,我們在PS裏的色彩(HSB)這個參數裏看下,一般來說H-色相,S-飽和度,B-明度,這裏的情況和我們在色彩學裏學到的HSB有點小差異。
色相這裏沒有問題,但是飽和度和明度,尤其是飽和度上面,大家可以看到一般來說飽和度最低時,色彩是慢慢失去色度,也就是呈現灰色,但是在軟件裏把S這個值調到最小呈現出是白色,還有另一個屬性:明度,最大的明度,應該是白色,在軟件裏的B這個參數調到最高時,並不是白色。
在PS裏,只有把色彩放到【色相/飽和度】這個工具裏,纔會看到和我們書裏的概念表現一致的特性。
工具不同,漸變也就不同
運用色環配出的漸變色和直接利用漸變工具配出的漸變色還有差別的,最重要是體現在顏色的過度上,如果是用漸變工具選擇了左邊綠色,右邊紫色的漸變色,在中間出現的過度色就表現出一種發灰的色彩,如果所選用的兩端的顏色是在色環上距離有定的角度,就會出現這種灰色。這是因爲兩種顏色彼此混合所造成的。有些情況下,確實是需要這樣過度的,這就直接用漸變工具來做漸變。
另外一個情況就是不希望色彩發灰,這時需要用到色環,在色環上根據所需要的漸變過度來選取不同的色彩配置。
可以看出來,儘管沒有飽和度、明度的變化,色彩仍然是彼此之間所表現的特質都很獨特,所以基本上利用色相對比,就能配出非常優秀的漸變作品。
一般來說,漸變本身就足夠吸引人,有漸變參與的情況下,我個人的建議是色彩不要太多,儘量少元素,整體風格傾向極簡,這時最能發揮漸變色這種特質的魅力。
這個案例中的漸變過度,中間的這個紅色和藍色的漸變就是用漸變工具做出來的,兩邊的漸變都是取用了色環上的漸變過度,可以看到色彩上兩邊的漸變中的色相更多,更飽滿,飽和度和明度都沒有喪失,而中間的漸變在紅藍在之間的過度出現了飽和度較低的紫灰色。
色溫對比
色溫是什麼?色溫更多是色彩對人的主觀的心理因素的影響。雖說是主觀,但是大家的整體傾向還是比較類同。比如藍色清涼,紅色溫暖。
所以,把色環上的色彩根據主觀溫度進行一個劃分,就有了我們經常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進行衡量,但是卻在色彩中發揮不小的作用。
獲得平衡感
漸變中加入色溫這個屬性,這個遊戲就會更好玩。一般來說,爲了達到配色平衡,我們的配色中需要冷暖進行平衡,這裏的平衡並非是1:1的嚴格配比,而是彼此滲透,雙方根據位置、面積、形狀等等元素的共同參與,共同實現一個版面的平衡。當然,這不是件容易的事,但這是我們配色中的方向之一。
回到我們的色溫對比,要體現在漸變中,就是要有冷色和暖色的參與。一般來說,在比較簡單的過渡性雙色漸變裏,一個冷色一個暖色是非常常見的表達方式。還是拿剛剛那個案例來看,左邊兩個配色就是冷暖的過度,而右邊的配色相對來說偏暖,當然相比之下,洋紅色還是比橙色會更偏冷一些。
綠色和紫色:冷暖不定
冷暖色的對比都是在同一個版面內的一個動態對比,尤其對於綠色和紫色這個範圍內的色彩來說的話更是如此。比如綠色,在和藍色搭配的時候,由於藍色是絕對的冷色,所以綠色就顯得表現出暖色的特質,而綠色如果和橙色搭配,橙色又是絕對的暖色,所以綠色又表現出冷色的特性。紫色也是同樣的情況,和藍色搭配它偏向暖色,而和橙色搭配時它又是偏冷的。
用起來其實也很簡單,如果你的配色中發現整體感覺偏冷,就增加暖色。如果太暖,那就增加冷色調。如果整體的配色看不出哪裏不對勁,但總覺得色彩有點奇怪,就先看看色溫是不是實現了平衡。
明度對比
再增加一個屬性,漸變這個遊戲又增加難度了,明度這個屬性表現爲顏色的明暗程度,明度引入了另一個性質:光。其實我們平時看到的色彩就是因爲有了光,纔有了顏色。但是一般來說我們會把光簡單歸屬於“發光”這個行列。事實上,由於光線的折射,我們視網膜接受到光的波長,才產生了色彩。那麼光線的強烈與否,就會影響這個顏色的表現。
明度的對比,是所有顏色屬性當中,最容易被覺察到的。我們可以簡單來看,我們的素描就是利用明暗來表現物體,黑白灰能毫不費力表現現實中光的感覺。所以在配色中,有了明暗對比,是一個很好表現色彩感染力的元素。
表現立體感
即使明度相同,我們的色彩明暗程度(從主觀感受來說),也是不一樣的。比如相同明度的黃綠色和紫色,在明暗表現上,黃綠色明顯更亮,更靠前。如果讓這兩個色彩之間發生漸變關係,這樣的表現就很像左上角有光滲入進這塊平面中。如果進一步降低的紫色的明度,這時,明度的對比就更爲強烈。這時很適合表現出某種立體感。
當然,我們的色彩並非一定要有立體感才能生動,有些配色大師,會刻意去弱化立體感,所以會盡量避免明暗的對比。但是,作爲初學者,一定要知道明暗對比,懂得在適當的情況下拿來使用。
尤其是在同色系或者鄰近色色系的漸變裏,明度對比是一個增加立體表現力的方式。有些時候,平塗的方式看起來呆板單調,利用同色系漸變就能很好解決這個問題。兩個色彩之間可以非常近似,即便如此,還是和平塗有差別。有了光的感覺就要隨時注意受光的方向,在整個畫面裏保持全局光,所謂全局光,換個簡單的說法就是大家都在同一光源照射下。
我們可以再和大家演示一下,例如這裏有兩個圓,這兩個圓都是填充爲紫-綠漸變,這時的紫和綠是同樣的明度。這裏注意啊,就算是同樣明度,兩個顏色在直觀的感覺上,明暗程度也是有差別的,比如綠色會稍微亮一點。這時開啟漸變工具,在後邊的綠色這一端色彩,將它的明度調高,這時大家會發現,右邊這個圓就變爲了一個球體。
從黑白灰開始
明度漸變還是增加作品細膩程度的一個方法,我們和大神的差距,也許真有可能就是一處小小的明暗關係的不同。別忘了,明度對比對整體效果所發生的影響是最大的,但也是我們最容易忽略的,有時候一旦有了顏色,我們的焦點都在色調和色度上。但其實所有的配色,比如我們做設計,一開始總是從黑白灰開始做起,先配置好明度,然後再開始根據明度來選擇用色。
有了對明度的把握,我想我們對色彩的把握才能上升到新的層次,否則,我們在一堆色彩裏,很容易迷失方向。
色度對比
這裏說的色度,也被叫飽和度,有的書上也叫彩度,拿我們日常用語講就是鮮豔程度。色度對比越強,尤其是色輪上的互補色,在他們色度都達到最大時,會撞出最大的火花,產生最強烈的效果。
有時候這種高彩度的配色用在動感很強的設計中,看上去活力四射。但這種互補色之間也會發生彼此互斥的關係,造成整個版面的凌亂,所以要非常謹慎的對待色度。
空氣透視-空間感的塑造
色度對比最常見的就是用在空間感的塑造上,大家都知道,色度越高,在視覺上會製造一種“更近”的效果。
舉例來說吧,我們這裏可以畫一個梯形,這個梯形用漸變來填色。如果用單色,大家一定感覺不出空間感。如果我們採用漸變,使得同一個顏色,比如紫紅色,在這個梯形上,由上到下做一個漸變,這個漸變中兩端的色彩,在色度上有差距。那這時就能體現出一個慢慢延伸到遠方的感覺。甚至還能有種暴露在空氣中,被空氣弱化的視覺效果。這個也運用在插畫中,也被叫做空氣透視。
色彩濃度的強弱對比,和其他的色彩的屬性相結合,配色就變得更復雜。但是通常來說,配色並沒有標準答案。所以導致很多人在配色的時候,都是依靠一種感覺在操作。其實感覺的確是一個最直接的選色方法之一,但是並不是唯一的方式。大家如果對色彩有更深入的瞭解以後,就會慢慢理解感覺層面下的更有趣的東西。這個也是積累。
在飽和度這一環,PS裏如果覺得不是很靠譜,就像我之前和大家提過,那麼大家可以進入到AI裏,利用AI的混合工具來生成不同的色階。例如我們在這裏用一個高飽和度的紅色和一個低飽和度的藍色相搭配。應該說,這兩端的色彩既有飽和度的對比,也有色調和明度的對比,還有色溫的對比,應該說是對比是非常豐富的。所以,這一條矩形,用在背景色上,我個人感覺不是太合適。如果是做成一些特殊的效果,還是不錯,比如設計字型的時候做筆畫造型,或者做裝飾的線條。
最後一個我們要略提一下,就是透明度的對比。儘管透明度不是標準的顏色屬性中的一種,但是在我們軟件操作當中,透明度是相當實用的。漸變的色彩,我們可以改變其中一個色彩的透明度,比如降低到0,那麼一端的色彩消失不見,這樣最容易造成一種濃霧的效果。
這個插畫,是在設計我自己的個人網站時做的,其中這些背景中的立方體的某些塊面,就是採用某一端降低透明度的效果。有一種在雲端的感覺。
推薦兩個漸變配色網站
這個網站的工具很好用,我當時在羣裏推薦的時候,有人問我說這個和PS裏的漸變工具有什麼區別。我在剛剛其實已經和大家講過,PS裏的顏色的設定是有一些和我們的色彩理論不太符合的地方,但是這個漸變工具就完全符合我們對色彩屬性的瞭解。所以在這裏可以進行調試,再確定漸變的值,最後放到PS裏用。
這個網站,我相信大家應該不會陌生,好多地方都推薦過,這個漸變色是可以作爲背景色來使用的。大家可以看到這上面大部分的漸變的明度都比較高,比較淺。過度也非常細膩。這一點大家可以拿來當作自己配色的參考。
這兩個工具以外,還有很多其他好用的工具我就不一一演示了,這是我用的比較多,而且覺得還挺實用的兩個網站。
寫在最後
其實色彩和音樂的感覺是最接近的,每個色彩對應每個音調,那經過組合以後就能表現出一定的情感。通常你也很難說,哪一首音樂是最好聽的,因爲每個人喜歡的音樂風格都不一樣。但是總有那麼一些歌是廣爲流傳成爲經典的。
所以要學會漸變,首先應該是瞭解色彩。我們不可能透過一篇文章就能完成學習,肯定是希望以這篇文章作爲一個啓發點,大家可以從中找到自己的學習的方向。下一次我們會分享關於漸變的種類,總結起來也有十多種,我會一一帶大家演示每個漸變種類的做法。那我們就下一次再聊。
ifeiwu作者:飛屋睿UIdesign
-
頭像製作之可愛的猴子
萌萌噠的猴子頭像是我們都喜歡的,也有很多人喜歡拿到它來做我們一些運用的頭像,小編對於萌萌噠的猴子頭像也是很喜愛的,那麼,我們該如何製作可愛的猴子頭像呢?小編爲你詳細介紹下:頭像製作之可愛的猴子。工具/材料ai軟件電腦猴子操作方法01首先,我們開啟我們的電腦,接...
-
qq好友查找搜尋qq號碼找不到
如果QQ好友用QQ號碼查找我,找不到怎麼辦?操作方法(01)在電腦上登陸QQ,然後在登陸介面左上角點擊進入自己的頭像,在修改資料的介面中,QQ號碼的旁邊有一個小的標誌,點擊進入。(02)進入到的是一個網頁--我的QQ中心,它自動跳轉到賬號的介面,點擊中央介面右上角的“設定”,將顯示...
-
MySql如何對字元串模糊查詢?
mysql在網站開發中,越來越多人使用了,因爲方便部署,方便使用。我們在平時使用中,會對錶的某個字段進行模糊查詢,比如我要查詢學生表裏,姓王的學生有哪些,就需要模糊查詢。下面一起看下。操作方法(01)首先,看下我們數據庫學生表的數據,(02)如果要查詢所有姓王的學生,這個sql怎...
-
谷歌商店打不開怎麼辦
由於天朝的特殊國情導致Chrome(谷歌瀏覽器)應用商店有很多非常好的插件以及Chrome應用商店也一同被無辜地封殺了,也就導致了現在Chrome應用商店打不開、進不去的情況。藉助最新的GoogleHosts列表即可正常開啟谷歌應用商店,但是有效可用的GoogleHosts要怎麼找呢?別急...