Photoshopから画像を書き出す方法はいくつかありますが、スライスして書き出すよりも、もっと楽でスピーディーに作業ができるレイヤーで書き出しという機能がとっても便利です。
書き出しの際に、背景を透過させることも、透明ピクセルをトリミングすることもでき、表示されているレイヤーだけを書き出すこともできますので、パーツ毎に書き出し分けも可能です。
まず、このようなPSDファイルがあるとします。
手順1
書き出したいレイヤーごとに分ける
Photoshopのレイヤーで書き出し機能は、「レイヤー毎に」書き出しますので、書き出したいと思うレイヤーに分けておく必要があります。
背景を透明にしたい場合は、透過のままにしておいてください。
レイヤー名を出力後のファイル名に
レイヤーで書き出し機能を使った場合のファイル名は、Photoshopのルールに基づいて自動で付与されます。
ファイルの先頭文字_連番_レイヤー名となっていますので、レイヤー名を自分の都合のよいファイル名に変更しておきましょう。この時、画像アセットの生成と異なり、拡張子を付けて置く必要はありません。
出力する
メニューバーから、「書き出し」を選び「レイヤーからファイルを書き出し」へ進んでください。
その後、書き出して保存する保存先の設定や、ファイル形式、ファイルの先頭文字などを設定してください。
png画像の場合、背景を透過させることもできます。レイヤーをトリミングにチェックを入れれば、書き出す際に、透明ピクセルをトリミングしてくれます。
ファイルを確認して完了!
出力先に登録したフォルダには、レイヤー数分の出力画像が格納されていれば、出力完了です!
ファイル名の連番を消したい時は、この方法で連番を削除することができます。
拡張子を変えたい時など
レイヤーで書き出し機能は、表示されているレイヤーだけを書き出すということが可能です。
表示されているレイヤーだけのところにチェックを入れて、それぞれの拡張子ごとに出力を分けましょう。
また、同じく、表示されているレイヤーだけを出力する機能を使って、
ファイルの先頭文字を変更すればheader_*****.png や footer_*****.pngなど、整理しやすい名前を自動で付けることができます。