画像編集ソフトの覆い焼きやソフトライトといった「レイヤー合成モード」は一体何をしているのか?

GIGAZINE



Photoshopなどのデジタル画像編集ソフトウェアでは、「覆い焼き」や「ソフトライト」といったさまざまなブレンドモード(レイヤー合成モード)を用いて画像を編集することが可能です。このレイヤー合成モードは一体何をしているのかを、プロダクトデザイナーのダン・ホリック氏が解説しています。

Blending Modes | Dan Hollick
https://typefully.com/DanHollick/blending-modes-KrBa0JP

レイヤー合成モードは、2つの入力カラーに基づき新しいカラーを作成するというものです。以下の画像の「Foreground(前景)」と「Background(後景)」が異なるレイヤーであり、「Result」部分がレイヤー合成モードにより出力された新しいカラーを指しています。

レイヤー合成モードの中で最も単純なのが、「Darken(比較(暗))」と「Lighten(比較(明))」です。

「Darken(比較(暗))」は各カラーのRGB値を比較し、最も低い数値を選択して新しいカラーを作成するというもの。以下の画像の場合、赤色と青色が異なるレイヤーで、その横にそれぞれ3つずつ書かれている数値がそれぞれのRGB値を示しています。


一方、「Lighten(比較(明))」は、各カラーのRGB値から最も高い数値を選んで出力するというもの。


「Multiply(乗算)」と「Screen(スクリーン)」も対になっています。

「Multiply(乗算)」は各レイヤーのRGB値を乗算するというもの。値は0と1の間で正規化されるため、出力カラーは元のカラーよりも暗くなります。


一方で、「Screen(スクリーン)」は入力カラーのRGB値を反転させた上で乗算し、その結果出力されたカラーのRGB値をさらに反転させるというもの。そのため出力カラーは元よりも明るくなります。


さらに、「Color Burn(焼き込みカラー)」と「Color Dodge(覆い焼きカラー)」も色を明るくしたり暗くしたりするモードです。

「Color Burn(焼き込みカラー)」は合成するレイヤーのうち後ろにある後景レイヤーのRGB値を反転し、その値を前景レイヤーのRGB値で割り、その結果を再び反転するという処理。


「Color Dodge(覆い焼きカラー)」は後景レイヤーを前景レイヤーを反転した値で割るという処理です。


「Overlay(オーバーレイ)」「Hard Light(ハードライト)」「Soft Light(ソフトライト)」は、明るい部分をより明るく、暗い部分をより暗くするものであるため、コントラストブレンディングモードと呼ばれることがあります。

「Overlay(オーバーレイ)」は後景レイヤーに対してRGB値が127.5を超える値には「スクリーン」処理を半分の強度で、RGB値が127.5を超えない値には「乗算」処理を半分の強度でかけるという処理。


「Hard Light(ハードライト)」は前景レイヤーに対して「Overlay(オーバーレイ)」と同じ処理を行う処理。


「Soft Light(ソフトライト)」はオーバーレイに近い処理結果が出力されるものの、その過程は微妙に異なります。まずは前景レイヤーのRGB値を2倍し、その後、反転(数値1)。続いて、後景レイヤーのRGB値を2乗(数値2)。数値1と数値2を乗算(数値3)。前景レイヤーと後景レイヤーを乗算し、その後2倍(数値4)。最後に数値3と数値4を合計することで出力カラーを弾き出します。


「Difference(差の絶対値)」は前景レイヤーのRGB値から後景レイヤーのRGB値をそのまま引くという処理。


「Exclusion(除外)」は「Difference(差の絶対値)」と似た結果を出力するものの、処理はかなり複雑です。まず前景レイヤーと後景レイヤーのRGB値を足した数値を計算(数値1)。次に、前景レイヤーと後景レイヤーのRGB値を乗算し、2倍した数値を計算(数値2)。その後、数値1から数値2を引いた数値が出力カラーとなります。


「Hue(色相)」は前景レイヤーから色相値(H)を取得し、後景レイヤーから彩度値(S)と明度値(L)を取得します。


「Saturation(彩度)」は前景レイヤーから彩度値(S)、後景レイヤーから色相値(H)と明度値(L)を取得することで出力カラーを算出します。


「Color(色)」は前景レイヤーから色相値(H)と彩度値(S)、後景レイヤーから明度値(L)を取得します。


そして「Luminosity(明度)」は前景レイヤーから明度値(L)、後景レイヤーから色相値(H)と彩度値(S)を取得するという処理を行っています。


この記事のタイトルとURLをコピーする

Source

タイトルとURLをコピーしました