ブレンドモードのソースを表示

'''ブレンドモード'''（または'''レイヤーの合成モード'''、'''描写モード'''）とは、デジタル[[画像編集]]および[[コンピュータグラフィックス]]（CG）の分野において、2つのレイヤーが互いにどのように合成されるかを決定するための設定である。

== 解説 ==
ほとんどのアプリケーションのデフォルトのブレンドモードは、単に上のレイヤーで下のレイヤーを覆い隠すというものである。一方で、2つのレイヤーをブレンドするブレンドモードがたくさん用意されている。それぞれの「[[レイヤー (DTP)|レイヤー]]」の画像を構成するピクセルの一つ一つが、RGB値（[[カラーチャンネル]]）やアルファ値（[[アルファチャンネル]]）などを表す数値を持っており、それに応じて適切なブレンド方式を使い分ける必要がある。

[[Adobe Photoshop]]や[[GIMP]]など多くのCGソフトでは、「基本的」なブレンドモードだけでも結構あり、ユーザーはレイヤーの不透明度を変更するなどして、レイヤーの合成方式をいい感じに調整できる。CGソフトでブレンドする「レイヤー」は、必ずしもそのCGソフトで制作する必要はなく、外部のペイントソフトや画像編集ソフトを使って様々な効果をかけることもできる。下のレイヤーにブレンドさせる上のレイヤーは、「ブレンドレイヤー」または「アクティブレイヤー」などと呼ばれることもある。

以下、本ページに示されている数式においては、ピクセルの持つ値は0.0（黒）から1.0（白）の範囲に正規化されているものとして話を進める。

== 通常（Normal） ==
「'''通常'''」（'''Normal'''）のブレンドモードは、下のレイヤーと上のレイヤーを重ね合わせた際、上のレイヤーだけを表示する。現在CGを扱う際に「標準」とされているブレンドモードであり<ref name=w3c-blending-compositing>{{cite web|title=W3C: Compositing and Blending 1.0|url=https://www.w3.org/TR/compositing/|accessdate=9 November 2012}}</ref>、下のレイヤーのピクセルとの混色は行われない。

: <math>f(a, b) = b</math>

なおこの数式において、「a」とは下のレイヤーのカラーチャンネルの値であり、「b」とは上のレイヤーの対応するカラーチャンネルの値である。

ブレンドの結果はほとんどの場合、単に上のレイヤーが下のレイヤーを覆い隠すという、シンプルな合成が行われる。現在はどのCGソフトにも普通に搭載されている方式だが、元々は[[ルーカスフィルム]]社のThomas Porter と Tom Duffが1984年に発表した「Porter-Duff合成（[[:en:Porter-Duff Composition]]）」の論文に記載された「A over B」と呼ばれる画像合成方式である。ちなみにThomas Porterは[[スティーブ・ジョブズ]]会長が[[ピクサー]]社を設立する為にルーカスフィルムから引き抜いた40名の中の一人であり、「Porter-Duff合成」はピクサーの作品だけでなくその後のあらゆるCGにおける画像合成（コンポジット）の礎を築いた理論である。

それぞれのピクセルの不透明度（アルファ値）に基づいて合成することもできる。これは現在は単に「[[アルファブレンド]]」と呼ばれ、やはりどのCGソフトにも普通に搭載されている方式だが、これも元々は1984年発表の「Porter-Duff合成」の論文で初めて記載された方式である。実際の数式を示すと、

<math>f(a, b) = alpha(b, a)</math>

となる。

この合成方式が用いられた結果としては、上のレイヤーの画像からアルファチャネルの値（不透明度）に従って色が抜かれたものが、下のレイヤーと合成されて表示されることになる。

ちなみに、Porter-Duff合成方式は全部で13種類ある（詳細は略す）。単に既成のCGソフトでレイヤーのブレンドモードを使うだけの場合は意識する必要はないが、自力でCGソフトを作成してブレンドモードを自力で実装する場合、他のPorter-Duff合成方式を「通常」として実装することもできる（少なくとも[[W3C]]は許可している<ref name=w3c-blending-compositing/>）。

== ディザ合成（Dissolve） ==
「'''ディザ合成'''（'''Dissolve'''）」のブレンドモードは、各レイヤーの不透明度に従って、どちらかのレイヤーからランダムにピクセルを取得する。上のレイヤーの不透明度が下のレイヤーの不透明度よりも高い場合、ほとんどのピクセルが上のレイヤーから取得されることになるが、上のレイヤーの不透明度が低い場合、ほとんどのピクセルは下のレイヤーから取得されることになる。このブレンドモードではアンチエイリアシングは使用されないので、画像が粗くざらざらした感じに見える。

Adobe Photoshopでは、起動時に疑似ランダムノイズによるディザパターンを生成し、2次元ラスター配列で構成される画像の各ピクセルの位置に、グレースケールの値（つまり「R = G = B」である値）とアルファ値「1」（つまり「表示、不透明」となる値）を割り当てている。「ディザ合成」ブレンドモードにした時、編集中の画像の上のレイヤーの不透明度を低くすると、Photoshopの内部生成画像のいくつかのグレーピクセルのアルファ値が「1」から「0」（つまり「非表示、透明」となる値）に切り替わる。その結果、Photoshopの画面に表示された画像のピクセルは、Photoshopの内部生成画像のラスター配列されたグレースケールの値を持つピクセルに応じて、「不透明」または「透明」のいずれかになる。「ディザ合成」のブレンドモードにおいて、不透明度はグラデーションしない（連続的な変化を伴わない）ので、上のレイヤーの画像のピクセルは「完全に透明」か「完全に不透明」のいずれかになる。

なお「Dissolve」とは「溶解」と言う意味で、中国語版Photoshopでは「ディザ合成」ではなく「溶解」の名称で実装されている。「[[ディザ]]」とは、元々はコンピューターで同時に表示可能な色数が少なかった時代、上のレイヤーと下のレイヤーのブレンドにおいて2色だけで擬似的に豊かな階調を表現できるように開発された技術である。現在のCG業界で標準的に使われているMacですら、1984年発売の初代Macintoshは白黒2値（[[二値画像]]）しか扱えなかった時代があった。

== 乗算（Multiply）とスクリーン（Screen） ==
'''乗算'''（'''Multiply'''）と'''スクリーン'''（'''Screen'''）のブレンドモードは、画像を暗くしたり明るくするためによく使われる基本的なブレンドモードである。詳しくは後述するが、「オーバーレイ」「ソフトライト」「ビビッドライト」「リニアライト」「ピンライト」などといった仲間がある。

===乗算（Multiply）===
'''乗算'''（'''Multiply'''）のブレンドモードは、上のレイヤーのそれぞれのピクセルごとのカラーチャンネルの値を、下のレイヤーの対応するピクセルのカラーチャンネルの値で乗算（掛け算）する。その結果、元の画像よりも必ず暗くなる。と言うのも、各画像の各ピクセルのカラーチャンネルの値はいずれも1より小さいため、1より小さい数どうしを掛け算した場合、互いの初期値よりも当然ながら小さくなるわけである。

<math>f(a,b) = ab</math>

なおこの数式において、「a」とは下のレイヤーのカラーチャンネルの値であり、「b」とは上のレイヤーの対応するカラーチャンネルの値である。

このブレンドモードは「対称的（シンメトリック）」である。つまり、2つのレイヤーの順番を交換しても結果は同じとなる（小学校で習う「乗法の[[交換法則]]」である）。もし2つのレイヤーに同じ画像が含まれていた場合、つまり画像のレイヤーを全部統合してコピペして最上段にのっけて乗算レイヤーに設定して不透明度をあれこれして調整するという初心者にありがちな補正を行った場合、乗算ブレンドモードを使った画像補正は「2次曲線」または「γ= 2のガンマ補正」をしているのと同じことになる。そのため「Photoshop系ソフト」を使っている場合、「トーンカーブ」ダイアログを使った方が、曲線の形状の柔軟性が高いので便利なことが多い。あるいは「レベル補正」ダイアログを使う場合、中央の数値は通常1 /γであるため、0.5と入力するだけで同じ結果が得られる。

もし片方のレイヤーが均一な色、例えばRGB（0.8、0.8、0.8）のグレー1色で構成された画像だったとすると、これを乗算で合成した場合、一直線のトーンカーブを編集した時と同じ結果になる。これはつまり、このグレー1色画像を下のレイヤーに置き、上のレイヤーを「通常」ブレンドモードに設定して不透明度を変化させた時と同じ結果が得られるということである。

===スクリーン（Screen）===
'''スクリーン'''（'''Screen'''）のブレンドモードは、2つのレイヤーのピクセルの値をいったん反転させて乗算し、その後でもう一度反転する。これにより、乗算とは逆の効果が得られ、画像が明るくなる。

<math>f(a,b) = 1 - (1 - a)(1 - b)</math>

なおこの数式において、「a」とは下のレイヤーのカラーチャンネルの値であり、「b」とは上のレイヤーの対応するカラーチャンネルの値である。

このブレンドモードは「対称的（シンメトリック）」である。つまり、2つのレイヤーの順番を交換しても結果は同じとなる。もし片方のレイヤーがグレー1色で構成されていて、これをスクリーンで合成した場合、上に白1色のレイヤーを載せて「通常」ブレンドモードに設定し、下のグレー1色レイヤーの明度を白1色レイヤーの不透明度として使った場合と同じ結果が得られる。

<gallery>
File:Blend modes 1.-top-layer.jpg|上のレイヤー
File:Blend modes 2.-bottom-layer.jpg|下のレイヤー
File:Blend modes 4.-multiply.jpg|2つのレイヤーを「乗算」ブレンドモードで合成した場合
File:Blend modes 5.-screen.jpg|2つのレイヤーを「スクリーン」ブレンドモードで合成した場合
</gallery>

===オーバーレイ（Overlay）===
'''オーバーレイ'''（'''Overlay'''）は、乗算とスクリーンを組み合わせたものである<ref name=pegtop-overlay>{{cite web|title=Pegtop: overlay blend mode|url=http://www.pegtop.net/delphi/articles/blendmodes/overlay.htm|accessdate=3 November 2012}}</ref>。下のレイヤーのカラーチャンネルの値「a」が高かった場合（a>0.5だった場合）はスクリーンと同様の効果を得られ、低かった場合（a<0.5だった場合）は乗算と同様の効果が得られる。ただし、「a=0.5」を境に乗算とスクリーンを単に切り替えるだけだとカラーチャネルの変化が不連続になるため、下のレイヤーが「a>0.5」の場合の時と「a<0.5」の場合の時のカラーチャンネルの変化が連続性を保つように、下の数式の通り、乗算とスクリーンの数式にそれぞれに2をかけたものとなっている。もし上のレイヤーのカラーチャンネルの値「b」がちょうど真ん中（b=0.5）であった場合、単に下のピクセルのカラーチャンネルに「1」を掛けるだけのことになるので、下のレイヤーに何の影響も及ぼさない。

基本的には、下のレイヤーが明るかった場合はさらに明るくなり、下のレイヤーが暗かった場合はさらに暗くなるように働く。つまり、コントラストが強くなる。同一の画像をオーバーレイした場合、「トーンカーブ」ダイアログで「Sカーブ」状に編集した時のようなコントラスト効果が得られる。

<math> f(a,b) =
    \begin{cases}
      2 a b,           &\mbox{(ﾓｼ } a < 0.5 \mbox{ ﾀﾞｯﾀﾄｷ)}\\
      1 - 2 ( 1 - a ) ( 1 - b ), &\mbox{(ｿｳｼﾞｬﾅｶｯﾀﾄｷ)}
    \end{cases}</math>

なおこの数式において、「a」とは下のレイヤーのカラーチャンネルの値であり、「b」とは上のレイヤーの対応するカラーチャンネルの値である。

この数式の通り、下のレイヤーのカラーチャンネルの値「a」に応じて、上のレイヤーの影響度は「a = 0」、「a = 0.5」、「a = 1」の間で線形補間が行われる。詳しく言うと、「a = 0」の時、オーバーレイした上のレイヤー「b」のカラーチャンネルの値がどのような値であっても画像の値は「0」になる。「a = 0.5」の時、オーバーレイした上のレイヤー「b」のカラーチャンネルの値はそのまま画像の色に反映される。「a = 1」の時、オーバーレイした上のレイヤー「b」のカラーチャンネルの値がどのような値であっても画像の値は「1」になる。

=== ハードライト（Hard Light） ===
'''ハードライト'''（'''Hard Light'''）も、オーバーレイと同様に乗算とスクリーンを組み合わせたものである。ただし、オーバーレイが下のレイヤーのカラーチャンネルの値「a」の大きさを基準にオーバーレイにするか乗算にするかを決めていたのに対し、ハードライトでは上のレイヤーのカラーチャンネルの値「b」の大きさを基準にオーバーレイにするか乗算にするかを決めている。

そのため、上のレイヤーをオーバーレイで合成した時と、上のレイヤーと下のレイヤーを入れ替えてハードライトで合成した時では、同じ結果が得られる。つまり、オーバーレイとハードライトは逆の関係性を持っており、相互に切り替え可能なブレンド方式であると言える。

=== ソフトライト（Soft light） ===
[[Image:Comparison of soft light blend modes.png|thumbnail|ソフトライトの実装ごとの比較]]
'''ソフトライト'''（'''Soft light'''）は、上のレイヤーのカラーチャンネルの値「b」の大きさを基準にしているという点はハードライトと共通しているが、実際はオーバーレイによく似た効果が得られる。ただし、オーバーレイと比べて効果が弱くなる傾向があり、例えば黒1色または白1色の画像をかぶせても、オーバーレイと違って黒1色または白1色にはならない。

ソフトライトの実装方式は、いろいろある<ref>http://gimp.1065349.n5.nabble.com/Image-processing-algorithms-resources-td34204.html</ref>。有名画像編集ソフトであるPhotoshopの実装を他のソフトもそのまま使えば面倒が無いようにも思えるが、2012年の時点でのPhotoshopで採用されているソフトライトの数式には、ローカルコントラストの不連続性が指摘されており、それを修正した数式がいくつか存在する。ちなみに2012年時点でのGIMPで採用されているソフトライトの実装は、オーバーレイと全く同じ効果が得られるが、これは単なるバグである。

いずれの実装方式を用いても、上のレイヤーが純粋な黒（a=0）だった場合は同じ結果となる。上のレイヤーが純粋なニュートラルグレー（a=0.5）だった場合も同じ結果となる。Photoshopとillusions.huの実装方式では、上のレイヤーが純粋な白（a=1.0）だった場合にも同じ結果となる。要するに、ソフトライトの実装方式ごとの違いは、これら3つの結果の間の補間方法にある。

これらの3つの結果は、下のレイヤーをガンマ補正したものと一致する。詳しく言うと、上のレイヤーが黒だった場合は、下のレイヤーをγ=2でガンマ補正した時と一致する。上のレイヤーがニュートラルグレーだった場合は、下のレイヤーをγ=1でガンマ補正した時と一致する（この場合、画像に変更は加えられず、元の画像と全く同じものになる）。上のレイヤーが白だった場合は、下のレイヤーをγ=0.5でガンマ補正した時と一致する。

Photoshopで採用されている数式は次のとおりである<ref name=pegtop-softlight>{{cite web|title=Pegtop blend modes: soft light|url=http://www.pegtop.net/delphi/articles/blendmodes/softlight.htm|accessdate=3 November 2012}}</ref>。

: <math> f_{photoshop}(a,b) =
    \begin{cases}
      2 a b + a^2 (1 - 2 b),           &\mbox{(ﾓｼ } b < 0.5 \mbox{ ﾀﾞｯﾀﾄｷ)}\\
      2 a (1 - b) + \sqrt{a} (2 b - 1), &\mbox{(ｿｳｼﾞｬﾅｶｯﾀﾄｷ)}
    \end{cases}</math>

なおこの数式において、「a」とは下のレイヤーのカラーチャンネルの値であり、「b」とは上のレイヤーの対応するカラーチャンネルの値である。bの値に呼応して、3つのガンマ補正(すなわちγ=2 (「b=0」の場合)、 γ=1 (「b=0.5」の場合)、γ=0.5 (「b=1」の場合))の間で線形補間が行われている。

Pegtopの式<ref name=pegtop-softlight/>はPhotoshopのものより滑らかで、「b = 0.5」の場合における不連続性が修正されている。 

: <math>f_{pegtop}(a,b) = (1-2b)a^2 + 2ba</math>.

これは要するに、乗算（「a=0」の場合）とスクリーン（a=1の場合）のブレンドモードの間を線形補間している。これはまた、γ=2 (「b=0」の場合)のガンマ補正と特定のトーンカーブ (「b=1」の場合)の間の線形補間と見なすこともできる（なお後者の曲線は、画像のネガにγ=2を適用した時と同じである）。

illusions.hu<ref name=ilhu-softlight>{{cite web|title=Illusions.hu: soft light blending|url=http://illusions.hu/effectwiki/doku.php?id=soft_light_blending|archive-url=https://archive.is/20130217191829/http://illusions.hu/effectwiki/doku.php?id=soft_light_blending|url-status=dead|archive-date=2013-02-17|accessdate=2019-09-14}}</ref>が実装した3番目の式は、不連続性を別の方法で修正するもので、bの値に呼応してガンマ補正を行う。 

: <math>f_{illusions.hu}(a, b) = a^{( 2^{2(0.5 - b)} )}</math>

「b=0」の場合にγ=2、「b=0.5」の場合にγ=1、「b=1」の場合にγ=0.5 、という点は依然として同じだが、これらの3つの画像の間の線形補間にはなっていない。

[[Scalable Vector Graphics|SVG]]および[[canvas要素]]のために策定された最近のW3Cドラフト<ref name="w3c-blending-compositing"/>で指定されている数式は、Photoshopの式と数学的にほぼ同じであるが、「b≥0.5 かつ a≤0.25」の場合にわずかに違った挙動を行う。

: <math>
f_{w3c}(a, b) =
\begin{cases}
  a - (1 - 2 b) \cdot a \cdot (1 - a)
    & \text{(ﾓｼ } b \leq 0.5 \mbox{ ﾀﾞｯﾀﾄｷ)}\\
  a + (2 b - 1) \cdot (g_{w3c}(a) - a)
            & \text{(ｿｳｼﾞｬﾅｶｯﾀﾄｷ)}
\end{cases}
</math>

ﾀﾀﾞｼｺﾉﾄｷ、

: <math>
g_{w3c}(a) =
\begin{cases}
  ((16 a - 12) \cdot a + 4) \cdot a
    & \text{(ﾓｼ } a \leq 0.25 \mbox{ ﾀﾞｯﾀﾄｷ)}\\
  \sqrt{a}
    & \text{(ｿｳｼﾞｬﾅｶｯﾀﾄｷ)}
\end{cases}
</math>

ﾄｽﾙ。

これは[[cairo]]においても使用されている数式であり<ref name=cairo-operators>{{cite web|title=cairographics.org: Cairo's compositing operators|url=http://cairographics.org/operators/|accessdate=9 November 2012}}</ref>、初期のPDFドキュメントにおいても採用されていた<ref name=pdf-blendmodes>{{cite web|title=Adobe.com: PDF Blend Modes: Addendum (to the PDF Reference, fifth edition, version 1.6|url=https://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/pdf_reference_archives/blend_modes.pdf|accessdate=9 November 2009}}</ref>。

ここでは依然として、b = 0、0.5、1の3つの画像の間の線形補間となっている。しかしこの数式では、「b=1」の場合における画像は「γ=0.5」とはなっておらず、特に「a」の値が小さい場合において、γ=0.5の場合のトーンカーブの結果とは異なる様相となる。すなわち、γ=0.5のガンマ補正は「a」の値を何倍にも増加させうるにもかかわらず、この新しいトーンカーブではその最大値が4倍に制限されている。

== 覆い焼き（Dodge）と焼き込み（Burn） ==
'''覆い焼き'''（'''Dodge'''）と'''焼き込み'''（'''Burn'''）は、写真[[現像]]の[[暗室]]作業における「覆い焼き」と「焼き込み」に由来するもので、画像の明るさを変化させる効果を及ぼす。「覆い焼き」をすると画像が明るくなり、「焼き込み」をすると画像が暗くなる。

他の項目と重複する部分もあるが、ここでは有名フォトレタッチソフト（具体的に言うとPhotoshop）で採用されている「覆い焼き」と「焼き込み」に関連するレイヤーモードを解説する。現在のPhotoshopユーザーの中にリアルの写真フィルムを扱ったことのある人がどれだけいるのかは解らないが、「覆い焼き」と「焼き込み」は、写真フィルムの「ネガ焼き」と同じことをしていると考えればよい。 

=== 覆い焼き（Dodge） ===
「'''覆い焼き'''（'''Dodge'''）」は、画像を明るくする効果を及ぼす。

* '''スクリーン'''（'''Screen'''） : このブレンドモードは、両方のレイヤーを反転して乗算し、もう一度反転する（前記の「乗算とスクリーン」の項目で詳しく解説しているが、有名フォトレタッチソフトにおいては「スクリーン」は「覆い焼き」の仲間とされている）。

* '''覆い焼きカラー'''（'''Color Dodge'''） : このブレンドモードは、下のレイヤーを、上のレイヤーを反転させたもので除算する。その結果、上のレイヤーの明度に応じて下のレイヤーが明るくなる。上のレイヤーのカラーチャンネルの値が大きいほど、下のレイヤーの色に及ぼす影響が大きくなる。例えば、任意の画像に白1色（RGBが全て「1」）のレイヤーを「覆い焼きカラー」すると、白1色の画像が出来上がるが、黒1色（RGBが全て「0」）のレイヤーを「覆い焼きカラー」しても、画像には何も起きない。覆い焼きカラーを使うとハイライトの部分がクリッピング（「白飛び」）する恐れがあるため、下手に使わない方が良い（クリッピングは「覆い焼きリニア」の時と同じ場所に発生する）。クリッピングが起きない程度に「覆い焼きカラー」をかけた場合、コントラストを増加させる効果を及ぼす。

* '''覆い焼きリニア'''（'''Linear Dodge'''） : このブレンドモードは、2つのレイヤーのカラーチャンネルの値を単純に足し算するもので、フォトレタッチソフト以外のソフトにおいては単に「'''加算'''」として実装されている。白1色（RGBが全て「1」）のブレンドレイヤーを「覆い焼きリニア」すると白になり、黒1色（RGBが全て「0」）のブレンドレイヤーを「覆い焼きリニア」しても何も起きない。均一な1色のレイヤーをブレンドレイヤーに使って「覆い焼きリニア」をかけた場合、下の画像の黒点（RGBが全て「0」の点）をブレンドレイヤーの色に変更した時と同じ処理になる。クリッピングが起きない程度に「覆い焼きリニア」をかけた場合、コントラストを低下させる効果を及ぼす。

* '''除算'''（'''Divide'''） : このブレンドモードは、「覆い焼きカラー」の反対で、ブレンドレイヤーを反転させたもので除算するのではなく、そのまま除算する。つまり「覆い焼きカラー」と反対の動作をする。白1色（RGBが全て「1」）のレイヤーで「除算」をかけても、画像には何も起きない。
<gallery>
File:Blend modes 1.-top-layer.jpg|上のレイヤー（ブレンドレイヤー）
File:Blend modes 2.-bottom-layer.jpg|下のレイヤー（ベースレイヤー、元の画像）
File:Blend modes 5.-screen.jpg|上のレイヤーを下のレイヤーに、「スクリーン」ブレンドモードで合成した場合
File:Blend modes 7.-colordodge.jpg|「覆い焼きカラー」ブレンドモードで合成した場合
File:Blend modes 8.-lineardodge.jpg|「覆い焼きリニア」ブレンドモードで合成した場合
</gallery>

=== 焼き込み（Burn） ===
「'''焼き込み'''（'''Burn'''）」は、画像を暗くする効果を及ぼす。

* '''乗算'''（'''Multiply'''） : このブレンドモードは、2つのレイヤーを単純に乗算する（前記の「乗算とスクリーン」の項目で詳しく解説しているが、有名フォトレタッチソフトにおいては「乗算」は「焼き込み」の仲間とされている）。

* '''焼き込みカラー'''（'''Color Burn'''） : このブレンドモードは、下のレイヤーを反転させた物を、上のレイヤーで除算し、その結果を反転させる。その結果、「覆い焼きカラー」の反対の効果を及ぼし、上のレイヤーの明度が下がり、コントラストが高くなり、上のレイヤーに下のレイヤーの色が反映される。下のレイヤーのカラーチャンネルの値が低いほど、上のレイヤーにその色が多く反映されることになる。白1色（RGBが全て「1」）のレイヤーを「焼き込みカラー」しても、画像には何も起きない。均一な1色のレイヤーをブレンドレイヤーに使って「焼き込みリニア」をかけた場合、下のレイヤーの黒点（RGBが全て「0」の点）を、ブレンドレイヤーの反転色に変更することと同じ処理になる。焼き込みカラーを使うとシャドウの部分がクリッピング（「黒飛び」）する恐れがあるため、下手に使わない方が良い（クリッピングは「焼き込みリニア」の時と同じ場所に発生する）。

* '''焼き込みリニア'''（'''Linear Burn'''） : このブレンドモードは、各レイヤーを加算し、そこから1を減算する（数式にすると「a+b-1」）。この処理は、各レイヤーを反転した物を（「覆い焼きリニア」と同様に）加算し、その結果を反転させたのと同じことを行っている（数式にすると「1-((1-a)+(1-b))」）。 白1色（RGBが全て「1」）のレイヤーで「除算」をかけても、画像には何も起きない。

=== その他  ===
* '''ビビッドライト'''（'''Vivid Light'''） : このブレンドモードは、覆い焼きカラーと焼き込みカラーを組み合わせたものである。ただし、「a=0.5」を境に「覆い焼きカラー」と「焼き込みカラー」を単に切り替えるだけだとカラーチャネルの変化が不連続になるため、カラーチャンネルの変化が連続性を保つように、ミドルグレー（RGBが全て0.5の色）がニュートラルカラー（下のレイヤーにちょうど何の影響も及ぼさない色）になるように再スケーリングされている。上のレイヤーがミドルグレーよりも明るい場合は「覆い焼きカラー」が適用され、暗い場合は「焼き込みカラー」が適用される。上のレイヤーの色がミドルグレーより明るい所では、下のレイヤーの白点（RGBが全て「1」の点）が通常の覆い焼きの2倍の大きさで明るくなり、ミドルグレーより暗い所では、下のレイヤーの黒点（RGBが全て「0」の点）が通常の焼き込みの2倍の大きさで暗くなる。これにより、知覚されるコントラストが向上する。

* '''リニアライト'''（'''Linear Light'''） : このブレンドモードは、覆い焼きリニアと焼き込みリニアを組み合わせたものである。ただし、「a=0.5」を境に「覆い焼きリニア」と「焼き込みリニア」を単に切り替えるだけだとカラーチャネルの変化が不連続になるため、カラーチャンネルの変化が連続性を保つように、ミドルグレー（RGBが全て0.5の色）がニュートラルカラー（下のレイヤーにちょうど何の影響も及ぼさない色）になるように再スケーリングされている。上のレイヤーがミドルグレーよりも明るい場合は「覆い焼きリニア」が適用され、暗い場合は「焼き込みリニア」が適用される。計算式は単純で、下のレイヤーに、上のレイヤーを2倍したものを加算し、そこから1を引く（「a+2b-1」）。このブレンドモードでは、コントラストが低下する。

* '''減算'''（'''Subtract'''） : このブレンドモードは、単に下のレイヤーの値から、上のレイヤーの値を引く（数式にすると「a-b」）。焼き込みリニア（「a-(1-b)」）と近い効果が得られるが、焼き込みリニアとは逆に、白1色レイヤー(b=1)とブレンドすると画像が真っ白になる。

== 単純算術演算 ==

=== 除算（Divide） ===
このブレンドモードは、下のレイヤーのピクセルのカラーチャネルの値を、上のレイヤーのカラーチャネルの値で除算する。画像の色がくすんでいる場合、あるいは明度が低い場合、写真を明るくする効果がある。

写真から特定の色味を取り除くのにも役立つ。例えば、画像の色温度が低すぎると感じた際に、薄い青色の除算ブレンドレイヤーをかぶせる状況などを想定してほしいが、画像の中かから削除したいと思った特定の色を用いて除算ブレンドレイヤーを作成し、かぶせた場合、その色が消える。数字で言うと、その特定の色の要素が除算されて「1.0（白）」相当に変化した、ということになる。

=== 加算（Addition） ===
このブレンドモードは、下のレイヤーのピクセルのカラーチャネルの値に、上のレイヤーのカラーチャネルの値を加算する。RGBの値がいずれも1を上回った場合、白が表示される。Photoshopには「覆い焼きリニア」の名称で実装されている。Bohemian社の[[Sketch (ソフトウェア)|Sketch]]では「Plus Lighter」の名称で実装されている。

「加算」の派生形として、2つのレイヤーを加算した所から1を減算し、0未満の値は黒になるという、Photoshopで言うところの「焼き込みリニア」ブレンドモードがある。このブレンドモードは、Sketchでは「Plus Darker」の名称で実装されている。

=== 減算（Subtract） ===
このブレンドモードは、下のレイヤーのピクセルのカラーチャネルの値から、上のレイヤーのカラーチャネルの値を減算する。RGBの値が0を下回った場合、黒が表示される。

=== 差の絶対値（Difference） ===
このブレンドモードは、下のレイヤーのピクセルのカラーチャネルの値から、上のレイヤーのカラーチャネルの値を減算する。ただし、RGBの値が0を下回った場合は、絶対値を取って正の値になる。

単に「'''差'''」または「'''Difference'''（英語そのまま）」の名称で実装されている有名ソフトもあるが、Photoshop日本語版は「差の絶対値」の名称で実装されているので解りやすい。絶対値を取っているため、下のレイヤーと上のレイヤーを入れ替えても同じ結果となる。黒1色（RGB(0,0,0)）のレイヤーをブレンドしても何も起こらない。白1色（RGB(1,1,1)）レイヤーをブレンドすると、画像が反転する。

このブレンドモードは「差分アリ」の画像を扱う際に便利である。ほとんど同じだが微妙に違う、と言う2枚のコンテンツを「差の絶対値」でブレンドすることで、どこがどう違うのか確認できる。

「'''除外'''（'''Exclusion'''）」ブレンドモードは、「差の絶対値」よりもコントラストが低い以外はほとんど同じである。

=== 比較（暗）（Darken Only）===
このブレンドモードは、上のレイヤーと下のレイヤーのピクセルを比較して、値が小さいほうだけを表示する。数式にすると、上のレイヤーのピクセルのRGB値を<math>(r_1, g_1, b_1)</math>、下のレイヤーのピクセルのRGB値を<math>(r_2, g_2, b_2)</math>とした場合、画面に表示されるピクセルは

: <math> [\min(r_1, r_2), \min(g_1, g_2), \min(b_1, b_2)] </math> <ref name="gimp-advanced-guide">{{cite web|url=http://www.linuxtopia.org/online_books/graphics_tools/gimp_advanced_guide/gimp_guide_node55_003.html|title=Gimp Advanced Guide - 5.6.4 The Darken Only and Lighten Only Blending Modes|accessdate=28 March 2013|publisher=Linuxtopia}}</ref>

となる。

=== 比較（明）（Lighten Only） ===
このブレンドモードは、「比較（暗）」の逆で、上のレイヤーと下のレイヤーのピクセルを比較して、値が大きいほうだけを表示する。数式にすると、

: <math> [\max(r_1, r_2), \max(g_1, g_2), \max(b_1, b_2)] </math> <ref name="gimp-advanced-guide"/>

となる。

== ブール演算（Boolean） ==
[[Krita]]など一部のソフトウェアは[[ブール演算]]（Boolean）によるブレンドモードを搭載している。これは、16進数カラーコードで表現された2つのレイヤーの各ピクセルの間において、ブール演算における[[論理ゲート]]を使用した二進展開を組み合わせるものである。上のレイヤーのアルファ値は、下のレイヤーの画像と、上下のレイヤーを結合した画像の間における補間を制御する。

==色相（Hue）、彩度（Saturation）、輝度（Luminosity）==
* '''色相'''（'''Hue'''）のブレンドモードは、下のレイヤーの輝度と彩度はそのままで、上のレイヤーの色相で上書きされる。
* '''彩度'''（'''Saturation'''）のブレンドモードは、下のレイヤーの輝度と色相はそのままで、上のレイヤーの彩度で上書きされる。
* '''カラー'''（'''Color'''）のブレンドモードは、下のレイヤーの輝度はそのままで、上のレイヤーの色相と彩度で上書きされる
* '''輝度'''（'''Luminosity'''）のブレンドモードは、下のレイヤーの色相と彩度はそのままで、上のレイヤーの輝度で上書きされる。

ほとんどの画像編集ソフトは、通常画像のピクセルに使用されるRGBカラーと異なる[[色空間]]に基づくブレンドを実装している<ref name="w3c-blending-compositing" />。
伝統的に用いられる色空間は[[HSV色空間]]（HSB色空間）または[[HSL色空間]]であるが、Photoshopは「hue（色相）」「chroma（クロマ）」「luma（ルマ）」の３要素を持つ「[[HCL色空間]]」を採用している。
上記ブレンドにおける「輝度」「彩度」「色相」の具体的なパラメータ解釈についても、ソフトがサポートしている色空間に依存する。

RGB以外の色空間は「値ごとの色の変化」が相対的に人の知覚と近いため、視覚上の明るさ・色合い・鮮やかさを一部固定したまま画像の色を修正する作業（[[カラーコレクション]]）に向く。
たとえば人間の視覚は色の[[コントラスト]]よりも微弱な明度のコントラストの方に遥かに敏感であるため、「輝度」のブレンドモードは画像のコントラストを上げるために使われる。

ブレンドモードの計算においてソフト標準とは異なる色空間を用いる場合、本来の色域で表現可能な値を計算結果が超過してしまう可能性がある。
(たとえばソフトがRGB色空間で画像を処理していたと仮定すれば、表現できる値の範囲は各チャンネル0〜255である。計算結果が256を超えてしまった場合は何らかのアルゴリズムに基づいて「不正確な値」へと再変換される＝色が潰れる。)
このため、ブレンド後のピクセルと上のレイヤーからは下のレイヤーに描かれた正確なピクセルを算出できない。

== マスキング（masking） ==
上のレイヤーをマスキングレイヤーに設定して、下のレイヤーとブレンドした時の効果は、上のレイヤーのピクセルの階調に線形に依存する。例えば、上のレイヤーに黒1色レイヤーを使って下のレイヤーをマスキングしたとすると、下のレイヤーは黒1色の画像になるか、白1色の画像になる（設定によって変わる）。上のレイヤーに白1色レイヤーを使った場合も、同じような結果になる。白黒の階調がある[[グレースケール]]のレイヤーでマスキングした場合は、本ページの「通常」（Normal）の項目の中の「アルファブレンド」において解説されているのと同様の結果となる。

なお、RGBの各チャンネルを個別にマスクできる機能が搭載されているソフトも存在するが、ほとんどの画像編集ソフトにはそのような機能は搭載されていない。ほとんどのソフトではマスキングレイヤーにグレースケール画像しか利用できない。

== ブラシツールにおけるブレンドモード ==
Photoshopなど一部の画像編集ソフトでは、レイヤーのブレンドモードと同様の効果をブラシツールに対しても適用できる。

ブレンドモードを適用したブラシツールでレイヤーにペイントした場合は、対象のレイヤーに存在する既存のピクセルの値に基づいて結果が算出される。もし対象のレイヤーが、まだピクセルに色が塗られていない透明のレイヤーだった場合、ペイントされた色は「通常」のブレンドモードのように置かれる。その上から続けてペイントした場合、既存のピクセルの上からペイントされた色は、ツールのブレンドモードに基づいて結果が算出され、その結果がレイヤーに直接適用される。ペイントツールによるブレンドとレイヤーブレンドの主な違いは、アプリケーションの「元に戻す」コマンドを使った場合を除いて、ストロークした後にブレンディングの結果を調整できないことである。レイヤーブレンドを使うと、上のレイヤーと下のレイヤーの間で不透明度を調整したりレイヤーを切り替えたりと、スライダーなどを使って動的に適用することができるメリットがある。

Photoshopを純粋にフォトレタッチソフトとして使っている人の観点からすると、ブラシツールでブレンドモードを利用することは、1つのレイヤーだけでさまざまな効果を適用する際に役立つ。覆い焼きや焼き込みのテクニックを駆使する場合などが想定される。「スクリーン」モードまたは「乗算」モードで透明度の高いブラシでペイントすることで、「いかにも手作業でやりました」感を減らしたり、あるいは逆に増やしたりすることができる。

== 関連項目 ==
{{commonscat}}
* [[アルファブレンド]]
* [[ペイントソフト]]
* [[ビットマップ画像]]
* [[画像編集]]
* [[デジタル画像処理]]

== 参照 ==
{{Reflist}}

* Paul R. Dunn, [http://dunnbypaul.net/blends/ “Insight into Photoshop 7.0 Blending Modes”]
* [http://mouaif.wordpress.com/2009/01/05/photoshop-math-with-glsl-shaders/ “Photoshop math with GLSL shaders”]
* [https://stackoverflow.com/q/5919663/610692 “Photoshop Blend Mode Math”], includes C code.
* Ron Bigelow, [https://web.archive.org/web/20080319141653/http://ronbigelow.com/articles/blend1/blend1.htm “Using Blend Modes in Photoshop – Part I”], a tutorial
* [http://docs.gimp.org/en/gimp-tool-curves.html The gimp manual]
* [https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode Blend modes in Flash]
* [https://www.adobe.com/designcenter/indesign/articles/idsn3kbtrans/idsn3kbtrans.pdf Adobe ''Master transparency and blends'' pdf file]
* Gimp and Photoshop Blending Modes visually explained and compared, parts [http://emptyeasel.com/2008/10/31/explaining-blending-modes-in-photoshop-and-gimp-multiply-divide-overlay-screen/ one], [http://emptyeasel.com/2008/11/07/how-blending-modes-work-part-two-dodge-burn-soft-light-and-hard-light/ two], [http://emptyeasel.com/2008/11/14/layer-modes-part-three-difference-addition-subtraction-darken-lighten/ three], and [http://emptyeasel.com/2008/11/21/gimp-and-photoshop-layer-modes-part-four-hue-saturation-color-and-value/ four]
* [http://homepages.inf.ed.ac.uk/rbf/HIPR2/blenddemo.htm JAVA demo on the image blending operator], an interactive JAVA-based image blending demo
* [https://www.w3.org/TR/SVGCompositing/ All the math behind photoshop compositing] (including math for using alpha in complex compositions like softlight)
* [https://web.archive.org/web/20120721041549/http://jswidget.com/blog/2011/03/11/image-blending-algorithmpart-ii/ Image Blending Algorithm]
Books
* [https://www.amazon.com/Photoshop-Blending-Cookbook-Digital-Photographers/dp/0596100205 Photoshop Blending Modes Cookbook for Digital Photographers] (John Beardsworth, O'Reilly 2005) - External
* [https://www.amazon.com/Hidden-Power-Blend-Modes-Photoshop/dp/0321823761 The Hidden Power of Blend Modes in Adobe Photoshop] (Scott Valentine, Adobe Press 20132) - External

{{デフォルトソート:ふれんともおと}}
[[Category:デジタル写真]]
[[Category:画像処理]]