ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

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

2013/09/21, cocopon

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/スクリプト」です。

    2013-09-21 22.37.10

  3. Illustratorを再起動します。これでスクリプトの設置が完了しました。
  4. ドキュメントを作成し、スライスツールでスライスします。

    2013-09-21 22.42.18

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

    2013-09-21 22.46.44

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

    2013-09-21 22.50.30

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

    2013-09-21 22.56.50

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

    2013-09-21 22.58.52

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

    2013-09-21 23.02.52

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

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