本ページはプロモーションが含まれています

Illustrator・web用画像にまとめて保存(書き出し)する便利な方法【図解】

グループ化アセットIllustrator・Photoshop

昔書いた記事でちょっとわかりにくいので動画にしました!
やり方もこっちの方が簡単です💦

 

 

 

 

イラレで素材をたくさん作ったけどこれを一つ一つweb保存するのはめんどう…

web保存

このIllustrator(イラストレーター)で作った素材をまとめてweb用画像(jpeg・pngなどのファイル形式)に保存(書き出し)したい!

そんな時に便利な機能が

ファイル→書き出し→「スクリーン用に書き出し」

です。

スライスツール機能でもまとめて書き出しができますが、このスクリーン用に保存はもっと簡単で便利です!

Illustrator ccから搭載された機能になります。

このページでは、Illustratorで作った素材を複数まとめて一気にweb用画像に保存する方法

ファイル→書き出し→「スクリーン用に書き出し」

をわかりやすくまとめています。

【アードボード】でスクリーン用に書き出し

スクリーン用に書き出しでは、アードボードでの書き出しとアセットの書き出しがあります。

アードボード…作業範囲。キャンパスのようなもの。

アセット…画像のこと。

アセットの書き出しも便利なので後で記述したいと思います。

①アードボードツールで画像を選択する

まずは、web保存したい画像をアードボードツールで一つずつ範囲を選択していきます。

アードボードツール

そのままweb保存したい画像に合わせてクリックすると…。

アードボードが選択されます。

スライスツールのようにドラッグしなくても保存したい画像をクリックするだけなので簡単にできます。

アードボード

下の図は選択ミスで中のテキストがアードボード選択されている状態。

アードボード

↑こうならないようにするには、テキスト部分ではなく背面の円のオブジェクトをクリックするか、最初にweb保存したい画像をグループ化しておきます。

すべての画像にアードボードの選択を行いました。

アードボード

②スクリーン用に書き出し

ilohani次にファイル→書き出し→スクリーン用に書き出しをクリックします。

 

スクリーン用に書き出し

 

 

 

スクリーン用に書き出しの別画面が出ます。

スクリーン用に書き出し

ilohaniチェックポイント

 

アセットではなくアードボード(アセットは後で記述します)

すべてを選ぶと、選択範囲を選ぶことができる

(上はすべてではなく1~5までが選択されている状態です。)

断ち落としを含めると余白が含まれた画像が保存されます。のでチェックははずしています。

書き出し先…保存先です。

初期設定のままにしておくと、どこに保存されてしまうかわからなくなるよ

フォーマット形式

スクリーン用に書き出し

左から

・画像のスケール(1x・2x・3x・4x・1.5x・0.5x…)

・ファイル名の末尾のテキスト名

・ファイル形式(PNG・JPEG・SVG・PDF)

になります。

+スケールを追加でサイズ・品質・ファイル形式の違う画像がまとめて書き出せます。

JPGの後ろの数字は画像の品質(たぶん)

低画質(20)・中画質(50)・高画質(80)・最高画質(100)

webサイト用なら50~80くらいが妥当かと。

アードボードを書き出しをクリックですべての素材が書き出されました。

ひとやすみ

アセットで書き出し

アセットで書き出しの使い方を解説していきます。

同じようにファイル→書き出し→「スクリーン用に書き出し」をクリック

①アードボードではなく、アセットの書き出し表示で

アセットの書き出しパネルをクリックします。

アセット書き出し

別のアセットの書き出し画面が表示されます。

アセット書き出し

※この画面はウインドウ→アセットの書き出しでも出てくるよ!

書き出したい画像を選択しドラッグ&ドロップします。

アセット書き出し

↓このようにアードボード書き出しとは違い、アセットではパーツ事に書き出すこともできます。

アセット書き出し

便利!

書き出したい画像をすべて選択し、【選択範囲から複数のアセットを生成】ボタンをクリック

アセット書き出し

書き出したい画像がまとめて追加されました。

アセット書き出し

選択した画像をドラッグ&ドロップでも追加できるよ。

上の図では、AIと円の画像が分かれて追加されています。

これはAIボタンがグループ化されていないからです。

グループ化せずに追加してしまうと、たとえ選択していてもパーツは別々に追加されてしまいます。

下のパンダちゃんをアセットに追加すると、グループ化していないのでバラバラになっています。

グループ化していないアセット

グループ化したパンダちゃん

グループ化アセット

 

もう一つ、アセットの機能を紹介しておくよ!

アセットの修正

Dwの色を修正すると

アセットのほうも同じように修正されます。

アセットの修正

 

以上がIllustrator(イラストレーター)でweb用画像にまとめて保存する方法スクリーン用に(アードボード・アセット)書き出しの解説でした!