Adobeのデザインツール「XD」で、乗算効果がつけられた画像をデザイン通りに書き出す方法をご紹介。
以下のようなお悩みを抱えている方の助けになれるでしょう。
- 乗算がかかった画像を書き出ししてみても、どうもデザイン通りに書き出せているように見えない…
- 画像を書き出してみると、明らかに乗算効果つきの色味と異なる
- 乗算レイヤーの画像を思うような見た目で書き出すことができなくてイライラしている、発狂しそうだ
かくいうぼくも、かつて担当したWeb制作案件でそういったことに悩まされた経験があります。
その時は、先輩エンジニアの助力のおかげで理想通りの見た目の乗算画像を書き出すことができました。
それではどうやって書き出したのか？
結論。スクリーンショットを使いましょう！！
乗算がかかっている該当の画像をスクリーンショット（command + shift + 4）で選択して保存すれば一件落着です！
スクリーンショットをするときのコツは、あえて求めている画像のサイズよりも少し大きくスクショすることです。
そうすることで、スクショしたあとに、実際のデザインの縦横サイズと同じ長方形を作り、スクショ画像をそれでクリッピングマスクすることで、綺麗に理想通りの画像を書き出すことができるのです！
ぜひ今回紹介した方法を試してみていただければと思います。
次はこの記事！
【XD】 letter-spacingの計算方法ご存知ですか？練習問題とともに解説 
【XD】画像を効率よく書き出す方法 
【XD】作業効率が10倍になる要素間の余白表示方法とは？
