スマート プレゼンター®でセミナー撮影

DreamweaverとPhotoshopの連携

Webページ用の画像を編集する時のワークフローの話をします。

DreamweaverとPhotoshopはとても強く連携しています。
通常、Webで利用する画像と言えば、以下の3つ。
JPEG、GIF、PNGです。
Webページを作成する際は、画像をこれらのいずれかの形式に変換してから、
挿入を行います。

ただ、挿入後に、さらに補正をしたくなった場合、少し手間がかかります。
いったん、画像編集ソフトに戻り、画像を補正し直して、
あらためて、Webで利用できる形式で保存を行います。

画像を編集する時は、Webページ上で、他のコンテンツとのバランスや
見栄えを意識して作業をすることは、なかなか難しいものです。
ですので、画像編集→書出し→Webページに配置→見栄えチェック→画像編集→書き出し→Webページに配置→見栄えチェック
という作業を何度か繰り返してしまうことになります。

そこで、Dreamweaverでは、Photoshopのファイルをネイティブ形式のまま配置する機能が用意されています。
もちろん、PSDファイルをそのままHTML内に貼りこむということではありません。
PSDのまま配置しても、DreamweaverがJPEGやGIFに変換してから配置してくれるというものなのです。
さらに、オリジナルのPSDファイルのソース情報を保持することで、
DreamweaverからダイレクトにPhotoshopに遷移して、画像を編集して、その結果を自動的に反映するという、
優れもの機能です。
その機能を実現するために、「スマートオブジェクト」を用います。
ここでも、登場しました。「スマートオブジェクト」
スマートオブジェクトについては、以前にもいくつか記事を書きましたので、良ければ読んでみてください。

ファイルパネルから、PSDファイルをDreamweaverのデザインビュー上にドラッグアンドドロップします。
すると、「イメージの最適化」というダイアログが出ますので、そこでプリセットや画質を調整します。


調整結果は、リアルタイムで配置中の画像に反映されますので、適宜、見栄えを判断しながら値を調整します。
そして、OKで確定すると、JPEGやGIFの形式で貼りつけられます。
ただし、Photoshopのスマートオブジェクトであることを示すマークが画像上に表示されます。
マークの左下に、円環状の2つの矢印があります。これがポイントになります。

ファイルの実態としては、JPEGやGIFのファイルとして書き出されていますが、Dreamweaverは、
その画像がPhotoshopのものだという情報は保持します。

画像を選択して、プロパティインスペクターを見ると、PSと書かれたPhotoshopのアイコンがあります。

これをクリックすると、オリジナルのPSDファイルがPhotoshopで開きます。

Photoshopであらためて編集を行い、保存をします。
そして、Dreamweaverに戻ると、
スマートオブジェクトのマークの左下にある、円環状の二つの矢印の片方の色が変化しています。
これは、オリジナルのファイルに変更が加えられており、かつ、Dreamweaver上で反映されていないことを示すものです。

プロパティインスペクターで、「オリジナルから更新」をクリックすると、
Photoshopでの変更の結果が反映されるのです。

このように、Photoshopで書き出し作業を行わずに済みますので、とても作業効率が良くなります。
バナーとか作るときに、おススメの機能です。

記事がお役に立てましたら、下部のはてなブックマークなどの、ポチりをお願いします。

——————————————–

■略歴

石田 知志(いしだ さとし)

(株)A-flat代表取締役

http://a-flat.biz

03-5779-7694

IT系を中心とした各種の教材制作、テクニカルライティング、映像制作、セミナー撮影、技術資料の翻訳などを行っています。

主要なサービスとしては、画面録画付きセミナー撮影サービス「スマート☆プレゼンター」を提供しています。

http://a-flat.biz/archives/service-category/video

スクリーンも同時に精細に収録し、すぐにコンテンツ化します。セミナーDVDの制作、eラーニング、Webセミナー、Ustream中継などでご利用いただけます。