昔書いた記事でちょっとわかりにくいので動画にしました！
やり方もこっちの方が簡単です💦
イラレで素材をたくさん作ったけどこれを一つ一つweb保存するのはめんどう…
このIllustrator（イラストレーター）で作った素材をまとめてweb用画像（jpeg・pngなどのファイル形式）に保存（書き出し）したい！
そんな時に便利な機能が
です。
スライスツール機能でもまとめて書き出しができますが、このスクリーン用に保存はもっと簡単で便利です！
Illustrator ccから搭載された機能になります。
このページでは、Illustratorで作った素材を複数まとめて一気にweb用画像に保存する方法
ファイル→書き出し→「スクリーン用に書き出し」
をわかりやすくまとめています。
【アードボード】でスクリーン用に書き出し
スクリーン用に書き出しでは、アードボードでの書き出しとアセットの書き出しがあります。
アードボード…作業範囲。キャンパスのようなもの。
アセット…画像のこと。
アセットの書き出しも便利なので後で記述したいと思います。
①アードボードツールで画像を選択する
まずは、web保存したい画像をアードボードツールで一つずつ範囲を選択していきます。
そのままweb保存したい画像に合わせてクリックすると…。
アードボードが選択されます。
スライスツールのようにドラッグしなくても保存したい画像をクリックするだけなので簡単にできます。
下の図は選択ミスで中のテキストがアードボード選択されている状態。
↑こうならないようにするには、テキスト部分ではなく背面の円のオブジェクトをクリックするか、最初にweb保存したい画像をグループ化しておきます。
すべての画像にアードボードの選択を行いました。
②スクリーン用に書き出し
次にファイル→書き出し→スクリーン用に書き出しをクリックします。
スクリーン用に書き出しの別画面が出ます。
チェックポイント
①アセットではなくアードボード（アセットは後で記述します）
②すべてを選ぶと、選択範囲を選ぶことができる
（上はすべてではなく1~5までが選択されている状態です。）
③断ち落としを含めると余白が含まれた画像が保存されます。のでチェックははずしています。
④書き出し先…保存先です。
初期設定のままにしておくと、どこに保存されてしまうかわからなくなるよ
⑤フォーマット形式
左から
・画像のスケール（1x・2x・3x・4x・1.5x・0.5x…）
・ファイル名の末尾のテキスト名
・ファイル形式（PNG・JPEG・SVG・PDF）
になります。
+スケールを追加でサイズ・品質・ファイル形式の違う画像がまとめて書き出せます。
JPGの後ろの数字は画像の品質（たぶん）
低画質（20）・中画質（50）・高画質（80）・最高画質（100）
webサイト用なら50～80くらいが妥当かと。
アードボードを書き出しをクリックですべての素材が書き出されました。
アセットで書き出し
アセットで書き出しの使い方を解説していきます。
同じようにファイル→書き出し→「スクリーン用に書き出し」をクリック
①アードボードではなく、アセットの書き出し表示で
アセットの書き出しパネルをクリックします。
別のアセットの書き出し画面が表示されます。
※この画面はウインドウ→アセットの書き出しでも出てくるよ！
書き出したい画像を選択しドラッグ＆ドロップします。
↓このようにアードボード書き出しとは違い、アセットではパーツ事に書き出すこともできます。
便利！
書き出したい画像をすべて選択し、【選択範囲から複数のアセットを生成】ボタンをクリック
書き出したい画像がまとめて追加されました。
選択した画像をドラッグ＆ドロップでも追加できるよ。
上の図では、AIと円の画像が分かれて追加されています。
これはAIボタンがグループ化されていないからです。
グループ化せずに追加してしまうと、たとえ選択していてもパーツは別々に追加されてしまいます。
下のパンダちゃんをアセットに追加すると、グループ化していないのでバラバラになっています。
グループ化したパンダちゃん
もう一つ、アセットの機能を紹介しておくよ！
Dｗの色を修正すると
アセットのほうも同じように修正されます。
以上がIllustrator(イラストレーター）でweb用画像にまとめて保存する方法スクリーン用に（アードボード・アセット）書き出しの解説でした！
