新テクノロジー Generator が Photoshop CC に!

Creative Cloud メンバー限定機能として、本日 Photoshop CC に新しい Adobe Generator というテクノロジーが実装されました。Photoshop CC 14.1 アップデートを行うことで利用できます。

Photoshop で Web や画面のデザインなどを行った後、パーツ毎にスライスで書き出すというワークフローがあります。Generator は、この作業を自動化し不要にするまったく新しいテクノロジーです。

「Web 用に保存」が自動化?!

Photoshop CC の [ファイル] メニューには、[生成] という項目が追加されています。ここから [画像アセット] を選択してみましょう。

PsCC141_Generate_Menu

 

現在開いている PSD ファイルと同階層にフォルダが一つ生成されます。Photoshop 上でデザインした Web ページのロゴ部分のレイヤー名を、レイヤーパネル上で以下のように変更してみます。

PsCC141_Generate_Layer_Panel

 

すると、あら不思議、同階層のフォルダに自動的にロゴ部分が画像として書き出されます。

GenerateFolder

 

これが Generator の基本となります。このレイヤー名変更を「タグ付け」といいます。タグ付けするだけで、一般的な画像フォーマットに自動的に書き出すことができます。書き出すことができる画像フォーマットは以下のとおり。

  • .png (デフォルト値: 半透明アルファチャンネルの png32), .png8, .png24, .png32
  • .jpg (デフォルト値: 8), .jpg(1-10), .jpg(1-100%)
  • .gif
  • サイズ変更 1-n%, (数) px x (数) px

以下はどのようにタグを使用するか、つまりレイヤー名をどのように記述するかの例です。

  • 200% logo-retina.png, logo.png” logo.png と 2倍のサイズの logo-retina.png という合計2つのファイルが生成されます。
  • heroImage.jpg10” 最高品質の heroimage.jpg という名称の JPEG ファイルが書き出されます。
  • 400% tuningfork.png, 250×250 tuningfork.jpg40%” 4倍のサイズの PNG ファイルと カスタムサイズの JPEG ファイルが書き出されます。

Generator の使い方の詳細は、以下をご参照ください:

Adobe Photoshop Magazin / 新搭載「Generator (生成)」 について

Photoshop から Edge Reflow プロジェクトを直接?!

この Adobe Generator テクノロジーを利用した最初のアプリケーション連携事例となるのが Edge Reflow。本日 Edge Reflow Preview 5 がリリースされ、Photoshop CC から直接 Edge Reflow プロジェクトを書き出すことができるようになりました! Photoshop で作成した Web レイアウトカンプから Edge Reflow を用いたレスポンシブ デザイン工程へシームレスに進むことができます。

レスポンシブデザインツール、Edge Reflow CC Preview 5 リリース:いよいよPhotoshopと連携

オープンソース!

Generator とリアルタイムのアセット生成機能は、オープンソースとしてリリースしています。これにより、サードパーティでも上記の Edge Reflow のような Photoshop との連携機能を、 JavaScript で開発して自社のアプリに組み込むことができます。詳細は、以下をご参照ください:

Introducing Adobe Generator for Photoshop CC (英文および動画)

緊急特集 Creative Cloud 道場 on USTREAM

2013年9月12日放送予定の Creative Cloud 道場 on USTREAM では、本機能をデモを交えて解説しますので、是非ご覧ください。

Create Now | Creative Cloud 道場 on USTREAM

Comments are closed.