こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。
僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。
何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。
つまりは「効率化」することが必須になるわけです。
そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。
そもそもExtract機能とは？
Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて聞いた方は首を傾げることでしょう。
以下に公式サイトの文言を引用させていただきます。
コンテキストに応じたコードヒントを取得したり、最適化された画像をライブビューにドラッグ＆ドロップしたり、CSSとテキストを簡単にコピーしたりできるほか、カラー、グラデーション、フォントなどについての情報や測定値をPSDから取得することもできます。
要は、ExtractパネルでPSDファイルを直接開くことで、情報や画像を抽出できるというツールです。Photoshopを立ち上げる必要がなく、レイヤー情報も抽出できるから、デザインカンプをスライスする必要もないということ！
ふむ、実際に使ってみることにしましょう！！
DreamweaverのExtract機能を使ってみた
それでは、ひとつひとつレポートしていきたいと思います。
Dreamweaverを起動させる
AdobeのDreamweaverを起動させ、ファイルメニューの「新規ドキュメンタリー」からHTMLファイルを作成します。
Dreamweaverを起動し、新規ファイルを開くと、画面左側にExtractのワークスペースが表示されているかと思います。
ちなみにワークスペースはウインドウメニューの「ワークスペースのレイアウト」から変更できます。
PSDデータをアップロードする
画面左上の「PSDをアップロード」をクリックします。
「PSDをアップロード」をクリックすると、上のような画面が現れます。
「＋ PSDをアップロード」をクリックし、PSDファイルをアップロードしましょう。
ここでアップロードするPSDデータは、Adobeの公式ページに練習用のサンプルがあるのでそちらからダウンロードしてください。
https://helpx.adobe.com/dreamweaver/how-to/extract-photoshop-design-code.html
アップロードが完了したら、アップロードしたPSDデータをクリックします。
クリックすると、上のようにExtractパネル内にカンプが開かれます。
Extractの環境を設定する
新しいツール、機能を使用するときは、まず環境を整えてから使用することをおすすめします。
Windowsの方は編集メニューの「環境設定」、Macの方はDreamweaverメニューの「環境設定」を選択してください。
カテゴリから「Extract」を選択します。
ここでは、Extractパネルで表示する基本フォントサイズの指定、抽出する画像の保存形式が指定できます。設定を指定し、「適用」をクリックしたら、環境設定ダイアログボックスを閉じましょう。
環境の変更をExtractパネルで確認したいときは、ポップアップメニューの「PSDをリロード」をクリックしましょう。
PSDファイルからCSSや計測値を抽出
PSDカンプ内のCSSプロパティをコピーします。これで任意のCSSソースにスタイルを直接ペーストできます。
エレメントのCSSを抽出
テキストや画像など各エレメントのCSSを抽出しましょう。
Extractパネルに表示されているエレメントをクリックします。
するとポップアップでCSSプロパティのリストが表示されるので、「CSSをコピー」を選択しましょう。
CSSをコピーする際は、コピーするプロパティにチェックを入れることを忘れないように。
エレメントのテキストデータを抽出
つづいて、テキストデータを抽出しましょう。
CSS抽出と同様の方法で「テキストをコピー」を選択しましょう。
テキストデータをコピーできるのは、マジでありがたい。テキストを画像データとして抽出することもできます。
ちなみに、2015年5月現在はDreamweaverとBracketsのExtractパネルから日本語をコピーすると、文字化けすることがあります。改修中とのことなので、それまではブラウザ版のExtractサービス（後述します）で日本語をコピーしましょう！
画像のアセットを抽出
つぎに画像のアセット抽出です。
Extractパネルから画像のPSDファイルをクリックし、PSDファイルの目的の画像をクリックします。
複数の画像を同時にインポートするにはshiftか⌘を押しながら画像をクリックしましょう。
ただ、選択した画像はまとめて一つの画像として抽出されます。
画像をクリックするとポップアップが表示されるので、パスやファイル名などを指定して保存をクリックしましょう。
ファイルからエレメント間の計測値を抽出
エレメント同士の間隔の値を抽出することもできます。
計測したいエレメント間のエレメント2つをshiftか⌘を押したまま同時選択し、widthとheightの値を抽出します。
これでいちいちPhotoshopでデザインデータを開いて、地道に間隔を測る必要がなくなりましたね。
CCじゃなくてもExtract機能が使える！
Photoshop CCやDreamweaver CCといったクラウド版にデフォルトで備わっているExtract機能ですが、クラウド版ではなくパッケージ版のソフトを使用している方もいるのではないでしょうか。
パッケージ版でもExtract機能の一部が利用できるのが、Creative Cloudアセットです。ここにPSDデータをアップロードすることで、上述のようにCSS情報や画像を抽出できます。こちらも試してみましょう！
1. マイアセットにPSDデータをアップロード
Creative Cloudアセットにアクセスし、マイアセットからPSDデータをアップロードしましょう。
2. PSDデータから画像を書き出す
アップロードしたPSDデータを開くと、このようにデザインをプレビューできます。
レイヤー構造が表示されています。書き出したい画像を選択しましょう。
画像を選択したら、名前をつけて拡張子を選ぶだけで書き出しができます。なんと、スライス不要！ これはなかなか嬉しいんじゃないでしょうか。
3. エレメントのCSS・テキストデータを抽出
Dreamweaver CC同様、エレメントを選択するとCSSやテキストデータが抽出できます。コピペも簡単なので、そのままDreamweaverにペロッと貼れますね。
4. エレメント間の計測値を抽出
2つのエレメントを選択すると、相対的な位置関係が数値で抽出できます。いちいち計測する手間が省けてありがたいです。
さいごに
ざっとご紹介しただけでも、Extract機能によってWebデザインのワークフローを大幅に変えることができそうですね。
このExtract機能を上手く使いこなせば、これまでとは比べものにならないほど、スピーディーかつ丁寧なデザインとコーディングが可能になると思いますので、一度試してみることをおすすめします。
Extract機能についてさらに詳しく知りたい方は、アドビさんの公式サイトにチュートリアルを含めた説明が豊富に掲載されているので、ぜひ一度そちらをご覧ください。
Adobe Creative Cloud Extract
Adobe IDを持っているユーザなら誰でも無料で利用できるExtract。
Dreamweaverはもちろん、軽量さが魅力のコードエディターBracketsでも活用できます。お好きなエディターと組み合わせて、コーディングを効率化させていけるといいですね！
それではまた。
【コーディングを爆速で！】
※ Adobe Creative Cloud アセットでPSD画像をスライスし、テキストのCSS情報を取得しよう
※ DreamweaverとPhotoshopを使い、神速でスライスする方法
※ 楽してコーディング！Dreamweaverのテクニックいろいろ
