PhotoshopとDreamweaverの新しいワークフロー 第1回：PSDファイルから効率よくデザインする2つの方法
PhotoshopとDreamweaverの新しいワークフロー
Dreamweaver CC（2014年10月公開） Photoshop CC （2014年10月公開） 対応
PSDファイルから効率よくデザインする2つのワークフローを解説します。1つはDreamweaverのエクストラクトパネルを使う方法、もう1つはPhotoshopの［アセットを抽出］機能を使う方法です。
Photoshopでデザインカンプを作成し、それをもとにDreamweaverでWebページを作成する際、PSDファイルにスライスを入れて画像を書き出している人も多いでしょうが、より効率的に行う方法があります。本記事では、PSDファイルから効率よくデザインする2つのワークフローを解説します。
DreamweaverのエクストラクトパネルでPSDファイルを直接開いて、情報や画像を抽出する
簡単に画像を抽出できる
エクストラクトパネルでは、Dreamweaver上でPSDファイルを直接扱うことが可能です。しかも、PCにPhotoshopがインストールされていなくても利用できます。
※エクストラクトパネルはDreamweaver CC 2014.1以降で利用できます。
エクストラクトパネルで利用できるPSDファイルは、Creative Cloudのアセットにあるファイルのみです。Creative Cloud上になければ、エクストラクトパネルからアップロードできます。
一度保存したあとは、Dreamweaverの［アセット］パネルから挿入するといいでしょう。また、エクストラクトパネルからDreamweaverの［デザインビュー］や［ライブビュー］にそのままドラッグしても配置できます。
テキストも抽出できる
PSDファイル上にあるテキストをそのままコピーして、再利用することが可能です。これまでのように「Photoshopを立ち上げて、テキストを選択して、コピーして…」という手間も必要ありません。
エクストラクトパネル上でコピーしたい文字を選択し、［テキストをコピー］をクリックすれば、Dreamweaver上にペーストできる状態になります。そのままDreamweaverにペーストすればテキスト入力は不要です。もちろんテキストを画像として保存することも可能です。
CSSも抽出できる
CSSのスタイルを作成する際に、PhotoshopでPSDファイルを開いて色やサイズを確認する必要はありません。エクストラクトパネル上のPSDファイルでスタイルを調べたいところをクリックすれば、そのCSSスタイルが表示されます。あとは、必要なプロパティにチェックを入れて［CSSをコピー］をクリックするだけで、スタイルのコピーは完了です。
レイヤーも認識できる
エクストラクトパネルではPSDファイルのレイヤー構造も認識します。スライドショーなどで画像が切り替わる部分の画像を別レイヤーで入れてあっても、［レイヤー］ボタンをクリックして、レイヤー構造を表示し、必要な画像の右側にあるボタンで保存できます。必要な画像が別レイヤーになって隠れていても問題なく、保存、利用することが可能です。
Photoshopでアセットを抽出して、Dreamweaverの［アセット］パネルから挿入する
Photoshopでアセットを抽出する
PhotoshopからWebページ用に画像を書き出す方法としては、スライス機能の他にも［アセットを抽出］機能があります。これはGenerator機能が強化されたものです。［アセットを抽出］機能ではダイアログボックスが搭載されているので、「指定された記法に従いレイヤー名を手動で変更して必要なファイルを抽出する」といった面倒な作業は不要です。もちろん、以前のようにレイヤー名を手動で変えて必要なファイルを取り出すことも可能です。
デザインカンプで書き出したいレイヤーやグループを選択し、右クリックメニューから［アセットを抽出］を選ぶと、［アセットを抽出］ダイアログボックスが開きます。このダイアログボックスでファイル名や画像形式などを設定できます。また、倍率も設定できるので、同じ画像をモバイルデバイス向けに書き出すことが可能です。
※［アセットを抽出］機能はPhotoshop CC 2014.2以降で利用できます。
Dreamweaverの［アセット］パネルから挿入する
Photoshopの［アセットを抽出］機能で画像を書き出すと、ファイルは様々なフォルダーに分けて保存されます。あとは、Dreamweaverの［アセット］パネルから［ライブビュー］や［デザインビュー］に挿入するだけです。Photoshopから対象デバイスに合せて様々なサイズの画像を抽出した場合でも、それを確認しながらそのままDreamweaver上の［ライブビュー］や［デザインビュー］に挿入することができます。
※［アセット］パネルから［ライブビュー］に挿入できるのは、Dreamweaver CC 2014.1以降です。
まとめ
DreamweaverのエクストラクトパネルはPSDのデザインカンプからWebページを作成する際のワークフローを大きく変えることが可能です。また、Photoshopの［アセットを抽出］機能を使った場合も、Dreamweaverでの扱いが容易になりました。
ケースやワークフローによって、使い分けもできます。例えば、スマートフォン向けの拡大画像とオリジナルサイズを同時に書き出したい場合、Dreamweaverのエクストラクトパネルではできませんが、Photoshopの［アセットを抽出］機能ではそれが可能です。両方のサイズの画像が必要なときは、Photoshopの方が効率良く書き出せるでしょう。
ちなみに個人的には、DreamweaverのエクストラクトパネルでPSD上のテキストをコピーしてそのまま再利用できるところが意外と便利だなと感じています。
どちらの方法も上手く使いこなせば、よりスピーディーに正確なデザイン＆コーディングを可能にしてくれることでしょう。みなさんぜひ試してみてください。