Contact us
   Blog

Blog

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など、整理しやすい名前を自動で付けることができます。

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you