設計配色中的美顏濾鏡——雙色調

 二維碼 168
來源:https://www.sj33.cn/archives/202010/54665.html

相信大家平時生活中拍照都應該接觸過美顏濾鏡,即使沒用過也應該聽說過,自然也都知道各種濾鏡的強大之處。但是大家有沒有思考過,對于設計配色來說有沒有類似的美顏濾鏡呢?當然有,那就是本期教程我們所要探討的雙色調,只不過這里我們說的濾鏡并不是真的濾鏡,而是指在配色中操作簡單容易出效果而且還能夠掩蓋一些配色瑕疵的形式或方法。如果你對自己的配色能力還沒有足夠的自信,掌握好雙色調是不錯的優先選擇。

設計配色中的美顏濾鏡——雙色調

首先我們先來了解一下什么是雙色調,其實單從它的字面含義上就能理解,“雙色”是指兩種顏色,“調”就是指色調,也就是將一個圖像通過灰度分離出暗部、亮部和中間調,用一種顏色代替暗部,用另一種顏色代替亮部,中間調用這兩個顏色的過渡色代替。

設計配色中的美顏濾鏡——雙色調

我們用這張圖片來演示,通常一張正常的彩色圖片都具有色彩三要素:色相、純度、明度。

設計配色中的美顏濾鏡——雙色調

如果處理成黑白或灰度,也就意味著沒有了色相和純度,只是單純的明度表現,畫面分成了暗部、亮部以及中間的過渡地帶。

設計配色中的美顏濾鏡——雙色調

先替換暗色部分,選用的是一個藍色,于是圖片中的暗色部分就變成了藍色。

設計配色中的美顏濾鏡——雙色調

亮色部分選擇一個綠色,現在就實現了雙色調的效果,畫面中暗色的部分變成了藍色,亮色部分變成了綠色,中間過渡的灰色部分變成了藍綠之間的混合色。

設計配色中的美顏濾鏡——雙色調

如果反過來,將較暗的顏色替換亮色部分,較亮的顏色替換暗色部分,就會出現這種類似負片的效果。

設計配色中的美顏濾鏡——雙色調

雙色調和雙色的區別就在這個“調”上,這里不是在玩文字游戲,的確如此,因為雙色配色的畫面中只有兩種顏色,而雙色調除了這兩種顏色之外,還有它們之間的過渡色。

設計配色中的美顏濾鏡——雙色調

比如綠色和紅色這兩個顏色的搭配,毫無疑問是雙色。

設計配色中的美顏濾鏡——雙色調

但如果同樣是用綠色和紅色去進行雙色調搭配,那就是綠色、紅色以及它們之間的漸變。

設計配色中的美顏濾鏡——雙色調

拿這兩張海報舉例,它們所使用的色相差不多,但是左側的是雙色調,右側的是雙色,左側的海報中暗色和亮色部分分別填充了這兩個顏色,中間調部分是它們之間的過渡色,而右側的海報只有這兩種顏色。

設計配色中的美顏濾鏡——雙色調

既然提到了漸變,相信有人會有疑問,那雙色調和漸變又有什么區別呢?同樣我們還是用圖說話。

設計配色中的美顏濾鏡——雙色調

這里我們用這張圖片分別演示一下漸變和雙色調兩種效果。**步先將圖片處理成黑白,左側從下往上是紅色到黃綠色的漸變,右側是使用這兩個顏色的雙色調效果。漸變相當于在圖片上放了一塊有色玻璃,這塊玻璃是從紅色到綠色的漸變,透過玻璃看的效果只是對顏色產生了影響,并不會對圖片的細節產生改變;而右側的雙色調效果相當于給圖片換了顏色,給人一種不真實的感覺,因為這是現實中我們不常見到的效果。

設計配色中的美顏濾鏡——雙色調

其實雙色調并非是設計中的產物,早在十九世紀末期就已經存在了,就是利用相機產生的雙色調效果。

設計配色中的美顏濾鏡——雙色調

最初出現在棕褐色照片上,也是最常用的雙色調之一。一方面能夠保持工業時代未修飾的外觀,另一方面還能夠讓照片呈現出古色古香的感覺。

設計配色中的美顏濾鏡——雙色調

后來這一效果被印刷業借用過來,成為了一種經濟有效的印刷方案,因為使用雙色調可以以較低的成本進行批量印刷,并且還可以為圖像增添藝術效果。

設計配色中的美顏濾鏡——雙色調

近些年來伴隨著新媒體的出現,雙色調的使用已逐漸普及,而且越來越受歡迎,受歡迎的原因已經不是印刷成本低的問題了,更多地是跟現在的審美有關。

設計配色中的美顏濾鏡——雙色調

雙色調之所以能夠成為新趨勢,很多人認為是音樂平臺“聲田”將這一趨勢帶回主流,所以一說到雙色調,大部分人腦海中的**印象就是這種畫面,但其實這只是狹義上的雙色調,而廣義上的雙色調并非只有這一種色彩搭配形式。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

首先**種也是最基本的形式就是「黑白」??赡苡械娜藭f黑白怎么能算雙色調呢?因為這里我們是從廣義上來講的,只要通過雙色調的手法能實現的效果都可以算是雙色調,無論是什么顏色。而黑白作品是可以通過雙色調實現的,只不過填充的顏色是黑色和白色。但是有一點需要提醒大家的是,如果想要得到非常具有質感的黑白圖片,這個還跟攝影精修以及后期調色有關,而不是單純的雙色調就可以實現的。

設計配色中的美顏濾鏡——雙色調

「黑色和有彩色」。這種形式也就是在黑白的基礎上,暗色部分不變,亮色部分被替換成了一個有彩色。這種效果可以用漸變映射的手法實現,也可以直接用色塊疊加。

設計配色中的美顏濾鏡——雙色調

我們用這張圖片來演示,方法就是在圖片上添加一個色塊,填充綠色,圖層模式選擇正片疊底,也可以通過漸變映射來實現,實現的效果都是黑色和有彩色的搭配,最后配上文字。

設計配色中的美顏濾鏡——雙色調

「白色和有彩色」。也就是暗色部分填充一個有彩色,亮色部分不變。這種效果因為白色占主導,所以通常會有一種輕盈感、單純感,傳統上也叫做單色模式,但是在這里我們都給劃進了雙色調的范疇。

設計配色中的美顏濾鏡——雙色調

還是用這張圖片來演示,同樣疊加色塊,但圖層模式要選擇濾色,當然也可以通過漸變映射來實現,兩種方法得到的效果雖然有微小差異,但是可以忽略不計。

設計配色中的美顏濾鏡——雙色調

「有彩色和它的不同色調」。這種形式就是暗色和亮色部分替換的都是同一個色相,只不過通過色調去表現明暗關系。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

「有彩色和有彩色的搭配」。這也是我們平時對雙色調的基本印象,也是我們前面說的狹義上的雙色調。這種有彩色加有彩色的雙色形式,很難通過疊加色塊來實現,漸變映射是首選。

設計配色中的美顏濾鏡——雙色調

這里我們用這張圖片做了三組不同的雙色調配色。

設計配色中的美顏濾鏡——雙色調

這個系列海報是一個百人合唱團的視覺形象,海報的制作創意使用了經典名畫來描繪音樂會的主題,效果圖中,背景是原畫作,而海報位于原畫作之上截取布局,分別用不同的色彩組合進行了雙色調處理,雖然每一個的色相不同,但因為都是雙色調的表現手法,所以整體看上去又是一個整體。

設計配色中的美顏濾鏡——雙色調

這個品牌的視覺形象使用的也是有彩色和有彩色的雙色調搭配,藍色和粉色組合在一起,給人一種年輕、時尚的感覺。

設計配色中的美顏濾鏡——雙色調

這是一部關于成長的經典小說《失戀排行榜》,這是第3版的封面,鋪滿背景的人物圖片使用了紅色和黃色的雙色調搭配,雖然人物圖片的識別性降低了,但是視覺沖擊力和藝術效果提高了。

設計配色中的美顏濾鏡——雙色調

這是《夏日之戀》的封面,是法國新浪潮經典電影《夏日之戀》的原著小說。色彩的選擇都是偏淡雅的色調,給人一種小清新文藝的感覺,只不過這里的雙色調圖片并非填充整個背景,而是截取的一個局部特寫。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

雙色調使用的場景幾乎適用于所有媒介,網頁設計更是居多,而且因為印刷需要考慮色值的問題,而屏幕端不需要考慮這些,所以網頁UI上使用的雙色調色彩更加豐富,無論是鮮亮的還是黯淡的,都可以使用。

設計配色中的美顏濾鏡——雙色調

這里給大家推薦第三種實現雙色調的方法,就是網站工具,現在有很多這種網站可以幫助我們快速實現雙色調,這里給大家推薦一個比較主流的,就是這個網站。

https://duotone.shapefactory.co/

設計配色中的美顏濾鏡——雙色調

進入網站會顯示一些提供的圖片,我們可以通過左側這里調整顏色,可以選擇默認的幾組搭配,也可以單獨去調整,所有的調整效果都是實時顯示的。

設計配色中的美顏濾鏡——雙色調

點擊上傳,界面就變成了你的圖片,選擇你想要的效果,最后點擊下載就可以了,這種方法也是比較好用的。

設計配色中的美顏濾鏡——雙色調

剛剛我們了解了雙色調的一些色彩組合形式,下面我們來看看雙色調在設計中都有哪些表現手法。

設計配色中的美顏濾鏡——雙色調

**種就是「多個單色形成系列」,也就是每一個單獨的畫面使用一種色相下的不同色調,但是放在一起又會形成系列,整體來看既有很好的統一感,同時又有很好的區分,統一感來自于整體都使用的雙色調配色,區分是來自于每一個的色相都是不同的。下面我們嘗試使用一下這三組配色。

設計配色中的美顏濾鏡——雙色調

我們用這三張圖片來做一個系列的感覺,配色上就用剛才那三組配色。

設計配色中的美顏濾鏡——雙色調

首先是**張圖片,因為整體我都想居中編排,所以先調整圖片在版面中的位置,然后對圖片進行漸變映射形成雙色調,最后編排文字。

設計配色中的美顏濾鏡——雙色調

然后是第二張,也是先調整圖片位置,填充第二組配色,但是因為圖片本身的原因有些背景還存在,所以需要手動擦掉,版式保持不變。

設計配色中的美顏濾鏡——雙色調

第三張同樣也是調整位置,然后處理成雙色調,擦去背景,放上文字。

設計配色中的美顏濾鏡——雙色調

原本三張不太好統一的圖片,僅僅通過位置的統一和雙色調的填充,就能快速出效果。通常這種成系列的設計,除了雙色調起到一定的作用外,文字編排也是很關鍵的,通常情況下版式都是不變的,如果版式相差太多,也是很難讓人看上去像是一個系列的,這一點大家需要注意。

設計配色中的美顏濾鏡——雙色調

這個畫冊雜志的封面,同樣也是使用的多個單色形成系列的手法。

設計配色中的美顏濾鏡——雙色調

「單色和單色」。這種手法就是將畫面中的色彩分成兩部分,每一個部分都是一個單色的雙色調形式,然后組合在一起,整體就是雙色調的效果。但是因為這里的三個相關作品在版式上都比較復雜,所以怕給大家造成誤解,以為單色加單色的形式只適合復雜的文字編排,其實不是的。

設計配色中的美顏濾鏡——雙色調

比如這里給大家做一個演示,這是我們要用到的圖片。

設計配色中的美顏濾鏡——雙色調

先將兩個人物圖片置入到橢圓形中,然后搭建版式,因為我們的重點是講色彩,所以版式部分就不過多討論。黑白的配色其實也是可以的,但是因為是黑白,所以整體上就是中規中矩的感覺,而如果想增加一些藝術效果,我們可以嘗試使用雙色調。

設計配色中的美顏濾鏡——雙色調

先對兩個人物進行雙色調處理,使用的就是單色加單色的表現手法,男生用藍色,女生用紅色,其余元素可以交叉使用這兩種顏色,這個版面就完成了,也非常的簡單,目的就是告訴大家單色加單色的形式并非只能用于復雜的版面。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

「局部應用」。雙色調并非只能用在整個畫面上,也可以用在畫面的局部,如果是整個版面的雙色調,給人的感覺特別強烈,如果想降低這種感覺,那就可以在局部上應用。

設計配色中的美顏濾鏡——雙色調

下一種表現形式是「色彩透疊」,比如這三個海報就是用色塊進行疊加,相交的部分就會形成雙色調的效果。

設計配色中的美顏濾鏡——雙色調

這兩個海報,給人的**印象就是綠色和粉色的雙色調效果,但是這里它并不是直接將人物圖片調整成雙色調,而是將圖片處理成綠色調,通過疊加粉色的色塊來實現的,由于有相交的部分和不相交的部分,所以還會形成一種靈動多變的交錯感。

設計配色中的美顏濾鏡——雙色調

可以疊色塊當然也可以疊文字,需要注意的是文字的面積要足夠大,不能太小,如果面積太小相交的部分就會不夠明顯。

設計配色中的美顏濾鏡——雙色調

這組海報是將圖片置入到文字中,然后在文字的上方再疊一層文字,通過兩種色彩的疊加形成雙色調的效果。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

「單色組合成多色」。雙色調也可以實現色彩豐富的畫面,方法就是在每一個局部使用不同的雙色調效果,然后組合在一起,最后就會呈現出一種多色配色的效果。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

最后就是通過「手動調整藝術效果」,這種形式就并非單純的去填充雙色調就可以了,變成雙色調之后還需要自己進行一些手動的修飾,例如局部上色、添加紋理、手繪、拼貼、裁切等等,總之可以進行任何形式的創作。

設計配色中的美顏濾鏡——雙色調

最后我用一個案例給大家演示一下,今年八月份,我們研習設舉辦了一個內部活動,活動的主題是每個人挑選學生時代自己喜歡的一個科目進行教科書設計,相當于一個致敬。這次活動中我們團隊進行的創作,后續會發布一篇推文進行詳細的介紹,感興趣的話可以留意一下我們的公眾號。而我自己設計的,在這里就提前給大家劇透了。

設計配色中的美顏濾鏡——雙色調

我選的是語文,這是最終的效果圖。很明顯使用的就是雙色調,但是這里我并非直接找了四張圖片然后進行雙色調處理,那樣太簡單了,當然我的意思并不是說簡單就不好,復雜的就一定好,如果你能找到你想要的圖片那也是可以的,而我想要的這四個畫面是需要自己去創作出來的。

設計配色中的美顏濾鏡——雙色調

我們一個個來看,首先是**個,先添加一個紋理充當地面,接著添加一個山和天空的圖片,然后添加一個月亮,最后添加一棵樹和一頭牛作為主體??梢钥吹饺绻乾F在這樣的畫面,風格是很不搭的,不過沒關系,接著做第二個。

設計配色中的美顏濾鏡——雙色調

同樣也是找一個木板的紋理,然后上方添加天空,木板紋理是充當水面效果的,所以這里我們添加一個船,最后添加幾只摳好的海鷗素材。

設計配色中的美顏濾鏡——雙色調

然后是第三個,先添加一個水面,然后同樣是天空,接著中間可以添加一些山,進行疊加,目的是形成一種錯落的感覺,最后加添一個主體,這張我們選擇兩只鶴,這樣大體上就可以了。

設計配色中的美顏濾鏡——雙色調

最后一個,同樣也是添加一個木板紋理,這個我想做一個夜晚的效果,所以找了一個夜晚星空的圖片,然后添加幾匹馬,正好這個馬奔跑的路線與木板的路線相吻合,也算是也一個很好的巧合。

設計配色中的美顏濾鏡——雙色調

放在一起來看一下,現在的畫面其實是不符合合成的,因為這里面的圖片風格很混亂,有的是偏真實的,有的是插畫,根本沒法去調整,這時候就是展現雙色調強大濾鏡魅力的時候了。

設計配色中的美顏濾鏡——雙色調

這里我們就用這四組顏色對畫面進行雙色調處理。

設計配色中的美顏濾鏡——雙色調

大家看,通過雙色調的添加,讓原本非?;靵y的一個畫面一下子就統一了,并且還很有意境。但是大家應該注意到了,這里的主體元素沒有跟著一起變成雙色調,因為主體一定要和畫面區分開,如果主體元素也調整成雙色調的話就會被淹沒掉了,添加的就沒什么意義了。

設計配色中的美顏濾鏡——雙色調

所以對于主體的處理,我這里添加了黑色形成類似剪影的效果,但是這里不是單純的黑色,而是有一定的肌理在里面。

設計配色中的美顏濾鏡——雙色調

最后編排文字,也就是最開始大家看到的效果,既不屬于合成也不屬于插畫的這么一個感覺,我為什么說雙色調是配色的美顏濾鏡,我想現在大家應該徹底明白了吧,原本那樣的畫面,僅僅通過雙色調這么非常簡單的一步,就可以讓它變得很統一,而且畫面的色相感更強,更加具有設計感和藝術效果。最后我們來看一下效果圖。

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

設計配色中的美顏濾鏡——雙色調

本期教程到這里就結束了,我們帶大家了解了什么是雙色調,通過一些相關設計作品,讓大家了解了雙色調的色彩組合形式和雙色調的設計表現手法,然后教給大家三種實現雙色調的方法,最后用一個案例為大家演示了雙色調的強大之處。雙色調雖然是一種實現起來比較簡單的手法,但是因為它應用領域的廣泛,以及本身并沒有特別明顯的缺點,從而讓雙色調的上限很高,因為它可以和任何設計形式相結合。教給大家的只是最基本的方法,至于做出什么樣的效果,還需要大家自己去潛心研究和發掘。今天的內容就先到這里,希望對大家有所幫助,我是無我,我們下期再見。

原文地址:研習設(公眾號)


地址/Add:成都市高新區盛安街-凱旋南城座18層25號

電話/Tel:028-67879849

郵箱/Mail:1594312382@qq.com

028-6787 9849
會員登錄
登錄
其他帳號登錄:
留言
回到頂部