PhotoshopとDreamweaverの新しいワークフロー 第1回:PSDファイルから効率よくデザインする2つの方法

BY 公開

もっと楽しく!Photoshop活用でデザインの表現力UP

Dreamweaver CC(2014年10月公開) Photoshop CC (2014年10月公開) 対応

PSDファイルから効率よくデザインする2つのワークフローを解説します。1つはDreamweaverの[Extract]パネルを使う方法、もう1つはPhotoshopの[アセットを抽出]機能を使う方法です。

Dreamweaver CC の体験版をダウンロード   Photoshop CC の体験版をダウンロード   サンプルファイルをダウンロード

Photoshopでデザインカンプを作成し、それをもとにDreamweaverでWebページを作成する際、PSDファイルにスライスを入れて画像を書き出している人も多いでしょうが、より効率的に行う方法があります。本記事では、PSDファイルから効率よくデザインする2つのワークフローを解説します。

Dreamweaverの[Extract]パネルでPSDファイルを直接開いて、情報や画像を抽出する

簡単に画像を抽出できる

[Extract]パネルでは、Dreamweaver上でPSDファイルを直接扱うことが可能です。しかも、PCにPhotoshopがインストールされていなくても利用できます。

※[Extract]パネルはDreamweaver CC 2014.1以降で利用できます。

[Extract]パネルで利用できるPSDファイルは、Creative Cloudのアセットにあるファイルのみです。Creative Cloud上になければ、[Extract]パネルからアップロードできます。

PSDファイルをクリックすると[Extract]パネル上でファイルが開きます。PSDファイル上の画像をクリックしてさらに下矢印をクリックすると、保存用の設定ダイアログボックスが表示され、保存先、ファイル名、画像形式(JPEGやPNG)を設定できます。

一度保存したあとは、Dreamweaverの[アセット]パネルから挿入するといいでしょう。また、[Extract]パネルからDreamweaverの[デザインビュー]や[ライブビュー]にそのままドラッグしても配置できます。

画像の上に別の画像が重なっていたり、他の画像と組み合わせたりしてグループ化して保存したい場合は、Shiftキーを押しながら選択して保存すると、グループ化した状態で保存できます。

テキストも抽出できる

PSDファイル上にあるテキストをそのままコピーして、再利用することが可能です。これまでのように「Photoshopを立ち上げて、テキストを選択して、コピーして…」という手間も必要ありません。

[Extract]パネル上でコピーしたい文字を選択し、[テキストをコピー]をクリックすれば、Dreamweaver上にペーストできる状態になります。そのままDreamweaverにペーストすればテキスト入力は不要です。もちろんテキストを画像として保存することも可能です。

CSSも抽出できる

CSSのスタイルを作成する際に、PhotoshopでPSDファイルを開いて色やサイズを確認する必要はありません。[Extract]パネル上のPSDファイルでスタイルを調べたいところをクリックすれば、そのCSSスタイルが表示されます。あとは、必要なプロパティにチェックを入れて[CSSをコピー]をクリックするだけで、スタイルのコピーは完了です。

レイヤーも認識できる

[Extract]パネルではPSDファイルのレイヤー構造も認識します。スライドショーなどで画像が切り替わる部分の画像を別レイヤーで入れてあっても、[レイヤー]ボタンをクリックして、レイヤー構造を表示し、必要な画像の右側にあるボタンで保存できます。必要な画像が別レイヤーになって隠れていても問題なく、保存、利用することが可能です。

Photoshopでアセットを抽出して、Dreamweaverの[アセット]パネルから挿入する

Photoshopでアセットを抽出する

PhotoshopからWebページ用に画像を書き出す方法としては、スライス機能の他にも[アセットを抽出]機能があります。これはGenerator機能が強化されたものです。[アセットを抽出]機能ではダイアログボックスが搭載されているので、「指定された記法に従いレイヤー名を手動で変更して必要なファイルを抽出する」といった面倒な作業は不要です。もちろん、以前のようにレイヤー名を手動で変えて必要なファイルを取り出すことも可能です。

デザインカンプで書き出したいレイヤーやグループを選択し、右クリックメニューから[アセットを抽出]を選ぶと、[アセットを抽出]ダイアログボックスが開きます。このダイアログボックスでファイル名や画像形式などを設定できます。また、倍率も設定できるので、同じ画像をモバイルデバイス向けに書き出すことが可能です。

※[アセットを抽出]機能はPhotoshop CC 2014.2以降で利用できます。

Dreamweaverの[アセット]パネルから挿入する

Photoshopの[アセットを抽出]機能で画像を書き出すと、ファイルは様々なフォルダーに分けて保存されます。あとは、Dreamweaverの[アセット]パネルから[ライブビュー]や[デザインビュー]に挿入するだけです。Photoshopから対象デバイスに合せて様々なサイズの画像を抽出した場合でも、それを確認しながらそのままDreamweaver上の[ライブビュー]や[デザインビュー]に挿入することができます。

※[アセット]パネルから[ライブビュー]に挿入できるのは、Dreamweaver CC 2014.1以降です。

まとめ

Dreamweaverの[Extract]機能はPSDのデザインカンプからWebページを作成する際のワークフローを大きく変えることが可能です。また、Photoshopの[アセットを抽出]機能を使った場合も、Dreamweaverでの扱いが容易になりました。

ケースやワークフローによって、使い分けもできます。例えば、スマートフォン向けの拡大画像とオリジナルサイズを同時に書き出したい場合、Dreamweaverの[Extract]機能ではできませんが、Photoshopの[アセットを抽出]機能ではそれが可能です。両方のサイズの画像が必要なときは、Photoshopの方が効率良く書き出せるでしょう。

ちなみに個人的には、Dreamweaverの[Extract]パネルでPSD上のテキストをコピーしてそのまま再利用できるところが意外と便利だなと感じています。

どちらの方法も上手く使いこなせば、よりスピーディーに正確なデザイン&コーディングを可能にしてくれることでしょう。みなさんぜひ試してみてください。

  AUTHOR

関口 和真

株式会社コムセント / 最高技術責任者(CTO)/ PHPを利用したフルスクラッチシステムの作成、CMSのカスタマイズ、Dreamweaver・Photoshopなどを利用したPCサイト、スマートフォンサイトの制作およびJavaScriptを利用したフロントエンド開発を行うほか、システムの運用保守に携わる。大学講師や専門学校講師を兼任。著書に『DreamweaverレッスンブックCC対応』(ソシム社)など