HTML&CSS作成がラクになる!DreamweaverからPSDファイルを読み込んでのコーディング(1)

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

Dreamweaverの[Extract]パネルを使います。この[Extract]パネルはDreamweaverCC2014以降のバージョンで利用できる機能です。また[Extract]パネルから読めるPSDファイルは、Creative Cloudのアセットにあるファイルのみです。

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

file01

Dreamweaverの[Extract]パネルからPSDを読み込む

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

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

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

file02

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

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

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

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

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

tab_file03

file03

[Extract]パネル内のPSDファイルでできること

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

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

file04

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

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

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

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