本日はお絵描きの技術調査枠です。
「オーバーレイ」の効果について調査を行い理解します。
サンプルキャンバスの作成
効果による変化が分かりやすくなるよう以下のような色合いのサンプルレイヤーを持つキャンバスを作成しました。
・着色レイヤー
R:255,G:0,B:0（赤）
R:128,G:0,B:0（赤と黒の中間色）
R:0,G:255,B:0（緑）
R:0,G:128,B:0（緑と黒の中間色）
R:0,G:0,B:255（青）
R:0,G:0,B:128（青と黒の中間色）
R:0,G:0,B:0（白）
R:128,G:128,B:128（灰）
R:255,G:255,B:255（黒）
合わせて、効果を確認するためのグラデーションレイヤを４つ用意しました。
・白黒グラデーション
R:0,G:0,B:0（白）～R:255,G:255,B:255（黒）
・黒グラデーション
透明色～R:255,G:255,B:255（黒）
・白グラデーション
R:0,G:0,B:0（白）～透明色
・青グラデーション
透明色～R:0,G:0,B:255（青）
乗算とスクリーンの効果
試しに、頻繁に利用する「乗算」と「スクリーン」の効果について白黒グラデーションを利用して確認してみます。
白黒グラデ―ションを「乗算」したキャンバスが以下になります。
RGBの値が掛け合わせられるため、白の部分はそのままの色が表示され、黒に近くなるほど色が暗くなります。
次に白黒グラデ―ションを「スクリーン」したキャンバスが以下になります。
RGBの反転色が掛け合わせられるため、黒の部分はそのままの色が表示され、白に近くなるほど色が明るくなっています。
オーバーレイの効果
そして白黒グラデ―ションを「オーバーレイ」したキャンバスが以下になります。
元々が灰色の部分を確認すると分かる通り、「オーバーレイ」では黒に近くなるほど暗く、白に近くなるほど明るくなります。
しかし、一方で赤/緑/青の中間色を確認すると、特に白に近いところの色変化がスクリーンとは異なることが分かります。
また、赤/緑/青/白/黒といった色については全く色の変化が発生していません。
これは「オーバーレイ」は色の鮮やかさを強調する効果であるためです。
このため、色のコントラストが弱い色ほどオーバレイの効果が得られます。
コントラストと明るさ
白黒グラデーションで「オーバレイ」した色の変化はコントラストを 100 に設定して明るさを変更したときの色の変化と同じになります。
・コントラスト 100, 明るさ 100
・コントラスト 100, 明るさ -100
「オーバーレイ」の掛かった色はコントラストが強くなるため、鮮やかなイメージを与える色合いになります。
その他のグラデ―ション
白黒グラデーション以外のグラデーションで「オーバーレイ」した場合の変化を見てみます。
・黒グラデーション
・白グラデーション
・青グラデーション
興味深いのは青グラデーションを掛けたときの効果です。
赤/緑の中間色は黒グラデーションと同じ効果が得られ、青の中間色は白グラデーションと同じ効果が得られます。
これはRGBそれぞれの値に対して、コントラストと明るさの効果が得られるためです。
赤の中間色は R:128,G:0,B:0 なので、G,B の値に対しては「オーバーレイ」の効果が得られません。
青グラデーションは R:0, G:0, B:255 なので R:0 の「オーバーレイ」のみが掛かり、黒グラデーションと同じ効果が得られます。
一方で、青の中間色は R:0,G:0,B:128 なので R,G の値に対しては「オーバーレイ」の効果が得られません。
青グラデーションは R:0, G:0, B:255 なので B:255 の「オーバーレイ」のみが掛かり、白グラデーションと同じ効果が得られます。
灰色は R:128,G:128,B:128 それぞれに「オーバーレイ」の効果が掛かり、その各効果を足し合わせた結果として R:0,G:0,B:255 の色が得られます。
