Sketch で写真をデュオトーンにする方法 ｜ SiTest (サイテスト) ブログ

以前、こちらのブログで Sketch のブレンドモードについて前後編に渡って解説いたしました。

Sketch のブレンドモード全16種類をマスターする【前編】
Sketch のブレンドモード全16種類をマスターする【後編】

今回は、そのブレンドモードの実践編として、デュオトーン画像を Sketch で作ってみたいと思います。

そもそも「デュオトーン」って何？という方のために、簡単に説明いたします。
Google で「デュオトーン」と画像検索するとこういった結果が表示されます。

わりと色々なサイトで見覚えがある感じの画像ではないでしょうか。
音楽のサブスクリプションサービスである Spotify が使っていることで有名になった表現方法ですね。

数年前から流行りだし、今やヒーローイメージにおける定番の一つともいえるビジュアルパターンです。
それでは今から、このデュオトーン画像を Sketch を使ってサクッと作ってみたいと思います。

先ほど、ご覧いただいた検索結果からもわかるように、1〜2人の人物が写っていて、比較的に背景がスッキリした画像を使うと印象的に仕上がります。

ということで、フリー素材サイト「unsplash.com」からいい感じの画像をピックアップしてきました。
こちらの写真をデュオトーン化していきます。

まずは、画像を白黒にします。
Sketch 上に配置した画像に Fills から白の塗りを追加します。そして、ブレンドモードを Color に切り替えます。

すると、このようにモノクロ化された画像になります。
これで下ごしらえができたので、次は色を加えていきましょう。

先ほどモノクロにした画像にハイライトカラーを加えます。
Fills から今度は黄色（#FFFC00）の塗りを追加し、ブレンドモードに Multiply を指定します。

元の画像の明るい部分が黄色くなりました。
これだけでも若干デュオトーンっぽい感じになりましたが、まだ暗い部分が黒色のままです。
もう少し Spotify っぽくするために、次はシャドウの色を加工します。

シャドウ部分にも色を付けていきましょう。
Fills から濃い青色（#000B5F）の塗りを追加して、ブレンドモードを Lighten にします。

画像の暗い部分が青みがかったのがわかります。
これで、デュオトーン画像の完成です。

先ほどの画像でも充分デュオトーンではあるのですが、もう少し強めの印象を与えたい場合は、もう一手間加えます。
作った画像をコピー＆ペーストで重ね、上の画像に対して Overlay のブレンドを指定します。そして、Opacity を50%に変更します。

コントラストが高まり、より目を引く画像になりました。

この際の注意点ですが、前述の工程とは違い、Fills に対してではなく、画像自体のブレンドモードを変更します。
Sketch では、画像にブレンドを適用するときに、画像自身に対してのブレンドと、画像に加えた塗り（Fills）に対してのブレンドがあるので、その違いを押さえておきましょう。

基本的には、これまでご紹介したステップを踏めば、デュオトーン画像が完成します。
ただ、元の画像や仕上げたいイメージによって、重ねていく色を微調整する必要があるので、そこはある程度の試行錯誤が求められます。

また、色の微調整だけではなく、ブレンドモードを例えば、Lighten から Screen に変えてみるなどしても印象が違ってくるので、色々試してみて理想のビジュアルを追求してみてください。

Photoshop だとグラデーションマップが使えるので、もう少し楽にデュオトーン画像を作れたりするのですが、Sketch でもけっこう簡単に作れることがおわかりいただけたのではないでしょうか。

また、今回紹介した各ブレンドモードをもっと詳しく知りたい、という方は下記の記事をお読みいただけると幸いです。

Sketch のブレンドモード全16種類をマスターする【前編】
Sketch のブレンドモード全16種類をマスターする【後編】