頑張らない!でも諦めない!必死にならずにええかげん

Illustrator(.ai)の複数アートボードを一括で、PhotoShopから高画質にWeb用に保存

      2014/11/22

Google or AdMax Promotion(it)

Illustratorで作業する際に複数アートボードで素材を作成することはよくあるでしょう。 そんなIllustratorから画像化をする際には、
Web用に保存(Web およびデバイス用に保存) で出力することも多いでしょう。

しかしWeb用に保存では1アートボードごとに作業が必要だったりします。
書き出しなら一括で行えますが、ファイルサイズが大きくなりがちです。
そんな画像へのエクスポートをPhtoshopを併用し簡単に一括で行う方法をご紹介します。

はじめに

私はこれまでIllustratorで複数アートボードで素材の作成を行って、
アートボードに命名したアートボード名で書き出しを利用していました。

しかしこれではエクスポート後のファイルがWeb用に保存を利用した時よりも若干大きくなります。

またIllustratorファイル(.ai)をPhotoshopで開き、
PhotoshopでWeb用で保存した際の画像よりもやはりどこか汚く見えてしまいます。

そこでどうにか出力した画像が綺麗でかつファイルサイズが小さくできないものかと悩んできました。
今回、一応はやりたかったことが満たせましたのでご紹介しておきます。

素材の準備

例として、以下のようなAIデータがあるとして、こうしたファイルを画像化することを例とします。
このファイルは以下投稿で利用したファイルを作成した際のものです。
キーボードアイコン素材

この素材を作成した際の構成として、
各キーボードキーごとにアートボードを作成し、
各キー名に合わせてアートボード名を割り当てています。

01_多数のアートボードとアートボード名

多数のアートボードとアートボード名

IllustratorによるWeb用に保存

Web用に保存を利用した場合、適切に圧縮が効いた状態で保存されますが、
1つ1つ保存する必要があると共に、ファイル名もここに指定する必要があります。

[ファイル]-[Web およびデバイス用に保存]を選択し実行します。

02_Web用に保存の実行

Web用に保存の実行

選択中のアートボードに対して、Web用に保存ダイアログが開きます。

03_選択中アートボードのWeb用に書き出し

選択中アートボードのWeb用に書き出し

[保存]をクリックして表示されるダイアログのデフォルトファイル名もaiファイルのファイル名で、
アートボード名は全く利用されません。

04_Web用に保存ファイル名はaiファイル名

Web用に保存ファイル名はaiファイル名

実際に書き出しを行うと、以下のように出力されます。
※ここでは文字の違いを表すため、Webページで例示します。

35_IllustratorによるWeb用に保存

IllustratorによるWeb用に保存

この方法でも一応は書き出しが実行されますし、画像をあらかじめラスタライズしておくことで、
比較的きれいな出力結果が得られます。

手間がかかることとファイル名の命名を毎回行うことが苦で無いようであれば、
この方法も有効ですし、おそらくこの方法で出力されている方もおられるでしょう。

Illustratorによる書き出し

また、ファイルサイズは目をつむって書き出しを利用するという方法も一つの選択肢です。

[ファイル]-[書き出し]を選択し実行します。

05_書き出しの実行

書き出しの実行

書き出しダイアログが開いたら、書き出しファイル種類をpngなどを選択した場合、
[各アートボードごと]にチェックを付与できるようになります。
※JPEG、TIFF等を選択した場合もアートボードオプションは選択可能

アートボード範囲に対して出力したい範囲を指定します。

06_各アートボードオプションの指定

各アートボードオプションの指定

書き出しオプションで[スクリーン(72ppi)]を選択することで、
スクリーン解像度にて出力が行われます。

07_書き出しオプション

書き出しオプション

選択したアートボードが順次出力されます。

08_指定アートボード範囲の書き出し

指定アートボード範囲の書き出し

実際出力されると「aiファイル名+”_”+アートボード名+拡張子」で保存されます。

09_アートボード名付加による書き出し

アートボード名付加による書き出し

書き出しのスクリーン(72ppi)による出力結果は以下のように出力されます。
Web用に保存よりも若干荒い印象になります。
※解像度を150ppiなどとすれば緻密になりますが、当然ファイルサイズも肥大化します。

34_Illustratorによる書き出し

Illustratorによる書き出し

それぞれの書き出しには一長一短があります。
その為、ここでは、1手間追加します。

IllustratorとPhotoshopの併用

書き出しを利用した際には、一括してファイルが出力でき便利な反面、
画像が若干荒くなってしまったりもします。

Web用に保存ではすべてのファイルに手で命名する必要があり非常に面倒です。

Illustratorを複数アートボードで作成している場合、
アートボードは個々のファイルとして出力することができます。

そこで、Illustratorからアートボードを各aiファイルに保存します。

Illustratorファイルをアートボードごとに分割保存

[ファイル]-[別名で保存]を選択します。

10_別名で保存の実行

別名で保存の実行

ファイル保存ダイアログが表示されます。
ここでは既存ファイル名のままファイル名が表示されます。
既に同名ファイルが存在すると上書きダイアログが表示されますが、そのまま[はい]で構いません。

11_ファイル名はaiファイル名

ファイル名はaiファイル名

Illustratorオプションが表示されたら[各アートボードを個別のファイルに保存]に
チェックを付与し、アートボード範囲を指定します。

12_各アートボード書き出しオプション

各アートボード書き出しオプション

出力が完了すると「aiファイル名+”_”+アートボード名+拡張子」にて
アートボードが別名で保存されます。

13_指定アートボード範囲で別名保存

指定アートボード範囲で別名保存

当然、このファイルをIllustratorで開いて、
1つ1つWeb用に保存をすれば、とりあえずのファイル名を入力する手間は省けます。

Photoshopで出力AIファイルの読み込み

PhotoshopではAIファイルをPDF形式として読み込みことができます。

PhotoshopでIllustratorファイルを開きます。

14_Photoshopでaiファイルのオープン

Photoshopでaiファイルのオープン

PDFの読み込みダイアログで[仕上がりサイズ]を選択し開きます。

15_仕上がりサイズで読み込み

仕上がりサイズで読み込み

当然ながらPhotoshopを利用したWeb用に保存も行えます。

16_Web用に保存実行

Web用に保存実行

Webおよびデバイス用に保存のダイアログにて、
ファイル形式や画像サイズなどを指定し保存を行います。

17_Web用に保存オプション

Web用に保存オプション

ファイルの保存ダイアログでは、
Illustratorでアートボードごとに出力した「aiファイル名+”_”+アートボード名+拡張子」で、
既にAIファイルがアートボード名を保持していますので、
Photoshopから出力する際にも、アートボード名が引き継がれます。

18_aiファイル名による保存

aiファイル名による保存

こうしてPhotoshopからWeb用に保存を実行すると、
Illustratorから出力するよりもアンチエイリアスなどが効いた綺麗な画像が生成されます。

36_PhotoshopによるWeb用に保存

PhotoshopによるWeb用に保存

この一旦AIファイルを書き出す方法を利用すると、
ファイル名にアートボード名が含まれた状態で処理が行えて非常に楽に作業が行え、
画像の品質も高く処理が行えます。

では、この処理を自動化します。

PhotoshopWeb用に保存の一括処理

Photoshopにはバッチ保存という機能があります。
このバッチ保存を利用して、PhotoshopによるWeb用に保存を一括して行うように設定します。

カスタムアクションの作成とアクションの作成

まず、作業手順をアクションとして登録します。
アクションをセット内に登録するために[新規セットを作成]をクリックします。
表示されたダイアログにセット名を入力します。

19_アクションの新規セット作成

アクションの新規セット作成

セットのフォルダが作成されたら[新規アクション]をクリックしアクションを作成します。
表示されたダイアログにアクション名を入力し[記録]をクリックします。

20_新規アクションの作成

新規アクションの作成

アクションウィンドウ内の記録アイコンが[]で表示され記録中になります。

21_記録の開始

記録の開始

先ほど同様に[Webおよびデバイス用に保存]をクリックします。

22_Web用に保存の実行と記録

Web用に保存の実行と記録

出力ファイル形式やファイルサイズを指定し[保存]をクリックします。

23_Web用に保存とオプションの設定

Web用に保存とオプションの設定

ファイル保存ダイアログが表示されたら、出力先のフォルダを指定します。

ここで選択したフォルダに対して今後出力されますので、汎用的な書き出し用のフォルダを指定しておきます。

またフォルダ名にマルチバイト(日本語)を含む場合にはエラーになりますので、
フルパスに日本語が含まないようにします。

[保存]をクリックし、デフォルトで表示されたファイル名のまま保存します。

24_保存の実行と記録

保存の実行と記録

アクションに対して「書き出し」が記録されます。

25_書き出しの記録結果

書き出しの記録結果

[ファイル]-[閉じる]をクリックします。
ファイルの保存ダイアログが表示されたら[いいえ]をクリックして保存せず閉じます。

26_閉じるの実行と記録

閉じるの実行と記録

アクションに対して「閉じる」が記録されます。
アクションは以上で終了ですので[再生/記録を中止]をクリックして停止します。

27_閉じるの記録と記録終了

閉じるの記録と記録終了

アクションの記録は完了です。この作業を複数ファイルで一括して実行します。

実行対象のIllustratorファイルを開く

通常、Photoshopで開けるファイルであれば、一括して開くところも自動化できるのですが、
Illustratorファイルは「読み込み」といった処理になる為、
あらかじめPhotoshopで開いておき、作業を始めるようにします。

[ファイル]-[開く]を選択します。

28_ファイルを開く

ファイルを開く

処理対象のIllustratorファイル(ai)をすべて選択して開きます。

ファイルを開くたびに「PDFの読み込み」ダイアログが表示されますので、
最初に開くときのみ「仕上がりサイズ」を選択して開き、
あとは[OK]をクリックを連打するか、[Enter]を連打してすべて開きます。

29_aiファイルをすべて開く

aiファイルをすべて開く

PhotoshopにてすべてのIllustratorファイル(ai)が開かれたら準備完了です。

30_ファイルのオープン確認

ファイルのオープン確認

カスタムアクションのバッチ処理実行

処理対象のファイルをすべて開いた状態で[ファイル]-[自動処理]-[バッチ]を選択します。

31_自動処理・バッチの実行

自動処理・バッチの実行

バッチダイアログが開きます。
アクションは先ほど作成し、記録したアクションを選択します。
ソースは[開いたファイル]を選択します。
実行後は[なし]を選択します。
[OK]をクリックしてバッチ処理を実行します。

32_作成済みアクションの選択

作成済みアクションの選択

アクションを記録した際に書き出したフォルダに対して、
開いていたAIファイル全てに対してWeb用に保存が実行され保存されます。

33_実行結果

実行結果

バッチ処理が実行されていく過程は以下の動画のように勝手に書き出されファイルが閉じられていきます。

このようにAIファイルを一旦書き出す必要はありますが、
Illustratorから書き出しによって一括出力を行うよりも綺麗な画質かつ圧縮された状態で、
一括処理を行うことができるようになります。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

Illustratorを利用していると、簡単なためついつい「書き出し」を使ってしまいますが、
pngなどでは圧縮されたファイル形式によって保存することも可能です。

それがWeb用に保存なのですが、毎回アートボードの数だけ作業が必要になります。

一旦AI形式で保存することで、Photoshopを利用して一括で処理させることができるようになります。

尚、上記の各出力結果とファイルサイズについては、以下のようになります。

出力 ファイルサイズ 出力ファイル
Illustratorによる「Web用に保存」 35 KB 35_IllustratorによるWeb用に保存
Illustratorによる「書き出し」 89 KB 34_Illustratorによる書き出し
Photoshopによる「Web用に保存」 49 KB 36_PhotoshopによるWeb用に保存

IllustratorによるWeb用に保存のファイルサイズが若干小さい結果にはなりますが、
大差ないファイルサイズで文字の周りのギザギザ感などが少なくアンチエイリアスが効いている
PhotoshopによるWeb用に保存の方がパフォーマンスがいいように私は感じています。

ただしっかりと、ラスタライズを行った後にIllustratorでWeb用に保存を行っても、
比較的きれいな画像で出力がされている印象ではあります。
ただ、Illustratorから画像を出力して荒い画像になってしまう場合には、
Photoshopから出力するといいでしょう。

参考

こちらで便利な方法を紹介してくれていたから応用ができた。
Photoshop CS5でフォルダ内の画像を一括してリサイズする方法 | CREAMU


上記ソフトウェア名及び、Adobe、Acrobat、Adobe Reader、Acrobat Reader、
Adobe ロゴ、Adobe AIR、Flash、Flash Playerは、
Adobe Systems Incorporatedの米国ならびに他の国における商標または登録商標です。
Adobe Illustrator®、Adobe Photoshop®は、
Adobe Systems Incorporatedの米国ならびに他の国における商標または登録商標です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Illustrator, デザイン ,

  関連記事