描画モードは複数のレイヤーのブレンドしてくれて、それによって合成しやすくなるという機能です。今回は描画モード第5回（最終回）です。過去記事は下記からご覧ください。
今回は描画モードの色の3属性に関するグループをご紹介します。第１回～第4回に解説したものはすべて、明度が変化するブレンドですが、今回は「色相・彩度・輝度など、明度以外の変化をするブレンドモード」です。
明度・色相・彩度・輝度とは ?
本題に入る前に、明度・色相・彩度・輝度について、さらっと見ておきましょう。
明度、彩度、色相に関しては、下記を見るとイメージがわくと思います。
明度が高い→白っぽくなる、明度が低い→黒っぽくなる
彩度が高い→原色・ビビットになる、彩度が低い→色味薄い
色相は色の種類なので大丈夫だと思います。
輝度は光の明るさの度合いです。RGBの原色でも明度だと同じ明るさとして扱われますが、輝度だと、G（緑）が一番明るく、B（青）が一番暗くなります。明度だと同じ明るさとして処理されます。輝度は色による明るさを考慮していますが、明度はしていないためです。
図で見てみましょう。
明度でモノクロ化すると、ほとんど同じ色になってしまいますが、輝度だとそれぞれの光の明るさが考慮されているので、ちゃんと元の色の違いが分かります。
色の3属性に関するグループについての定義と特徴
色の３属性に関するグループそれぞれの定義と合成写真を比較して特徴を見ていきましょう。
色相
色相は、基本色の輝度と彩度、合成色の色相で、結果色を作成します。基本色の花の写真に、白・ピンク・青・グレーの合成色をブレンドします。
色だけが合成色に置き換わっているのが分かりますね。色相のみを合成色に適用するので、モノクロ写真がきれいに仕上がります。基本色にモノクロの合成色をブレンドしてみます。
美しいモノクロ写真になりました。
彩度
彩度は、基本色の輝度と色相、合成色の彩度で、結果色を作成します。早速こちらもブレンドしてみましょう。
モノクロは彩度０なので、モノクロ写真になります。合成色で色味のあるピンク・ブルーの部分は彩度だけが変化しています。ブルーの方が彩度が強いので、結果色も彩度が強くなっていますね。
彩度だけが変わるのを利用して、彩度の違いで、ハートと枠組みを描いてみました。
ハートの線はモノクロに、塗りのピンク部分はカボチャの彩度が落ちているのが分かります。
カラー
カラーは、基本色の輝度、合成色の色相と彩度で、結果色を作成します。
カラーは、色相と結果色が似ています。違う点は、彩度が合成色の方を適用しているため、色相は濃淡がはっきりとしていて、カラーは彩度が合成色の単色を適用しているため、のっぺりとしています。色相とカラーは、実際に両方試してみて、好みの方を使用するのが良いと思います。
ちなみに、カラーは彩度を気にしなくてよいので、モノクロ写真に色を付けるのに便利です。
橋の側面部分だけに合成色のカラーを適用しています。キレイに着色しました。
輝度
輝度は、基本色の色相と彩度、合成色の輝度で、結果色を作成します。
合成色の色の明るさだけが結果色に反映して合成色の輝度(目に見える明るさ)だけを適用するので、合成色が白の部分は白のままになっていますね。それ以外の部分は合成色の輝度が下に行くにつれ暗くなっているので、境界線のない花の写真が下に行くにつれて、暗くなっています。輝度は、単色を合成色にすると、なんだか微妙な仕上がりになってしまいます。
輝度は、古い映画のような色味に調整したい時に便利です。銀残しという映画の画像処理で行われる、本来の銀を取り除く処理を省いて銀を残す処理に近い効果を、フォトショップで簡易的に作成できるのです。実際にやってみましょう。
味のある写真になりました。こちらは、まず、トーンカーブで明るくして、元写真の明るいところを白飛びもしくは、白に近い色にします。その後、同じ写真を輝度でブレンドすることで明るい部分のみがグレースケールになるため、銀残しのような効果が得られるのです。
トーンカーブで明るくした写真は下記のようになります。
こちらに元写真を輝度でブレンドすることで、銀残しの画像が出来上がります。レイヤーパネルは下記のようにします。
まとめ
今回は色の３属性に関するグループについてご紹介しました。ブレンドモードはよく使うものとあまり使わないものがありますが、全部を理解しておくことで、合成の幅が広がると思います。記事を書いてみて、奥が深いなぁと思いました。
今回で描画モード全５回、終了です。まだまだ、足りないところだらけですが、これからも、楽しく学んで、Webデザインについてシェアしていきたいと思います。読んでいただき本当にありがとうございました。
コメント