Photoshopの画像アセットの一括書き出しを試してみた

ケースは少ないかもしれませんが、Photoshopでデザインカンプが来る場合も想定して、画像アセットの一括書き出し(生成)を試してみました。

前提条件

  • デザインカンプがPhotoshop(.psd形式)
  • Photoshop ver26.8.1

参考ページ

手順

設定

「ファイル」⇒「自動処理」⇒「ジェネレータープラグイン」⇒「画像アセット」をチェックします。

画像のレイヤ名の修正

画像の書き出しをするためにはレイヤ名に適切な拡張子(.jpg,.png,.svgなど)込みの名前にする必要があります。

レイヤの追加

レイヤ全体に適用される書き出し用のレイヤをトップに追加します。

例「default normal/, 200% 2x/ @2x」
・等倍の画像ファイルがnormalというフォルダに自動作成されます。
・2倍の画像ファイルが2xというフォルダにファイル名に@2xを追加されて自動作成されます。

画像の自動生成

Photoshopのファイルがあるフォルダに「pc-assets」というフォルダが自動生成されその中に「normal」「2x」フォルダが作成されます。

等倍の画像ファイルがnormalというフォルダに自動作成されます。

2倍の画像ファイルが2xというフォルダにファイル名に@2xを追加されて自動作成されます。