Sketch图层混合模式(Blending)详解

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

Sketch图层混合模式(Blending)详解_第1张图片

1.混合模式的原理

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

Sketch图层混合模式(Blending)详解_第2张图片

我们通过给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)。

Sketch图层混合模式(Blending)详解_第3张图片

所谓混合模式,就是把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)。

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

Sketch图层混合模式(Blending)详解_第4张图片

2.混合模式的应用

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

Sketch图层混合模式(Blending)详解_第5张图片

3.Sketch中的混合模式

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

Sketch图层混合模式(Blending)详解_第6张图片

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

Sketch图层混合模式(Blending)详解_第7张图片

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

3.1变暗(Darken)

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

Sketch图层混合模式(Blending)详解_第8张图片

3.2正片叠底(Multiply)

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

Sketch图层混合模式(Blending)详解_第9张图片

3.3颜色加深(Color Burn)

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

Sketch图层混合模式(Blending)详解_第10张图片

3.4变亮(Lighten)

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

Sketch图层混合模式(Blending)详解_第11张图片

3.5滤色(Screen)

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

Sketch图层混合模式(Blending)详解_第12张图片

3.6颜色减淡(Color Dodge)

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

Sketch图层混合模式(Blending)详解_第13张图片

3.7叠加(Overlay)

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

Sketch图层混合模式(Blending)详解_第14张图片

3.8柔光(Soft Light)

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

Sketch图层混合模式(Blending)详解_第15张图片

3.9强光(Hard Light)

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

Sketch图层混合模式(Blending)详解_第16张图片

3.10差值(Difference)

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

Sketch图层混合模式(Blending)详解_第17张图片

3.11排除(Exclusion)

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

Sketch图层混合模式(Blending)详解_第18张图片

3.12色相(Hue)

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

Sketch图层混合模式(Blending)详解_第19张图片

3.13饱和度(Saturation)

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

Sketch图层混合模式(Blending)详解_第20张图片

3.14颜色(Color)

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

Sketch图层混合模式(Blending)详解_第21张图片

3.15亮度(Luminosity)

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

Sketch图层混合模式(Blending)详解_第22张图片

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

Sketch图层混合模式(Blending)详解_第23张图片

由于篇幅所限,本次Sketch图层混合模式(Blending)就讲解到这里,如果要应用到实际修图中,还需要多思考、多练习。


延伸阅读:

Sketch50正式版更新解读,以增强功能和bug修复为主

Sketch49正式版发布,这次它说要成为可交互的原型设计工具(附教程)

Sketch文字工具描边、文本路径、转换为形状等使用介绍

Sketch制作简单剪影效果

你可能感兴趣的:(Sketch图层混合模式(Blending)详解)