昨日の記事の最後で触れたように、Photoshop に画像アセットを生成する機能が追加されました。これを実現しているのが Adobe Generator for Photoshop CC です。
Generator の 「コア」 は、Photoshop で編集中のドキュメント内のレイヤーやビットマップなどの情報にアクセスできます。コアから情報を受け取るモジュールは、Generator プラグインと呼ばれます。Photoshop には、Generator コアと、画像アセットを生成する Generator プラグインが付いてくる、という仕組みです。
Generator 自体は Node.js をベースとしたオープンソースプロジェクトで、JavaScript を使ってプラグインを開発し、MIT ライセンス下で自由に拡張できるので、いろんな可能性がありそうです。ソースコードは GitHub に公開されています。 （Adobe Photoshop@GitHub）
まだ頻繁に変更が行われているようなので、長く使えるプラグインをつくるのはしばらく待った方が良いかもしれません。多少落ちついてきたら Generator のアーキテクチャの記事なども書く予定です。
といいつつ、既に Generator を使った独自プラグインが公開されたりしています。The Engine Co. の Loom SDK は、プレイ中のゲーム内のデザインアセットを Photoshop から直接修正できるという優れものです。
つまり、ゲームエンジンに Generator と通信する機能が組み込まれているわけです。これならコードを書かなくても、操作して気になったら直ぐに修正できます。今後、アプリの開発ワークフローは大きく変わっていくかもしれませんね。
現在アドビから公開されている Generator のプラグインは、Photoshop 標準で提供される画像アセット生成のプラグイン （こちらはオープンソース） と、Reflow プロジェクトを生成するプラグイン （こちらのソースは非公開？） です。予告どおりなら、Edge Code （Brackets) も、そのうち Generator 経由で、PSD から直接 HTML ページを生成できるようになることでしょう。
画像アセット生成機能の使い方
ヘルプドキュメントに詳しい記述がありますが、Photoshop の画像アセット生成も、Reflow の Photoshop 連携も、レイヤーに付けた名前によって、動作が決まります。レイヤー名に以下のタグが含まれると、それを拡張子とする画像アセットが生成されます。
- .png, .png8, .png24, .png32
- .jpg, .jpg(1-10), .jpg(1-100%)
- .gif
なので、画像アセット生成や Reflow 連携を行うには、まずレイヤー名の変更を行う必要があります。その際、レイヤーの名前は PSD ファイル内の他のレイヤーと重複しないようにします。また、/、:、* をレイヤー名に使うことはできません。
レイヤーグループにも同様に名前を付けることができます。その場合は、グループ内まとめて 1 つの画像が生成されます。
レイヤー名を変える際、上のリストのように、オプションで画像の品質を指定できます。標準で生成される PNG は 32 ビットです。JPG は 90％ の品質で、GIF は標準のアルファ付の画像になります。
さらに、Retina 用に大きな画像を生成したい場合などのために、画像の大きさや拡大率を名前の先頭に指定できるようになっています。複数の画像を生成する指定も可能です。
以下の名前のレイヤーからは、通常の大きさと倍の大きさの画像が生成されます。コンマ （,） またはプラス （+） は、ファイル名を区切る記号として扱われます。
- 200% logo-retina.png, logo.png
明示的に大きさを指定する場合は以下のような感じです。特に指定がなければ単位はピクセルです。大きさ指定の数値の後の半角スペースは必須です。
- 250×250 myimage.jpg40%
コメントする