图层混合模式现在广泛见于各种图像绘画乃至视频处理软件当中,通过各种搭配调整做到各种效果,其背后是一系列数学计算

笔记整理自韩世麟直播和网上资料,我在文章末尾附上链接

  • 上层为图层a,下层为图层b,结果为c
  • 0-255换算到0-1区间(255白为1,0黑为0,128中灰为0.5)

计算示例

例如正片叠底,是把像素颜色的数值换到0-1区间内,然后做乘法,非单通道的彩色,是RGB每通道分别计算,这里不考虑不透明度数值

下面公式均为逐像素分通道的数值计算。

公式

普通组(Normal)

在两层之间分别取像素,非A即B

混合模式 Blend Modes 公式
正常 Normal a
溶解 Dissolve random(a,b)

加深组(Darken)

该组会让整体画面变暗,叠白为透明

混合模式Blend Modes公式
变暗Darken\[min \left( a,b \right) \]
正片叠底Multiply \[{a \times b}\]
颜色加深Color Burn\[{1-\frac{{ \left( 1-b \right) }}{{a}}}\]
线性加深Linear Burn \[a+b-1\]
深色Darker Color\[{ \left\{ \begin{array}{*{20}{l}} {a,\mathop{{\text{ }a}}\nolimits_{{r}}+\mathop{{a}}\nolimits_{{g}}+\mathop{{a}}\nolimits_{{b}} < \mathop{{b}}\nolimits_{{r}}+\mathop{{b}}\nolimits_{{g}}+\mathop{{b}}\nolimits_{{b}}}\\ {b,\text{ }\mathop{{a}}\nolimits_{{r}}+\mathop{{a}}\nolimits_{{g}}+\mathop{{a}}\nolimits_{{b}} > \mathop{{b}}\nolimits_{{r}}+\mathop{{b}}\nolimits_{{g}}+\mathop{{b}}\nolimits_{{b}}} \end{array}\right. }\]

下面是两图层自己叠自己后产生的结果,可以根据方程画出区间内的曲线,和ctrl+m调出来的效果类似

一些常见的用法:

正片叠底:用来叠线稿,去白留黑。任何颜色叠上0黑色,都为黑,叠上白色时保持不变,结果色总是比原来颜色更暗。因为乘法先后顺序不影响结果,所以图层上下顺序在用正片叠底时也不影响结果

变亮组(Lighten)

该组会让总体画面更亮,用黑叠加等于透明

混合模式Blend Modes公式
变亮Lighten\[max \left( a,b \right) \]
滤色Screen\[{1- \left( 1-a \left) \left( 1-b \right) \right. \right. }\]
颜色减淡Color Dodge\[\frac{{b}}{{ \left( 1-a \right) }}\]
线性减淡(添加)Linear Dodge(Add)\[a+b\]
浅色Lighter Color\[{ \left\{ \begin{array}{*{20}{l}} {a,\mathop{{\text{ }a}}\nolimits_{{r}}+\mathop{{a}}\nolimits_{{g}}+\mathop{{a}}\nolimits_{{b}} > \mathop{{b}}\nolimits_{{r}}+\mathop{{b}}\nolimits_{{g}}+\mathop{{b}}\nolimits_{{b}}}\\ {b,\text{ }\mathop{{a}}\nolimits_{{r}}+\mathop{{a}}\nolimits_{{g}}+\mathop{{a}}\nolimits_{{b}} < \mathop{{b}}\nolimits_{{r}}+\mathop{{b}}\nolimits_{{g}}+\mathop{{b}}\nolimits_{{b}}} \end{array}\right. }\]

滤色:a为0黑时,结果不变,为1白时,则为纯白。整体效果会提亮,但不会变为纯白,可以融合两层细节,去黑留白不过曝。

1-(1-a)(1-b)这个公式,等于对两个图层ctrl+i反向之后正片叠底,然后再反向,可以得到一样的结果(人肉手动滤色2333)

图层混合也可以用做调色工具,两层一样的叠滤色,得到的结果和下面这个曲线差不多

因为1-(1-a)^2的函数图像在0,1区间内近似这条0.5时输出为0.75的曲线

一个滤色应用的例子

对比融合组(Contrast)

该组会让画面显得柔和或者更加对比强烈,即黑得更黑白得更白,使用0.5中灰(128)为透明

混合模式Blend Modes公式
叠加Overlay\[{ \left\{ \begin{array}{*{20}{l}} {2ab,\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }b < 0.5}\\ {1-2 \left( 1-a \left) \left( 1-b \left) ,\text{ }\text{ }\text{ }else\right. \right. \right. \right. } \end{array}\right. }\]
柔光Soft Light\[{ \left\{ \begin{array}{*{20}{l}} {2ab+\mathop{{a}}\nolimits^{{2}} \left( 1-2b \left) ,\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }a < 0.5\right. \right. }\\ {2a \left( 1-b \left) +\sqrt{{a}} \left( 2b-1 \left) ,\text{ }\text{ }\text{ }else\right. \right. \right. \right. } \end{array}\right. }\]
强光Hard Light\[{ \left\{ \begin{array}{*{20}{l}} {2ab,\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }a < 0.5}\\ {1-2 \left( 1-a \left) \left( 1-b \left) ,\text{ }\text{ }\text{ }else\right. \right. \right. \right. } \end{array}\right. }\]
亮光Vivid Light\[{ \left\{ \begin{array}{*{20}{l}} {1-\frac{{1-b}}{{2a}},\text{ }\text{ }\text{ }\text{ }a < 0.5}\\ {\frac{{b}}{{2 \left( 1-a \right) }},\text{ }\text{ }\text{ }else} \end{array}\right. }\]
线性光Linear Light\[b+2a-1\]
点光Pin Light\[{ \left\{ \begin{array}{*{20}{l}} {2a-1,\text{ }\text{ }\text{ }\text{ }b < 2a-1}\\ {b,\text{ }\text{ }\text{ }\text{ }\text{ }2a-1 < b < 2a}\\ {2a,\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }\text{ }b > 2a} \end{array}\right. }\]
实色混合hard mix\[{ \left\{ \begin{array}{*{20}{l}} {0,\text{ }a < 1-b}\\ {1,\text{ }a > 1-b} \end{array}\right. }\]

叠加:是的没错,这个比较特殊,下面的图层b被当作了效果层,上层的a被下层影响。这是一个分段函数,b小于0.5时相当于2倍正片叠底,整体变暗,大于0.5时整体提亮,如果自己叠,亮的更亮暗的更暗,整体对比度提高。去中灰留黑白

相当于自动切换“正片叠底”或“滤色”模式 ,函数图像左半边是正片叠底,右半边是滤色(当然曲线被压缩过)

柔光:和叠加很像,曲线更加柔和,好柔呀!可以用来叠加各种纹理,如果不想对明暗有太多修改,可以调整素材图片的色阶,灰度拉到0.5左右分布

强光:公式和叠加是一样的,只是条件不一样,这里a图层变成了效果层。把ab叠加图层互换就能得到和强光完全一致的效果。
和叠加一样也是 切换“正片叠底”或“滤色”模式。当绘图色比50%的灰要亮 时,则底色变亮,就执行“滤色”模式一样,对增加图像的高光有帮助;当绘图色比50%的灰要暗时,则底色变暗,就执行“正片叠底”模式一样,可增加图像的暗部

点光: 根据绘图色替换颜色。如果绘图色比50%的灰要亮,绘图色被替换,比绘图色亮的像素不变化。如果绘图色比50%的灰要暗比绘图色亮的像素被替换,比绘图色暗的像素不变化。
0.5的中间调几乎不变,但是两边是“ 变暗 ”和“变亮”模式的组合

差集(Inversion/Cancelation)

混合模式Blend Modes公式
差值Difference\[abs \left( b-a \right) \]
排除Exclusion\[a+b-2ab\]
减去Subtract\[b-a\]
划分Divide\[\frac{{b}}{{a}}\]

色彩(Component)

混合模式 Blend Modes 公式
色相 Hue \[\mathop{{H}}\nolimits_{{c}}\mathop{{S}}\nolimits_{{c}}\mathop{{B}}\nolimits_{{c}}=\mathop{{H}}\nolimits_{{a}}\mathop{{S}}\nolimits_{{b}}\mathop{{B}}\nolimits_{{b}}\]
颜色 Color \[\mathop{{H}}\nolimits_{{c}}\mathop{{S}}\nolimits_{{c}}\mathop{{B}}\nolimits_{{c}}=\mathop{{H}}\nolimits_{{a}}\mathop{{S}}\nolimits_{{a}}\mathop{{B}}\nolimits_{{b}}\]
饱和度 Saturation \[\mathop{{H}}\nolimits_{{c}}\mathop{{S}}\nolimits_{{c}}\mathop{{B}}\nolimits_{{c}}=\mathop{{H}}\nolimits_{{b}}\mathop{{S}}\nolimits_{{a}}\mathop{{B}}\nolimits_{{b}}\]
明度 Luminosity \[\mathop{{H}}\nolimits_{{c}}\mathop{{S}}\nolimits_{{c}}\mathop{{B}}\nolimits_{{c}}=\mathop{{H}}\nolimits_{{b}}\mathop{{S}}\nolimits_{{b}}\mathop{{B}}\nolimits_{{a}}\]

色相: 输出图像的色调为上层,饱和度和亮度保持为下层。对于灰色上层,结果为去色的下层

颜色: 它可保护原图的灰阶层次,对于图像的色彩微调、给单色和彩色图像着色都有用 。 输出图像的亮度为下层,色调和饱和度保持为上层

饱和度: 输出图像的饱和度为上层,色调和亮度保持为下层

明度: 输出图像的亮度为上层,色调和饱和度保持为下层

上面两组我平常用得不太多,具体效果可以自己尝试,似乎做蒙板和处理贴图alpha的时候才会用到差集组

总结和链接

浅显易懂的结论:

  • 需要加深效果在加深组里找,比如画暗部阴影,叠黑线稿,抠白留黑
  • 提亮,在变量组里尝试,画明部高光,抠黑留白
  • 叠加氛围效果,纹理材质,中间灰调色法,用叠加柔光之类的尝试,抠中灰留明暗

参考资料:

Wiki: https://en.wikipedia.org/wiki/Blend_modes

韩世麟的直播: https://www.bilibili.com/video/BV1Qt411G7Xo

Photoshop混合模式详解及中英文对照:https://www.jianshu.com/p/175631f45ec6

PhotoShop 图像处理算法汇总:https://blog.csdn.net/weixin_30367873/article/details/98498175

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*

关闭菜单