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

Sketch と聞くと、アプリ UI のデザインツールというイメージが強く、Photoshop のような画像編集ツールとしてのイメージはあまりないかもしれません。
実際のところどうなのかと言いますと、Photoshop ほどではないものの、それなりに画像の加工もこなせるツールになっています。

例えば、写真の加工でよく使うものの一つとしてブレンドモード（描画モード）という機能がありますが、Sketch でもバッチリ使えます。
今回はその Sketch のブレンドモード全16種類についてまとめます。

「Sketch のブレンドモードってどうやって使うの？」
「ブレンドモードの種類がいっぱいあって、どれを使えばいいのかわからない……」
といったお悩みをお持ちの方は、ぜひご参考にしてください。

ブレンドモードは、重なり合うレイヤーをどう描画するかを設定する機能です。

デフォルトである「Normal」だと当然ですが、後ろにあるレイヤーは前のレイヤーによって隠されてしまいます。
一方、Multiply を指定してブレンドすると、重なった部分が合成されているのが分かるかと思います。

この重なった箇所の処理をどういうロジックで行うのかを、各ブレンドモードで設定できるというわけです。

Sketch でブレンドを行う方法ですが、大まかに２種類あります。

まず、一つ目はオブジェクト自体に対して設定するものです。
ここで設定したモードは背面のレイヤーに影響を与えます。
異なるレイヤー間でブレンドする場合はこちらを使用しましょう。

二つ目はオブジェクトの Fills や Borders に対して設定するものです。
こちらは背面のレイヤーに影響が及ぶことはありません。そのオブジェクト内で合成が完結します。
写真の全面に色をブレンドしたい場合、レイヤーを追加せずに行えるので便利です。
複数の Fills に対して異なるブレンドを適用することもできるので、これだけでそこそこ複雑な画像処理が行なえます。

それぞれ選べるモードは共通ですが、ブレンドする対象が異なるので、違いを理解しておきましょう。

それでは基本をおさえたところで、次章からはサンプルとして実際に色々な写真を使いながら、どのモードがどんな効果を生み出してくれるのかを見ていきたいと思います。

デフォルトの「Normal」についてはもう触れましたので、「Darken」から見ていきましょう。Photoshop では「比較（暗）」としておなじみのモードです。
主に、写真のハイライト（明るい部分）の色味を調整するために使われます。

左半分が元の画像で、右半分は薄いオレンジ色の塗りを Darken で指定しています。
海や空の濃いブルーはそのままに、雲や水面の白い部分だけオレンジ色になっているのがわかります。

・上に被せるレイヤーより暗い色はそのまま
・上に被せるレイヤーより明るい色は塗りの色で置き換え

という処理が行われることで、こうした見た目になっています。
そのため、全体としては元の画像より必ず暗くなります。だから、Darken という名前なんですね。

Multiply は画像の RGB 値を乗算処理することによって合成します。

写真の上に、白地に黒塗りのアイコン画像を乗せて Multiply した結果が右の画像です。
上に乗せたアイコン画像の白い部分が透明になっていますね。

・結果として元の画像より暗くなる
・上に被せた黒はそのまま黒として表示される
・上に被せた白は描画に影響を与えない

例のように、白背景のアイコンやロゴなどを写真の上に配置したいときによく使います。
これだとわざわざ白い部分を切り抜く必要が無いのでお手軽です。

これを指定すると、画像全体のコントラストが強調されます。

上記の画像は左半分はオリジナルのまま。右半分は同じ画像を重ねて Color Burn を指定しています。
ブレンドによって、コントラストが高まっているのが分かるかと思います。

・暗いところはより暗くなる
・明るいところは少しだけ暗くなる

といった合成が行われるため、こうした表示結果になります。
写真のシャドー部分に深みを加えることによってクッキリとした印象を得ることができるブレンド方法です。

ここまでに取りあげた3パターンは全て、元画像より暗くなるブレンドモードになります。
次からは逆に、元画像より明るくなるモードを3つご紹介していきます。

メニューでグループ化されていることからも伺えるように、Darken, Multiply, Color Burn の逆バージョンがそれぞれ存在すると考えると理解しやすいでしょう。

その名の通り、Darken と対称的なブレンドを行います。
写真のシャドー（暗い部分）の色調補正に役立つモードです。

上の画像は例のごとく左半分がオリジナル、右半分が Lighten 処理を施したものになります。
空や海の色はほぼ変わらず、サングラスや砂浜の影部分が黄色っぽくなっています。

・上に被せるレイヤーより明るい色はそのまま
・上に被せるレイヤーより暗い色は塗りの色で置き換え

こうした処理が行われます。重なる2色を比べて、明るい方を採用するわけですね。
使い方のポイントとしては、あまり明るい色を重ねないことです。明るすぎる色を重ねると、全体的に色が変わってしまいます。

Screen は先述の Multiply と対になるモードです。

・結果として元の画像より明るくなる
・上に被せた白はそのまま白として表示される
・上に被せた黒は描画に影響を与えない（透明になる）

という処理ですので、サンプルのように黒背景に白塗りの画像を重ねると、切り抜きの手間なくキレイに合成することが可能です。

Color Dodge は Color Burn の逆バージョンになります。

左のオリジナルに比べて、右の加工部分では葉に当たる光が目立っています。

コントラストを高めるという意味では Color Burn と同じですが、その方法が異なります。
Color Dodge では写真の明るい箇所をより明るくすることで、全体のコントラストを強調します。

主に光の表現で役に立つブレンドモードです。

Sketch のブレンドモードについての概要と、7種類のモードについてご紹介しました。
今回取りあげたモードはブレンドの基礎とも言えるものです。把握しておくと画像処理が捗りますので、Sketch をお持ちの方はぜひお試しください。
お持ちでない場合も、無料体験版（30日間）が提供されているので、気になった方はインストールして試してみてください。

なかなかのボリュームになりましたので、残りの9種類については次回あらためてご紹介させていただきます。