PSDから画像を書き出す際に、レイヤーから書き出す機能をご紹介しましたが、今回は、画像は書き出さず、PSDファイルのまま、Dreamweaverから呼び出して、画像を抽出するという作業の方法をご紹介します。

作業の目的などがハッキリしていた方が、わかりやすいと思いますので、今回は、このサイトのサイドバーに、タブの切り替えコンテンツを作りたいと思います。その元となるファイルをPSDで作成し、テキストや画像を抽出して行く様子をご紹介します。

Dreamweaverの［Extract］パネルからPSDを読み込む

Photoshopでデザインファイルを作成

Photoshopでデザインファイルを作成します。以下のようなPSDファイルを作ったとしましょう。この時、HTML化させる際に、1枚の画像として抽出したいものは、あらかじめレイヤーを統合しておくか、スマートオブジェクトに変換しておいてください。

その他は、テキストはテキストのまま、パスはパスのままでかまいません。パスにパターンオーバーレイなどが効いている場合も、そのままにしておいて問題ありません。

今回は、リボンとその下のCONTENTSという文字を1枚の画像として抽出したいので、スマートオブジェクトにしています。画像として抽出するのはこの1枚とリストボタンだけです。

メニューの項目は1つを残して、あとは削除か非表示にします。
（コーディングの際に、全部必要な方は、全部表示してかまいません、今回は1つあれば十分なので、削除しました）

わかりやすいように、レイヤーを色分けしています。緑は、スマートオブジェクト　青は、パス、黄色はテキストのレイヤーです。

Dreamweaverで新規ファイルを作成し、［Extract］パネルからPSDファイルをアップロードする

Dreamweaverの［Extract］パネルにある「＋」のボタンをクリックして、作成したPhotoshopのファイルをアップロードしてください。
もしくは、PCの中にある、CreativeCloudフォルダの中に、PSDを入れても同じことができます。（CreativeCloudサーバーとの同期を外さないでください）

［Extract］パネル内のPSDファイルでできること

ファイルがアップロードできました！！
これで、［Extract］パネル内にPSDファイルが入りましたね！これから、このファイルの機能を利用して、コーディングを最速にする便利な方法を試してみたいと思います。

当たり前ですが、PSDファイルをアップしただけで、Dreamweaverが自動的にコーディングしてくれる訳ではありません！！！

試しに、Extractの中で、白い枠を選択してみます。すると、CSSコードと画像をダウンロードできるボタンが表示されるはずです。

CSSのコピーのボタンは、選択している部分のCSS表示してくれ、チェックを入れた部分だけコピーすることができます。コピーボタンを押した後は、テキストファイルなどにペーストして利用します。
画像のダウンロードは、その通り、画像をダウンロードできるボタンです。

保存先と、画像名を付けられ、画像の形式も選択できます。また、Retinaディスプレイ向きに、2倍の画像の生成にも対応してくれています。便利ですね！

次回は、実際に画像をダウンロードして、このCSSを使ったコーディングの実例をご紹介します。