Photoshop、AfterEffects、Illustratorなどレイヤー構造を持つAdobeのソフトには描画モードという画像合成機能が付いています。

この機能、知らないと一見使いにくいのですが、使いこなすとなくてはならない機能の一つと言えるくらい幅が広がるものです。

画像合成って結局何しているの？

この画像合成の本質は、ずばり「計算」です。コンピュータだから、当たり前と言えば当たり前ですが。

数学と言ってしまうと難しく聞こえてしまうかもしれないですが、やってることは加減乗除（足し算、引き算、掛け算、割り算）、条件分岐（もしこうだったらこう）くらいです。

ピクセル単位で計算している

意外と知らない？画像の基礎知識とファイルの構造。でも書きましたが、画像の最小単位はピクセルになります。一般的なRGB8bitの画像だと、1ピクセルあたり0～255までの値がRGB分3つ入っていることはご存知かと思います。

この「ピクセルには数値（0以上255以下）が入っている」ということを念頭におきながら続きを読んでください。画像合成は基本的にこのピクセル単位で計算しています。

具体的に見ていきます

では、2枚の画像を重ねると、描画モードで実際どんな計算が行われているのか見ていきます。多分、「こんな単純なことをしてたのか！」と理解してもらえるかと思います。

計算式が出てくるので、省略のために定義を書いておきますね。

• 基本色：下にあるレイヤー（重ねられるレイヤー）。値の範囲は0～255。
• 合成色：上にあるレイヤー（重ねるレイヤー。つまりはこのレイヤーに描画モードを指定する。）。値の範囲は0～255。

注意点として、以下の事があります。

• 計算結果は、0以下は0になり、255以上は255になります。
• 基本的にRGBのチャンネルごとに計算されます。（「基本色のRと合成色のR、基本色のGと合成色のG、基本色のBと合成色のBが合成される」ということ）ただし、例外もあります。
• 同じ位置のピクセル同士で計算されます。

覆い焼き（リニア）- 加算

一番長い名前でよくわからない「覆い焼き（リニア）- 加算」からいきます。

これ、名前こそ長くて難しそうに見えますが、やっていることは一番簡単です。

「足し算」です。これだけです。

名前の後ろの方に申し訳程度に”加算”という言葉が入っているのですが、これは数学の用語で「足し算」と同じ意味です。「加える計算」という意味です。計算式にすると、

となります。つまり、ピクセルの数値が増えて明度（モニタのライトの光り具合）が上がるので、明るくなります。より具体的に見ると、以下のようになります。

白（RGB255）に関しては、255以上は除外されるので、白（RGB255）になります。黒（RGB0）に関しては、0が足されてもなにも変わらないので、基本色そのままです。

実例を見るとわかるかと思うのですが、要するにピクセルごとに足し算をしているだけです。 つまりは「ピクセルの計算」です。

乗算

これもPhotoshopに入っていると気づかないのですが、数学用語の「乗算」、つまり「掛け算」です。計算式にすると、

となります。

ただし、ここで一つ引っかかる点があります。
例えば、50×50という暗めな色でも、そのまま掛けると2500というとても大きい数になってしまいます。これではマズいです。

実は色の計算というのは0～1の範囲（小数点以下）で行うのが厳密です。なので、全ての色を255で割って計算しています（この時の計算結果の小数点以下は除外します）。

となります。実質的にPhotoshopでは（おそらく）合成色を255で割って、基本色に掛けるという形で計算をしていると思います。結果的には変わらないので。要はこういう計算式です。

色の計算の詳しいこと（なぜ0～1の範囲で色の計算をするのか）は、この記事の最後に番外編として書きました。

計算式を見ると、「合成色/255」という計算は1を超えることがありません。なので、基本色の色は暗くなります。より具体的に見ると、以下のようになります。

白（RGB255）に関しては、255/255=1で、1を掛けても変化はないので、基本色そのままになります。黒（RGB0）に関しては、どんな値でも0を掛けたら0になるので、黒（RGB0）になります。

スクリーン

さて、初めて数学用語が付いていないものが来ました。ですが、この計算が何をやっているのかを特定する方法があります。

Photoshopの描画モードは、いくつかのグループに分かれていて、線で区切られています。

この中で暗くなるグループと明るくなるグループは対になっています（反対の効果を及ぼすようになっています）。例えば、以下のようなグレースケール画像を使うと、

こんな感じになります。

なので、これから推測すると、スクリーンというのは乗算の反対の効果があることがわかります。で、ここで「掛け算の反対だから、割り算！」と言いたいところなんですが、割り算ではありません。

では、ここではどんな計算をしているのか？

画像を見ても分かるように乗算の反対となる計算をやっていることは間違いありません。

これは、画像が0～255の値の範囲を持っているという特性を生かして反対にしています。要は、逆の効果が乗っかればいいので、画像を反転してしまえばいいのです。

という式がスクリーンの計算になります。1.0から引いているのは、画像を反転するためです。数式を見ただけだと何をやっているのか意味がわかりにくいですね。

でも、これを実際のPhotoshopでの処理に置き換えるとわかりやすいです。

ここまで説明してきてお分かりの通り、スクリーンは乗算の反対の効果があるので、基本色は明るくなります。

白（RGB255）に関しては、白（RGB255）になります。黒（RGB0）に関しては、基本色そのままです。まさに乗算の逆です。

オーバーレイ

ここまで暗くなるグループか明るくなるグループしか見てきませんでしたが、コントラストグループに入ります。

ここでいよいよ加減乗除以外の計算、条件分岐が出てきます。

先に説明しておくと、オーバーレイというのは、コントラストを上げる効果を持っています。さっきのスクリーンのときに使った検証用グレースケール画像でオーバーレイをかけるとこんな感じ。

ヒストグラムを見ると、どっかでこんな曲線見覚えありませんか？例えば、こんな画像。

そう、実はオーバーレイは乗算とスクリーンの組み合わせでできています。数式にすると、こんな感じ。（式が煩雑になってわかりにくいので、色の範囲を0～1で表記します）

基本色の中間値で乗算かスクリーンかが分かれています。これが、条件分岐です。もうちょっと簡単に言うと、

• 下のレイヤーが暗めの部分は、より暗くなる
• 下のレイヤーが明るめの部分は、より明るくなる

という感じです。ただし、下のレイヤーの暗めの部分が乗算のように「絶対に基本色より暗くしかならない」ということはなく、合成色が明るければ明るくなります。明るい部分にも同様のことがいえます。

計算式で、乗算とスクリーンにそれぞれ2が掛けてありますが、これは中間の値で一致させるためです。乗算とスクリーンのヒストグラムを合わせてみると、こんな感じになります。

なんか中間値のところが尖ってて、オーバーレイのヒストグラムとは違いますよね。

ちょっと難しくなりますが、乗算とスクリーンそれぞれの値の変化をグラフにすると、こうなります。（横軸がピクセルの明度、縦軸が合成色の明度）

これを見ると、0と255でしか交わってないのがわかります。これでは、なめらかなグラデーションができません。条件分岐で切り替えると、中間値のところでおかしくなってしまいます。

そこで、2を掛けます。

中間値のところを見ると、乗算のグラフが上がってきて、スクリーンのグラフが下がってくることで、なんかいい感じに交わってるのが見て取れますね。拡大して見ましょう。

何か見えてきましたね。これに条件分岐を付けると、

こうなります。これがオーバーレイの正体です。つまり、普通の乗算やスクリーンとは少し違うカーブで効果がかかっています。なので、基本色が128未満でも、合成色が明るければ、乗算みたいな計算はしていますが、明るくなります。

ちなみに、このオーバーレイのグラフみたいなのをPhotoshopをいじっているときに、どっかで見たことないですか？

コントラストを上げるときのトーンカーブです。このトーンカーブを検証用グレースケール画像の通常の方にかけると、こうなります。

同じ画像でオーバーレイをかけるとこうなります。

これらから、オーバーレイはコントラストを上げる効果を持っているということがわかります。

白（RGB255）と黒（RGB0）に関してですが、今回は基本色ベースだけでは考えることができません。合成色との兼ね合いになります。

そこで、値の幅がどのくらいを持っているのか、全てのパターン（グラフ上は見やすいように端折ってありますが、流れが分かります）を計算してグラフにしてみます。

このグラフについてさくっと説明すると、

という感じです。グラフとか見慣れてない方は難しいかもしれないですが、「中間値（RGB128）を起点にして色の変わり方が変わるよ。」ということがわかっていればいいと思います。

グラデーションを作って自分で合成色を変えながらやってみると理解が深まるかもしれません。

まとめ

今回は画像合成は計算だということを伝えたかったので、よく使う合成方法であり、基本的な計算でわかりやすい「加算、乗算、スクリーン、オーバーレイ」について見ていきました。

他の合成方法については、近々記事にして書くか、見やすいようにまとめようかと思います。（若干難しい計算もあるので）

また、Photoshopの場合は不透明度によってもややこしい計算が発生するのですが、とりあえずは見た目でいいと思います。

映像系のコンポジターか画像系のエンジニアでもない限り、こんなに入り込んで画像の合成について知っておく必要性はないかと思いますが、知っておくとPhotoshopやAfterEffectsでの色調整の幅がすごく広がります。「ガッ」っと広がります！

番外編:画像の計算を0～1の範囲（小数点以下）で行うのはなぜ？

「乗算、スクリーン、オーバーレイ」のところで書きましたが、色の計算というのは0～1の範囲（小数点以下）で行うのが厳密です。（0がRGB0で、1がRGB255に当たる）

なぜかは、計算する側を考えるとわかってきます。

0～255というのは、あくまで8bitというデータ形式の話です。画像合成自体の計算とは全く関係ありません。

計算をしようと思った時に、255という値はすごい計算がしにくいですよね。（掛け算とか）

そこで、0～1の範囲で計算を行います。

そうすると、小数点以下という数値の特性を活かして、計算がやりやすくなります。主に掛け算なのですが、1を掛ければ1になりますし、0.9を掛ければ少し小さくなりますね。

ここまで見てきた画像合成を見てわかる通り、画像合成はピクセルの数値を元にRGBの明度を明るくしたり、暗くしたりします。なので、この小数点以下という数値の特性がとっても計算しやすいんです。