PhotoshopからiOS・Android用の素材を書き出す方法

XDやIllustratorだと簡単に一括でiOS/Android向けの素材が書き出せますが、Photoshopの場合わかりにくいですよね。
そこで、PhotoshopからAndroid向け、iOS向け各サイズの素材を書き出す方法をまとめてみました。

!注意点
書き出しは可能ですが、XDやIllustratorのようにリネームやフォルダ分けはされないため、こちらは手作業で変更、移動する必要があります。

◆書き出しまでの手順

今回使用するアートボードがこちらです。

書き出したい素材に合わせて以下の手順で書き出し設定の画面へ遷移してください。

・アートボードごとで書き出す場合
ファイル > 書き出し > 書き出し形式 を選択

・選択した素材ごとで書き出す場合
書き出したい素材のレイヤーを選択、右クリックのメニューから「書き出し形式」を選択

◆書き出し形式画面での設定

書き出し形式画面で詳細を設定していきます。

・サイズ
各、以下のサイズになります。
(作成中の基準となる素材が1xではない場合、倍率を計算する必要があります。)
今回は2xサイズの素材を書き出してみます。

Androidの素材
ldpi   :0.75x
mdpi   :1x (基準)
hdpi   :1.5x
xhdpi  :2x
xxhdpi :3x
xxxhdpi:4x

iOSの素材
1x (基準)
2x
3x

・接尾辞
ここで設定した文字がファイル名の最後に追加されます。
好きな文字を設定することができますが、デフォルトは@の後に設定したサイズが表記されます。(@2xなど)

今回はサイズを2xに設定したので@2xと表記されました。
一度に複数の素材を書き出す場合、同じフォルダ内に書き出されるため、この設定が必要になります。

あとは、素材の形式などを設定し、書き出しボタンを押すと…

指定したフォルダに素材がちゃんと書き出されていたらOKです!

いかがだったでしょうか。
今回手順をまとめみて、XDやIllustratorでリネームとフォルダ分けした状態で書き出されるのは、かなり便利で時短になるな…と改めて実感しました。