ページのイメージ
デザイン 2017/11/06

Photoshopの合成モードについて考えてみる

青柳祐美
青柳祐美
  •  
  • このエントリーをはてなブックマークに追加
こんにちは。デザイナーの青柳です。

今回は、デザインや写真の修正をする中でよく使う『合成モード』についてです。
これはレイヤーモードや描画モードとも呼ばれる、下にあるレイヤーに対してどういった合成をするかを設定できる機能。
使用頻度が多いのは乗算やスクリーン、オーバーレイでしょうか。

普段なんとな〜くで使ってしまっていますが、それぞれの機能についてちゃんと理解したいなと思い、各モードの見え方を調べてみました。

例として使った色は 赤:(200,50,50) 緑:(50,200,70)
緑の不透明度と合成モードのみを変更しています。

ベーシックグループ

通常とディザ合成の2種類。
不透明度によってのみ、見え方が変わります。
(つまり合成色の不透明度が100%なら そのまま重なる)

通常
下にあるレイヤーの色と、設定中のレイヤーの色をそのまま重ねます。
何も効果がかかっていない状態ですね。

ディザ合成
合成色のピクセルが不透明度に応じて欠けます。
不透明度を下げるとザラザラが荒くなるイメージです。ラメっぽい効果を出したい時に便利。

ダークグループ

元の画像(基本色)よりも暗くなります。乗算や焼き込みがこのグループ。

比較(暗)
下にあるレイヤーの色と設定中のレイヤーの色を比較し、暗い(数値が低い)方の色を採用して合成します。
赤:(200,50,50)緑:(50,200,70)の場合だと低い方の数値が採用されるので 結果は(50,50.50)

乗算
下にあるレイヤーの色と設定中のレイヤーの色を掛け合わせて合成します。計算式は、基本色 × (合成色 / 255) = 結果
赤:(200,50,50)緑:(50,200,70)の場合だと(200*0.2 50*0.8 50*0.3) =(40,40.15)

合成色/255は1より大きくなることはないので、合成後は、元の色より暗い色になります。
ただし合成色が白なら、255/255=1なので基本色そのまま。
黒なら、0/255=0なので基本色に0をかけることになり、結果は黒になります。
合成色の暗さによって結果の暗さが変わるので、影などを塗る際によく使用します。

焼き込みカラー
合成色と基本色の暗さを元に色を暗くして、重ねた色を合成しています。基本色が白なら白が勝ちます。逆に、白を重ねても基本色はそのまま。
つまり暗いところが暗い分だけより暗くなるので、結果としてコントラストが強まります。

焼き込み(リニア)
合成色の暗さを元に基本色を暗くして全体的に明度を落とし、重ねた色を合成しています。
白を重ねても基本色はそのまま。基本色が白なら重ねた色がそのまま乗ります。

カラー比較(暗)
設定レイヤーと下のレイヤーの輝度を比較し、値が低い方の色を表示します。
赤:(200,50,50)=300 緑:(50,200,70)=340 だと 赤:(200,50,50)の勝ち

ライトグループ

元の画像(基本色)よりも明るくなります。スクリーンや覆い焼きがこのグループ。

比較(明)
下にあるレイヤーの色と設定中のレイヤーの色を比較し、明るい方の色を採用してそれぞれの色を合成します。
赤:(200,50,50)緑:(50,200,70)の場合だと、高い方の数値が採用されるので結果は(200,200.70)

スクリーン
下にあるレイヤーの色を反転した状態で、設定中のレイヤーの色を掛け合わせて合成します。
式にすると基本色 + 合成色 -(基本色 × 合成色)/ 255 乗算の反対の効果が得られます。

要はそれぞれを反転して乗算したものをもう一回反転させているので、
赤:(200,50,50)反転→(55,205,205)緑:(50,200,70)反転→(205,55,175)
(55*0.8 , 205*0.2, 205*0.7) =(44,41,143)反転→ 結果:(211,214,112)になります
乗算したものを反転するので結果は明るくなります。

覆い焼きカラー
合成色と基本色の明るさを元に色を明るくして、重ねた色を合成しています。基本色が黒なら黒が勝ちます。逆に、黒を重ねても基本色はそのまま。
つまり明るいところがより明るくなるので、結果としてコントラストが強まります。

覆い焼き(リニア)= 加算
下にあるレイヤーの色と設定中のレイヤーの色を足します。つまり、基本色 + 合成色 = 結果
赤:(200,50,50)緑:(50,200,70)の場合(200+50 50+200 50+70) =(250,250.120)

数値が上がるので、結果は明るくなります。
なお、黒は(0,0,0)なので変わらず、 白は(255,255,255)なので白になります。

カラー比較(明)
設定レイヤーと下のレイヤーの輝度を比較し、値が高い方の色を表示します。
赤:(200,50,50)=300 緑:(50,200,70)=340 だと 緑:(50,200,70)の勝ち

コントラストグループ

条件分岐で効果が変わります。

オーバーレイ
乗算とスクリーンの組み合わせ。明るい部分は[スクリーン]、暗い部分は[乗算]の効果が現れます。
合成後は明るい部分はより明るく、暗い部分はより暗く表示します。
50%グレーを重ねた場合のみ、背景の画像に何も変化を与えません。

基本色 < 128未満の場合  結果 = 2 ×(基本色 × 合成色)
基本色 >= 128以上の場合  結果 = 255 – 2 ×(1 – 基本色/255)×(1 – 合成色/255)

基本色が黒の時は2*(0*x)=0 で黒のまま、基本色が白の時は 255-(2*0*x)=255 で白のままです。

コントラストグループには他にもソフトライトやハードミックスなどが含まれていますが今回は割愛します。
ざっくり説明すると、明るい色同士を重ねると明るく、暗い色同士を重ねると暗くなる効果があります。



使う機会が多いものと、違いがよくわかっていなかったものを中心に機能についてまとめてみましたが、
合成モードは想像以上に奥が深い……。
グループは、比較や色変化など この他にも種類があります。こちらについてもまとめてみたいですね。
これを期にもっと合成モードと仲良くなれたらいいなあと思いました。

 

 

 

しずおかオンライン中途採用積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。

くわしくはこちら!

Category

Ranking