はじめに

画像アセットとはレイヤー名やレイヤーグループ名に画像拡張子名を設定すると、
アセットが自働的に生成されるphotoshopの機能です。
サポートされている拡張子はjpg, png, gifの3つです。

画像アセットの設定

まずファイル > 生成 > 画像アセットを選択し、チェックを入れます。
これをしないと拡張子名を指定しても書き出してくれません。

レイヤー名またはレイヤーグループ名に画像拡張子名を指定する。

今回はファイル名を「test.png」とします。

サイズパラメータを指定する。

書き出したいサイズを指定することでphotoshopが相対的に画像を拡大縮小してくれます。
ここで、画質も指定することができます。
(例) 200%test@2x.png
※パラメータ名とアセット名は必ずスペースを追加してください。

今回は185×185のボタン画像を@2xと@3xの画像サイズで書き出したいと思います。
以下のようにアセット名を編集します。
カンマで区切ると、複数ファイルを一度に書き出せるので便利です。
300% test@3x.png,200% test@2x.png,test@1x.png

書き出された画像を確認

アセット名の編集が終わったら保存します。
すると編集ファイルと同じ階層に「ファイル名-assets」というフォルダができました。

書き出されたものはここに保存されます。
また、アセット名の直前にフォルダ名を指定することで、
アセットフォルダの中に、サブフォルダが生成されそこに書き出されます。
例)subfolder/test.png

さいごに

サイズパラメータで書き出した際、書き出したサイズが少数点になると、丸めこまれます。
書き出されたサイズと書き出したいサイズに差異がでてしまうので、注意が必要です。
今回素材だと例に50%で書き出すと、92.5pxになるので、丸めこまれて93pxとなってしまいます。

以下のように個別にサイズパラメータを設定することも可能です。
(例) 100 x 200 test.png