2013/9/9 に、Adobe Photoshop CC がバージョン 14.1 にアップデートされました。
アップデートされた機能の中で、Web制作者にとって重要なのは画像アセット（Generator）機能だと思います。
この記事では、以下のことについて解説しています。
- Photoshop の画像アセット（Generator）機能の使い方
- 画像アセット（Generator）機能を使ったほうが良いケースと使わないほうが良いケース
- 画像アセット（Generator）機能の問題点
- 画像アセット（Generator）機能の注意点
- Photoshop 14.1 のバグ
従来のスライス機能の問題点
Photoshop でWebデザインカンプを制作してから Dreamweaver などでコーディングする際、Webデザインカンプからばらばらに画像を切り出す必要があります。
従来は、ばらばらに画像を切り出す機能として「スライス」という機能が搭載されていました。
スライス機能の使い方は、私の著書 プロになるためのWebデザイン入門講座 で詳しく解説しています。
スライス機能を使うと、ばらばらに画像を切り出すことはできるのですが、
- 1つ1つのスライスにそれぞれファイル名を付けなければならない
- つけたファイル名を確認したり、名前のつけ忘れがないか確認するのが面倒
- スライス領域を示す青い線が邪魔
- 背景レイヤーなどを非表示にしないと、透過画像を書き出せない
といった面倒な点があり、多くの方にあまり好かれていない機能だったようです。
そこで、最近はレイヤー名を「logo.png」のようなファイル名にしておけば、このファイル名・画像形式で書き出せるというスクリプトやアプリケーションが流行し始め、Mac では Slicy というアプリケーションが定番になりつつありました。
そして今回、この Slicy と似たような機能が Photoshop CC に標準機能として搭載されました。
基本的な使い方
たとえば、以下のようなボタンを書き出したいとします。
これは「角丸長方形」と「テキスト」の2つのレイヤーでできています。
ここで「角丸長方形」のレイヤー名を「home.png」などにして画像アセット（Generator）機能を使った場合、「テキスト」が含まれないためボタンとしては不完全なものになります。
まず、「角丸長方形」と「テキスト」の2つのレイヤーを選択し、Ctrl+G（Mac はcommand+G）キーを押してグループ化し、そのグループ名を「home.png」とします。
そして、メニューの「ファイル＞生成＞画像アセット」にチェックを入れておきます。
その後PSDを保存すると、PSDと同じフォルダー内に「PSDファイル名-assets」というフォルダーができ、その中にボタンの画像が書き出されます。
背景もきちんと透過しています。
PSDファイルを上書きした場合は、自動的に「PSDファイル名-assets」フォルダー内の画像も作り直されます。
オプション
特に指定がない場合、PNG は 32bit（フルカラー+透過）、JPEG は画質 80% で書きだされます。
PNG を 8bit（256色）で書き出したい場合は「home.png8」のように最後に 8 をつけ、JPEG を画質 60% で書き出したい場合は「home.jpg6」のように最後に 6 をつけます。スペースは入れません。
高解像度画像の生成
たとえば、通常サイズの画像のほかに Retina ディスプレイモデルの MacBook Pro などのために高解像度版の画像が必要な場合は、レイヤー名にカンマ（ , ）を入れ、倍率と高解像度版のファイル名を入れることで同時に書き出すことが可能です。
画像アセット（Generator）機能の問題点、使いにくい点
Slicy をお使いの方はお気づきだと思いますが、画像アセット（Generator）機能では、高解像度画像を生成したい場合のレイヤー名の指定方法が冗長です。
先ほどの例では、Slicy では「home@2x.png」と指定するだけですみます。
また、Slicy ではカンバスからはみ出した部分は書き出す画像に含まれませんが、画像アセット（Generator）機能では含まれてしまいます。
カンバスからはみ出した部分をマスクした場合は書き出されませんので、カンバスからはみ出す部分はあらかじめマスクしておくことをおすすめします。
また、書き出すフォルダーは、常に「PSDファイル名-assets」フォルダーとなり、現状フォルダーの指定はできないようです。
Photoshop.com のブログ記事（英語）を読む限り、Generator は Node.js でできており、ソースコードは GitHub で公開されている ようなので、指定したフォルダーに吐き出す拡張を作ることは難しくはなさそうな気がします。
画像アセット（Generator）機能を使ったほうが良い場合、使わないほうがいい場合
前述した通り、既に Slicy を持っている方はあまり乗り換えるメリットがないと思います。
逆に使ったほうが良いケースとしては、Windows ユーザーでスライス機能に不満を感じている方だと思います。
Slicy は Windows 版をリリースする予定はないようですし、このまま Slicy による書き出しが主流になったらどうしようかなと思っていました。
（個人的には問題ないのですが、Webデザインスクールには Windows を使っている
方もいますし、Mac と Win 間で PSD データのやり取りがしづらくなるなとか）
今回、画像アセット（Generator）機能が標準で搭載されたおかげで、Photoshop CC であれば、とりあえず Mac と Win 間で PSD データのやり取りをしながらWebデザインカンプ制作ができそうでよかったです。
画像アセット（Generator）機能の注意点
「PSDファイル名-assets」フォルダーは、PSD を保存するたびにフォルダーごと一旦削除され、再度作り直されます。
このフォルダーに必要なファイルを移動してきたりしないでください。
また、ファイルは追加されているわけではないので、レイヤーを削除して PSD を保存し直すとファイルが無くなってしまいますのでご注意ください。
