@3x画像対応

先日のiPhone6 Plus発表によってまさかの@3xが発表されました。

すでにリリースされているアプリはひとまずはAutolayoutへの対応と@3x画像の追加が焦点になってくると思います。Autolayoutに関してはやっていないのであればやるしかないです。@3xについては予想していた方はやっていたかもしれませんが、大多数は予想していなかったのではないでしょうか。

これを自動化しようというのが今回のテーマですが、Photoshop CCのGenerator機能を使用するのでPhotoshop CCが必須になります。WindowsがないのでMacでしか確認していません。

ステップは3つです。

1.書き出したいグループにルールにそった名前をつける
2.Generator機能を有効にする
3.保存

1.書き出したいグループにルールにそった名前をつける

今回は"Generator"を使用しますが、この機能はPhotoshop CCから利用可能になりました。Generatorについてはこちらを参照してください。かいつまんで言うとPhotoshopのグループに特定の名前をつけて画像アセットが自動生成を可能な状態にする必要があります。

すでに@2x画像がある場合、@1xは50%縮小、@3xは150%拡大した画像を用意することになります。

たとえばbackgroundという画像名で3種類のサイズが欲しい場合は、レイヤーをまとめたグループに50% background.png, [email protected], 150% [email protected]と名前をつける必要があります。

この名前をつけるのがスゴク面倒なのでスクリプトで解決します。Photoshopのレイヤーなどにアクセスする方法はこちらを参照してください。

今回は選択しているレイヤーの名前を一括で変換するようにします。以下のスクリプト（select_group_rename.jsx）をデスクトップなど適当な場所に保存してください（js初めて書いた）。

var layerSet = app.activeDocument.activeLayer;
var assetName = "50% " + layerSet.name + ".png, " + layerSet.name+ "@2x.png, " + "150% " + layerSet.name + "@3x.png";
app.activeDocument.activeLayer.name = assetName;

スクリプトの適用は ファイル > スクリプト > 参照... から上で保存したファイル（select_group_rename.jsxを選択すれば適用されます。

画像アセットが欲しいグループにbackgroundなど拡張子がない状態の名前をつけて、上記のスクリプトを適用すれば50% background.png, [email protected], 150% [email protected]のようなグループ名に自動変換してくれます。

いちいちPhotoshopから ファイル > スクリプト > 参照... とたどっていくのは面倒なのでスクリプトにショートカットを適用するとかなり楽だと思います。僕はF5を割り当てています。

スクリプトをショートカットにする方法は割愛します。

2.Generator機能を有効にする

Photoshopから ファイル > 生成 > 画像アセット をクリック。
以上です。

3.保存

新規でも、上書き、別名でも好きに保存してください。psdファイルと同じディレクトリに　"ファイル名 1-assets"というフォルダが保存されます。

まとめ＆注意

拡大、縮小時にピクセル単位のズレが生じることがあります。最終的には人の目で判断する必要がありますが、それでもこの方法はかなり時間を短縮できると思います。

ちまちま画像ファイル名を用意しているとかなり時間を無駄にしてしまうので、こういう作業はスパッとやりたいですね。