photoshopの「レイヤーからの画像アセット」機能。
前から気になっていたのですが、やっと試せました。
これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの
使い方をすこし解説します。

今までは、psdカンプを作成したあと、「スライス」ツールを使って
スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、
「Web用に保存」ウィンドウを開き、出力設定を行い、
さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。

「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが
上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。


スライスは、「スライスの範囲」をもとに書き出していましたが、
「レイヤー」をもとに書き出すことになります。

といっても、レイヤー全部を書き出すわけではなくて
「.png」「.jpg」など、書き出したい拡張子をレイヤー名に追加したもののみ出力されますのでご安心を。


こちらも、レイヤー名の変更はリアルタイム的に認識します。書き出しサイズを変更したり、書き出さないアセットを決めたりできます。

レイヤー名の命名は、「.（ドット）」や「@」で監視しているようなので、メールアドレスなどの文字レイヤーが認識された場合は、.txtファイルでエラーを吐き出してくれます。


レイヤーという言葉、なんとなくシングルのシンプルなレイヤーを思い浮かべませんか・・？
どんなレイヤーがOKなのか？と疑問に思っていろいろやってみましたが
なんでもOKっぽいです。

レイヤーグループでも、クリッピングマスクされているレイヤーも、
文字レイヤーも、スマートオブジェクトも、もちろんラスタライズされたレイヤーも。
色調補正レイヤーと、補正がかかっている先もコミコミでOK。

なので、
たとえばクリッピングマスク化しているけど、画像全体を書き出してCSSで制御したい場合は、画像そのものに「.jpg」などをつけて全体書き出し（ドキュメントの外に出てても大丈夫そう）したらよくて、
クリッピングマスク化した部分だけで切り出したいときは
マスク元のオブジェクトと、画像をグループ化して、グループ名に「.jpg」と命名すればいいのです。

つまりは、


と、このルールさえわかっていればいいのかなと。


たとえば、こういうカンプの場合。（フリーのPSDをお借りしました。）
一番上の写真背景のエリアをスライスで切り出すとすると、
前景にあるものを先にスライス化して、そのあと背景に移りますよね。
それが、一気にできます。





一部ですが、背景の画像と、モバイルナビゲーションの両方を設定できているのがおわかりでしょうか・・。（実際には、ナビゲーションのボタンはfont awasomeでやるほうが今風かもしれませんが、サンプルのため。）
赤枠のパーツ化したい部分が一気に書き出せるのは幸せですね。


大きなアイキャッチスライド、背景スライドのパーツなど、
実際には下にあるけれど、重なりなどでカンプ上に表示されない部分も書き出せるということなんですよね。
カンプ上にこういった情報を入れておけるのはうれしいですね。


こちらは、photoshopのヘルプが詳しいです。細かくサイズなども書き出せそうですね。
もちろん、２倍も3倍も0.5倍も自由にできます。
→画質パラメーターとサイズパラメーターの指定（Photoshop ヘルプ）


注意点とまではいわないかもしれないですが、
レイヤーごとに書き出すため、各レイヤーがクリーンな状態であったほうが使いやすいとおもいます。
レイヤーの整理も、そこそこやっておいたほうが、後で楽かなと思いました。


やり方さえ慣れてしまえば、すごく便利な機能だとおもいます。
ご参考にどうぞ。

関連記事

• photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。
• プレゼンやセミナーのスライドのばに的考え方と、作り方。
• ストロークスタイルのフリーアイコンセットいろいろ。
• Webサイトデザインのストックの探し方と、利用のしかた。
• FontAwesome のPhotoshop機能拡張「FontAwasomePS」