首先我们先来了解一下什么是双色调，其实单从它的字面含义上就能理解，“双色”是指两种颜色，“调”就是指色调，也就是将一个图像通过灰度分离出暗部、亮部和中间调，用一种颜色代替暗部，用另一种颜色代替亮部，中间调用这两个颜色的过渡色代替。

我们用这张图片来演示，通常一张正常的彩色图片都具有色彩三要素：色相、纯度、明度。

如果处理成黑白或灰度，也就意味着没有了色相和纯度，只是单纯的明度表现，画面分成了暗部、亮部以及中间的过渡地带。

先替换暗色部分，选用的是一个蓝色，于是图片中的暗色部分就变成了蓝色。

亮色部分选择一个绿色，现在就实现了双色调的效果，画面中暗色的部分变成了蓝色，亮色部分变成了绿色，中间过渡的灰色部分变成了蓝绿之间的混合色。

如果反过来，将较暗的颜色替换亮色部分，较亮的颜色替换暗色部分，就会出现这种类似负片的效果。

双色调和双色的区别就在这个“调”上，这里不是在玩文字游戏，的确如此，因为双色配色的画面中只有两种颜色，而双色调除了这两种颜色之外，还有它们之间的过渡色。

比如绿色和红色这两个颜色的搭配，毫无疑问是双色。

但如果同样是用绿色和红色去进行双色调搭配，那就是绿色、红色以及它们之间的渐变。

拿这两张海报举例，它们所使用的色相差不多，但是左侧的是双色调，右侧的是双色，左侧的海报中暗色和亮色部分分别填充了这两个颜色，中间调部分是它们之间的过渡色，而右侧的海报只有这两种颜色。

既然提到了渐变，相信有人会有疑问，那双色调和渐变又有什么区别呢？同样我们还是用图说话。

这里我们用这张图片分别演示一下渐变和双色调两种效果。第一步先将图片处理成黑白，左侧从下往上是红色到黄绿色的渐变，右侧是使用这两个颜色的双色调效果。渐变相当于在图片上放了一块有色玻璃，这块玻璃是从红色到绿色的渐变，透过玻璃看的效果只是对颜色产生了影响，并不会对图片的细节产生改变；而右侧的双色调效果相当于给图片换了颜色，给人一种不真实的感觉，因为这是现实中我们不常见到的效果。

其实双色调并非是设计中的产物，早在十九世纪末期就已经存在了，就是利用相机产生的双色调效果。

最初出现在棕褐色照片上，也是最常用的双色调之一。一方面能够保持工业时代未修饰的外观，另一方面还能够让照片呈现出古色古香的感觉。

后来这一效果被印刷业借用过来，成为了一种经济有效的印刷方案，因为使用双色调可以以较低的成本进行批量印刷，并且还可以为图像增添艺术效果。

近些年来伴随着新媒体的出现，双色调的使用已逐渐普及，而且越来越受欢迎，受欢迎的原因已经不是印刷成本低的问题了，更多地是跟现在的审美有关。

双色调之所以能够成为新趋势，很多人认为是音乐平台“声田”将这一趋势带回主流，所以一说到双色调，大部分人脑海中的第一印象就是这种画面，但其实这只是狭义上的双色调，而广义上的双色调并非只有这一种色彩搭配形式。

首先第一种也是最基本的形式就是「黑白」。可能有的人会说黑白怎么能算双色调呢？因为这里我们是从广义上来讲的，只要通过双色调的手法能实现的效果都可以算是双色调，无论是什么颜色。而黑白作品是可以通过双色调实现的，只不过填充的颜色是黑色和白色。但是有一点需要提醒大家的是，如果想要得到非常具有质感的黑白图片，这个还跟摄影精修以及后期调色有关，而不是单纯的双色调就可以实现的。

「黑色和有彩色」。这种形式也就是在黑白的基础上，暗色部分不变，亮色部分被替换成了一个有彩色。这种效果可以用渐变映射的手法实现，也可以直接用色块叠加。

我们用这张图片来演示，方法就是在图片上添加一个色块，填充绿色，图层模式选择正片叠底，也可以通过渐变映射来实现，实现的效果都是黑色和有彩色的搭配，最后配上文字。

「白色和有彩色」。也就是暗色部分填充一个有彩色，亮色部分不变。这种效果因为白色占主导，所以通常会有一种轻盈感、单纯感，传统上也叫做单色模式，但是在这里我们都给划进了双色调的范畴。

还是用这张图片来演示，同样叠加色块，但图层模式要选择滤色，当然也可以通过渐变映射来实现，两种方法得到的效果虽然有微小差异，但是可以忽略不计。

「有彩色和它的不同色调」。这种形式就是暗色和亮色部分替换的都是同一个色相，只不过通过色调去表现明暗关系。

「有彩色和有彩色的搭配」。这也是我们平时对双色调的基本印象，也是我们前面说的狭义上的双色调。这种有彩色加有彩色的双色形式，很难通过叠加色块来实现，渐变映射是首选。

这里我们用这张图片做了三组不同的双色调配色。

这个系列海报是一个百人合唱团的视觉形象，海报的制作创意使用了经典名画来描绘音乐会的主题，效果图中，背景是原画作，而海报位于原画作之上截取布局，分别用不同的色彩组合进行了双色调处理，虽然每一个的色相不同，但因为都是双色调的表现手法，所以整体看上去又是一个整体。

这个品牌的视觉形象使用的也是有彩色和有彩色的双色调搭配，蓝色和粉色组合在一起，给人一种年轻、时尚的感觉。

这是一部关于成长的经典小说《失恋排行榜》，这是第3版的封面，铺满背景的人物图片使用了红色和黄色的双色调搭配，虽然人物图片的识别性降低了，但是视觉冲击力和艺术效果提高了。

这是《夏日之恋》的封面，是法国新浪潮经典电影《夏日之恋》的原著小说。色彩的选择都是偏淡雅的色调，给人一种小清新文艺的感觉，只不过这里的双色调图片并非填充整个背景，而是截取的一个局部特写。

双色调使用的场景几乎适用于所有媒介，网页设计更是居多，而且因为印刷需要考虑色值的问题，而屏幕端不需要考虑这些，所以网页UI上使用的双色调色彩更加丰富，无论是鲜亮的还是黯淡的，都可以使用。

这里给大家推荐第三种实现双色调的方法，就是网站工具，现在有很多这种网站可以帮助我们快速实现双色调，这里给大家推荐一个比较主流的，就是这个网站。

https://duotone.shapefactory.co/

进入网站会显示一些提供的图片，我们可以通过左侧这里调整颜色，可以选择默认的几组搭配，也可以单独去调整，所有的调整效果都是实时显示的。

点击上传，界面就变成了你的图片，选择你想要的效果，最后点击下载就可以了，这种方法也是比较好用的。

刚刚我们了解了双色调的一些色彩组合形式，下面我们来看看双色调在设计中都有哪些表现手法。

第一种就是「多个单色形成系列」，也就是每一个单独的画面使用一种色相下的不同色调，但是放在一起又会形成系列，整体来看既有很好的统一感，同时又有很好的区分，统一感来自于整体都使用的双色调配色，区分是来自于每一个的色相都是不同的。下面我们尝试使用一下这三组配色。

我们用这三张图片来做一个系列的感觉，配色上就用刚才那三组配色。

首先是第一张图片，因为整体我都想居中编排，所以先调整图片在版面中的位置，然后对图片进行渐变映射形成双色调，最后编排文字。

然后是第二张，也是先调整图片位置，填充第二组配色，但是因为图片本身的原因有些背景还存在，所以需要手动擦掉，版式保持不变。

第三张同样也是调整位置，然后处理成双色调，擦去背景，放上文字。

原本三张不太好统一的图片，仅仅通过位置的统一和双色调的填充，就能快速出效果。通常这种成系列的设计，除了双色调起到一定的作用外，文字编排也是很关键的，通常情况下版式都是不变的，如果版式相差太多，也是很难让人看上去像是一个系列的，这一点大家需要注意。

这个画册杂志的封面，同样也是使用的多个单色形成系列的手法。

「单色和单色」。这种手法就是将画面中的色彩分成两部分，每一个部分都是一个单色的双色调形式，然后组合在一起，整体就是双色调的效果。但是因为这里的三个相关作品在版式上都比较复杂，所以怕给大家造成误解，以为单色加单色的形式只适合复杂的文字编排，其实不是的。

比如这里给大家做一个演示，这是我们要用到的图片。

先将两个人物图片置入到椭圆形中，然后搭建版式，因为我们的重点是讲色彩，所以版式部分就不过多讨论。黑白的配色其实也是可以的，但是因为是黑白，所以整体上就是中规中矩的感觉，而如果想增加一些艺术效果，我们可以尝试使用双色调。

先对两个人物进行双色调处理，使用的就是单色加单色的表现手法，男生用蓝色，女生用红色，其余元素可以交叉使用这两种颜色，这个版面就完成了，也非常的简单，目的就是告诉大家单色加单色的形式并非只能用于复杂的版面。

「局部应用」。双色调并非只能用在整个画面上，也可以用在画面的局部，如果是整个版面的双色调，给人的感觉特别强烈，如果想降低这种感觉，那就可以在局部上应用。

下一种表现形式是「色彩透叠」，比如这三个海报就是用色块进行叠加，相交的部分就会形成双色调的效果。

这两个海报，给人的第一印象就是绿色和粉色的双色调效果，但是这里它并不是直接将人物图片调整成双色调，而是将图片处理成绿色调，通过叠加粉色的色块来实现的，由于有相交的部分和不相交的部分，所以还会形成一种灵动多变的交错感。

可以叠色块当然也可以叠文字，需要注意的是文字的面积要足够大，不能太小，如果面积太小相交的部分就会不够明显。

这组海报是将图片置入到文字中，然后在文字的上方再叠一层文字，通过两种色彩的叠加形成双色调的效果。

「单色组合成多色」。双色调也可以实现色彩丰富的画面，方法就是在每一个局部使用不同的双色调效果，然后组合在一起，最后就会呈现出一种多色配色的效果。

最后就是通过「手动调整艺术效果」，这种形式就并非单纯的去填充双色调就可以了，变成双色调之后还需要自己进行一些手动的修饰，例如局部上色、添加纹理、手绘、拼贴、裁切等等，总之可以进行任何形式的创作。

最后我用一个案例给大家演示一下，今年八月份，我们研习设举办了一个内部活动，活动的主题是每个人挑选学生时代自己喜欢的一个科目进行教科书设计，相当于一个致敬。这次活动中我们团队进行的创作，后续会发布一篇推文进行详细的介绍，感兴趣的话可以留意一下我们的公众号。而我自己设计的，在这里就提前给大家剧透了。

我选的是语文，这是最终的效果图。很明显使用的就是双色调，但是这里我并非直接找了四张图片然后进行双色调处理，那样太简单了，当然我的意思并不是说简单就不好，复杂的就一定好，如果你能找到你想要的图片那也是可以的，而我想要的这四个画面是需要自己去创作出来的。

我们一个个来看，首先是第一个，先添加一个纹理充当地面，接着添加一个山和天空的图片，然后添加一个月亮，最后添加一棵树和一头牛作为主体。可以看到如果是现在这样的画面，风格是很不搭的，不过没关系，接着做第二个。

同样也是找一个木板的纹理，然后上方添加天空，木板纹理是充当水面效果的，所以这里我们添加一个船，最后添加几只抠好的海鸥素材。

然后是第三个，先添加一个水面，然后同样是天空，接着中间可以添加一些山，进行叠加，目的是形成一种错落的感觉，最后加添一个主体，这张我们选择两只鹤，这样大体上就可以了。

最后一个，同样也是添加一个木板纹理，这个我想做一个夜晚的效果，所以找了一个夜晚星空的图片，然后添加几匹马，正好这个马奔跑的路线与木板的路线相吻合，也算是也一个很好的巧合。

放在一起来看一下，现在的画面其实是不符合合成的，因为这里面的图片风格很混乱，有的是偏真实的，有的是插画，根本没法去调整，这时候就是展现双色调强大滤镜魅力的时候了。

这里我们就用这四组颜色对画面进行双色调处理。

大家看，通过双色调的添加，让原本非常混乱的一个画面一下子就统一了，并且还很有意境。但是大家应该注意到了，这里的主体元素没有跟着一起变成双色调，因为主体一定要和画面区分开，如果主体元素也调整成双色调的话就会被淹没掉了，添加的就没什么意义了。

所以对于主体的处理，我这里添加了黑色形成类似剪影的效果，但是这里不是单纯的黑色，而是有一定的肌理在里面。

最后编排文字，也就是最开始大家看到的效果，既不属于合成也不属于插画的这么一个感觉，我为什么说双色调是配色的美颜滤镜，我想现在大家应该彻底明白了吧，原本那样的画面，仅仅通过双色调这么非常简单的一步，就可以让它变得很统一，而且画面的色相感更强，更加具有设计感和艺术效果。最后我们来看一下效果图。

本期教程到这里就结束了，我们带大家了解了什么是双色调，通过一些相关设计作品，让大家了解了双色调的色彩组合形式和双色调的设计表现手法，然后教给大家三种实现双色调的方法，最后用一个案例为大家演示了双色调的强大之处。双色调虽然是一种实现起来比较简单的手法，但是因为它应用领域的广泛，以及本身并没有特别明显的缺点，从而让双色调的上限很高，因为它可以和任何设计形式相结合。教给大家的只是最基本的方法，至于做出什么样的效果，还需要大家自己去潜心研究和发掘。今天的内容就先到这里，希望对大家有所帮助，我是无我，我们下期再见。

原文地址：研习设（公众号）

双色调通过两种颜色来改变原本图像的色调，不同的双色搭配会产生不一样的调性氛围。如果涉及到印刷成本的话，双色调设计也是一种非常经济实惠的设计方案。

不同色调的画面效果

双色调风格能运用到多种设计的领域当中，例如印刷品、出版物、网页设计、界面设计、插画等等，都能看到双色调的应用，毕竟双色调能带来强烈的视觉吸引力，让设计变得更加有个性有趣。

书籍设计

海报设计

网页设计

上面说过，双色调是通过两种颜色来改变原本图像的色调。关于配色，总是离不开色彩关系。所谓色彩关系，就必须有两种以上颜色，才能形成的关系。所以，色彩关系有这些，同类色、邻近色、互补色、对比色等等。双色调风格一般会选择对比色和邻近色。

对比色的双色调

对比色就是基色起120°～180°的颜色，能给画面带来一定的视觉冲击力和较强的色彩张力，有强烈的个性感。

红色的对比色，从蓝色到绿色之间的颜色

结合图像和图形的特点，表达出合适的氛围和情感。但如果对比色使用不当的话，很容易造成晕影的现象。这时候可以结合黑白来使用，调和对比色的冲撞，也能带来一种平衡。

对比色：深蓝色和橙色

对比色：青绿色和紫红色

邻近色的双色调

邻近色是基色起60°之内的颜色。由于邻近色的色相差比较小，过渡比较柔和，所以搭配起来非常简单，也不容易出错。

绿色的邻近色

由绿色到黄色，或绿色到青色之间的颜色

所以初学者用这种方法配色也比较容易接受。而运用在双色调中，邻近色也不会容易干扰到信息的传达和识别。

邻近色：紫色和紫红

邻近色：黄色和绿色

对于双色调的面积处理，可以选择大面积和小面积处理。

大面积处理

一般情况下，通常会将图像进行大面积处理。可能就需要减少不必要的细节内容，概括地展现图像，传达整体的氛围和情感。

小面积处理

如果想要小面积的双色调处理，可以从一些文字、形状作为装饰性的元素进行双色，都可以起到重整图像和图形的色彩关系，带来新的视觉感受，吸引用户注意的作用。

网站自动生成

首先奉上两个自动生成双色调图片的网站，方便又快捷，适合在短时间内完成的方法。

https://duotone.shapefactory.co

https://medialoot.com/duotones/

这两个网站都可以上传图片，也可以选择网站给的图片，再选择配色方案。如果要在限定的时间内快速产出双色调风格的图片，那么这两个网站最适合不过了。而且不需要梯子，亲测有效。

PS 软件步骤那么在ps软件中怎样做出双色调？其实有很多种方式，但我一般会用渐变映射。因为它对应的是照片光暗部进行着色的。而不是单纯的混合模式。

在渐变映射中有一个颜色渐变条，这个颜色渐变条从左到右对应的就是照片暗部、中间调和高光区域。

也就是说越靠近左边的颜色就对应照片暗部的地方，越靠近右边的颜色就对应照片高光的地方，那么根据这个原理就可以进行渐变映射。

关于这个渐变映射的操作，如何还是看不懂，可以点击此文章【我想要一个不辣眼，又有点高级的渐变！】回顾一下的。

什么情况使用双色调？

✷双色调能优化质量较差的图像，形成一个全新的视觉画面。当你的素材比较糟糕的时候，选择双色调能瞬间提升逼格，这也是拯救烂图的方法之一。

改前

改后

✷双色调比较适合修饰性效果的画面，较为有趣个性的设计。对于产品展示，严肃的主题项目，就不太适合使用双色调风格。

最后，我们来总结一下。虽然双色调设计不是一件新鲜的尝试，但对于设计来说也是一种趋势，依然具有很强的视觉吸引力。希望今天的文章，能带给你一点新的想法。

来源：版式设计很简单

形式需要思考创造，图片素材需要学习处理，文字需要梳理编排，但网页色彩是不是一定需要有天生的色感、丰富的理论和多年经验沉淀才能运用自如？

当然不！

关于网页配色

网页配色的文章在网络上很多，甚至有些泛滥，稍微关注过的同学应该都知道“色轮”、“色卡”等辅助性配色工具，但那更多都是从印刷介质上的色彩系统延伸出来的，不完全适用于网页，甚至造成很大的局限，比如你会较真的通过色轮来选用网页色彩吗？再比如通过下面提供的配色组合，你能自由的应对一个又一个的类型相若的网页设计需求吗？

由于CMYK与RGB色彩模式不同，网页的色彩呈现数量要庞大的多，选用也应该更自由，但在配色上却常碰到设计作品偏脏、发灰、花哨等大问题，这事儿得解决。

网页案例剖析

“网页配色不宜超过三种。”

真理，这没错，但更多是从色相（赤橙黄绿青蓝紫等不同颜色）上来说的。

色相差异明显，主要色彩的选取就比较好办，常见的有对比色、临近色、冷暖色调互补等方式，可以简单设定，或直接从成功作品中借鉴主辅色配比都可以，比如常见的朱红点缀深蓝、明黄点缀深绿等。

但通常，我们需要面对的设计需求在色彩分配上会有更多的问题出现：

（由于本人从事游戏网页视觉设计工作，故案例均以游戏网页做示意说明，其他网页类型可以做延伸思考或仅作参阅）

如上所示，根据网页信息的多寡，会有更多色彩区域的层级划分和文字信息层级区分需求，那么在守住“网页色彩（相）不超过三种”的原则下，只能寻找更多同色系的色彩来完善设计，也就是在“饱和度”和“明度”上做文章。

这也就是本文为解决这一问题所要分享的“天然”配色技巧：叠柔配色法。

叠柔配色技巧分享（这里才是正文，上面都是废话）

这个方法非常简单，无需知道三角函数、四则运算，无需理解色彩指数和直方图，甚至不用了解色阶曲线和亮度强弱……甚至，你可以对色彩毫无知觉。

★只需要明白三个关键词：叠加、柔光和透明度（填充）。

如果连这三个关键词都不甚明了，那就记住他们所在的位置（下图）：

注意：透明度与填充略有不同，填充不会影响到“混合选项”的效果，而透明度则是作用于整个图层。

顺便，花几分钟时间了解一下这个配色技巧的原理：

即：用纯白色（#ffffff）和纯黑色（#000000）通过“叠加”和“柔光”的混合模式（效果类似调整饱和度和明度），在任意一个色彩上得到最匹配的颜色（然后通过调整透明度选取最适合的辅色）。

（上图示例中，调整叠/柔模式的黑白色块的不同透明度（取10%到100%整数值为例）就可以得到差异较明显的40种配色，通过这种技巧，理论上每一种颜色都可以轻易获得无穷尽的“天然配色”，并且是“0失误”！）

★ 由于叠加和柔光模式对图像内的最高亮部分和最阴影部分无调整，因此该配色方法对纯黑色和纯白色不起作用。

设计实战演示：

要不要像上面图示看起来的那样复杂？
不用，只需要理解了上面的方法，就可以忘记图示，在你的设计工作中自由发挥！

简单三步：
①  一个黑或白色，或黑白渐变（可以是点、线、面…甚至字体）
②  混合模式选择叠加或柔光
③  调整透明度（1%-100%随意，省心的做法是直接键入一个整数值，比如：轻质感类页面可以选择20%-40%，重质感感类可以键入60%或以上）

如下图：

（无论你采用何种主色，用黑白色彩叠加或柔光，你都可以轻松自如的获得完美匹配的整套色系。）

这并不仅仅适用于色域划分或提取几个辅色，如下图：字体颜色、细节线条、按钮渐变、边角高光、描边阴影……都可以用黑白色肆意挥洒！

方法延伸（细节篇）

假如将该方法运用到一个按钮上……

通过混合选项中的“阴影、外发光、描边（不适用叠柔法）、内阴影、内发光”可以自由的刻画5层像素级细节（当然，通常在实际的使用中刻画1到3层即可）。

且无论形状、色彩如何变化，这些细节都如影随形、色彩都随变而变~可节省大量重调细节或盲目选取配色的时间！

细节、品质和效率，一石三鸟，兼而得之！

（近期看到设计圈有讨论“网页雕花不可取”的课题，假如让细节成为习惯，让美感成为直觉，雕花也便只是普通设计行为而已。）

案例历练：

后记：

叠柔配色法：无招胜有招~把抓不住的感觉交给精密的计算机，科学化进行你的设计。
更短的时间，更高的品质，你，值得拥有~……
另：方法是死的，人是活的，配合色阶、曲线、色彩平衡等，还可以玩出更多花样来……

分享来自：TGideas-腾讯游戏官方设计团队