【Adobe MAX 2014】PhotoshopファイルからのHTMLコーディングワークフローを一新させる「Creative Cloud Extract」

Adobe MAX 2014セッションレポート

コーディングに役立つ機能

　オブジェクトを選択すると、その幅や高さが表示されます。

　もう、赤線を引いてそこに幅や高さを書く必要はありません。

　Shiftキーを押しながら複数のオブジェクトをクリックすると、オブジェクト間の距離が表示されます。

　わざわざPSDファイルをPhotoshopで開かなくても、このようなことがブラウザ上で分かるようになりました。

　オブジェクトを選択し、PNG、JPGなどのフォーマットを選ぶと、Creative Cloudのアセットに追加されます。ブラウザだけで画像の切り出しまでできるのは、地味だけどすごい機能だと思います。

　オブジェクトのCSS表現も表示することができます。

DreamweaverのExtract機能

　新しいDreamweaverでは、左にPSDファイル、右にライブビューとコードエディタを表示することができます。PSDファイルはさきほどのブラウザ上で見た場合と同じように、レイヤーなどの情報を見れます。

　PSDファイルのオブジェクトを選択すると、その場に幅や高さ、CSS表現のプロパティなどが表示されます。

　そして、この状態でコードビューでCSSを書きはじめると、コードヒントにプロパティ名だけでなく、そのオブジェクトの背景色などの具体的な値がいきなり入ってきます。

　さらに、オブジェクトを選択した状態で、画像ファイル名をコードに書けば、PSDファイル上で選択している画像が、そのパス・名前で生成されます。

　Webアプリ開発向けのコードエディタ「Brackets」のExtract機能は近日登場ということです。

　また、IllustratorのExtract機能も開発を予定しているということです。

　なお、ブラウザで利用するCreative CloudのExtract機能は読み取り専用です。今のところPSDファイルの編集はできません。

　「PSDファイルはPhotoshopがないと開けない」という状況を一気に変えたExtract機能。Web制作の現場のワークフローを一気に変えてしまう可能性があります。ぜひお試しください。