Adobe XDで画像を簡単に2倍で書き出しする方法【実例付き】

Adobe XDを使ってデザインなどを作成した時に画像を書き出したい！そんな時、2倍で書き出す方法でお悩みではないでしょうか。

本記事は、上記に当てはまる方のお悩みを解決する記事の内容となっています。

少し癖があるので、初めて利用する方はどういうことか理解ができないと思います。

画像を2倍で書き出したくても書き出しが出来ない方の一助になれば幸いです。

書き出し方法

それでは早速、一緒に画像を書き出していきましょう！

手順1: 画像にしたい要素を選択する

まずは、書き出したい要素を選択してください。

グループやコンポーネントの場合も同様に左のレイヤーメニューから選択してください。

手順2: 「書き出し対象にする」にチェックを入れる

左メニューの下にある「書き出し対象にする」にチェックをいれます。

手順3: 「全ての書き出し対象」を選択する

AdobeXDのメニューから「ファイル」→「書き出し」→「すべての書き出し対象」を選択します。

手順4: 詳細設定

上記画像のような保存先を決めるポップアップウィンドウが表示されるので、書き出し先を「Web」にデザイン倍率に「1x」を選択してください。

選択したら「書き出し」ボタンをクリックします。

デザイン倍率は注意が必要

デザイン倍率が「1x」と「2x」二つの選択肢がありますが、2倍で書き出すときは「1x」を選択しなくてはなりません。「1x」を選択すると等倍サイズ、2倍サイズの2つの画像が書き出されます。

「2x」を選択すると0.5倍サイズの画像と等倍サイズの画像が書き出されます。

「2x」というのは、選択している要素はすでに2倍のサイズですよという宣言のようなものです。逆に「1x」は、選択している要素は、等倍サイズだから2倍で書き出ししてねという宣言になります。

PhotoshopやIllustratorを使っている方には、紛らわしい書き出し方法なので注意してください。

手順5: 書き出しされたファイルの確認

書き出した場所へ移動して、書き出されたファイルの確認をしてください。

等倍サイズと2倍サイズの画像が書き出されています。

AdobeXDでは以上の方法で2倍サイズの書き出しを行います。

まとめ

初めてAdobeXDで、2倍サイズの画像を書き出す際に少し戸惑ってしまうかと思います。特にPhotoshopやIllustratorを使用している方は、書き出し時に「2x」を選びがちです。

2倍サイズの画像の書き出しでお困りの方のご参考になれば幸いです。

最後にもう一度、流れを掲載しておきます。