Dreamweaver（デザインビューまたはコードビュー）で、画像を挿入したいページ上の場所に挿入ポイントを配置します。
最終更新日 :
2021年4月27日
Photoshop を Dreamweaver と統合する方法について説明します。 Photoshop と Dreamweaver 間の連携ワークフローでスマートオブジェクトを使用します。
Photoshop の統合について
メモ
Photoshop 統合ワークフローは、Dreamweaver 21.0 以降のバージョンで廃止されました。
Dreamweaver で web ページに Photoshop 画像ファイル（PSD 形式）を挿入し、Dreamweaver で web 対応画像（GIF、JPEG、PNG 形式）として最適化できます。この操作を行うと、Dreamweaver は画像を Smart Object として挿入し、元の PSD ファイルとのライブ接続を維持します。
また、マルチレイヤーまたはマルチスライスの Photoshop 画像の全体または一部を Dreamweaver の web ページに貼り付けることもできます。 ただし、Photoshop からコピー＆ペーストする場合、元のファイルへのライブ接続は維持されません。画像を更新するには、Photoshop で変更を行い、再度コピー＆ペーストします。
メモ
この統合機能を頻繁に使用する場合は、アクセスしやすくするために Photoshop ファイルを Dreamweaver サイトに保存することをお勧めします。 その場合は、元のアセットの露出や、ローカルサイトとリモートサーバー間での不要な移行を避けるために、ファイルを必ずクロークしてください。
Dreamweaver と Photoshop の統合に関するチュートリアルについては、Dreamweaver と Photoshop の統合を参照してください。
スマートオブジェクトおよび Photoshop と Dreamweaver 間の連携ワークフローについて
Dreamweaver で Photoshop ファイルを使用する主なワークフローは 2 つあります。コピー＆ペーストワークフローと Smart Objects ワークフローです。
コピー＆ペーストワークフロー
コピー＆ペーストワークフローでは、Photoshop ファイル内のスライスまたはレイヤーを選択し、Dreamweaver を使用して web 対応画像として挿入できます。ただし、後でコンテンツを更新する場合は、元の Photoshop ファイルを開き、変更を加え、スライスまたはレイヤーを再度クリップボードにコピーしてから、更新されたスライスまたはレイヤーを Dreamweaver に貼り付ける必要があります。 このワークフローは、Photoshop ファイルの一部（デザインカンプのセクションなど）を web ページの画像として挿入する場合にのみ推奨されます。
スマートオブジェクトワークフロー
完全な Photoshop ファイルを使用する場合、アドビでは Smart Objects ワークフローを推奨しています。 Dreamweaver の Smart Object は、元の Photoshop（PSD）ファイルとのライブ接続を持つ web ページに配置された画像アセットです。 Dreamweaver デザインビューでは、Smart Object は画像の左上隅のアイコンで示されます。
web 画像（つまり、Dreamweaver ページの画像）が元の Photoshop ファイルと同期していない場合、Dreamweaver は元のファイルが更新されたことを検出し、Smart Object アイコンの矢印の 1 つを赤で表示します。 デザインビューで web 画像を選択し、プロパティインスペクターの「元から更新」ボタンをクリックすると、画像が自動的に更新され、元の Photoshop ファイルに加えた変更が反映されます。
Smart Objects ワークフローを使用する場合、web 画像を更新するために Photoshop を開く必要はありません。さらに、Dreamweaver で Smart Object に加える更新は非破壊的です。 つまり、元の Photoshop 画像をそのまま保持しながら、ページの web バージョンの画像を変更できます。
また、デザインビューで web 画像を選択せずに Smart Object を更新することもできます。 アセットパネルでは、ドキュメントウィンドウで選択できない可能性のある画像（CSS 背景画像など）を含む、すべての Smart Objects を更新できます。
画像の最適化設定
コピー＆ペーストワークフローおよびスマートオブジェクトワークフローのどちらの場合でも、イメージの最適化ダイアログボックスでイメージの最適化設定を指定できます。 このダイアログボックスでは、ファイル形式や画質を指定できます。 スライスまたはレイヤーを Dreamweaver に最初にコピーしたとき、または Photoshop ファイルをスマートオブジェクトとして最初に挿入したときに、このダイアログボックスが表示されるので、Web イメージの作成が簡単に行えます。
特定のスライスまたはレイヤーの更新をコピー＆ペーストした場合、Dreamweaver によって以前の設定が記憶されているので、その設定を使用して Web 画像が再作成されます。 同様に、プロパティインスペクターを使用してスマートオブジェクトを更新したときにも、最初に画像を挿入した際と同じ設定が使用されます。 デザインビューで Web イメージを選択してプロパティインスペクターの「イメージ設定の編集」ボタンをクリックするといつでも画像の設定を変更できます。
Photoshop ファイルの保存
Web 画像を挿入し、元の Photoshop 画像を Dreamweaver サイトに保存しなかった場合、Dreamweaver は元ファイルがあるパスを絶対参照のローカルパスとして認識します （コピー＆ペーストワークフローおよびスマートオブジェクトワークフローどちらの場合も同じです）。 例えば、Dreamweaver サイトのパスが「C:¥Sites¥mySite」で、Photoshop ファイルの保存されている場所が「C:¥Images¥Photoshop」だった場合、Dreamweaver では元のアセットが「mySite」という名前のサイトの一部とはみなされません。 Dreamweaver は特定のローカルのハードドライブ上にあるファイルしか認識しないために、Photoshop ファイルを他のチームメンバーと共有するときなどに問題となることがあります。
Photoshop ファイルをサイト内に保存しておくと、Dreamweaver ではサイトと相対的なパスを確立します。 サイトにアクセスできるユーザーなら、ファイルへの正しいパスを確立することができ、 それらの元ファイルをダウンロードすることもできるようになります。
Photoshop を使用したラウンドトリップ編集に関するビデオチュートリアルについては、Photoshop によるラウンドトリップ編集を参照してください。
スマートオブジェクトの作成
Photoshop 画像（PSD ファイル）をページに挿入すると、Dreamweaver は Smart Object を作成します。Smart Object は、元の Photoshop 画像との接続を維持する web 用画像です。Photoshop で元の画像を更新するたびに、Dreamweaver ではボタンをクリックするだけで画像を更新できます。
挿入／画像を選択します。
メモ
Photoshop ファイルを web サイトに保存している場合は、Files パネルから PSD ファイルをページにドラッグすることもできます。その場合は、次の手順をスキップしてください。
「参照」ボタンをクリックしてイメージソースの選択ダイアログボックスで Photoshop PSD イメージファイルを参照し、そのファイルに移動します。
表示されるイメージの最適化ダイアログボックスで、必要に応じて最適化設定を調整して「OK」をクリックします。
web 対応画像ファイルを web サイトのルートフォルダー内の場所に保存します。
Dreamweaver は選択した最適化設定に基づいてスマートオブジェクトを作成し、画像の web 対応バージョンをページに配置します。スマートオブジェクトは元の画像へのライブ接続を維持し、両者が同期していない場合に通知します。
メモ
ページに配置されたイメージの最適化設定を後で変更する場合は、イメージを選択し、プロパティインスペクターの「イメージ設定の編集」ボタンをクリックして、イメージの最適化ダイアログボックスで変更を行います。 イメージの最適化ダイアログボックスで行った変更は、非破壊的に適用されます。 Dreamweaver では、元の Photoshop ファイルが変更されず、常に元のデータに基づく Web イメージが再作成されます。
Photoshop を使用したラウンドトリップ編集に関するビデオチュートリアルについては、Photoshop によるラウンドトリップ編集を参照してください。
スマートオブジェクトの更新
スマートオブジェクトがリンクされている Photoshop ファイルを変更すると、Dreamweaver は web 対応画像が元の画像と同期していないことを通知します。Dreamweaver では、スマートオブジェクトは画像の左上角のアイコンで示されます。Dreamweaver の web 対応画像が元の Photoshop ファイルと同期している場合、アイコンの両方の矢印が緑色になります。web 対応画像が元の Photoshop ファイルと同期していない場合、アイコンの矢印の一つが赤色になります。
スマートオブジェクトを更新して元の Photoshop ファイルの最新の内容を反映するには、ドキュメントウィンドウでスマートオブジェクトを選択し、プロパティインスペクターの「オリジナルから更新」ボタンをクリックします。
メモ
Dreamweaver から更新を行うために Photoshop をインストールする必要はありません。
複数のスマートオブジェクトの更新
Assets パネルを使用して複数のスマートオブジェクトを一度に更新できます。Assets パネルでは、ドキュメントウィンドウで選択できない可能性があるスマートオブジェクト（例：CSS 背景画像）も表示できます。
Files パネルで、Assets タブをクリックしてサイトアセットを表示します。
イメージビューが選択されていることを確認します。 イメージビューが選択されていない場合は、「イメージ」ボタンをクリックします。
アセットパネルで各イメージアセットを選択します。 スマートオブジェクトを選択すると、画像の左上角にスマートオブジェクトアイコンが表示されます。このアイコンは、通常のイメージには表示されません。
更新したい各スマートオブジェクトについて、ファイル名を右クリックし、「Update from Original」を選択します。Control キーを押しながらクリックして複数のファイル名を選択し、すべてを一度に更新することもできます。
メモ
Dreamweaver から更新を行うために Photoshop をインストールする必要はありません。
スマートオブジェクトのサイズ変更
ドキュメントウィンドウでスマートオブジェクトのサイズを、他の画像と同様に変更できます。
ドキュメントウィンドウでスマートオブジェクトを選択し、リサイズハンドルをドラッグして画像のサイズを変更します。ドラッグ中に Shift キーを押し続けることで、幅と高さの比率を維持できます。
プロパティインスペクターで「オリジナルから更新」ボタンをクリックします。
スマートオブジェクトを更新すると、元のファイルの現在の内容と元の最適化設定に基づいて、web 画像が新しいサイズで非破壊的に再レンダリングされます。
スマートオブジェクトの元の Photoshop ファイルを編集
Dreamweaver ページでスマートオブジェクトを作成した後、Photoshop で元の PSD ファイルを編集できます。Photoshop で変更を行った後、Dreamweaver で web 画像を簡単に更新できます。
メモ
Photoshop をメイン外部画像エディターとして設定していることを確認してください。
ドキュメントウィンドウでスマートオブジェクトを選択します。
プロパティインスペクターの、「編集」ボタンをクリックします。
Photoshop で変更を行い、新しい PSD ファイルとして保存します。
Dreamweaver で、再度スマートオブジェクトを選択し、「オリジナルから更新」ボタンをクリックします。
メモ
Photoshop でイメージのサイズを変更した場合は、Dreamweaver で Web イメージのサイズを再設定する必要があります。 Dreamweaver では、元の Photoshop ファイルの内容（サイズではなく）に基づいてスマートオブジェクトが更新されます。 Web イメージのサイズと元の Photoshop ファイルのサイズを同期させるには、イメージを右クリックして「サイズをオリジナルにリセット」を選択します。
スマートオブジェクトの状態
次の表は、スマートオブジェクトの様々な状態をリストしています。
|
スマートオブジェクトの状態 |
説明 |
推奨される操作 |
|
同期したイメージ |
Web イメージは元の Photoshop ファイルの最新の内容と同期しています。 HTML コードの幅と高さは Web イメージのサイズと一致します。 |
なし |
|
変更された元のアセット |
Dreamweaver での Web イメージの作成後に、元の Photoshop ファイルが変更されました。 |
2 つのイメージを同期させるには、プロパティインスペクターの「オリジナルから更新」ボタンを使用します。 |
|
Web イメージのサイズは、選択された HTML の幅と高さとは異なります。 |
HTML コードの幅と高さが、Dreamweaver で作成して挿入した時点の Web イメージの幅と高さとは異なります。 Web イメージのサイズ、選択された HTML の幅と高さの値より小さい場合は、Web イメージがピクセレートされた画像になる場合があります。 |
プロパティインスペクターの「オリジナルから更新」ボタンを使用して、元の Photoshop ファイルから Web イメージを再作成します。 Dreamweaver では、現在指定されている HTML の幅と高さを使用してイメージが再作成されます。 |
|
元のアセットのサイズは、選択された HTML の幅と高さに比べて小さすぎます。 |
HTML コードの幅と高さが、元の Photoshop ファイルの幅と高さの寸法より大きくなっています。 Web イメージがピクセレートされた画像になります。 |
作成する Web イメージのサイズは、元の Photoshop ファイルのサイズを超えないようにします。 |
|
元のアセットが見つかりません |
プロパティインスペクターの「オリジナル」テキストボックスに指定された元の Photoshop ファイルが見つかりません。 |
プロパティインスペクターの「オリジナル」テキストボックスのファイルパスを修正するか、現在指定されている場所に Photoshop ファイルを移動します。 |
Photoshopから選択範囲をコピーしてペーストする
Photoshop画像の全部または一部をコピーして、選択範囲をDreamweaverページにwebに適した画像としてペーストできます。画像の選択範囲に対して単一のレイヤーまたはレイヤーのセットをコピーしたり、画像のスライスをコピーしたりできます。ただし、この操作を行った場合、Dreamweaverはスマートオブジェクトを作成しません。
メモ
ペーストしたイメージに対しては「オリジナルから更新」機能を使用できませんが、ペーストしたイメージを選択してプロパティインスペクターの「編集」ボタンをクリックすると、元の Photoshop ファイルを開いて編集することができます。
Photoshop で、次のいずれかの操作を行います。
- 単一レイヤーの全体または一部をコピーするには、選択ツールでコピーする部分を選択し、編集／コピーを選択します。 この方法では、選択した領域のアクティブなレイヤーのみがクリップボードにコピーされます。 レイヤーベースの効果を使用している場合、それらの効果はコピーされません。
- 複数のレイヤーをコピーして結合するには、選択ツールでコピーする部分を選択し、編集／結合部分をコピーを選択します。 この方法では、選択した領域にあるすべてのアクティブなレイヤーと下位のレイヤーが結合され、クリップボードにコピーされます。 これらのレイヤーのいずれかに関連付けられたレイヤーベースの効果を使用している場合、それらの効果もコピーされます。
- スライスをコピーするには、スライス選択ツールでスライスを選択し、編集／コピーを選択します。 この方法では、スライスのすべてのアクティブな下位レイヤーが結合され、クリップボードにコピーされます。
メモ
選択／すべてを選択すると、すべてのイメージをすばやく選択してコピーできます。
Dreamweaver（デザインビューまたはコードビュー）で、画像を挿入したいページ上の場所に挿入ポイントを配置します。
編集／ペーストを選択します。
イメージの最適化ダイアログボックスで、必要に応じて最適化設定を調整し、「OK」をクリックします。
webに適した画像ファイルをwebサイトのルートフォルダー内の場所に保存します。
Dreamweaver では、最適化設定に従ってイメージが定義され、Web 対応イメージがページに配置されます。 元の PSD ソースファイルの格納場所などのイメージに関する情報は、デザインノートがサイトに対して有効になっているかどうかに関係なく、デザインノートに保存されます。 デザインノートを使用すると、Dreamweaver から元の Photoshop ファイルに戻ってファイルを編集できます。
ペーストしたイメージの編集
DreamweaverページにPhotoshop画像をペーストした後、PhotoshopでオリジナルのPSDファイルを編集できます。コピー/ペーストワークフローを使用する場合、アドビでは、常にオリジナルのPSDファイル（webに適した画像そのものではなく）に編集を加えてから再ペーストして、シングルソースを維持することをお勧めします。
メモ
編集したいファイルタイプのプライマリ外部画像エディターとしてPhotoshopが設定されていることを確認します。
Dreamweaverで、もともとPhotoshopで作成されたwebに適した画像を選択し、次のいずれかを実行します：
- イメージのプロパティインスペクターで「編集」ボタンをクリックします。
- ファイルをダブルクリックする際に、Control（Windows）またはCommand（Macintosh）を押します。
- 画像を右クリック（Windows）またはControlを押しながらクリック（Macintosh）し、コンテキストメニューから「オリジナルを編集」を選択してから、Photoshopを選択します。
メモ
これは、PSD画像ファイルのプライマリ外部画像エディターとしてPhotoshopが設定されていることを前提としています。JPEG、GIF、PNGファイルタイプのデフォルトエディターとしてPhotoshopを設定することもできます。
Photoshop でファイルを編集します。
Dreamweaverに戻り、更新された画像または選択範囲をページにペーストします。
必要に応じてイメージを再最適化する場合は、イメージを選択し、プロパティインスペクターの「イメージ設定の編集」ボタンをクリックします。
イメージの最適化ダイアログボックスオプションの設定
スマートオブジェクトを作成する場合や Photoshop から選択範囲をペーストする場合は、Dreamweaver にイメージの最適化ダイアログボックスが表示されます。 他の種類のイメージを選択してプロパティインスペクターの「イメージ設定の編集の編集」ボタンをクリックした場合にも、このダイアログボックスが表示されます。 このダイアログボックスでは、適切な色、圧縮率、画質の組み合わせを使用して Web 対応イメージの設定を定義してプレビューすることができます。
Web 対応イメージは、最新のすべての Web ブラウザーでの表示が可能で、ユーザーが使用するどのシステムやブラウザーでも同じように表示されます。 通常、画質を上げるとファイルサイズが大きくなり、画質を下げるとファイルサイズが小さくなります。
メモ
選択した設定はいずれも、読み込むイメージファイルにのみ影響します。 元の Photoshop PSD または Fireworks PNG ファイルは一切変更されません。
プリセット
要件に最適なプリセットを選択します。 イメージのファイルサイズは、選択したプリセットに基づいて変わります。 適用された設定による画像のインスタントプレビューが背景に表示されます。
例えば、高い明瞭度で表示する必要のあるイメージの場合は、「PNG24 - 写真用 (シャープな詳細)」を選択します。ページの背景として機能するパターンを挿入する場合は、GIF For Background Images (Patterns)を選択します。
プリセットを選択すると、プリセットに構成できるオプションが表示されます。最適化設定をさらにカスタマイズしたい場合は、これらのオプションの値を変更します。
