この進化はズルイ！Generatorテクノロジーを使ったPhotoshop CCの「画像アセット」
Photoshop CCが14.1にアップデートされ、「Generatorテクノロジー」により、それぞれのレイヤーを個別の画像ファイルとして自動的に書き出す「画像アセット」機能が追加されました。
Webサイト制作では、カンプと呼ばれる画像ファイルを作成後、「スライス」作業によって、書き出す領域を指定し、書き出し作業を行うというフローが必要でした。Photoshop CC（14.1）の「画像アセット」機能を使うことで、この作業（スライスと書き出し）が不要になるだけでなく、高密度解像度対応の画像書き出しにも対応するなど、この進化は、ちょっとズルイ！です（Fireworksの熱心なユーザーなのですが、こっちに肩入れ??? という意味で）。
作業手順は次のとおり。
- PSDファイルは英数字で設定します（例：test.psd）。
- ［ファイル］メニューの［生成］→［画像アセット］をクリックします。
- 画像として書き出したいレイヤーのレイヤー名に「logo.png」のように拡張子を追加します（対応する画像形式はpng/gif/jpeg）。
- このタイミングで「test.psd」と同階層に「test-assets」フォルダーが自動的に作成され、その中に「logo.png」が自動的に作成されます。
Photoshopで修正を加えると、ほぼリアルタイムに修正内容は反映されます。
生成ルール
レイヤー名の設定によって、ファイル形式だけでなく、大きさや画質などの設定を行うことができます。
- うまく生成されない場合には「errors.txt」がはき出される
- 不要になったファイルは、自動的に消去される
ファイル名
| レイヤー名の設定 | 生成される画像ファイル | |
|---|---|---|
| 複数のファイル | logo.png, logo.gif | logo.png logo.gif |
| 大きさ指定（ピクセル） | 250x150 logo.png | logo.png（幅250ピクセル、高さ150ピクセル） |
| 大きさ指定（%） | 200% logo-retina.png | logo-retina.png（200％の大きさ） |
| 組み合わせ | 200% logo@2x.png, logo.png | logo@2x.png（200％の大きさ） logo.png |
- 「250x150 logo.png」のように指定すると、幅250ピクセル、高さ150ピクセルの画像が書き出されるが、縦横比が狂ってしまうので注意
- 「200% logo-retina.png, logo.png」のように指定すれば、200％に拡大した「logo-retina.png」とオリジナルサイズの「logo.png」が書き出される（でも、今的には「200% logo@2x.png, logo.png」と指定するのがよさげ）。「200% logo.png, logo.png」のように同じファイル名を付けないように注意。
- 「logo.png, logo.gif」のようにレイヤー名を設定すると、「logo.png」と「logo.gif」の2つの画像が生成される
書き出し設定（最適化／クオリティ）
| レイヤー名の設定 | 書き出しオプション | |
|---|---|---|
| PNG | logo.png | 半透明のアルファチャンネルを持つPNG-24 |
| logo.png8 | PNG-8 | |
| logo.png24 | PNG-24 | |
| JPEG | .jpg .jpg8 | 画質80% |
| .jpg1 | 画質10% | |
| .jpg10 | 画質100% | |
| logo.jpg50% | 画質50% | |
| logo.jpg100% | 画質100% |
- デフォルトのPNG形式は、半透明のアルファチャンネルを持つPNG-32形式。「.png8」や「.png24」のように指定することで書き出しオプションを変更できる
- 「.jpg1」から「.jpg10」のように10段階でJPEGの書き出しクオリティを変更できる（指定なしの場合は「.jpg8」と同様）。また、「logo.jpg100%」や「logo.jpg50%」のように「%」付きで指定することも可能。
- GIFには書き出しオプションがない
備考
デフォルトでオンになっているハズですが、うまく機能しない場合、［プラグイン］環境設定で［Generatorを有効にする］オプションにチェックが付いているか、確認してみてください。
ご参考：
- 「Generator（生成）」について - Photoshopの使い方 | Adobe Photoshop Magazine
- Introducing Adobe Generator for Photoshop CC | PHOTOSHOP.COM BLOG
- Adobe Generator for Photoshop CC の使い方 - akihiro kamijo
- Photoshop Help | Generate image assets from layers | Photoshop CC
- Node.js＋Photoshop: Generatorの設計と使い方 | // andy hall
追記：
え、それ、Slicyでできるやん！
というツッコミをいただきました。
- 「Slicy」Photoshopからのスライス作業が死ぬほど楽になるツールが便利だ！ | OZPAの表4
- 【Webデザイナー・コーダー向け】震えるほど便利なPSDスライスツール「Slicy」 - Flash Black
- Slicyで面倒なPSDのスライス作業を効率化 ! : アシアルブログ
- 【奇跡の神アプリSlicy】最も効率的なスライス作成方法はこれだ！【photoshopでパーツ出し】 - NAVER まとめ
ま、そうなんですけど、自動更新はできないですよね...と思っていたところ、Slicyはあっと驚くほど便利だった。 | colopixieによると「Repeat Automatically」（自動更新）機能があるみたいですね。これは未チェックでした。
でも、やっぱりPhotoshop本体だけで完結できるのは嬉しいですね。ということで、CCにされていない方には、Slicy、オススメです。
Slicyのほか、PNG EXPRESSというツールもあるようです。
また、Fireworksには、John Dunning氏による「Generate Web Assets」という拡張機能があると情報をいただきました。
Illustrator CC用にも、この「Generatorテクノロジー」が搭載されるといいな、と思います。
追記（2013年9月10日）：
Stocker.jpにて、非常に実務的なレビューが掲載されました。必見です。
追記（2013年11月14日）：
「画像アセット」機能を使うときのファイル名の設定には、先週末に発表された「Adobe Layer Namer」を使うと便利です。
追記（2014年3月31日）：
複数バージョンがあると、最適なExtension Managerが開かなくてインストールができないことがあります。
この場合には、先にExtension Manager CCを起動して、command+Oで該当エクステンションを選択するのがスマートです。
追記（2015年6月5日）：
余白をつけたい場合には、マスクを設定します。
- Photoshop CC の画像アセットで余白含めて出したい時はマスク / Maka-Veli .com
- 画像アセットやSlicy.appで書き出す画像に余白をつけるPhotoshop用スクリプト「Add... - saucer
「画像アセット」は、Photoshop CC 2014で「アセットを抽出」として進化しています。正確にいうと、共存する関係で存在しています。
『Webデザインの現場ですぐに役立つ Photoshop仕事術』
2015年3月『10倍ラクするIllustrator仕事術』の兄弟本としてソシムから発売。
- 1章 制作をはじめる前に（鷹野 雅弘）
- 2章 Photoshop CC以降でのカンプ作成のベストプラクティス（黒葛原 道）
- 3章 モバイルにも通用するデザインカンプ制作のイロハ（牧下 浩之）
- 4章 効率化のためのTips（三浦 将）
- 5章 見落としがちな基本機能（鷹野 雅弘）
書名の通り、Web向けの内容です。
「おくにじまん トイレのピクトグラム」コンテスト
Pictathon x DTP Transitのコラボ企画として「おくにじまん トイレのピクトグラム」コンテストを開催中。「自分の県だったら〜」を大募集。
『10倍ラクするIllustrator仕事術』改訂版
『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアーを進行中です。
現在、残すところ12箇所となりました。
- 秋田
- 岩手
- 山形（相談中）
- 茨城
- 千葉
- 埼玉
- 神奈川
- 群馬
- 岐阜
- 京都（10月18日に開催準備中）
- 奈良
- 三重
『10倍ラクするIllustrator仕事術』（増強改訂版）は、2011年に発売されたロングセラー書籍『10倍ラクするIllustrator仕事術』の改訂版。2014年10月18日に技術評論社から発売、2015年3月に増刷になりました。
詳しくはサポートサイトにて。5つの「く」
DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。
オススメ外部リンク
Adobe Design Magazine内にて、Illustrator CC 2014で強化された機能についての記事を書きました。
オススメのスライド
- 2013年11月21日に開催されたCSS Nite in Ginza, Vol.72「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」のスライド資料です。
リンク
- DTP系のことを話題にしているブログなどをピックアップ
- 日本橋小伝馬町にあるDTPとWebのスクール（アドビ認定校）
- 外付けHDDのように使えるオンラインストレージ
- 飯田橋を中心に都内数箇所で展開しているプリントビューロー。現在、オンラインショップも運営中。
隔月ペースでバンフーセミナーも開催されています - USでしか購入できないパーツや、US版のiTunesカードの販売など
- “使える”デジタル素材の販売サイト
コメントする