こんにちは、HOME'Sアプリのデザイナーをしている、こいずみです。
主にiOSのアプリを担当しています。
Webやアプリのデザイナーの方なら必ずやる、パーツ書出し。
この作業って地味に大変ですよね。
とくにスマートデバイスは年を追うごとに様々な解像度のデバイスが発表され、それぞれに合わせたパーツの書出し工数はどんどん膨らんでいくばかりです。
そこで、今回はPhotoshopの便利な機能「Generator」を使って、iOSの３種類の解像度をいっぺんに書出す方法をご紹介します。
Generatorって？
Generatorとは、PhotoshopがCC 14.1から搭載された機能です。今まではWebやアプリ用の書出しと言えば「Web用に保存」だったのですが、Generatorを使うことで、より早く効率的に画像を書出すことができるようになりました。使い方に関しては、結構前から色々なブログにも載ってますがこちらでも一応触れようと思います。
1,PSDファイルを用意
2,書出したいレイヤーや、フォルダに「hoge.png」のように拡張子を追加。
（pngのほかに、gifやjpegでもOK）
3,［ファイル］→［生成］→［画像アセット］にチェックを入れます。
4,PSDファイルと同じ階層に、「◯◯-assets」フォルダが自動生成され、その中に「button.png」と「card_homeskun.png」が自動で書出されています。
@1x、@2x、@3xを一瞬で書出したい。
ここからが本題です。
上記の機能を応用して、iPhone用の３種類の解像度の画像を一瞬で書出すことができます。
先ほどレイヤーやフォルダに付けた「button.png」や「card_homeskun.png」に「50%」や「＠3x」などを付けて、書出しサイズを変更します。
私の場合は、もともとのファイルを@2xサイズで作っているので「50% button.png, button@2x.png, 150% button@3x.png」と付けて生成します。
そうすると先ほどのように、自動でサイズ調整された画像がassetsフォルダ内に書出されます。
やってみるとわかるのですが、境界線の太さや、スマートオブジェクトも綺麗にサイズ変更してくれています。超べんりです。
ただし、座標に端数があったり、スマートオブジェクトじゃないものがあるとボケてしまうこともあるので注意です。
さらに、このフォルダ名をつけるのも、めんどうなうえに手入力してると気づかないうちに間違えたりしていて、Generatorさんが怒って「errors.txt」をassets内に吐き出してしまうので、これも自動化。
この自動化に関しては、当初必死に手入力をして、全身から煙が出始めた私たちデザイナーを見かねて、エンジニアがゴニョゴニョしてくれました。
ざっくり言うと、「50%」や「@2x」や「.png」がレイヤー名やフォルダ名につくようにスクリプトを組んでもらってPhotoshopに組み込みました。
さらにそのスクリプトにショートカットを割り当てたので、今ではレイヤー名「button」とつけてF5を押せば、あっという間に「50% button.png, button@2x.png, 150% button@3x.png」となってくれます。
エンジニアさん本当にありがとう！
まとめ
書出しの時間を減らすことで、より必要なところに時間をさくことができますし、個人的には、これらを使うことで作業効率がかなり上がった気がします。
コーディングメインの制作さんも、もらったデザインファイルからパーツを書出すときにべんりと思います。
ぜひ活用してみてください！
