マニュアルキャンセル

Dreamweaver での Photoshop ファイルの使用

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

Photoshop を Dreamweaver と統合する方法について説明します。Photoshop と Dreamweaver 間の連携ワークフローでスマートオブジェクトを使用します。

Photoshop の統合について

注意：

Dreamweaver 21.0 Photoshop 統合ワークフローは、Dreamweaver 21.0 以降のバージョンで廃止されました。

Photoshop イメージファイル（PSD 形式）は、Dreamweaver の Web ページに挿入し、Dreamweaver で Web 対応のイメージファイル（GIF、JPEG、および PNG 形式）として最適化できます。この場合、Dreamweaver ではイメージがスマートオブジェクトとして挿入され、元の PSD ファイルへのライブ接続が保持されます。

マルチレイヤーまたはマルチスライス Photoshop イメージの全体またはその一部を、Dreamweaver の Web ページにペーストすることもできます。ただし、Photoshop からコピー＆ペーストする場合は、元のファイルへのライブ接続は保持されません。イメージを更新するには、Photoshop で変更を行って再度コピー＆ペーストする必要があります。

注意：

この統合機能をよく使用する場合は、Photoshop ファイルを Dreamweaver サイトに格納すると、簡単にアクセスできるようになります。Dreamweaver サイトに格納する場合は、Photoshop ファイルをクロークして元のアセットが公開されないようにすると共に、ローカルサイトとリモートサーバーの間に不要な転送が発生しないようにします。

Dreamweaver と Photoshop の統合に関するチュートリアルについては、Dreamweaver と Photoshop の統合を参照してください。

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

Photoshop ファイルを Dreamweaver で扱う方法は、主にコピー＆ペーストワークフローとスマートオブジェクトワークフローの 2 種類があります。

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

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」だった場合、Dreamweaver では元のアセットが「mySite」という名前のサイトの一部とはみなされません。Dreamweaver は特定のローカルのハードドライブ上にあるファイルしか認識しないために、Photoshop ファイルを他のチームメンバーと共有するときなどに問題となることがあります。

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

Photoshop を使用したラウンドトリップ編集に関するビデオチュートリアルについては、Photoshop によるラウンドトリップ編集を参照してください。

スマートオブジェクトの作成

Photoshop イメージ（PSD ファイル）をページに挿入すると、スマートオブジェクトが作成されます。スマートオブジェクトは、元の Photoshop イメージとのライブ接続を保持する Web 対応イメージです。Photoshop で元のイメージを更新するたびに、ボタンのクリックによって Dreamweaver のイメージを更新するかどうかを選択できます。

Dreamweaver（デザインビューまたはコードビュー）で、イメージを挿入するページ上の場所に挿入ポイントを置きます。
挿入／イメージを選択します。

注意：

Photoshop ファイルを Web サイトに格納する場合は、ファイルパネルからページに PSD ファイルをドラッグすることもできます。その場合は、次の手順をスキップしてください。
「参照」ボタンをクリックしてイメージソースの選択ダイアログボックスで Photoshop PSD イメージファイルを参照し、そのファイルに移動します。
表示されるイメージの最適化ダイアログボックスで、必要に応じて最適化設定を調整して「OK」をクリックします。
Web 対応イメージファイルを、Web サイトのルートフォルダー内に保存します。

Dreamweaver では、選択された最適化設定に基づいてスマートオブジェクトが作成され、Web 対応バージョンのイメージがページ上に挿入されます。スマートオブジェクトは、元のイメージへのライブ接続を保持し、両方のイメージが同期していない場合には通知を行います。

注意：

ページに配置されたイメージの最適化設定を後で変更する場合は、イメージを選択し、プロパティインスペクターの「イメージ設定の編集」ボタンをクリックして、イメージの最適化ダイアログボックスで変更を行います。イメージの最適化ダイアログボックスで行った変更は、非破壊的に適用されます。Dreamweaver では、元の Photoshop ファイルが変更されず、常に元のデータに基づく Web イメージが再作成されます。

Photoshop を使用したラウンドトリップ編集に関するビデオチュートリアルについては、Photoshop によるラウンドトリップ編集を参照してください。

スマートオブジェクトの更新

スマートオブジェクトがリンクされている Photoshop ファイルを変更すると、Web 対応イメージが元のイメージと同期していないことが通知されます。Dreamweaver では、スマートオブジェクトはイメージの左上隅のアイコンで示されます。Dreamweaver の Web 対応イメージが元の Photoshop ファイルと同期している場合は、アイコンの両方の矢印が緑色で表示されます。Web 対応イメージが元の Photoshop ファイルと同期しなくなると、アイコンの一方の矢印が赤になります。

スマートオブジェクトを更新して元の Photoshop ファイルの最新の内容を反映するには、ドキュメントウィンドウでスマートオブジェクトを選択し、プロパティインスペクターの「オリジナルから更新」ボタンをクリックします。

注意：

Photoshop がインストールされていなくても Dreamweaver から更新を行うことができます。

複数のスマートオブジェクトの更新

アセットパネルを使用して、複数のスマートオブジェクトを一括して更新できます。アセットパネルでは、ドキュメントウィンドウでは選択できないスマートオブジェクト（CSS 背景イメージなど）を表示することもできます。

ファイルパネルで、「アセット」タブをクリックしてサイトのアセットを表示します。
イメージビューが選択されていることを確認します。イメージビューが選択されていない場合は、「イメージ」ボタンをクリックします。
アセットパネルで各イメージアセットを選択します。スマートオブジェクトを選択すると、イメージの左上隅にスマートオブジェクトアイコンが表示されます。このアイコンは、通常のイメージには表示されません。
更新するスマートオブジェクトごとに、ファイル名を右クリックして「オリジナルから更新」を選択します。Ctrl キーを押しながら複数のファイル名をクリックして選択することにより、複数のスマートオブジェクトを一括して更新することもできます。

注意：

Photoshop がインストールされていなくても Dreamweaver から更新を行うことができます。

スマートオブジェクトのサイズ変更

他のイメージと同じように、ドキュメントウィンドウでスマートオブジェクトのサイズを変更できます。

ドキュメントウィンドウでスマートオブジェクトを選択し、サイズ変更ハンドルをドラッグしてイメージのサイズを変更します。Shift キーを押しながらドラッグすると、縦横比を維持してサイズを変更できます。
プロパティインスペクターで「オリジナルから更新」ボタンをクリックします。

スマートオブジェクトを更新すると、元のファイルの最新の内容と元の最適化設定に基づいて、Web イメージが新しいサイズで非破壊的に再描画されます。

スマートオブジェクトの元の Photoshop ファイルの編集

スマートオブジェクトを Dreamweaver ページに作成した後で、元の PSD ファイルを Photoshop で編集することができます。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 イメージ全体またはその一部をコピーし、Web 対応イメージとして Dreamweaver ページにペーストできます。イメージの選択された領域の単一のレイヤーまたはレイヤーのセットをコピーできます。または、イメージのスライスをコピーできます。ただし、コピーした場合はスマートオブジェクトが作成されません。

注意：

ペーストしたイメージに対しては「オリジナルから更新」機能を使用できませんが、ペーストしたイメージを選択してプロパティインスペクターの「編集」ボタンをクリックすると、元の Photoshop ファイルを開いて編集することができます。

Photoshop で、次のいずれかの操作を行います。
- 単一レイヤーの全体または一部をコピーするには、選択ツールでコピーする部分を選択し、編集／コピーを選択します。この方法では、選択した領域のアクティブなレイヤーのみがクリップボードにコピーされます。レイヤーベースの効果を使用している場合、それらの効果はコピーされません。
- 複数のレイヤーをコピーして結合するには、選択ツールでコピーする部分を選択し、編集／結合部分をコピーを選択します。この方法では、選択した領域にあるすべてのアクティブなレイヤーと下位のレイヤーが結合され、クリップボードにコピーされます。これらのレイヤーのいずれかに関連付けられたレイヤーベースの効果を使用している場合、それらの効果もコピーされます。
- スライスをコピーするには、スライス選択ツールでスライスを選択し、編集／コピーを選択します。この方法では、スライスのすべてのアクティブな下位レイヤーが結合され、クリップボードにコピーされます。
注意：

選択／すべてを選択すると、すべてのイメージをすばやく選択してコピーできます。
Dreamweaver（デザインビューまたはコードビュー）で、イメージを挿入するページ上の場所に挿入ポイントを置きます。
編集／ペーストを選択します。
イメージの最適化ダイアログボックスで、必要に応じて最適化設定を調整し、「OK」をクリックします。
Web 対応イメージファイルを、Web サイトのルートフォルダー内に保存します。

Dreamweaver では、最適化設定に従ってイメージが定義され、Web 対応イメージがページに配置されます。元の PSD ソースファイルの格納場所などのイメージに関する情報は、デザインノートがサイトに対して有効になっているかどうかに関係なく、デザインノートに保存されます。デザインノートを使用すると、Dreamweaver から元の Photoshop ファイルに戻ってファイルを編集できます。

ペーストしたイメージの編集

Photoshop イメージを Dreamweaver ページにペーストした後で、元の PSD ファイルを Photoshop で編集することができます。コピー＆ペーストを使用する場合は、Web 対応イメージではなく元の PSD ファイルを常に編集して再ペーストすることにより、ソースを一元化することをお勧めします。

注意：

編集するファイルタイプのプライマリ外部エディターとして Photoshop が設定されていることを確認してください。

Dreamweaver で、Photoshop で作成された Web 対応イメージを選択し、次のいずれかの操作を行います。
- イメージのプロパティインスペクターで「編集」ボタンをクリックします。
- Ctrl キー（Windows）または Command キー（Mac OS）を押しながら、ファイルをダブルクリックします。
- 目的のイメージを右クリックするか（Windows）または Control キーを押しながらクリックし（Mac OS）、コンテキストメニューの「オリジナルの編集に使用」を選択し、「Photoshop」を選択します。
注意：

この操作を実行するには、Photoshop を PSD イメージファイル用のプライマリ外部イメージエディターとして設定する必要があります。また、Photoshop を JPEG、GIF、および PNG の各ファイルタイプ用の初期設定のエディターとして設定することもできます。
Photoshop でファイルを編集します。
Dreamweaver に戻り、更新されたイメージまたは選択範囲をページ内にペーストします。

必要に応じてイメージを再最適化する場合は、イメージを選択し、プロパティインスペクターの「イメージ設定の編集」ボタンをクリックします。

イメージの最適化ダイアログボックスオプションの設定

スマートオブジェクトを作成する場合や Photoshop から選択範囲をペーストする場合は、Dreamweaver にイメージの最適化ダイアログボックスが表示されます。他の種類のイメージを選択してプロパティインスペクターの「イメージ設定の編集の編集」ボタンをクリックした場合にも、このダイアログボックスが表示されます。このダイアログボックスでは、適切な色、圧縮率、画質の組み合わせを使用して Web 対応イメージの設定を定義してプレビューすることができます。

Web 対応イメージは、最新のすべての Web ブラウザーでの表示が可能で、ユーザーが使用するどのシステムやブラウザーでも同じように表示されます。通常、画質を上げるとファイルサイズが大きくなり、画質を下げるとファイルサイズが小さくなります。

注意：

選択した設定はいずれも、読み込むイメージファイルにのみ影響します。元の Photoshop PSD または Fireworks PNG ファイルは一切変更されません。

プリセット

要件に最適なプリセットを選択します。イメージのファイルサイズは、選択したプリセットに基づいて変わります。設定が適用されたイメージの概略が背景で表示されます。

例えば、高い明瞭度で表示する必要のあるイメージの場合は、「PNG24 - 写真用 (シャープな詳細)」を選択します。ページの背景として機能するパターンを挿入する場合は、「GIF - 背景画像用 (パターン)」を選択します。

プリセットを選択すると、プリセットに構成できるオプションが表示されます。最適化設定を詳しくカスタマイズするときは、これらのオプションの値を変更します。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る