The WONDER ROAD

     

Uターンの失敗からリスタートするブログ

2021年11月

今回も画像や色を混ぜ合わせるときのブレンドモードを詳しく解説しています。

これまでの3回の記事はこちらです。





Blender_Blend_Mode_4


Contents

  1. ブレンドモードの効果
    1. 覆い焼きカラー (Color Dodge)
    2. 焼き込みカラー (Color Burn)
    3. リニアライト (Linear Light)
    4. ソフトライト (Soft Light)

1. ブレンドモードの効果

前回同様、それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。

(1) 覆い焼きカラー (Color Dodge)

色1(背景画像)で指定した画像のそれぞれのピクセルのカラーチャンネルの値を、色2(前景画像)で指定した画像の対応するピクセルの値を反転したもので除算します。
これにより明るい部分が明るくなりコントラストが強くなります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_覆い焼きカラー_色1_1_0.714_0.7
色1 RGB(1,0.714,0.7)

Blender_ブレンドモード_覆い焼きカラー_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_覆い焼きカラー_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_覆い焼きカラー_変更後_0
変更後 (係数 0)


(2) 焼き込みカラー (Color Burn)

色1(背景画像)で指定した画像のそれぞれのピクセルのカラーチャンネルの値を反転し、色2(前景画像)で指定した画像の対応するピクセルの値で割ります。そして、最後に結果を反転させます。
これにより画像が暗くなりコントラストが強くなります。覆い焼きカラーの反対の効果があります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_焼き込みカラー_色1_0.12_0_0
色1 RGB(0.12,0,0)

Blender_ブレンドモード_焼き込みカラー_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_焼き込みカラー_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_焼き込みカラー_変更後_0
変更後 (係数 0)


(3) リニアライト (Linear Light)

リニアライトは覆い焼きリニアと焼き込みリニアを組み合わせたもので、前景画像の明るさによって2つを切り替えます。 この覆い焼きリニアと焼き込みリニアは、上で説明した覆い焼きカラー、焼き込みカラーとは別のものです。 具体的には、色2(前景画像)のピクセルのRGB値が0.5より大きい(明るい)場合は覆い焼きリニアとなり、0.5より小さい(暗い)場合は焼き込みリニアとなります。 色1、色2のRGB値をそれぞれa,bとすると、結果の画像のRGB値は a+2b+1 で表されるので、R,G,Bそれぞれの値について計算して求めます。
Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_リニアライト_色1_1_0.1_0
色1 RGB(1,0.1,0)

Blender_ブレンドモード_リニアライト_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_リニアライト_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_リニアライト_変更後_0
変更後 (係数 0)


(4) ソフトライト (Linear Light)

色2(前景画像)で指定した画像のピクセルのRGB値が0.5よりも明るいとより明るく、暗いとより暗くなりますが、明るくする方法がリニアライトと異なります。
ソフトライトの明るさを増減する方法はソフトによって様々です。
ここでは次の式に従い、変更してみました。
色1、色2のRGB値をそれぞれa,bとして

b≦0.5   a-(1-2b)a(1-a)

b>0.5   a+(2b-1)(g(a)-a)

ここでg(a)は

a≦0.25   ((16a-12)a+4)a

a>0.25    √a



Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_ソフトライト_色1_0.398_0.4_0.49
色1 RGB(0.398, 0.4, 0.49)

Blender_ブレンドモード_ソフトライト_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_ソフトライト_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_ソフトライト_変更後_0
変更後 (係数 0)

結果の色はRGB値を指定したものと微妙に色が違いますね。

画像や色を混ぜ合わせるときのブレンドモードを詳しく解説しています。

これまでの2回の記事はこちらです。





Blender_Blend_Mode_3

Contents

  1. ブレンドモードの効果
    1. 乗算 (Multiply)
    2. スクリーン (Screen)
    3. オーバーレイ (Overlay)
    4. 明るい方 (Lighten)
    5. 暗い方 (Darken)

1. ブレンドモードの効果


前回同様、それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。

(1) 乗算 (Multiply)

色1(背景画像)と色2(前景画像)のR, G, B それぞれの値を掛け合わせます。
1以下の値を掛け合わせるので、元の値より小さくなるため仕上がりの画像は必ず暗くなります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_乗算_色1_0.18_0.15_0
色1 RGB(0.18, 0.15,0)

Blender_ブレンドモード_乗算_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_乗算_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_乗算_変更後_0
変更後 (係数 0)

(2) スクリーン (Screen)

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

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_スクリーン_色1_0.92_0.65_0.7
色1 RGB(0.92, 0.65,0.7)

Blender_ブレンドモード_スクリーン_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_スクリーン_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_スクリーン_変更後_0
変更後 (係数 0)

(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値ではスクリーンという処理になります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_オーバーレイ_色1_0.36_0.3_0.4
色1 RGB(0.36, 0.3,0.4)

Blender_ブレンドモード_オーバーレイ_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_オーバーレイ_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_オーバーレイ_変更後_0
変更後 (係数 0)

(4) 明るい方 (Lighten)

RGB値のR,G,Bそれぞれの値を比較して明るいほう(値が大きいほう)の値を組み合わせたRGB値で表現される色を選択します。

白は値が最大なので必ず選択され、黒は逆に選択されません。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_明るい方_色1_0.9_0.5_0.7
色1 RGB(0.9, 0.5,0.7)

Blender_ブレンドモード_明るい方_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_明るい方_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_明るい方_変更後_0
変更後 (係数 0)

(5) 暗い方 (Darken)

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


Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_暗い方_色1_0.2_0.3_0
色1 RGB(0.2, 0.3,0)

Blender_ブレンドモード_暗い方_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_暗い方_変更後_0,5
変更後 (係数 0.5)
Blender_ブレンドモード_暗い方_変更後_0
変更後 (係数 0)


画像や色を混ぜ合わせるときのブレンドモードを詳しく解説しています。

前回の記事はこちらです。



Blender_Blend_Mode_2


前回同様、それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。

(1) 追加 (Add)

色1(背景画像)で指定した画像のそれぞれのピクセルのRGB値に、色2(前景画像)で指定した画像の対応するピクセルのRGB値を加えます。
足し合わせたRGB値が1を超えた場合は値1が選択されます。

Blender_ブレンドモード_追加_色1_0.9_0.3_0
色1 RGB(0.9,0.3,0)
Blender_ブレンドモード_追加_色2_0.2_0.5_0.7
色2 RGB(0.2,0.5,0.7)
Blender_ブレンドモード_追加_色1_1_0.8_0.7
色1 RGB(1, 0.8,0.7)

Blender_ブレンドモード_追加_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_追加_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_追加_変更後_0
変更後 (係数 0)

(2) 減算 (Subtract)

色1(背景画像)で指定した画像のそれぞれのピクセルのRGB値から、色2(前景画像)で指定した画像の対応するピクセルのRGB値を引きます。
白は(1,1,1), 黒は(0,0,0)なので、色2に白を指定すれば結果は黒になり、黒を指定すれば変化なしとなります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_減算_色1_0_0.2_0.7
色1 RGB(0,0.2,0.7)

Blender_ブレンドモード_減算_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_減算_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_減算_変更後_0
変更後 (係数 0)

(3) 差分 (Difference)

色1(背景画像)で指定した画像のそれぞれのピクセルのRGB値と、色2(前景画像)で指定した画像の対応するピクセルのRGB値の差の絶対値をとります。
色2に白を指定すれば色が反転し、黒を指定すれば変化なしとなります。
先ほど「減算」で使ったモデルで「差分」にするとどのように変化するか確認してみます。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_差分_色1_00.7_0.2_0.7
色1 RGB(0.7,0.2,0.7)

Blender_ブレンドモード_差分_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_差分_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_差分_変更後_0
変更後 (係数 0)

(4) 除算 (Divide)

色1(背景画像)で指定した画像のそれぞれのピクセルのRGB値を、色2(前景画像)で指定した画像の対応するピクセルのRBG値で割ります。
色2が白であれば元の画像は変わらず、黒のときは白に近くなります。
RGB値は0~1の範囲で表されるので、RGB値は1以下の値で割られることとなり、元の値より大きくなります。そのため、除算をすることで写真が明るくなります。

Blender_ブレンドモード_減算_色1_0.2_0.5_0.7
色1 RGB (0.2,0.5,0.7)
Blender_ブレンドモード_減算_色2_0.9_0.3_0
色2 RGB(0.9,0.3,0)
Blender_ブレンドモード_除算_色1_0.222_1_1
色1 RGB(0.222,1,1)

Blender_ブレンドモード_除算_変更後_1
変更後 (係数1.0)
Blender_ブレンドモード_除算_変更後_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_除算_変更後_0
変更後 (係数 0)

RGB値(0.222,1,1)の色と比較してみると、係数0.5の色に近いような感じです。これについては後程調べてみます。


今回は画像や色を混ぜ合わせるときのブレンドモードを詳しく見ていきます。

Blender_Blend_Mode_1

Contents

  1. ブレンドモードとは
  2. ブレンドモードの効果
    1. 値(明度) (Value)
    2. 彩度 (Saturation)
    3. 色相 (Hue)
    4. カラー (Color)

1. ブレンドモードとは

ブレンドモードとは、2つのデジタル画像がどのように合成されるかを決める設定メニューのことです。 
ブレンドモードを使い分けることで画像の仕上がりを変えることができます。

2. ブレンドモードの効果

それぞれのブレンドモードを使うと出来上がった画像にどのような効果があるかを確認していきます。

(1) 値(明度) (Value)

値という表示になっていますが、「Value」は「明度」を表します。
色1(背景画像)で指定した画像のそれぞれのピクセルの明度を、色2(前景画像)で指定した画像の対応するピクセルの明度と混ぜ合わせます。その他の色情報は色1のままです。
係数が0の場合は明度も色1のまま、係数が1の場合は色2の明度が選択されます。
Blender_ブレンドモード_明度_0.3
色1(明度0.3)
Blender_ブレンドモード_明度_0.8
色2(明度0.8)

Blender_ブレンドモード_明度_係数_1.0
変更後 (係数1.0)
Blender_ブレンドモード_明度_係数_0.5
変更後 (係数0.5)
Blender_ブレンドモード_明度_係数_0
変更後(係数0)

(2) 彩度 (Saturation)

色1(背景画像)で指定した画像のそれぞれのピクセルの彩度を、色2(前景画像)で指定した画像の対応するピクセルの彩度を混ぜ合わせます。
彩度のみ変更されるのであれば、係数1でブレンドした場合は色1に彩度のみ色2の値が置き換えられるはずですが、扱っている色空間が違うのか明るさも少し変化するようです。

Blender_ブレンドモード_彩度_0.3
色1 (彩度0.3)
Blender_ブレンドモード_彩度_0.8
色2 (彩度0.8)
Blender_ブレンドモード_色1_彩度_0.8
色1 (彩度0.8)

Blender_ブレンドモード_彩度_係数_1.0
変更後 (係数1.0)
Blender_ブレンドモード_彩度_係数_0.5
変更後 (係数0.5)
Blender_ブレンドモード_彩度_係数_0
変更後(係数0)

(3) 色相 (Hue)

色1(背景画像)で指定した画像のそれぞれのピクセルの色相を、色2(前景画像)で指定した画像の対応するピクセルの色相で上書きします。その他の色情報は色1のままです。

Blender_ブレンドモード_色1_色相_0
色1 (色相 0)
Blender_ブレンドモード_色2_色相_0.6
色2 (色相 0.6)
Blender_ブレンドモード_色1_色相_0.6
色1 (色相 0.6)

Blender_ブレンドモード_色相_係数_1
変更後 (係数1.0)
Blender_ブレンドモード_色相_係数_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_色相_係数_0
変更後 (係数 0)

(4) カラー (Color)

色1(背景画像)で指定した画像のそれぞれのピクセルの明度はそのままで、色2(前景画像)で指定した画像の対応するピクセルの彩度と色相を混ぜ合わせます。

Blender_ブレンドモード_カラー_色1_0_0.3_1
色1 HSV(0, 0.3, 1)
Blender_ブレンドモード_カラー_色2_0.6_0.6_0.6
色2 HSV(0.6, 0.6, 0.6)
Blender_ブレンドモード_カラー_色1_0.6_0.6_1
色1 HSV(0.6, 0.6, 1)

Blender_ブレンドモード_カラー_係数_1
変更後 (係数1.0)
Blender_ブレンドモード_カラー_係数_0.5
変更後 (係数 0.5)
Blender_ブレンドモード_カラー_係数_0
変更後 (係数 0)


このページのトップヘ