Sketch教程—图层混合模式详细介绍

Sketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用，所有你需要的工具都触手可及。在 Sketch 中，画布将是无限大小的，每个图层都支持多种填充模式；我们有最棒的文字渲染和文本式样，还有一些你一定会爱上的文件导出工具。必要的话，你可以用无限精准的分辨率无关模式来查看画布，或者打开像素模式来查看每一个像素导出后的样子。但是 Sketch 并不是一个位图编辑应用。也就是说如果你想修正一张照片或者用笔刷来画画，那么这不是你要找的应用。

Sketch图层混合模式，是一种用不同方法，将两个图层的颜色进行混合的图像处理技术。如果使用过Photoshop等软件，对该名词应该不会陌生。在Sketch中也有混合模式（blending）选项，帮助我们对图层进行进一步的加工。

1、混合模式的原理

要了解混合模式，就必须先从三原色光模式（RGB color model，又称RGB色彩模型）说起。三原色指色彩中不能再分解的三种基本颜色，分别为红色（Red）、绿色（Green）和蓝色（Blue）。基于三原色原理，把这三种颜色按照不同强度、不同比例进行混合时，就可以得到其他各种各样的色彩。

我们通过给RGB赋值，把人眼能分辨的颜色告诉电脑，这样屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。RGB值的区间是[0,255]，其中0表示最小的发光强度，255表示最大的发光强度。例如，我们想让电脑显示蓝色，则蓝色B（Blue）需要最大的发光强度，即B的值为255，其他R（Red）、G（Green）值为0，则蓝色表达为RGB（0,0,255），同理，红色为RGB（255,0,0），绿色为RGB（0,255,0）。

所谓混合模式，就是把2个及以上的图层，进行一场RGB值的运算，并得到最终的RGB值。例如，在混合模式中有变亮（Lighten）模式，就是分别对比2个图层中的RGB值，然后取最大的值。以红（RGB：255,0,0）、绿（RGB：0,255,0）图层进行变亮（Lighten）模式为例，分别取它们中R、G、B的最大值得到（255,255,0），所以经过变亮运算后的图层为黄色（RGB：255,255,0）。

在这个例子中，我们一般把红称为“基色”，绿称为“混合色”，黄称为“结果色”。

2、混合模式的应用

混合模式的最大用途就是修图，如果懂得其原理，运用恰当，效果可以比滤镜、色彩平衡处理更惊人，而且处理的速度更快。例如，为一个人物背部P上纹身，我们就可以利用“正片叠底（Multiply）”模式，在该模式中，“结果色”总是较暗的颜色，任何颜色与黑色混合，“结果色”都是黑色，任何颜色与白色混合，“结果色”保持不变。这样我们就得到如下的效果图：

3、Sketch中的混合模式

Sketch中的混合模式具体设置的路径在检查器中，选中图层，在右侧检查器即可设置混合模式（Blending）。

根据运算的结果或者计算的公式不同，Sketch提供了5大类共15种常见的混合模式，其中Normal为默认模式。

针对混合模式的介绍，Photoshop官方文档介绍得更为详细，以下混合模式的介绍内容出自“Photoshop官网混合模式说明”。

3.1变暗（Darken）

查看每个通道（R、G、B）中的颜色信息，并选择“基色”或“混合色”中较暗的颜色作为“结果色”。将替换比“混合色”亮的像素，而比“混合色”暗的像素保持不变。

3.2正片叠底（Multiply）

查看每个通道中的颜色信息，并将“基色”与“混合色”进行正片叠底。“结果色”总是较暗的颜色。任何颜色与黑色正片叠底产生黑色。任何颜色与白色正片叠底保持不变。

3.3颜色加深（Color Burn）

查看每个通道中的颜色信息，并通过增加二者之间的对比度使“基色”变暗以反映出“混合色”。与白色混合后不产生变化。

3.4变亮（Lighten）

查看每个通道中的颜色信息，并选择“基色”或“混合色”中较亮的颜色作为“结果色”。比“混合色”暗的像素被替换，比“混合色”亮的像素保持不变。

3.5滤色（Screen）

查看每个通道的颜色信息，并将“混合色”的互补色与“基色”进行正片叠底。“结果色”总是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。此效果类似于多个摄影幻灯片在彼此之上投影。

3.6颜色减淡（Color Dodge）

查看每个通道中的颜色信息，并通过减小二者之间的对比度使基色变亮以反映出“混合色”。与黑色混合则不发生变化。

3.7叠加（Overlay）

对颜色进行正片叠底或过滤，具体取决于“基色”。图案或颜色在现有像素上叠加，同时保留“基色”的明暗对比。不替换“基色”，但“基色”与“混合色”相混以反映原色的亮度或暗度。

3.8柔光（Soft Light）

使颜色变暗或变亮，具体取决于“混合色”。此效果与发散的聚光灯照在图像上相似。如果“混合色”（光源）比 50％ 灰色亮，则图像变亮，就像被减淡了一样。如果“混合色”（光源）比 50％ 灰色暗，则图像变暗，就像被加深了一样。使用纯黑色或纯白 * ，可以产生明显变暗或变亮的区域，但不能生成纯黑色或纯白色。

3.9强光（Hard Light）

对颜色进行正片叠底或过滤，具体取决于“混合色”。此效果与耀眼的聚光灯照在图像上相似。如果“混合色”（光源）比 50％ 灰色亮，则图像变亮，就像过滤后的效果。这对于向图像添加高光非常有用。如果“混合色”（光源）比 50％ 灰色暗，则图像变暗，就像正片叠底后的效果。这对于向图像添加阴影非常有用。用纯黑色或纯白 * 会产生纯黑色或纯白色。

3.10差值（Difference）

查看每个通道中的颜色信息，并从“基色”中减去“混合色”，或从“混合色”中减去“基色”，具体取决于哪一个颜色的亮度值更大。与白色混合将反转基色值；与黑色混合则不产生变化。

3.11排除（Exclusion）

创建一种与“差值”模式相似但对比度更低的效果。与白色混合将反转基色值。与黑色混合则不发生变化。

3.12色相（Hue）

用“基色”的明亮度和饱和度以及“混合色”的色相创建“结果色”。

3.13饱和度（Saturation）

用“基色”的明亮度和色相以及“混合色”的饱和度创建“结果色”。在无 (0) 饱和度（灰度）区域上用此模式绘画不会产生任何变化。

3.14颜色（Color）

用“基色”的明亮度以及“混合色”的色相和饱和度创建“结果色”。这样可以保留图像中的灰阶，并且对于给单色图像上色和给彩色图像着色都会非常有用。

3.15亮度（Luminosity）

用“基色”的色相和饱和度以及“混合色”的明亮度创建“结果色”。此模式创建与“颜色”模式相反的效果。

全部模式的效果图如下所示：