はじめに
今回はレイヤー効果についてまとめます。
これは2つ以上の画像の情報を混ぜるための計算処理です。
絵描きやデザイナーの方向けの記事です。
なので「透明度」といった要素は記事の計算式上に反映してません。
透明度などを含めた “完全版の” 計算式を知りたい方はここで基本を理解。
その後、Chat GPTあたりに聞いてください。
2つ以上の画像をまぜるということ
ここに画像を２つ用意しました。
特に何もしない効果「標準」や「通常」と呼ばれるもので重ねると…
特に何も起こらず上にあるレイヤーの情報で置き換わります。
そこで画像を拡大して1px単位で見ます。
1pxは赤、緑、青の3つの情報で構成されてます。
この画像1pxにある情報に対し計算処理を行います。
すると重ねた画像の影響を受けて2つの画像が “混ざった” 表現になります。
この時使った計算式の違いが「レイヤー効果」の違いです。
2つ以上の画像をまぜるということの解説です。
画像にある情報
重要なことなので…
「ピクセル」に対してもう少し掘り下げて解説します。
適当な画像データを用意しました。
これを拡大すると、いくつもの正方形が合わさって作られてることが分かります。
この１つの正方形を「ピクセル（px）」と呼びます。
正方形1つ = 1pxなどの言葉で表されたりします。
そして、この1pxには…
「赤、緑、青」の発光体をどのぐらいの強さで光らせるかという情報が入ってます。
「赤、緑、青」の3色を混ぜれば理論上は全ての色が作れるとされてます。
↓全てが最大値の情報を足すと白になります。（明るい色の表現が可能）
暗い色は色自体の情報を影響度を下げると表現できます。
これでパソコン経由でディスプレイが出すほぼすべての色が表現されてます。
パソコンの画面はもともと黒いので…
全ての影響度を0にすれば黒色（暗い色）が表現できます。
この発光体をどのぐらい光らせるか情報は「0～255」の値で管理されます。
0～255の情報が「赤、緑、青」の３つ入っていて1pxの色が表現されます。
なぜ赤、緑、青の情報が0～255なのかの理由はこちらで解説。
以上が画像にある情報です。
通常合成の計算式と挙動
通常は下の画像を無効化する処理です
すごい雑に描くと下記。
= B
（Aは無効化）
※AとBは画像のpxにある色情報を表す
なので普通に上の色で置き換わって終わります。
ただ実際は不透明度などを計算する必要があるので「もとの色×0」の計算式ではないです。
不透明度に関する計算
通常合成の計算式は下記。
(1 - 不透明度)×A ＋ 不透明度×B
※AとBは画像のpxにある色情報を表す
これで通常合成に透明度処理が入りました。
こんな感じの処理を他のレイヤー効果で行うと透明度が反映されると思います。（未検証）
この記事内ではレイヤー効果の「透明度」に関しては考えないモノとしてます。
これを考えると… 計算式が複雑になりすぎて意図が分かりづらいです。
あくまで絵描きやデザイナーの方向けの記事です。
プログラマーとして “実装” が必要な方は…
Chat GPTあたりに透明度を考慮した計算式を書かせてください。
加算の計算式と挙動
加算は「加算,追加,Add」などと呼ばれます。
これは文字通り２つの値を足し算するだけです。
A＋B
2つの値を足してるだけなのでかなり明るくなります。
値が上限の255を超えて白飛びしがち。
加算を使った場合「黒色が透明」になります。
これは黒色が情報的に赤、緑、青=0,0,0だからです。
何かに+0しても効果は無いのと同じです。
以上が加算の計算式と挙動です。
スクリーンの計算式と挙動
スクリーンは「加算」を改良したモノになります。
計算式はやや複雑です。
A＋B - A×B ÷ 255（画像のBit数で変化）
計算順はこんな感じになります。
AとBを「足し算した値」から「掛け算した値」を引いて÷255するイメージ。
これで明るすぎない加算のような効果が作れます。
処理的には加算の仲間です。
なので「黒色」が透過の色になります。
以上がスクリーンの計算式と挙動の解説です。
乗算の計算式と挙動
乗算の計算式は下記。
基本的には「掛け算」で増えすぎた値を÷Bit数して調整する感じです。
A×B ÷ 255（画像のBit数で変化）
すると色が暗く焼き付いた感じになります。
やや透明なボールペンなどのインクで上から描いたようなイメージ。
乗算は暗い色を上乗せするような挙動になります。
なので「白色」が透過色になります。
画像が8Bitで256通りの情報を記録する場合…。
白色は情報的に赤、緑、青=255,255,255です。
(0を値に含めるので最大値は256 – 1の255)
なのでA×B÷255の “B” に白色の画像を入れると…
A×255÷255 = A×1となります。
結果、A×1は効果的には何もしないと同じになります。
以上が乗算の計算式と挙動の解説です。
オーバレイの計算式と挙動
これまでと違いオーバーレイはやや複雑な挙動になります。
具体的には…
・色を「（赤＋緑＋青）÷3」の計算式でグレースケール（明度）に変換
・明度が50%のグレーを超えるかを判定
・50%グレーは8bit画像の場合「256÷2=128」の "128" で条件分岐する。
・50%グレーを超えるか超えないかで計算処理を分ける
そしてこんな感じの計算を行います。
※画像は8Bit数とする（最大値255）
◆50%グレーを下回る場合
→ 2×A×B÷255
◆50%グレーを超える場合
→ 255 - 2×(255-A)×(255-B)÷255255の値は画像のBit数で変化します。
図にするとこんな感じです。
複雑ですね。
計算式をよく見ると既視感があると思います。
そうです。
やってることは×2で強調された「乗算」と「スクリーン」です。
この効果は50%グレーで条件分岐します。
そして50%で条件分岐した結果…
あまる値の幅が出てきます。
それを少しでも無駄なく使おうと「×2」したのだと考えられます。
詳しいことはこのレイヤー効果の作者に聞かないと分からないです。
その結果、一般的には「コントラストが強調される」と称される表現ができます。
いろんなところで使われがち。
グレースケール画像をオーバーレイするとこんな感じです。
オーバーレイを使うと50%グレーの所が透明になります。
ちなみに○○ライト系のレイヤー効果は50%グレー分岐で処理を変えてる点で共通してます。
「ソフトライト」や「ハードライト」は50%が透明になります。
気になる方は手元で試したり…
これ以上の細かな計算式はChat GPTに聞きましょう。
以上がオーバーレイの計算式と挙動です。
おまけ：レイヤー効果数の最強はたぶんKrita
私が今まで見てきたペイントソフトの中でレイヤー効果数が一番多いのはKritaです。
人間側が把握しきれないぐらいあります。
「▶」で表されてるモノは展開可能。
→ 50ぐらいあると思います。
中にはノーマルマップの合成など離れ業みたいなレイヤー効果も入ってます。
これは便利でよく使ってます。
このような特殊な効果を使いたい方はKritaをご活用ください。
無料で使えるソフトです。
ちなみに特殊なレイヤー効果を使った場合はそのソフトが用意した拡張子で保存しないと設定が消えます。
「乗算、加算、オーバーレイ」のような基本的なレイヤー効果は.psdで保存しても残ります。
Kritaにある特殊な効果を使用すると.psd保存の際に非対応で無効になる可能性があります。
あと有名どころだとClip Studio Paintにある「加算（発光）」などが別ソフト非対応。
→ 絵を描く場合は、なるべくレイヤー効果は使わず “通常” だけで色を決めるのが理想です。
以上がKritaの紹介です。
まとめ
今回は主要なレイヤー効果の挙動と計算式について解説しました。
・レイヤー効果は2つ以上の画像を混ぜるのに使われる
・レイヤー効果は画像のピクセルにある色情報に対して計算処理を行う
・加算とスクリーンは黒色が透明になる
・乗算は白色が透明になる
・オーバーレイや○○ライト系は50%のグレーが透明になる
また他にも画像やペイントソフトについて解説してます。
ぜひ、こちらもご覧ください。
コメント