ブレンディングモード

最終更新日30 Jan 2017 05:53

フォトショップやIllustratorに沢山あるブレンディングモード、いわゆる描画モードについて、いっぱいありすぎてわからない💦
私は白黒のテクスチャ画像と、色をどうやって重ねればデコボコ感が出せるのか知りたいので
白から黒のグラデーションで検証したいと思います。念のため透明度ともグラデーションしておきます。
ベースカラー plain.png 下地はベージュ一色の四角形
ブレンドカラー graduation.png 上に重ねるオブジェクト。左上が黒、右上が白、下の2つの頂点は完全透明のグラデーションです
ベースカラーに対し、様々なブレンディングモードでブレンドカラーを重ねることにより、検証していきたいと思います。
normal.png 初期設定モード
darken.png ベースカラーとブレンドカラーを比較して暗い方を重ね結果として選ぶ方法
multiply.png 色同士を掛け算する方法。黒に掛け算したら、黒はRGB(0,0,0)なので何を掛け算しても結果は黒になります。白と掛け算したら、白はRGB(1,1,1)なので掛け算の相手そのままの色が出ます。この画像はIllustratorで作りましたが、見たところアルファ値に関しては掛け算されず、RGBだけが掛け算されるようですね。
screen.png ベースカラーとブレンドカラーを反転して掛け合わせます。最終カラーは、常に明るいカラーになります。文字通り、幕で覆うかのような印象
overlay.png 黒いほど陰になり、白いほどハイライトになりそうな結果です。
softlight.png スポットライトを当てたような効果。グレーが50%以下のところは覆い焼き、50%以上のところは焼き込みが適用されるそうです[1]
hardlight.png グレーが50%以下のところは乗算、50%以上明るいのところは焼き込みが適用されます[1]
difference.png 色の引き算をします。なので黒を重ねたところは色が変わらず。白を重ねたところは補色になります
exclusion.png 差の絶対値モードのやんわりモード。黒から白のグラデーションを重ねたら本来の色から補色になるまでグラデーションする
hue.png ラスター化したらアーティファクトがでてしまった。。。が、本来は色相が変化する重ね方ですが、今回は黒から白のグラデーションで色相が変化してないので微妙な結果になりました。この重ね方の効果はのちに虹色を重ねて検証したいと思います
saturation.png これも彩度に関して変化のない黒と白のグラデーションを重ねたのであまり意味のない効果になりました。
color.png 本来はモノクロのベースに対して、色味をのせるという用途のブレンディングモードらしい。ので色のあるベースに白黒を重ねても無意味
luminosity.png 陰から光のような効果になりました

白黒テクスチャを重ねて、凹凸に見える効果が期待できそうなのは

  • 全体的に白っぽいテクスチャの場合は乗算

その他グレーっぽいテクスチャの場合

  • ソフトライト
  • ハードライト
  • 輝度

2値化して白黒はっきりしたテクスチャでペンキ塗りっぽい効果にするんだったら

  • 比較(明)
  • スクリーン

虹色を重ねてみた編

前項で、白黒だけではいまいち効果がわからなかったブレンドモードに対して、今度は虹色グラデーションを重ねて検証したいと思います。
ブレンドカラー rainbow.png
ベースカラーは先ほどと同じ単色で、今度は虹色を重ねてみます。
hue-rainbow.png ベースカラー本来の色から、ブレンド色の色相に少し寄せたかんじになりました。
saturation-rainbow.png ブレンドカラーの色相は関係なく、ブレンドカラーの彩度が高いほど、ベースカラーの彩度を上げる効果のようです。
color-rainbow.png ベースカラーに色付き照明を照らしたような効果になりました。

blending illustrator


files

サポートサイト Wikidot.com blendingillustrator