外部ツールと連携しやすくするPhotoshopの新機能「Generatorテクノロジー」と、Edge Reflowとの連携ワークフロー

Photoshopとサードパーティツールとの相互運用性を高める「Generatorテクノロジー」（前編）

　先日アドビからサードパーティ製アプリケーションとの相互運用性を高めるプラットフォーム「Generatorテクノロジー」が発表され、Creative Cloudで提供が開始されました。多様な制作ニーズへ柔軟に対応できるよう、psdファイルの状態変化の補足やファイル情報の取得などをJavaScriptから操作可能なプラットフォームとして提供されています。本稿ではGeneratorの搭載でどのようなことが可能になったのかを見ていきます。

　なお、本稿で使用するPhotoshop CCとEdge ReflowはAdobe Creative Cloudの無償メンバーシップへの登録で30日間の体験版が利用可能です。

Photoshopの可能性を高めるGeneratorテクノロジーとは

スライスはもういらない？

　現行バージョン（2013年11月25日現在）のPhotoshop CCでは、デフォルトでGeneratorテクノロジーをベースにした画像アセットの書き出し機能が搭載されています。この機能を使用すると、レイヤーやグループに拡張子をつけた名前を指定しておくことで、素材の自動書き出しが可能になります。

　従来、素材設定は、透明な画像を書き出したいときには毎度重なるレイヤーを非表示にしたり、スライスに対して書き出し方式をそれぞれ指定したりと、Web制作における面倒な作業の一つでした。それがレイヤーの命名1つで簡単に行えるようになるわけです。

　例えば下図のようにグループに画像拡張子をつけたレイヤー名にしておくと、内包するレイヤーが統合された1枚のpngファイルとして生成されます。png以外にもjpg/gifの指定した形式で素材書き出しが可能です（残念ながらgifの書き出しオプションはありません）。

psd保存時に変更点が即座に反映される

　Generatorを有効にするには、［環境設定］-［プラグイン］-［Generatorを有効にする］チェックボックスをオンにする必要があります。おそらくデフォルトでオンになっていると思いますが念のため図説します。この設定がオンの状態で、［ファイル］-［生成］-［画像アセット］を選択してチェックが入っている状態にしpsdを保存をすると、「psdのファイル名-assets」の命名ルールでフォルダが生成され、この中に画像が書き出されます。

［ファイル］-［生成］-［画像アセット］をオンにする

　Generatorの命名規則（後述）に則ったレイヤーは、psdの保存時に指定した画像形式で書き出しが行われ、変更点もすぐに反映されます。この仕組みを利用し、素材をサーバーと同期する仕組みを用意し、Edge Inspectと組み合わせることで実機でデザインするワークフローが構築できそうです。

レイヤースタイル適用前

レイヤースタイル適用後。psd保存で即座に変更が反映されている

1つのレイヤーで複数パターンの画像を書き出し可能

　レイヤー名にカンマ（,）区切りで複数のファイル名をつけることで、複数パターンの書き出し設定が可能です。例えば下図のようにRetinaディスプレイ向けの2倍のサイズ画像を用意する場合は、ファイル名の前に200%と記述することでサイズ設定が可能です。サイズ指定の後ろには必ず半角スペースを1つ入れます。また、ファイル名が同じだと、後に付けたファイル設定が優先されますので、@2xを付加し、下図のようにカンマで区切ります。

　サイズは%以外にも、200x100など縦横のサイズを固定して書き出すこともできます。xの前後にはスペースが必要です。単位はpx/cm/mm/inが指定可能です。何も指定しなければpxで書き出されます。サイズを固定した場合は、比率は無視されサイズに収まるように縦横のサイズが縮められますので、比率を計算したサイズを設定する必要があります。

命名規則だけで書き出しオプションの設定が可能

　残念ながらgifの書き出し設定がありませんが、jpgとpngのクオリティ設定は可能です。

　例えば半分のサイズで90%画質のjpgを書き出す設定をしたい場合、下記のように拡張子の後にスペースを開けずにクオリティを記述します。1～100%の指定か、1～10の10段階で指定します。

50% picture.jpg90%

　pngは8/24/32ビットの設定が選択可能です。jpgのクオリティ設定と同じようにビット数を拡張子の後ろに記述します。

logo.png24