2012年6月1日金曜日

Androidの解像度ごとの画像書き出しをIllustratorのスクリプトで効率化する

ピコピコ日記: Illustratorでアートボードを書き出す

・・・日頃は、通常の解像度で作って、書き出し時に解像度を倍にしたものでも書き出して手動で名前を@2xをつけてやってたんですが、面倒くさすぎる。。。
そこで、今日はデザインの作業の途中にJavaScriptでバッチ処理するのを試してみました。・・・

そう。Illustratorで作っていても、AndroidやiPhoneの画像を解像度ごとに保存するのは超面倒。3手間くらいかかる。

画像数が多くなれば多くなるほどこの3手間はどんどん増えていく。そして、そのうち画像を作る気がしなくなって、「まぁかっこいくなくてもいいかぁ」となってくる。

そこで、SVGをアプリで読み込んでその機体の解像度にあわせて動的にビットマップを作るということを試していた。

琴線探査: AndroidのボタンをSVGで描画するには?

何とか実用範囲にはなった。あらかじめビットマップを作っておく方法では実現が難しいことも実現できるようにはなった。

けど、複雑な図形を含むSVGで数が増えてくると読み込みパフォーマンスが相当問題になってくる。

やっぱり、あらかじめ解像度ごとにビットマップを作っておくほか無いのかなぁ・・・面倒だなぁ・・・と思っていた。

そこで、「ピコピコ日記」さんのIllustratorの書き出しスクリプト。

これがあれば、最小限の手間で各解像度ごとのビットマップを作れる!

Thanks「ピコピコ日記」さん!