Dreamweaver CC では、Photoshop の編集ファイル(PSD 形式のイメージファイル)を、Dreamweaver の Web ページに挿入し、Dreamweaver で Web で表示されるGIF、JPEG、および PNG 形式のイメージファイルとして最適化できます。また元の PSD ファイルの参照は維持され、Photoshop で PSD ファイルを編集して、Dreamweaver のページ上に配置した画像に変更を反映することもできます。

PSD ファイルを直接配置する方法

Photoshop ファイルを Dreamweaver サイト内に保存しておくと、以降も簡単に再利用できるようになります。事前に Photoshop で画像を作成して、PSD 形式で Dreamweaver サイトに保存をしておきます。

  1. Dreamweaver CC を起動します。

  2. 編集したいサイトを定義して、HTMLファイルを開きます。

    ※詳しくは「[Creative Cloud 入門] サイトの定義について(Dreamweaver CC)」を確認してください。

  3. ローカルファイルの画像フォルダーに保存したPSDファイルをドラック&ドロップでデザインビューに配置します。

  4. イメージの最適化 ダイアログボックスが表示されたら、目的に合った設定に変更して「OK」をクリックします。ここでは例として以下のように設定します。

    • プリセット:PNG8 - ロゴとテキスト
    • カラー:256
    • 透明度:画像の背景が透明の場合はチェックを入れます。
      ※他にも GIF や PNG32 も透明部分を反映できます。
  5. WEB イメージを保存 ダイアログボックスが表示されたら、画像を保存する場所を選択して、「保存」ボタンをクリックします。

    以上で、PSD ファイルを直接配置するための手順は完了です。

    配置した画像の左上に、同期したイメージのアイコンが表示され、手順4から手順5で設定した保存場所にイメージファイルが生成されます。

配置した PSD ファイルを更新する方法

  1. PSD ファイルを編集します。

  2. PSD ファイルと同期した画像を選択します。

  3. プロパティ パネルにある「オリジナルを更新」ボタンをクリックします。

    以上で、配置した PSD ファイルを更新する手順は完了です。

    一度、PSD ファイルを直接配置すれば、あとは PSD ファイルを編集して更新ボタンをクリックするだけで変更が更新されるので大変便利な機能です。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー