Sketch のブレンドモード全16種類をマスターする【後編】 ｜ SiTest (サイテスト) ブログ

前回の記事では、Sketch のブレンドモード全16種類のうち7つをご紹介しました。
今回はその続きとして、残り9つのブレンドモードをサンプル画像を交えて解説していきます。

応用編的な内容になりますので、前回の記事をまだお読みでない方は、先に目を通していただいておくと理解がスムーズかと思います。
Sketch のブレンドモード全16種類をマスターする【前編】

まずは、Overlay からです。これは、前回紹介した Multiply と Screen を組み合わせたモードです。
明るさを基準として、明るい部分はより明るく、暗い部分はより暗くなります。

この画像では、左半分がオリジナルのまま、右半分は同じ画像を Overlay で重ねています。
もともと明るめだった空はより明るく、暗めだった水面はより暗くなっているのがわかります。
一方、明るくも暗くもなかった木立の部分はそれほど印象が変化していません。

結果として、全体的なコントラストが強調されるブレンドモードです。

Soft Light は、Overlay と同じような効果を与えるブレンドモードです。
違いをわかりやすくするために、同じ画像を使って比較してみたいと思います。

Overlay とエフェクトの方向性は同じです。明るい箇所はより明るく、暗い箇所はより暗くなります。
違いはエフェクトの強さです。Overlay と比べると、変化の度合いが少し和らいでいるのが見て取れます。

Overlay を試してみて、ちょっと効果が強すぎるな……というときに使うとよいでしょう。

Hard Light という名前から想像する通り、Soft Light と対をなすブレンドモードです。
こちらも Overlay と同じ画像で比較してみます。

いかがでしょうか。Overlay に比べ、強くエフェクトがかかっているのが分かりますね。
雲はほぼ輪郭を失い、水面もかなりダークな印象に変化しています。

Overlay よりもっとコントラストを高めたい場合に使えるブレンドモードです。

ここから紹介する2つのモードについては、写真の加工という意味では正直なところ、使い道のよくわからないモードとなります。
こういうモードもあるんだな……くらいの感じで読み進めていただけると幸いです。

まず、Difference モードですが、Photoshop では「差の絶対値」という名前で使えるモードです。Photoshop 公式の説明を引用すると、

“各チャンネル内のカラー情報に基づいて、合成色を基本色から取り除くか、基本色を合成色から取り除きます。明るさの値の大きい方のカラーから小さい方のカラーを取り除きます。ホワイトと合成すると基本色の値が反転しますが、ブラックと合成しても変化はありません。”

というものになります。
ざっくり言うと、2枚の画像の差を抽出するイメージです。
ということは、画像の間違い探しに使うと一発で正解がわかるのでは？と思い立ったので、実際に試してみました。

（※クリックで大きな画像が開きます）

上記の画像では、7つの間違いがあります。
一目瞭然のものもあれば、かなり見つけにくいものもあるのですが、全部見つかりましたでしょうか？

・
・
・
・
・

それでは、正解を Difference を使って見てみましょう。

2枚の画像を重ねて Difference を使ってブレンドした結果です。
これ以上はないくらい、クッキリと2枚の画像の差が現れていますね。

サイトやバナーなどを修正したけど、肉眼で見比べても変更点がどこだかよくわからない……というようなケースでは役に立つかもしれません。

Exclusion は Difference と似ているモードです。
Photoshop では、「除外」という名前になっています。こちらも、Photoshop 公式の説明を見てみましょう。

“差の絶対値モードと似ていますが、効果のコントラストはより低くなります。ホワイトと合成すると、基本色の値が反転しますが、ブラックと合成しても変化はありません。”

Difference との違いはどうやら、「効果のコントラストはより低くなります」というところのようですね。
実際に同じ画像で比較してみます。

なんだか幻想的な雰囲気になりました。
Difference のときと違い、Exclusion を使ってブレンドした場合、同じ色が重なっている箇所が黒くなっていません。
一方、色の差がある箇所については、Difference のときと同様にネオンっぽいカラーになっています。

残念ながら、全16種類のうち唯一、まったく使いみちが思いつかないモードです。

ラスト4つのモードについては、「色相」「彩度」「輝度」という色についての3つの概念が重要になりますので、簡単に説明させていただきます。

・色相……「赤」「青」「緑」などといった、色味の違い。鮮やかさや明るさは問わない。
・彩度……色の持つ鮮やかさ。くすんだ色は彩度が低い。
・輝度……人間の目が感じる色の明るさ。

割りと文字通りの意味ですので、すんなり飲み込めたのではないかと思います。

それでは、Hue について効果を見ていきましょう。
これは、元画像の輝度と彩度を保ったまま、色相だけ重ねた画像のものに合成するというものです。

この画像は、右半分にのみ赤色のベタ塗り画像を Hue でブレンドしています。
左右を見比べると、色味だけが変化しているのがわかるかとおもいます。
彩度や輝度は変わらないので、眩しさや鮮やかさはほぼ変わりません。

Saturation は元画像の輝度と色相を保ったまま、彩度だけ重ねた画像のものに合成します。

上記の画像は右半分のみ、真っ赤なベタ塗り画像を Saturation を使ってブレンドしています。
真っ赤な画像を合成しているのに、鮮やかなオレンジ色になっていますね。このことから、重ねた色は彩度以外無視されているのがわかります。

Color は元画像の輝度を保ち、色相と彩度は重ねた画像のものに合成します。

Saturation のときと同様に真っ赤な画像をブレンドしていますが、Color の場合は色相も重ねた色のものが採用されるので、ガッツリ赤くなっています。
また、彩度も重ねた色のものが結果色に反映されるため、くすんだ色の箇所がなくなっています。

いよいよ最後のブレンドモードとなりました。
Luminosity は元画像の色相と彩度を保ったまま、輝度だけ重ねた画像のものに合成します。

これも前の3つと同様に、右半分に真っ赤なベタ塗り画像をブレンドしています。
輝度のみが変化するために、元画像の持つ全体的にくすんで黄味がかったところは変わりません。

また、ベタ塗り画像を重ねたために、全体の輝度が均一化されているのが分かります。
赤はそれほど輝度が高くない色なので、結果として暗めの仕上がりになっています。

画像の上に白抜き文字を載せるデザインなどで使えそうなブレンドモードです。

前後編の2回に渡り、Sketch のブレンドモード全16種類についてご紹介させていただきました。
Photoshop よりは少ないとはいえ、なかなかの数ですので、一読しただけでマスター、というわけにはいかないと思います。
実際に手を動かしてみると直感的に効果が把握できてくるので、このガイドを片手に色々なブレンドをお試しいただければ幸いです。

また、ブレンドモードを駆使することで、はやりのデュオトーンなども作ることができます。
機会があれば、その方法もご紹介したいと思います。