相信大家平時(shí)生活中拍照都應(yīng)該接觸過(guò)美顏濾鏡，即使沒(méi)用過(guò)也應(yīng)該聽說(shuō)過(guò)，自然也都知道各種濾鏡的強(qiáng)大之處。但是大家有沒(méi)有思考過(guò)，對(duì)于設(shè)計(jì)配色來(lái)說(shuō)有沒(méi)有類似的美顏濾鏡呢？當(dāng)然有，那就是本期教程我們所要探討的雙色調(diào)，只不過(guò)這里我們說(shuō)的濾鏡并不是真的濾鏡，而是指在配色中操作簡(jiǎn)單容易出效果而且還能夠掩蓋一些配色瑕疵的形式或方法。如果你對(duì)自己的配色能力還沒(méi)有足夠的自信，掌握好雙色調(diào)是不錯(cuò)的優(yōu)先選擇。

首先我們先來(lái)了解一下什么是雙色調(diào)，其實(shí)單從它的字面含義上就能理解，“雙色”是指兩種顏色，“調(diào)”就是指色調(diào)，也就是將一個(gè)圖像通過(guò)灰度分離出暗部、亮部和中間調(diào)，用一種顏色代替暗部，用另一種顏色代替亮部，中間調(diào)用這兩個(gè)顏色的過(guò)渡色代替。

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

如果處理成黑白或灰度，也就意味著沒(méi)有了色相和純度，只是單純的明度表現(xiàn)，畫面分成了暗部、亮部以及中間的過(guò)渡地帶。

先替換暗色部分，選用的是一個(gè)藍(lán)色，于是圖片中的暗色部分就變成了藍(lán)色。

亮色部分選擇一個(gè)綠色，現(xiàn)在就實(shí)現(xiàn)了雙色調(diào)的效果，畫面中暗色的部分變成了藍(lán)色，亮色部分變成了綠色，中間過(guò)渡的灰色部分變成了藍(lán)綠之間的混合色。

如果反過(guò)來(lái)，將較暗的顏色替換亮色部分，較亮的顏色替換暗色部分，就會(huì)出現(xiàn)這種類似負(fù)片的效果。

雙色調(diào)和雙色的區(qū)別就在這個(gè)“調(diào)”上，這里不是在玩文字游戲，的確如此，因?yàn)殡p色配色的畫面中只有兩種顏色，而雙色調(diào)除了這兩種顏色之外，還有它們之間的過(guò)渡色。

比如綠色和紅色這兩個(gè)顏色的搭配，毫無(wú)疑問(wèn)是雙色。

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

拿這兩張海報(bào)舉例，它們所使用的色相差不多，但是左側(cè)的是雙色調(diào)，右側(cè)的是雙色，左側(cè)的海報(bào)中暗色和亮色部分分別填充了這兩個(gè)顏色，中間調(diào)部分是它們之間的過(guò)渡色，而右側(cè)的海報(bào)只有這兩種顏色。

既然提到了漸變，相信有人會(huì)有疑問(wèn)，那雙色調(diào)和漸變又有什么區(qū)別呢？同樣我們還是用圖說(shuō)話。

這里我們用這張圖片分別演示一下漸變和雙色調(diào)兩種效果。第一步先將圖片處理成黑白，左側(cè)從下往上是紅色到黃綠色的漸變，右側(cè)是使用這兩個(gè)顏色的雙色調(diào)效果。漸變相當(dāng)于在圖片上放了一塊有色玻璃，這塊玻璃是從紅色到綠色的漸變，透過(guò)玻璃看的效果只是對(duì)顏色產(chǎn)生了影響，并不會(huì)對(duì)圖片的細(xì)節(jié)產(chǎn)生改變；而右側(cè)的雙色調(diào)效果相當(dāng)于給圖片換了顏色，給人一種不真實(shí)的感覺(jué)，因?yàn)檫@是現(xiàn)實(shí)中我們不常見(jiàn)到的效果。

其實(shí)雙色調(diào)并非是設(shè)計(jì)中的產(chǎn)物，早在十九世紀(jì)末期就已經(jīng)存在了，就是利用相機(jī)產(chǎn)生的雙色調(diào)效果。

最初出現(xiàn)在棕褐色照片上，也是最常用的雙色調(diào)之一。一方面能夠保持工業(yè)時(shí)代未修飾的外觀，另一方面還能夠讓照片呈現(xiàn)出古色古香的感覺(jué)。

后來(lái)這一效果被印刷業(yè)借用過(guò)來(lái)，成為了一種經(jīng)濟(jì)有效的印刷方案，因?yàn)槭褂秒p色調(diào)可以以較低的成本進(jìn)行批量印刷，并且還可以為圖像增添藝術(shù)效果。

近些年來(lái)伴隨著新媒體的出現(xiàn)，雙色調(diào)的使用已逐漸普及，而且越來(lái)越受歡迎，受歡迎的原因已經(jīng)不是印刷成本低的問(wèn)題了，更多地是跟現(xiàn)在的審美有關(guān)。

雙色調(diào)之所以能夠成為新趨勢(shì)，很多人認(rèn)為是音樂(lè)平臺(tái)“聲田”將這一趨勢(shì)帶回主流，所以一說(shuō)到雙色調(diào)，大部分人腦海中的第一印象就是這種畫面，但其實(shí)這只是狹義上的雙色調(diào)，而廣義上的雙色調(diào)并非只有這一種色彩搭配形式。

首先第一種也是最基本的形式就是「黑白」?？赡苡械娜藭?huì)說(shuō)黑白怎么能算雙色調(diào)呢？因?yàn)檫@里我們是從廣義上來(lái)講的，只要通過(guò)雙色調(diào)的手法能實(shí)現(xiàn)的效果都可以算是雙色調(diào)，無(wú)論是什么顏色。而黑白作品是可以通過(guò)雙色調(diào)實(shí)現(xiàn)的，只不過(guò)填充的顏色是黑色和白色。但是有一點(diǎn)需要提醒大家的是，如果想要得到非常具有質(zhì)感的黑白圖片，這個(gè)還跟攝影精修以及后期調(diào)色有關(guān)，而不是單純的雙色調(diào)就可以實(shí)現(xiàn)的。

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

我們用這張圖片來(lái)演示，方法就是在圖片上添加一個(gè)色塊，填充綠色，圖層模式選擇正片疊底，也可以通過(guò)漸變映射來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)的效果都是黑色和有彩色的搭配，最后配上文字。

「白色和有彩色」。也就是暗色部分填充一個(gè)有彩色，亮色部分不變。這種效果因?yàn)榘咨贾鲗?dǎo)，所以通常會(huì)有一種輕盈感、單純感，傳統(tǒng)上也叫做單色模式，但是在這里我們都給劃進(jìn)了雙色調(diào)的范疇。

還是用這張圖片來(lái)演示，同樣疊加色塊，但圖層模式要選擇濾色，當(dāng)然也可以通過(guò)漸變映射來(lái)實(shí)現(xiàn)，兩種方法得到的效果雖然有微小差異，但是可以忽略不計(jì)。

「有彩色和它的不同色調(diào)」。這種形式就是暗色和亮色部分替換的都是同一個(gè)色相，只不過(guò)通過(guò)色調(diào)去表現(xiàn)明暗關(guān)系。

「有彩色和有彩色的搭配」。這也是我們平時(shí)對(duì)雙色調(diào)的基本印象，也是我們前面說(shuō)的狹義上的雙色調(diào)。這種有彩色加有彩色的雙色形式，很難通過(guò)疊加色塊來(lái)實(shí)現(xiàn)，漸變映射是首選。

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

這個(gè)系列海報(bào)是一個(gè)百人合唱團(tuán)的視覺(jué)形象，海報(bào)的制作創(chuàng)意使用了經(jīng)典名畫來(lái)描繪音樂(lè)會(huì)的主題，效果圖中，背景是原畫作，而海報(bào)位于原畫作之上截取布局，分別用不同的色彩組合進(jìn)行了雙色調(diào)處理，雖然每一個(gè)的色相不同，但因?yàn)槎际请p色調(diào)的表現(xiàn)手法，所以整體看上去又是一個(gè)整體。

這個(gè)品牌的視覺(jué)形象使用的也是有彩色和有彩色的雙色調(diào)搭配，藍(lán)色和粉色組合在一起，給人一種年輕、時(shí)尚的感覺(jué)。

這是一部關(guān)于成長(zhǎng)的經(jīng)典小說(shuō)《失戀排行榜》，這是第3版的封面，鋪滿背景的人物圖片使用了紅色和黃色的雙色調(diào)搭配，雖然人物圖片的識(shí)別性降低了，但是視覺(jué)沖擊力和藝術(shù)效果提高了。

這是《夏日之戀》的封面，是法國(guó)新浪潮經(jīng)典電影《夏日之戀》的原著小說(shuō)。色彩的選擇都是偏淡雅的色調(diào)，給人一種小清新文藝的感覺(jué)，只不過(guò)這里的雙色調(diào)圖片并非填充整個(gè)背景，而是截取的一個(gè)局部特寫。

雙色調(diào)使用的場(chǎng)景幾乎適用于所有媒介，網(wǎng)頁(yè)設(shè)計(jì)更是居多，而且因?yàn)橛∷⑿枰紤]色值的問(wèn)題，而屏幕端不需要考慮這些，所以網(wǎng)頁(yè)UI上使用的雙色調(diào)色彩更加豐富，無(wú)論是鮮亮的還是黯淡的，都可以使用。

這里給大家推薦第三種實(shí)現(xiàn)雙色調(diào)的方法，就是網(wǎng)站工具，現(xiàn)在有很多這種網(wǎng)站可以幫助我們快速實(shí)現(xiàn)雙色調(diào)，這里給大家推薦一個(gè)比較主流的，就是這個(gè)網(wǎng)站。

https://duotone.shapefactory.co/

進(jìn)入網(wǎng)站會(huì)顯示一些提供的圖片，我們可以通過(guò)左側(cè)這里調(diào)整顏色，可以選擇默認(rèn)的幾組搭配，也可以單獨(dú)去調(diào)整，所有的調(diào)整效果都是實(shí)時(shí)顯示的。

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

剛剛我們了解了雙色調(diào)的一些色彩組合形式，下面我們來(lái)看看雙色調(diào)在設(shè)計(jì)中都有哪些表現(xiàn)手法。

第一種就是「多個(gè)單色形成系列」，也就是每一個(gè)單獨(dú)的畫面使用一種色相下的不同色調(diào)，但是放在一起又會(huì)形成系列，整體來(lái)看既有很好的統(tǒng)一感，同時(shí)又有很好的區(qū)分，統(tǒng)一感來(lái)自于整體都使用的雙色調(diào)配色，區(qū)分是來(lái)自于每一個(gè)的色相都是不同的。下面我們嘗試使用一下這三組配色。

我們用這三張圖片來(lái)做一個(gè)系列的感覺(jué)，配色上就用剛才那三組配色。

首先是第一張圖片，因?yàn)檎w我都想居中編排，所以先調(diào)整圖片在版面中的位置，然后對(duì)圖片進(jìn)行漸變映射形成雙色調(diào)，最后編排文字。

然后是第二張，也是先調(diào)整圖片位置，填充第二組配色，但是因?yàn)閳D片本身的原因有些背景還存在，所以需要手動(dòng)擦掉，版式保持不變。

第三張同樣也是調(diào)整位置，然后處理成雙色調(diào)，擦去背景，放上文字。

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

這個(gè)畫冊(cè)雜志的封面，同樣也是使用的多個(gè)單色形成系列的手法。

「單色和單色」。這種手法就是將畫面中的色彩分成兩部分，每一個(gè)部分都是一個(gè)單色的雙色調(diào)形式，然后組合在一起，整體就是雙色調(diào)的效果。但是因?yàn)檫@里的三個(gè)相關(guān)作品在版式上都比較復(fù)雜，所以怕給大家造成誤解，以為單色加單色的形式只適合復(fù)雜的文字編排，其實(shí)不是的。

比如這里給大家做一個(gè)演示，這是我們要用到的圖片。

先將兩個(gè)人物圖片置入到橢圓形中，然后搭建版式，因?yàn)槲覀兊闹攸c(diǎn)是講色彩，所以版式部分就不過(guò)多討論。黑白的配色其實(shí)也是可以的，但是因?yàn)槭呛诎?，所以整體上就是中規(guī)中矩的感覺(jué)，而如果想增加一些藝術(shù)效果，我們可以嘗試使用雙色調(diào)。

先對(duì)兩個(gè)人物進(jìn)行雙色調(diào)處理，使用的就是單色加單色的表現(xiàn)手法，男生用藍(lán)色，女生用紅色，其余元素可以交叉使用這兩種顏色，這個(gè)版面就完成了，也非常的簡(jiǎn)單，目的就是告訴大家單色加單色的形式并非只能用于復(fù)雜的版面。

「局部應(yīng)用」。雙色調(diào)并非只能用在整個(gè)畫面上，也可以用在畫面的局部，如果是整個(gè)版面的雙色調(diào)，給人的感覺(jué)特別強(qiáng)烈，如果想降低這種感覺(jué)，那就可以在局部上應(yīng)用。

下一種表現(xiàn)形式是「色彩透疊」，比如這三個(gè)海報(bào)就是用色塊進(jìn)行疊加，相交的部分就會(huì)形成雙色調(diào)的效果。

這兩個(gè)海報(bào)，給人的第一印象就是綠色和粉色的雙色調(diào)效果，但是這里它并不是直接將人物圖片調(diào)整成雙色調(diào)，而是將圖片處理成綠色調(diào)，通過(guò)疊加粉色的色塊來(lái)實(shí)現(xiàn)的，由于有相交的部分和不相交的部分，所以還會(huì)形成一種靈動(dòng)多變的交錯(cuò)感。

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

這組海報(bào)是將圖片置入到文字中，然后在文字的上方再疊一層文字，通過(guò)兩種色彩的疊加形成雙色調(diào)的效果。

「單色組合成多色」。雙色調(diào)也可以實(shí)現(xiàn)色彩豐富的畫面，方法就是在每一個(gè)局部使用不同的雙色調(diào)效果，然后組合在一起，最后就會(huì)呈現(xiàn)出一種多色配色的效果。

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

最后我用一個(gè)案例給大家演示一下，今年八月份，我們研習(xí)設(shè)舉辦了一個(gè)內(nèi)部活動(dòng)，活動(dòng)的主題是每個(gè)人挑選學(xué)生時(shí)代自己喜歡的一個(gè)科目進(jìn)行教科書設(shè)計(jì)，相當(dāng)于一個(gè)致敬。這次活動(dòng)中我們團(tuán)隊(duì)進(jìn)行的創(chuàng)作，后續(xù)會(huì)發(fā)布一篇推文進(jìn)行詳細(xì)的介紹，感興趣的話可以留意一下我們的公眾號(hào)。而我自己設(shè)計(jì)的，在這里就提前給大家劇透了。

我選的是語(yǔ)文，這是最終的效果圖。很明顯使用的就是雙色調(diào)，但是這里我并非直接找了四張圖片然后進(jìn)行雙色調(diào)處理，那樣太簡(jiǎn)單了，當(dāng)然我的意思并不是說(shuō)簡(jiǎn)單就不好，復(fù)雜的就一定好，如果你能找到你想要的圖片那也是可以的，而我想要的這四個(gè)畫面是需要自己去創(chuàng)作出來(lái)的。

我們一個(gè)個(gè)來(lái)看，首先是第一個(gè)，先添加一個(gè)紋理充當(dāng)?shù)孛妫又砑右粋€(gè)山和天空的圖片，然后添加一個(gè)月亮，最后添加一棵樹和一頭牛作為主體?？梢钥吹饺绻乾F(xiàn)在這樣的畫面，風(fēng)格是很不搭的，不過(guò)沒(méi)關(guān)系，接著做第二個(gè)。

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

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

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

放在一起來(lái)看一下，現(xiàn)在的畫面其實(shí)是不符合合成的，因?yàn)檫@里面的圖片風(fēng)格很混亂，有的是偏真實(shí)的，有的是插畫，根本沒(méi)法去調(diào)整，這時(shí)候就是展現(xiàn)雙色調(diào)強(qiáng)大濾鏡魅力的時(shí)候了。

這里我們就用這四組顏色對(duì)畫面進(jìn)行雙色調(diào)處理。

大家看，通過(guò)雙色調(diào)的添加，讓原本非常混亂的一個(gè)畫面一下子就統(tǒng)一了，并且還很有意境。但是大家應(yīng)該注意到了，這里的主體元素沒(méi)有跟著一起變成雙色調(diào)，因?yàn)橹黧w一定要和畫面區(qū)分開，如果主體元素也調(diào)整成雙色調(diào)的話就會(huì)被淹沒(méi)掉了，添加的就沒(méi)什么意義了。

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

最后編排文字，也就是最開始大家看到的效果，既不屬于合成也不屬于插畫的這么一個(gè)感覺(jué)，我為什么說(shuō)雙色調(diào)是配色的美顏濾鏡，我想現(xiàn)在大家應(yīng)該徹底明白了吧，原本那樣的畫面，僅僅通過(guò)雙色調(diào)這么非常簡(jiǎn)單的一步，就可以讓它變得很統(tǒng)一，而且畫面的色相感更強(qiáng)，更加具有設(shè)計(jì)感和藝術(shù)效果。最后我們來(lái)看一下效果圖。

本期教程到這里就結(jié)束了，我們帶大家了解了什么是雙色調(diào)，通過(guò)一些相關(guān)設(shè)計(jì)作品，讓大家了解了雙色調(diào)的色彩組合形式和雙色調(diào)的設(shè)計(jì)表現(xiàn)手法，然后教給大家三種實(shí)現(xiàn)雙色調(diào)的方法，最后用一個(gè)案例為大家演示了雙色調(diào)的強(qiáng)大之處。雙色調(diào)雖然是一種實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單的手法，但是因?yàn)樗鼞?yīng)用領(lǐng)域的廣泛，以及本身并沒(méi)有特別明顯的缺點(diǎn)，從而讓雙色調(diào)的上限很高，因?yàn)樗梢院腿魏卧O(shè)計(jì)形式相結(jié)合。教給大家的只是最基本的方法，至于做出什么樣的效果，還需要大家自己去潛心研究和發(fā)掘。今天的內(nèi)容就先到這里，希望對(duì)大家有所幫助，我是無(wú)我，我們下期再見(jiàn)。

 

原文地址：研習(xí)設(shè)（公眾號(hào)）