【Adobe XD】画像をキレイに魅せる！ブレンドモードの活用法

みなさんこんにちは。しゅん（@shun_webdesign）です。

Adobe XDではブレンドモードを使って、レイヤーの合成を手軽に行うことができます。

エフェクトを組み合わせることによって多種多様な効果を与えれるのでとても便利な機能です。

今回は以下画像のような効果を使いながら、Adobe XDでブレンドモードを使う方法について紹介します。

ブレンドモードを使ってエフェクトを組み合わせる

ブレンドモード（描写モード）は、2つのレイヤー同士をどのように合成するか設定できます。

そのためレイヤーが2つ必要になります。（1つでも効果を与えることはできます）

ブレンドモードで使える効果一覧

先ほどの事例を参考に使い方を紹介します！

合わせて読みたい

2022年4月2日 【Adobe XD】保存版これだけ見とけば大丈夫！今から使えるTipsまとめ

ブレンドモードを使ったプロトタイプの作り方

前面に動画、背面に画像を配置し、ブレンドモードを使っています。

今回は画像レイヤー同士を組み合わせて作ります。

画像レイヤーを配置

画像を2枚用意します。

今回は星空の画像と白黒の画像を用意します。

白黒のモノトーンの画像にするとブレンドモードの効果がわかりやすいです。

白黒の画像はこちら

星空の画像はこちら

ブレンドモードの設定

前面に夜空の画像、背面に白黒の画像を配置した状態です。

夜空の画像を選択し、ブレンドモードを使います。

画面右の「アピアランス」から「標準」をクリック。

今回は「覆い焼きカラー」を選択します。

プロトタイプ設定

1. ブレンドモードをかけた画像の背面にテキストを配置。
2. 画像のそばに円形のシェイプを配置します。
3. ボードを複製し、複製したボードのテキストを左右に移動させます。シェイプは回転させます。
4. プロトタイプの画面に移動し、インタラクションを「自動アニメーション」に設定。
5. トリガーを「キーとパッド」から「↓」「↑」にそれぞれ設定すれば完成です。※画像参照

まとめ

今回はXDのブレンドモードの使い方について紹介しました。

最後まで見ていただきありがとうございます！是非記事の共有をよろしくお願いします。