この進化はズルイ!Generatorテクノロジーを使ったPhotoshop CCの「画像アセット」

この記事は鷹野雅弘によって執筆されました。
公開日:2013年9月 9日、更新日:2015年10月 9日

Photoshop CCが14.1にアップデートされ、「Generatorテクノロジー」により、それぞれのレイヤーを個別の画像ファイルとして自動的に書き出す「画像アセット」機能が追加されました。

Webサイト制作では、カンプと呼ばれる画像ファイルを作成後、「スライス」作業によって、書き出す領域を指定し、書き出し作業を行うというフローが必要でした。Photoshop CC(14.1)の「画像アセット」機能を使うことで、この作業(スライスと書き出し)が不要になるだけでなく、高密度解像度対応の画像書き出しにも対応するなど、この進化は、ちょっとズルイ!です(Fireworksの熱心なユーザーなのですが、こっちに肩入れ??? という意味で)。

作業手順は次のとおり。

  1. PSDファイルは英数字で設定します(例:test.psd)。
  2. [ファイル]メニューの[生成]→[画像アセット]をクリックします。
    PhotoshopCC-generator-1.png
  3. 画像として書き出したいレイヤーのレイヤー名に「logo.png」のように拡張子を追加します(対応する画像形式はpng/gif/jpeg)。
    PhotoshopCC-generator-3.jpg
  4. このタイミングで「test.psd」と同階層に「test-assets」フォルダーが自動的に作成され、その中に「logo.png」が自動的に作成されます。
    PhotoshopCC-generator-2-s.jpg

Photoshopで修正を加えると、ほぼリアルタイムに修正内容は反映されます。

生成ルール

レイヤー名の設定によって、ファイル形式だけでなく、大きさや画質などの設定を行うことができます。

  • うまく生成されない場合には「errors.txt」がはき出される
  • 不要になったファイルは、自動的に消去される

ファイル名

 レイヤー名の設定生成される画像ファイル
複数のファイルlogo.png, logo.giflogo.png
logo.gif
大きさ指定(ピクセル)250x150 logo.pnglogo.png(幅250ピクセル、高さ150ピクセル)
大きさ指定(%)200% logo-retina.pnglogo-retina.png(200%の大きさ)
組み合わせ200% logo@2x.png, logo.pnglogo@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つの画像が生成される

書き出し設定(最適化/クオリティ)

 レイヤー名の設定書き出しオプション
PNGlogo.png半透明のアルファチャンネルを持つPNG-24
logo.png8PNG-8
logo.png24PNG-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を有効にする]オプションにチェックが付いているか、確認してみてください。

PhotoshopCC-generator-4-s.png

ご参考:

追記:

え、それ、Slicyでできるやん!

というツッコミをいただきました。

ま、そうなんですけど、自動更新はできないですよね...と思っていたところ、Slicyはあっと驚くほど便利だった。 | colopixieによると「Repeat Automatically」(自動更新)機能があるみたいですね。これは未チェックでした。

slicy-repeat-s.png

でも、やっぱりPhotoshop本体だけで完結できるのは嬉しいですね。ということで、CCにされていない方(でMac環境の方)には、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で該当エクステンションを選択するのがスマートです。

extensionCC.jpg

追記(2015年6月5日):

余白をつけたい場合には、マスクを設定します。

「画像アセット」は、Photoshop CC 2014で「アセットを抽出」として進化しています。正確にいうと、共存する関係で存在しています。

こちらのスライドも参考になります。

追記(2015年):

Photoshop CC 2015で、なぜか!「アセットを抽出」は消えてしまいました。画像アセットは残っています。

追記(2015年10月9日):

Adobe Creative Stationでの連載で、改めて取り上げました。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しています。

『10倍ラクするPhotoshop仕事術』

2016年に発売予定。

お知らせメール登録

『Webデザインの現場ですぐに役立つ Photoshop仕事術』

2015年3月『10倍ラクするIllustrator仕事術』の兄弟本としてソシムから発売。

  • 1章 制作をはじめる前に(鷹野 雅弘)
  • 2章 Photoshop CC以降でのカンプ作成のベストプラクティス(黒葛原 道)
  • 3章 モバイルにも通用するデザインカンプ制作のイロハ(牧下 浩之)
  • 4章 効率化のためのTips(三浦 将)
  • 5章 見落としがちな基本機能(鷹野 雅弘)

書名の通り、Web向けの内容です。

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る