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


Adobe XDをもっと使いこなすヒント!

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

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

#AdobeXD #ProTip By default, your object will export with the name of your layer. If you don’t name your layers, you can always change the name of the output. @AdobeXD

— Elaine Chao (@elainecchao) December 24, 2019


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

#AdobeXD #ProTip Select “Design” to export only one size of the asset – where 1 virtual point inside of XD = 1px of your exported asset. @AdobeXD

— Elaine Chao (@elainecchao) December 25, 2019


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

#AdobeXD #ProTip Exporting at web will give you two sizes, one for high and one for low resolution. Select “designed at 1x” to also export a version that is twice the size you designed at. @AdobeXD

— Elaine Chao (@elainecchao) December 26, 2019


#AdobeXD #ProTip Export with the setting “designed at 2x” if you want a low res asset that is half the size of what you’ve designed on screen. @AdobeXD

— Elaine Chao (@elainecchao) December 27, 2019


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

#AdobeXD #ProTip iOS asks for 3 different sizes for assets, so select “Designed at 1x” to scale your assets up and provide high res assets for use. (Note: you should preflight your bitmaps when importing.) @AdobeXD

— Elaine Chao (@elainecchao) December 30, 2019


#AdobeXD #ProTip If you want to scale your assets down for your 1x, 2x, and 3x, set your “Designed At” to 3x. @AdobeXD

— Elaine Chao (@elainecchao) December 31, 2019


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

#AdobeXD #ProTip You can easily export an asset or artboard as a PDF. You’ll want to do the former for iOS development, as your developers can use these assets for icons, as XCode can automatically translate the vectors inside to 1x, 2x, and 3x. @AdobeXD

— Elaine Chao (@elainecchao) January 8, 2020

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

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

#AdobeXD #ProTip Android requires multiple versions of assets, so you can set your multiplier and what you designed at for a set your assets exported at exactly the right sizes for your developer. @AdobeXD

— Elaine Chao (@elainecchao) January 1, 2020