[Photoshop] iOS アプリの Retina / non-Retina 画像ファイルを一括で作成する

はじめに

iOS アプリの画像ファイルは Retina 用と non-Retina 用の2パターン用意しなければなりません。しかしながら、1つずつリサイズ、名前をつけて保存…というのはあまりにも非効率です。 そこで Photoshop のバッチ機能を使って Retina / non-Retina それぞれの画像を一気に作成する手順をまとめてみました。

手順

1. フォルダを2つ用意する

まずはフォルダを2つ用意します。ひとつがオリジナル画像ファイルを保存するフォルダ、もうひとつが実際に iOS アプリに使う画像ファイルを保存するフォルダになります。それぞれ original と assets というフォルダ名にしました。

2. Retina 用の画像を作る

次に Retina 用の画像を一式作成します。ポイントは「ファイル名に @2x は付けない」ところです。original フォルダに保存していきます。

3. アクションを作成する

次に Photoshop のアクションを登録します。
アクションとは Photshop の一連の操作 (画像サイズの変更や明るさ・コントラストの変更など) をアクションという単位で記録しておき、ワンクリックで実行できる機能です。
「画像サイズを半分(50%)にする」というアクションと「何もしない」というアクションを作成します。

まずは適当な画像ファイルを開き、「ウインドウ」＞「アクション」を選んでアクションウインドウを表示します。

次にアクションウインドウの右下にある「新規アクションを作成」ボタンをクリックします。

アクション名を「画像を50%にする」という名前にして「記録」ボタンをクリックします。

アクション一覧に「画像を50%にする」という項目が増え「記録開始」ボタンが赤くなっていると思います。このボタンが赤くなっている状態で操作した内容がアクションとして記録されます。

メニューから「イメージ」＞「画像解像度」を選び、画像解像度ウインドウを開きます。

ピクセル数の幅・高さを 50% にします。

最後に「再生/記録を中止」ボタンをクリックしてアクションを停止します。これで「画像を50%にする」アクションが作成できました。

次に「何もしない」アクションを作成しておきます。これは Retina 用画像を生成するときに必要なアクションになります。
「何もしない」という名前で新規アクションを作成し、操作は記録せずにアクションを停止します。

以上でアクションの作成は終わりです。

4. バッチを実行する

バッチを使うにはメニューより「ファイル」＞「自動処理」＞「バッチ」を選択し、バッチの設定ウインドウを開きます。

バッチの設定ウインドウでは、実行するアクション、加工するフォルダの指定、加工したファイルを保存するフォルダ、ファイル名などを指定出来ます。まずは non-Retina 用の画像ファイルを作ってみましょう。下図のように指定します。アクションは「画像を50%にする」を選び、ソースに original 、実行後に assets を指定してOKボタンをクリックします。

これで実行すると non-Retina 用の画像一式が生成できます。

次に Retina 用の画像を作ります。アクションは「何もしない」を選び、ファイル名に「@2x」を拡張子の前に追加します。するとここで加工したデータが「@2x」が付いたファイルとして保存されます。

これで実行すると Retina 用の画像一式が生成できます。

まとめ

以上のような感じで画像の縮小やリネームといった一連のアクションをバッチ処理として実行できます。アクションをうまく作れると面倒な作業を自動化することができるのでぜひ活用しましょう！あとは PNG ファイルを最適化し、ファイルサイズを最小化しておきましょう。ちなみに私は ImageOptim を使っています。