photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。

「レイヤーからの画像アセット」機能で何ができるのか

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

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

基本の使い方

1. 書き出したいオブジェクトのあるレイヤー名の末尾に「.png」「.jpg」などを追加

2. ファイル＞生成＞画像アセット　にチェックを入れる

3. すると、バックグラウンドでファイルと同じディレクトリに「ファイル名-aseets」というフォルダが勝手に作られて、その中にパーツ画像が保存されます

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

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

レイヤーで定義しておけば、「ファイル＞アセットを抽出」ウィンドウで
細かな操作もできます

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

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

「レイヤー」であれば何でも書き出せる

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

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

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

つまりは、

1.複数レイヤーの場合は、パーツとして書き出すすべてをグループ化
2.単体レイヤーの場合は、そのままレイヤー名に命名規則を追加

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

＝　一気にレイヤーを書き出せる

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

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

＝　スライドのパーツなど、隠れたオブジェクトも一気に。

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

パラメータのバリエーション

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

利用の注意点

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

☆

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