画像アセットで一括書き出しする方法【Photoshop効率化】

この記事の前提条件

対象: Photoshop 最新版
難易度: ★★☆
所要時間: 約10分

Web制作で、1つのPSDファイルからアイコンやボタン画像を何十個も個別に書き出す作業、地味に時間がかかりますよね。「画像アセット生成」機能を使えば、レイヤー名を決めるだけで、保存するたびに自動で書き出しファイルが更新される仕組みが作れます。

⚠️ メニューの場所が変わっています

以前は【ファイル】-【生成】-【画像アセット】という場所にありましたが、最新のPhotoshopでは【ファイル】-【自動処理】-【Generatorプラグイン】-【画像アセット】に移動しています。「生成」というメニュー名が、AIによる画像生成機能と紛らわしくなったための整理と見られます。機能自体が廃止されたわけではないので、古い解説記事のメニュー画像と違っていても慌てず、新しい場所を探してみてください。

目次非表示

レイヤー名に拡張子を付けるだけで書き出し対象になる
サイズや画質も指定できる
まとめ

目次へ

レイヤー名に拡張子を付けるだけで書き出し対象になる

使い方はシンプルです。書き出したいレイヤー(またはレイヤーグループ)の名前を、拡張子付きに変更するだけです。

icon-search.png
icon-close.svg
banner-main.jpg

機能を有効化した状態でこのようにレイヤー名を付けると、PSDファイルと同じ階層に自動的にフォルダが作られ、そこへ画像が書き出されます。以降はPSDを保存するたびに、変更のあった画像だけが自動更新されます。

サイズや画質も指定できる

ファイル名に条件を追記することで、書き出しサイズや画質(圧縮率)も同時に指定できます。

200% icon-search.png     /* 2倍サイズで書き出す(Retina対応) */
icon-close.jpg80%        /* 画質80%のJPEGで書き出す */
100x100 banner-main.png  /* 100×100pxにリサイズして書き出す */

Retinaディスプレイ用に等倍・2倍を両方書き出したい場合は、カンマ区切りで1x icon.png, 2x icon.pngのように2つ同時に指定することも可能です。

⚠️ ファイルが重くなりがちなので、書き出し後の最適化も忘れずに

この機能で書き出したPNG・JPEGは、Web用に最適化された「Web用に保存」機能ほど積極的な圧縮がかかりません。手軽さと引き換えに、ファイルサイズがやや大きめになる傾向があるため、本番サイトに使う画像は、書き出し後にTinyPNGなどの圧縮ツールを一度通しておくと安心です。