画像や色を混ぜ合わせるときのブレンドモードを詳しく解説しています。
これまでの2回の記事はこちらです。
Contents
前回同様、それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。
1以下の値を掛け合わせるので、元の値より小さくなるため仕上がりの画像は必ず暗くなります。
色1 RGB (0.2,0.5,0.7)
色2 RGB(0.9,0.3,0)

色1 RGB(0.18, 0.15,0)
変更後 (係数1.0)
変更後 (係数 0.5)
変更後 (係数 0)
色1(背景画像)と色2(前景画像)のRGB値をそれぞれ反転します。反転するためには1から値を差し引きます。そのあとそれぞれを掛け合わせ、最後に結果の値を反転します。
1以下の値を掛け合わせて元の値より小さくなった値を反転するため、最終的に値は大きくなり仕上がりの画像は必ず明るくなります。
色1 RGB (0.2,0.5,0.7)
色2 RGB(0.9,0.3,0)

色1 RGB(0.92, 0.65,0.7)
変更後 (係数1.0)
変更後 (係数 0.5)
変更後 (係数 0)
詳しく説明すると、色1のRGB値のそれぞれの値が0.5より大きい場合、スクリーンと同様に色1と色2のRGB値をそれぞれ反転し、掛け合わせます。その値を2倍し反転します。また、色1のRGB値が0.5より小さい場合は乗算と同様に、色1と色2のRGB値を掛け合わせ2倍します。乗算やスクリーンと異なる点は2倍するところですが、これは色1のRGB値が0.5の際に、乗算とスクリーンの値が同じ値を持つことで、2つの処理が連続となるようにするためです。
オーバーレイの処理は色1のそれぞれのRGB値に基づいて処理されるため、R値では乗算、G、B値ではスクリーンというようにそれぞれの処理が異なる場合もあります。
下の例では、色1のRGB値が(0.2, 0.5, 0.7)なのでR値では乗算、G値では乗算とスクリーンとも同じ値、B値ではスクリーンという処理になります。
色1 RGB (0.2,0.5,0.7)
色2 RGB(0.9,0.3,0)

色1 RGB(0.36, 0.3,0.4)
変更後 (係数1.0)
変更後 (係数 0.5)
変更後 (係数 0)
白は値が最大なので必ず選択され、黒は逆に選択されません。
色1 RGB (0.2,0.5,0.7)
色2 RGB(0.9,0.3,0)

色1 RGB(0.9, 0.5,0.7)
変更後 (係数1.0)
変更後 (係数 0.5)
変更後 (係数 0)
黒は必ず選択され、白は逆に選択されません。
色1 RGB (0.2,0.5,0.7)
色2 RGB(0.9,0.3,0)

色1 RGB(0.2, 0.3,0)
変更後 (係数1.0)
変更後 (係数 0.5)
変更後 (係数 0)
これまでの2回の記事はこちらです。
Contents
1. ブレンドモードの効果
前回同様、それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。
(1) 乗算 (Multiply)
色1(背景画像)と色2(前景画像)のR, G, B それぞれの値を掛け合わせます。1以下の値を掛け合わせるので、元の値より小さくなるため仕上がりの画像は必ず暗くなります。






(2) スクリーン (Screen)
乗算と反対の効果があります。色1(背景画像)と色2(前景画像)のRGB値をそれぞれ反転します。反転するためには1から値を差し引きます。そのあとそれぞれを掛け合わせ、最後に結果の値を反転します。
1以下の値を掛け合わせて元の値より小さくなった値を反転するため、最終的に値は大きくなり仕上がりの画像は必ず明るくなります。






(3) オーバーレイ (Overlay)
乗算とスクリーンを組み合わせた効果があり、色1(背景画像)が暗い画像であれば乗算、明るい画像であればスクリーンとなります。詳しく説明すると、色1のRGB値のそれぞれの値が0.5より大きい場合、スクリーンと同様に色1と色2のRGB値をそれぞれ反転し、掛け合わせます。その値を2倍し反転します。また、色1のRGB値が0.5より小さい場合は乗算と同様に、色1と色2のRGB値を掛け合わせ2倍します。乗算やスクリーンと異なる点は2倍するところですが、これは色1のRGB値が0.5の際に、乗算とスクリーンの値が同じ値を持つことで、2つの処理が連続となるようにするためです。
オーバーレイの処理は色1のそれぞれのRGB値に基づいて処理されるため、R値では乗算、G、B値ではスクリーンというようにそれぞれの処理が異なる場合もあります。
下の例では、色1のRGB値が(0.2, 0.5, 0.7)なのでR値では乗算、G値では乗算とスクリーンとも同じ値、B値ではスクリーンという処理になります。






(4) 明るい方 (Lighten)
RGB値のR,G,Bそれぞれの値を比較して明るいほう(値が大きいほう)の値を組み合わせたRGB値で表現される色を選択します。白は値が最大なので必ず選択され、黒は逆に選択されません。






(5) 暗い方 (Darken)
RGB値のR,G,Bそれぞれの値を比較して暗いほう(値が小さいほう)の値を組み合わせたRGB値で表現される色を選択します。黒は必ず選択され、白は逆に選択されません。






コメント