スマートオブジェクトおよび Photoshop と Dreamweaver 間の連携ワークフローについて

コピー＆ペーストワークフロー

Photoshop ファイルのスライスまたはレイヤーを選択してコピーし、Dreamweaver にペーストするとそれらを Web 対応の画像として挿入できます。ただし、画像を更新したい場合は、元の Photoshop ファイルを開いて編集し、再度スライスまたはレイヤーをクリップボードにコピーしてから、Dreamweaver にペーストする必要があります。このワークフローは、Photoshop ファイルの一部だけ（例えば、デザインカンプの 1 セクション）を 1 つの画像として Web ページに掲載したい場合にのみ、お勧めします。

スマートオブジェクトワークフロー

Photoshop ファイルの一部ではなく全体を扱う場合は、スマートオブジェクトワークフローが適しています。Dreamweaver に挿入されたスマートオブジェクトは、Web ページに配置される画像アセットとして扱われ、元の Photoshop（PSD）ファイルにリンクしています。Dreamweaver のデザインビューでは、スマートオブジェクトは画像の左上部にアイコンが表示されます。

スマートオブジェクト

Web 画像（つまり Dreamweaver ページ上にある画像）が元の Photoshop ファイルと一致していない場合、Dreamweaver によって元のファイルの更新が検知されると、スマートオブジェクトのアイコンの矢の部分が赤になります。デザインビューで Web 画像を選択して、プロパティインスペクタの「オリジナルから更新」ボタンをクリックすると画像が自動的に更新され、元の Phothoshop 画像に加えられた変更が反映されます。

スマートオブジェクトワークフローを使用すると、Web 画像の更新のために Photoshop を開く必要がありません。 さらに、Dreamweaver 上でスマートオブジェクトに加えた更新内容も失われません。 つまり、元の Photoshop 画像をそのままに保ったまま、Web バージョンの画像に変更を加えることができます。

また、デザインビューで画像を選択しなくてもスマートオブジェクトを更新することもできます。アセットパネルを使用して、選択できない画像（例えば、CSS の背景画像）を含めたすべてのスマートオブジェクトを更新できます。

画像の最適化設定

コピー＆ペーストワークフローおよびスマートオブジェクトワークフローのどちらの場合でも、画像プレビューダイアログボックスで画像の最適化設定を指定できます。このダイアログボックスでは、形式、画質などを設定できます。スライスまたはレイヤーを Dreamweaver に最初にコピーしたとき、または Photoshop ファイルをスマートオブジェクトとして最初に挿入したときに、このダイアログボックスが表示されるので、Web 画像の作成が簡単に行えます。

特定のスライスまたはレイヤーの更新をコピー＆ペーストした場合、Dreamweaver によって以前の設定が記憶されているので、その設定を使用して Web 画像が再作成されます。同様に、プロパティインスペクタを使用してスマートオブジェクトを更新したときにも、最初に画像を挿入した際と同じ設定が使用されます。デザインビューで Web 画像を選択してプロパティインスペクタの「イメージ設定の編集」ボタンをクリックするといつでも画像の設定を変更できます。

Photoshop ファイルの保存

Web 画像を挿入し、元の Photoshop 画像を Dreamweaver サイトに保存しなかった場合、Dreamweaver は元ファイルがあるパスを絶対参照のローカルパスとして認識します （コピー＆ペーストワークフローおよびスマートオブジェクトワークフローどちらの場合も同じです）。例えば、Dreamweaver サイトのパスが「C:¥Sites¥mySite」で、Photoshop ファイルの保存されている場所が「C:¥Images¥Photoshop」だった場合、Dreameaver では元のアセットが「mySite」という名前のサイトの一部とはみなされません。Dreamweaver は特定のローカルのハードドライブ上にあるファイルしか認識しないために、Photoshop ファイルを他のチームメンバーと共有するときなどに問題となることがあります。

Photoshop ファイルをサイト内に保存しておくと、Dreamweaver ではサイトと相対的なパスを確立します。サイトにアクセスできるユーザなら、ファイルへの正しいパスを確立することができ、 それらの元ファイルをダウンロードすることもできるようになります。

Photoshop および Dreamweaver でのスマートオブジェクトに関するビデオチュートリアルは、www.adobe.com/go/lrvid4043_dw_jp を参照してください。