Photoshopのブレンドモードがよく分からない人のための手引き その②

Photoshopのブレンドモードがよく分からない人のための手引き その②

というわけで数日前に書いた「Photoshopのブレンドモードがよく分からない人のための手引き その①」の続きです。まだ前回の記事を読んでない方はそちらから目を通しても良いと思いますー。では続きをどうぞ。

12.オーバーレイ

オーバーレイを使うと、明るさ(輝度)の度合いで乗算とスクリーンどちらかの効果が出るモードです。輝度が50%グレーより明るい場合はスクリーンが、輝度が50%グレーより暗い場合は乗算が適用されます。

たとえば、こんな2つの画像を用意してみます。

オーバーレイ下 オーバーレイ上

そして、レイヤー2にオーバーレイをかけると、こうなります。

オーバーレイ結果

上に重ねた画像の暗い部分の明度に応じて、暗いところはより暗く、明るい所はより明るくなっているのが分かると思います。割と上に重ねた画像の影響をはっきりと受けた結果になりやすいです。ちなみに50%グレーの色のみ、背景の画像に何も変化を与えません。

13.ソフトライト

オーバーレイからハードミックスまでは同じくくりになるので、同じ写真を使ってどういう違いがあるのか見てみましょう。オーバーレイ同様に、レイヤー2に対して今度はソフトライトを適用してみます。

ソフトライト結果

オーバーレイ同様上に重ねた色に応じて、暗さと明るさに変化が出ていますが、オーバーレイよりも柔らかい印象になりました。背景の写真にうまく溶け込んだような優しい雰囲気になります。

14.ハードライト

レイヤー2にハードライトを適用してみます。

ハードライト1

オーバーレイよりも更に強い色合いが出ているのが分かると思います。黄色い部分は黄色が強く、灰色の部分は色が暗くなっていますね。ただTOKYOの黒い文字は背景に影響を与えず黒いままです。ハードライトという名前の通り直接光をあてたような効果が出ます。合成する色に応じて乗算とスクリーンが使い分けられるのが特徴です。

15.ビビッドライト

ビビッドという名前から、どうった効果が出るのか想像しやすいですが、ひとまずレイヤー2に適用してみます。

ビビッドライト1

上に重ねた色に応じて焼き込み、または覆い焼きの効果を出します。輝度が50%グレーより明るい場合は焼き込みが、50%グレーより暗い場合は覆い焼きが適用されコントラストが強くなります。濃い灰色が重なった空の部分は、空の青がより濃くなっていてそれ以外の薄い灰色が重なった部分は白に近くなっているのが分かると思います。重ねた色の明るさによってコントラストを増減させるのがビビッドライトの特徴です。

16.リニアライト

どんどん行きます!レイヤー2にリニアライトを適用してみます。

リニアライト1

ビビッドライトは重ねた色の明るさに応じてコントラストを増減させるのに対して、リニアライトは重ねた色の明るさに応じて、下のレイヤーの明るさを増減させます。ビビッドライトと結果が似ていますが、右上の暗くなっている部分を見てみると空と雲の色がどちらも暗くなっているのが分かると思います。ビビッドライトのほうは空と雲の色がコントラクトが強くなるのではっきり見えますよね。

17.ピンライト

ピンライトを適用すると今までの感じとはちょっと違った結果になります。

ピンライト1

合成する色(上に重なる色)が50%グレーより明るい場合に、背景色のほうが暗い時は背景の色が置き換えられます。逆に合成する色が50%より暗い場合は、背景色の方が明るい時は背景の色が置き換えられます。頭で考えても混乱すると思うので自分で試してみるのが一番早いと思います。合成色の明るさに応じて、基本色の色の置き換えが起こるのがピンライトの特徴と覚えておきましょう!

18.ハードミックス

ハードミックスはハードライトと効果が似ています。

ハードミックス1

違いといえば、ハードライトよりも更に強いコントラストが出ることです。結構色んな色が飛んじゃってますね・・・割と極端な結果が出やすいモードだと言えます。

19.差の絶対値

合成色と基本色のカラーチャンネルを比べて、明るさの大きい方から小さい方の数値が引かれて合成されます。白を重ねた場合は単純に色が反転して、黒を重ねた場合には何の影響も与えません。

ちょっと写真を変えてやってみます。2つの画像を新たに用意します。

差の絶対値(下) 差の絶対値(上)

そしてレイヤー2に対して差の絶対値を適用してみると・・・

差の絶対値結果

右側の黒い部分は背景の写真に変化を与えていません。左側の白い部分は単純に色が反転しています(花の白い部分は黒に、黄色い部分は反転して青になっています)。黄色の部分の解釈については、2つの色のRGB値を比べて各数値の大きい方から小さい方を差し引いた色が出来ます。『比較』と似ていますねー。

20.除外

除外

除外も差の絶対値と結果が似ていますが、違うのは白と黒以外の色が重なった場合結果のコントラストが少し弱くなります。

21.減算

減算は引き算(-)という意味です。基本色の各RGB数値から、合成色の各RGB数値を引いた色が合成されます。実際にレイヤー2に減算をしてみると分かりやすいです。

減算

右側に重ねた黒はRGB値が全て0なので、合成される色に影響を与えていません(引くものがないという解釈)。左側の白はRGB値が全て255(MAX値)なので、合成される色のRGB値が全て0(つまり黒)になります。色の数値を引いてしまうので、全体的に暗くなってしまう特徴があります。

22.除算

除算は割る(÷)という意味です。Adobeのオンラインヘルプを見ると除算は「基本色と合成色を分ける」と書いていますが、いまいち意味が分からないので実際に試してみます。

除算

ポイントは上に重なるレイヤーの明度と、下に重なるレイヤーのRGB値です。例えば白は明度が100%なので1、灰色(中間色)は50%なので0.5、黒は0%なので0と考えます。下に重なるRGB値それぞれの値が、この上に重なる色の明度で割った数値が結果になります。

除算の計算

こんな風に上に重なる色の明度で割ってあげれば良いだけです。なので、上の明度が低ければ低いほど、結果の数値が高くなるので結果が明るくなります。もし明度が10%だったら0.1で、35%だったら0.35で割ってあげてください。RGB値は255がMAXなので、それ以上の数値になっても255以上の数値にはならないので注意です。

23.色相

色相から下の4つのブレンドモードは色相と輝度を使った合成になります。輝度というのは、人間の目が感じる光の強さの度合いのことで明度とは別物です。では同じ写真でレイヤー2に色相を使ってみたいと思います。

色相

色相を適用すると、下にあるレイヤー1の輝度と彩度を維持したまま、上にあるレイヤー2の色相を合成するのが色相の特徴です。上にあるレイヤーの明度や彩度は除外視されるので、そのあたりに気を付けると良いと思います。その証拠に上に重ねたレイヤーの白と黒は、明度が無視されているので同じ結果になっていると思います。モノクロ写真が簡単にできそうですね。

24.彩度

彩度を適用すると、下にあるレイヤー1の輝度と色相を維持したまま、上にあるレイヤー2の彩度が合成されます。

彩度

上にある彩度が合成されるので、白と黒の部分は白黒になっています(無彩色は彩度が0のため)。真ん中に重ねた黄色は彩度が高いので、ちょっと派手な印象になりましたね。

25.カラー

カラーを適用すると、下にあるレイヤー1の輝度を維持したまま、上にあるレイヤー2の色相・彩度が合成されます。

カラー

色相と結果が似ていますが、カラーの場合は上にあるレイヤーの彩度が適用されるので黄色の部分が色相の結果よりも鮮やかになっているのが分かると思います。

26.輝度

最後に輝度ですね。同じようにレイヤー2に輝度を適用してみます。

輝度

輝度についてちょっと詳しく説明すると、例えば白は100%、黒は0%、赤は46%といった風にそれぞれ決まっています(明度とは別物です)。photoshopの情報ウィンドウを出すと、Labカラーを表示する欄があります。この中のLというのが輝度の数値になります。輝度を適用すると、上に重なるレイヤーの色の輝度が下のレイヤーに移るようになっています。なので上の図のように、白で重ねた部分は輝度が100%になるので完全に白に、右側の黒もどうように輝度が0%なので真っ黒になっています。真ん中に重ねた黄色は輝度97%なので、下の重なった部分の輝度が全て97%になります。もし重ねた色が1色の場合は輝度が均一化されてしまうということですね。

まとめ

というわけで、ひととおりブレンドモードの説明でした。文章や画像を見ても、いまいちピンとこないこともあると思います。これだけ色々あったら混乱するのも当たり前だと思って良いと思います、書いてる本人が混乱してるので(笑)自分で色々扱ってみて「あ、これは使えそうな機能だなー」と思ったものから徐々に使い慣れてもらえればと思います。まだまだ自分自身も使いこなせていない状態なので、具体的な使い方も今後紹介できたらと思います。以上、photoshopのブレンドモードについてでした!

関連記事を読む

Photoshopのブレンドモードがよく分からない人のための手引き その②

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]