01_Mac 02_アプリの使い方・活用方法

【XD】アートボード上のレイヤーをパーツ毎で別々に書き出す方法

xd-layer-export

当ページでは、XDのアートボード上に作成したレイヤーを、個別のパーツとして書き出す方法をご紹介。

例えばデザインしたウェブページの画像パーツを書き出したり、同サイズのバナーを大量に書き出したりするのに、非常に役立つ。ぜひ覚えておこう。

アートボード上のパーツを書き出す方法

XDでは、アートボード上に配置したパーツを、それぞれ個別の画像ファイルとして書き出すことができる。

左のレイヤーの中から、書き出したいレイヤーを選択。「書き出し対象にする」のアイコンをクリックする。
xd-layer-export_1

step

1

メニューの「ファイル」を選択し、「書き出し」>「すべての書き出し対象」を選択する。ショートカットキーはshiftcommandEだ。
xd-layer-export_2

step

2

最後にファイル名と保存場所を選択して完了。
xd-layer-export_3
xd-layer-export_4

step

3

個別のレイヤー毎に書き出すことも可能

選択するレイヤーは、複数のレイヤーをまとめたフォルダ単位でも構わないし、個別のレイヤーでも構わない。

たとえばこのような、複数のパーツを組み合わせて作ったバナーがあった場合、パーツレイヤーすべてを別々の画像として書き出せる。

構成しているパーツ全ての「書き出し対象にする」のアイコンをオンにする。
xd-layer-export_5

step

1

先ほどと同じように、メニューから「すべての書き出し対象」を選ぶ。ショートカットキーでもOK。

step

2

すると、それぞれのレイヤー毎に、別々の画像ファイルとして書き出せる。
xd-layer-export_6

step

3

レイヤーの名前が大切

複数のレイヤーを書き出したとき、レイヤーの名前がそのまま画像の名前になる。あとから整理するのが面倒になるので、レイヤーのネーミングには気を配ろう。

応用:複数のバナーデザインを作成する

レイヤーでの書き出しは、ウェブページのデザインをXDで制作していて、画像としてコーディングするパーツを一気にまとめて書き出すのに役立つ。

あるいは、同じサイズのバナーを大量に作成したいとき。もしくは、同じデザインのバナーのサイズ違いを大量に作りたいときにも便利だろう。

たとえば「先ほどのバナーと同じデザインで、画像違いのバナーを複数作りたい」といったケースでも、この方法が有効だ。

まず、作成したバナーのレイヤーを一式コピーし、それを6個ペーストする。(リピートグリッドを活用しても良い)
xd-layer-export_7

step

1

レイヤーの一番下にある画像をそれぞれ差し替えて、6つのバナーを作成した。
xd-layer-export_8

step

2

作成したバナーを「書き出し対象」に指定する。
xd-layer-export_9

step

3

最後にshiftcommandEで書き出せば、作成したバナーを一気にまとめて画像化できる。
xd-layer-export_10

step

4

関連キーワードからさらに見る

\ この情報をシェアしよう! /

-01_Mac, 02_アプリの使い方・活用方法
-, , ,

Copyright© あなたのスイッチを押すブログ , 2020 All Rights Reserved.