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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先第一種也是最基本的形式就是「黑白」。可能有的人會說黑白怎麼能算雙色調呢？因為這裏我們是從廣義上來講的，隻要通過雙色調的手法能實現的效果都可以算是雙色調，無論是什麼顏色。而黑白作品是可以通過雙色調實現的，隻不過填充的顏色是黑色和白色。但是有一點需要提醒大家的是，如果想要得到非常具有質感的黑白圖片，這個還跟攝影精修以及後期調色有關，而不是單純的雙色調就可以實現的。

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

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

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

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

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

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

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

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

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

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

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

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

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

https://duotone.shapefactory.co/

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

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

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

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

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

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

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

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

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

這個畫冊雜誌的封麵，同樣也是使用的多個單色形成係列的手法。

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

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

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

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

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

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

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

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

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

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

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

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

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

我們一個個來看，首先是第一個，先添加一個紋理充當地麵，接著添加一個山和天空的圖片，然後添加一個月亮，最後添加一棵樹和一頭牛作為主體。可以看到如果是現在這樣的畫麵，風格是很不搭的，不過沒關係，接著做第二個。

同樣也是找一個木板的紋理，然後上方添加天空，木板紋理是充當水麵效果的，所以這裏我們添加一個船，最後添加幾隻摳好的海鷗素材。

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

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

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

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

大家看，通過雙色調的添加，讓原本非常混亂的一個畫麵一下子就統一了，並且還很有意境。但是大家應該注意到了，這裏的主體元素沒有跟著一起變成雙色調，因為主體一定要和畫麵區分開，如果主體元素也調整成雙色調的話就會被淹沒掉了，添加的就沒什麼意義了。

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

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

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

 

原文地址：研習設（公眾號）