当ページでは、XDのアートボード上に作成したレイヤーを、個別のパーツとして書き出す方法をご紹介。
例えばデザインしたウェブページの画像パーツを書き出したり、同サイズのバナーを大量に書き出したりするのに、非常に役立つ。ぜひ覚えておこう。
アートボード上のパーツを書き出す方法
XDでは、アートボード上に配置したパーツを、それぞれ個別の画像ファイルとして書き出すことができる。
左のレイヤーの中から、書き出したいレイヤーを選択。「書き出し対象にする」のアイコンをクリックする。
step
1
メニューの「ファイル」を選択し、「書き出し」>「すべての書き出し対象」を選択する。ショートカットキーはshiftcommandEだ。
step
2
最後にファイル名と保存場所を選択して完了。
step
3
個別のレイヤー毎に書き出すことも可能
選択するレイヤーは、複数のレイヤーをまとめたフォルダ単位でも構わないし、個別のレイヤーでも構わない。
たとえばこのような、複数のパーツを組み合わせて作ったバナーがあった場合、パーツレイヤーすべてを別々の画像として書き出せる。
構成しているパーツ全ての「書き出し対象にする」のアイコンをオンにする。
step
1
先ほどと同じように、メニューから「すべての書き出し対象」を選ぶ。ショートカットキーでもOK。
step
2
すると、それぞれのレイヤー毎に、別々の画像ファイルとして書き出せる。
step
3
レイヤーの名前が大切
複数のレイヤーを書き出したとき、レイヤーの名前がそのまま画像の名前になる。あとから整理するのが面倒になるので、レイヤーのネーミングには気を配ろう。
応用：複数のバナーデザインを作成する
レイヤーでの書き出しは、ウェブページのデザインをXDで制作していて、画像としてコーディングするパーツを一気にまとめて書き出すのに役立つ。
あるいは、同じサイズのバナーを大量に作成したいとき。もしくは、同じデザインのバナーのサイズ違いを大量に作りたいときにも便利だろう。
たとえば「先ほどのバナーと同じデザインで、画像違いのバナーを複数作りたい」といったケースでも、この方法が有効だ。
まず、作成したバナーのレイヤーを一式コピーし、それを6個ペーストする。（リピートグリッドを活用しても良い）
step
1
レイヤーの一番下にある画像をそれぞれ差し替えて、6つのバナーを作成した。
step
2
作成したバナーを「書き出し対象」に指定する。
step
3
最後にshiftcommandEで書き出せば、作成したバナーを一気にまとめて画像化できる。
step
4
