デザインデータからweb用素材を書き出す際、Photoshopから画像アセットを使って書き出すことが多いかと思います。
しかし、アイコンやベクターデータをわざわざPhotoshopに貼り付けて画像アセットするのはめんどくさい…
そこで今回は、Illustratorでが画像アセットを使い書き出す方法を紹介します！
その１_パネルからの書き出し
Illustratorで画像アセットを使う方法は基本的に2つあります。
まずは、パネルから書き出す方法を紹介します。
[ ウィンドウ ] > [ アセットの書き出し ]でアセットパネルを表示させます。
オブジェクト、またはグループ化されたパーツをアセットパネルにドラッグ&ドロップします。
すると、アセットパネルに選択したパーツが表示されます。
表示されたパーツを好きな名前に変更して、「書き出し」をクリックして書き出し完了です！
その際に、拡大・縮小や保存形式を選択することができます。
また、「+スケールを追加」をクリックすると、１つのパーツで複数のアセットに書き出すことができます。
PC用、SP用のサイズをそれぞれ一気に書き出すことができるので、とても便利です！
その２_スクリーン用から書き出し
次に、２つ目の書き出し方法を紹介します。
[ ファイル ] ＞ [ 書き出し ] ＞ [ スクリーン用に書き出し… ] で書き出しパネルを表示させます。
表示させると、アートボードごとにパネルが表示されているので、書き出したいアートボードパネルを選択し、その１と同じようにサイズ、書き出し形式を選択し「アートボードを書き出し」をクリックして完了です。
まとめ
パーツごとに書き出したい場合はその１、
アートボードごとに書き出したい場合はその２を使って書き出すと
web用素材の書き出しがIllustrator内で完結することができ、便利だと思います。
先方からいただいたデータがIllustratorだった場合も、この書き出しを使えばうまく活用できるのかな、と思いました。
