Adobe XDをもっと使いこなすヒント! 第45回 XDから画像を書き出す

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットの書き出しに関連する8つのツイートを紹介します。

Tip 1. 書き出す画像の名前を指定する

書き出す画像の名前には、レイヤー名が使われます。macOS環境では、アセットを書き出す際にダイアログからファイル名を指定することができます。

Tip 2. アセットをデザインしたサイズで書き出す

書き出したい画像サイズがひとつだけで、XD内でデザインしたサイズ通りに書き出したい場合は、書き出し設定から「デザイン」を選択します。形式に「PNG」か「JPG」が選ばれているときに利用できます。

Tip 3. Web用にアセットを書き出す

書き出し設定に「Web」を選択すると、2倍のサイズの画像も一緒に書き出されます。デザイン倍率のオプションには、等倍と2倍のどちらを基準にデザインしたかを指定します。「1x」を指定すると、XD内でデザインしたサイズの画像(1x)と、その2倍のサイズの画像(2x)が書き出されます。

デザイン倍率に「2x」を指定すると、2倍のサイズのアセットをデザインしたという意味になります。すなわち、XDでデザインしたサイズ(2x)とその半分のサイズ(1x)の画像が書き出されます。

Tip 4. iOS用にアセットを書き出す

書き出し設定に「iOS」を選択すると、等倍と2倍と3倍のサイズの画像が書き出されます。デザイン倍率に「1x」が指定されていると、XD内で等倍のサイズを基準にデザインしたものとして扱われます。

デザイン倍率に「3x」を指定するのは、XD内でデザインしたサイズは3倍のサイズの画像であるという意味になります。従って、1xと2xの画像は、XD内の画像サイズの縮小版として書き出されます。

Tip 5. PDFでアセットを書き出す

PDFとしてベクター画像を書き出すと、それをXCodeに読み込んで、1x, 2x, 3xの画像を生成するという手法が使えます。iOSの開発に便利な方法です。PDFとして書き出すには、形式に「PDF」を指定するだけです。

Tip 6. Android用にアセットを書き出す

Android用には多くのサイズの画像が必要です。書き出し設定に「Android」を指定して、デザイン倍率にXDでデザインした基準倍率(例えば100%)を指定すると、サイズが計算されて必要なアセットが書き出されます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2020.01.30