PSDファイルをデベロッパーに渡すときの苦労
色々なWebデザインツールがありますが、一番使われているのはPhotoshopでしょう。しかし、それをもとにHTML/CSSを作るのは大変なことです。画像を切り出すことはもちろん、会社やプロジェクトによっては、スタイルガイドを作ったり、デザインに赤字で色やフォントサイズなどを書き込んで、デベロッパーに分かるような資料を作ることもあり、デザイン修正のたびに資料の内容を更新するのは大変です。
そこで、今回アドビのクリエイティブ制作ツールおよびクラウドサービス群である「Creative Cloud」に登場したのが、「Creative Cloud Extract」（エクストラクト、日本語では「抽出」といった意味）です。PSDファイルのレイヤー、色、オブジェクト間の距離などを、Photoshopで開かなくても見られるようにする機能です。
利用方法は簡単です。PSDファイルをCreative Cloudに保存するだけ。PSDファイルの中身をブラウザやDreamweaverから直接参照できるようになります。
PSDファイルを作る際の注意点
どんなPSDファイルでもうまく利用できるわけではありません。PSDファイルから特定の情報を取り出しやすいように、次のような点に注意してデザインしましょう。
- テキストは変形させない
- フォントなどの指定には、できるだけ「文字スタイル」を使う
- できるだけシェイプスタイルを使う
- レイヤーは階層化し、ちゃんと「レイヤー1」以外の名前をつける
- レイアウト違いの複数のデザインを作る際には、「レイヤーカンプ」機能を使う
その他、Photoshopエチケットのサイトも参考にしてください。
生産性が増したPhotoshopからのアセット抽出
デザインからコードへのワークフローを助ける機能は従来からあり、「Generator」などと呼ばれていました。ただ、これまではレイヤー名に拡張子や特殊なタグを書く必要があり、レイヤー名が呪文のようになる上に、作業に時間がかかって仕方がない感じでした。
今回のPhotoshopでは「アセットを抽出」という機能が追加されて、パネル上のマウス操作で画像のフォーマット、サイズを選べるようになりました。凄い数のアセットも、PSDファイルを更新するたびに自動で簡単に書き出すことができます。
アセットの解像度を設定した場合は、Photoshopが一番上のトップレベルのレイヤーに情報レイヤーを作るようです。これはレイアウトなどには影響しない情報だけが記録されたレイヤーなので、気にせずに残したまま作業を進めてください。
