PhotoshopCC レイヤーで書き出し 機能を使ってみよう

Photoshopから画像を書き出す方法はいくつかありますが、スライスして書き出すよりも、もっと楽でスピーディーに作業ができるレイヤーで書き出しという機能がとっても便利です。

書き出しの際に、背景を透過させることも、透明ピクセルをトリミングすることもでき、表示されているレイヤーだけを書き出すこともできますので、パーツ毎に書き出し分けも可能です。

まず、このようなPSDファイルがあるとします。

file01

手順1

書き出したいレイヤーごとに分ける

Photoshopのレイヤーで書き出し機能は、「レイヤー毎に」書き出しますので、書き出したいと思うレイヤーに分けておく必要があります。
背景を透明にしたい場合は、透過のままにしておいてください。

file02

レイヤー名を出力後のファイル名に

レイヤーで書き出し機能を使った場合のファイル名は、Photoshopのルールに基づいて自動で付与されます。
ファイルの先頭文字_連番_レイヤー名となっていますので、レイヤー名を自分の都合のよいファイル名に変更しておきましょう。この時、画像アセットの生成と異なり、拡張子を付けて置く必要はありません。

ファイル名は【ファイルの先頭文字_連番_レイヤー名】となります

出力する

メニューバーから、「書き出し」を選び「レイヤーからファイルを書き出し」へ進んでください。

その後、書き出して保存する保存先の設定や、ファイル形式、ファイルの先頭文字などを設定してください。

スクリーンショット 2016-06-14 18.07.26

file03

png画像の場合、背景を透過させることもできます。レイヤーをトリミングにチェックを入れれば、書き出す際に、透明ピクセルをトリミングしてくれます。

file04

スクリーンショット 2016-06-14 18.10.39

ファイルを確認して完了!

出力先に登録したフォルダには、レイヤー数分の出力画像が格納されていれば、出力完了です!

スクリーンショット 2016-06-14 18.11.13

ファイル名の連番を消したい時は、この方法で連番を削除することができます。

拡張子を変えたい時など

レイヤーで書き出し機能は、表示されているレイヤーだけを書き出すということが可能です。
表示されているレイヤーだけのところにチェックを入れて、それぞれの拡張子ごとに出力を分けましょう。

また、同じく、表示されているレイヤーだけを出力する機能を使って、
ファイルの先頭文字を変更すればheader_*****.png や footer_*****.pngなど、整理しやすい名前を自動で付けることができます。