ちょっと話題の記事

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

2013.04.04

はじめに

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

手順

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

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

asset01

2. Retina 用の画像を作る

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

asset02

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

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

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

asset03

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

asset04

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

asset05

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

asset06

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

asset07

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

asset08

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

asset09

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

asset10

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

4. バッチを実行する

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

asset11

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

asset12

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

asset13

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

asset14_2

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

asset15_2

まとめ

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