[Illustrator] Retina画像を一括エクスポートするアプリは本当にないのか?ならばつくろう。

2013-09-21

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

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

ない。見つからない。

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

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

ないならつくろう

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

Illustratorのスクリプトを書く

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

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

命名「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でも歓迎です。

書いている人:cocopon

Developer/Designer. Web/iOSなどのフロントエンドを主軸に、UIデザインから開発全般まで手がける。