Photoshopの描画モードを理解する〜「乗算」を理解すれば「スクリーン」もわかる

Web素材を作成するときに、ネットや本などのチュートリアルでPhotoshopの「描画モード」を使用する事は多いと思いますが、「描画モード」の仕組みをしっかりと理解しないまま終わっていませんか。
今回はPhotoshopの描画モードの中でも特に乗算の仕組みに焦点をあてていきたいと思います。

RGBについて

描画モードを理解するにはWebでの色の表現方法であるRGBをしっかりと理解しておく必要があります。RGBとは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現する加法混合の一種です。RGBを表現するには色の明度を0から255までの256個の数字でrgb(0,0,0)のように表します。つまり、０が一番暗く、255が一番明るい色となります。
RGBの値はrgb(0,0,0)ということはr(赤）、g（グリーン）、b(ブルー）の基本要素の色がもっとも暗い色つまり「黒」となります。
一方rgb(255,255,255)は全ての色の要素が最も明るい色となりますので、赤と緑と青の原色が混じり合って「白」となります。
RGBは色と色が混じり合うと明るい色となり、そして最終的には白になります。絵の具の混色とは違う結果（絵の具は混ぜると黒くなる）になります。
また、rgb(255,0,0)は赤、rgb(0,255,0)は緑、rgb(0,0,255)は青を表しています。

描画モードとは

描画モードとはレイヤーで重なった画像を描画モードの指定をすることで特殊な合成を行う仕組みです。つまり描画モードの前提として合成したい画像がレイヤーとして重なった状態にあることです。

簡単な例で説明すると以下のような状態です。青の長方形１の上に赤の長方形２が重なった状態になっています。

このサンプルの描画モードを「乗算」にしてみると次のようになります。青の長方形１と赤の長方形２の重なった部分が黒になっています。黒くなった部分が青の長方形１と赤の長方形２の描画モードを「乗算」にした結果です。

基本色と合成色

上の赤と青の四角形サンプルで描画モードを指定して特殊な合成を行う場合、元になる方の青の長方形１を基本色と呼びます。重ねる画像で描画モードを指定する側の赤い長方形２は合成色と呼びます。合成色の方に描画モードの設定を行います。描画モードを「乗算」にした結果が黒に変色した部分を結果色と呼び、合成によって生成されるカラーです。
基本色と合成色、そして結果色という言葉は描画モードの説明で使用されますので覚えておきましょう。

描画モードの「乗算」の仕組み

描画モードの「乗算」は描画モードの中でもよく使われるモードですから、その仕組みを知っておくことは重要です。
「乗算」というくらいですから何らか乗算が行われているのですが、基本色と合成色の色成分を単純に乗算しているのではありません。

乗算の計算方法

乗算の計算方法は基本色の色成分の数値を合成色の色成分の数値でで乗算しますが、合成色の数値は255で割った値を使用します。

次の例でRGB値を確認してみます。計算式は 結果色 = 基本色 * (合成色 / 255)を使って算出します。
基本色のrgb(100,200,100)を合成色のrgb(255,100,100)を255で除算した結果に乗算します。結果色はrgb(100,78,39)となります。
結果色のrgbの具体的な計算は、rの成分は100*255/255=100、gの成分は200*100/255=78、bの成分は100*100/255=39の計算で算出しています。
Photoshopで描画モードの乗算を確認すると結果色の色は確かに計算通りだということがわかります。

もっと極端な例で、基本色が青、合成色が赤の場合を確認してみましょう。
基本色のrgb(0,0,255)を合成色のrgb(255,0,0)を255で除算した結果に乗算します。結果色はrgb(0,0,0)となります。
結果色のrgbの具体的な計算は、rの成分は0*255/255=0、gの成分は0*0/255=0、bの成分は255*0/255=0の計算で算出しています。
ここで面白いことに気づきます。
基本色、合成色いずれかの値が0の場合は必ず計算結果が0になるということです。つまり黒の色を数字で表した場合の0の特性と黒の色の特性が見事にマッチしていることです。黒色をどんな色と掛け合わせてみても結果は黒になるということです。0をどんな数字と掛け合わせても0になるように！！

今度は逆に合成色を白にしてみます。白とはつまり255で表すことになります。合成色の値は255で除算しますので白の値は1ということです。1という数字も0同様に特殊な働きをします。つまりどんな数字を1と掛けてもその結果は元の数字になるということです。
それは合成色が白色のものを乗算しても基本色は変化しないということです。

これらのことから、描画モードの乗算では黒を合成色にすると基本色は黒になるという特性と、逆に白を合成色にすると基本色は変化しないという原則があるということです。そしてそれは数字の0と1の特性に他ならないということです。

そして、合成色は0〜1の間の1以下の数値であることから結果色は現在の色よりも0に近づいた色になります。つまりそれは暗い色になるということです。

まとめると、乗算の結果色は合成色が0で表される黒の場合は基本色はどんな色でも黒くなり、合成色が1で表される白の場合は基本色はどんな色でも同じ色になります。また、それ以外の合成色の時にはより暗い色調になるということです。

この大原則をうまく利用すると合成も簡単にスピーディになります。
それは背景が白色のオブジェクトは描画モードの乗算を使用するだけで面倒な背景を抜く作業が不要だということです。
例えば以下の例

水の画像です。こちらがベースになる画像で基本色の働きをします。

白い背景に女性のモデルがいます。これが合成色の写真になりますのでこちらに描画モードを乗算とします。

上の２枚を合成したものですが、白い女性の写真は描画モードを乗算にしただけで特に細工はしていませんが、白色をうまく透明化することができています。

この大原則を知っておくことは重要です。なぜなら描画モードの乗算を理解して活用することでテクニックの幅が広がるからです。

描画モードの「スクリーン」の仕組み

描画モードの「スクリーン」は乗算と全く逆の効果を得ることができます。
「スクリーン」は合成色と基本色を反転したカラーを乗算したものです。ということで、こちらも乗算しているのですから、考え方は描画モードの「乗算」と同じです。
数式にすると次のようになります。255で除算した値を1から引くことで反転されるという原理です。
1.0 -｛1.0 -（基本色 / 255）｝ × ｛1.0 -（合成色 / 255）｝ = 結果 / 255
この式を整理すると以下のようになります。
結果 = 基本色 + 合成色 -（基本色 × 合成色）/ 255

具体的な例で見てみましょう。基本色が青、合成色が赤の場合に描画モードの「スクリーン」としました。

基本色が青色 rgb(0,0,255) の四角形を合成色の赤色 rgb(255,0,0) の四角形で描画モードを「スクリーン」として合成します。２つの四角形の重なった部分の結果色はマゼンタ rgb(255,0,255) となります。
また、カンバスの背景は白のため合成色の赤がスクリーン効果で白になり青と重なった部分しか見えない状態になりました。

描画モードの「スクリーン」では白を合成色にすると数字では1を反転して0の性質を持ちます。そのため基本色は白になるという特性と、逆に黒を合成色にすると1の性格を持ち、基本色は変化しないという原則があるということです。そしてそれは乗算の効果を反転させた結果によるものです。白は1の性格を反転させて0の性格となり、黒は0の性格を反転させt1の特性を持ちます。