Photoshop向けには「Slicy」という、レイヤーを一括エクスポートする便利なアプリがあるそうです。Retinaディスプレイ用の画像(@2x)も作ってくれるらしい。

Illustratorにはないのでしょうか？

ない。見つからない。

「illustrator retina export」とか、「illustrator retina エクスポート」で検索するも、一向によい結果が出てきません。 Twitterでつぶやいてみても、まるで反応なし。

みんなRetinaと非Retina用の画像、一括エクスポートしたくないのかな？

ないならつくろう

よし、ないならつくろう。 そんでもってブログ書いて、「こんな便利なアプリあるのに、なに車輪の再発明してんだよウケル！！」って教えてもらおう。

Illustratorのスクリプトを書く

以前書いた2つの記事は、このスクリプトために準備してきたものでした。

• Adobe Illustrator スクリプト はじめのいっぽ
• [Illustrator] JavaScriptで指定した領域をエクスポートする

これらを下地に、スクリプトを作成。

命名「aislice」。 ドキュメントに含まれるすべてのスライス領域を、非Retina(100%)とRetina(200%, “@2x”つき)で一括エクスポートするスクリプトです。

俺、このプラグインに反響があったら、「ais」「ice」=「アイス」とかけて、氷山みたいなクールなロゴを追加するんだ…。

使いかた

1. GitHubから圧縮ファイルをダウンロード、展開します。

2. 中の「aislice.jsx」を、お使いのIllustratorのプラグインディレクトリに置いてください。 日本語でOS Xをお使いなら、「/Applications/Adobe Illustrator CC/プリセット/ja_JP/スクリプト」です。

   

3. Illustratorを再起動します。これでスクリプトの設置が完了しました。

4. ドキュメントを作成し、スライスツールでスライスします。

   

5. 各スライスには、エクスポート後のファイル名(拡張子除く)を付けておいてください。 ファイル区切り「/」を加えて、フォルダ階層をつくることもできます。

   

6. メニューの「ファイル→スクリプト→aislice」で、スクリプトを実行します。

   

7. 出力先を聞かれるので、お好きな場所を選んでください。

   

8. エクスポートが始まります。 途中で文字に関する警告が出ることもありますが、あまり気にしなくてください。

   

9 すべてのスライスが、100%と200%(@2x)でエクスポートされました。 カンタンです。

お約束ではありますが、このスクリプトは無保証であり、生じた損害に対し作者は一切の責任を負いません。 大事なファイルは保存してからお試しください。

ご意見・バグなどありましたら、@cocoponまでどうぞ。 GitHubのIssuesでも歓迎です。