Dreamweaver

Use Photoshop to edit images in Dreamweaver pages

After you place Photoshop images in your Dreamweaver pages, you can edit, in Photoshop, either the original PSD source image or the web-ready JPEG, GIF, or PNG file that was displayed in the page. If you make changes to the web-ready version of the file, the source PSD file is not updated and the two versions will diverge. It is recommended that you make your edits to the source PSD file to maintain single sourcing.

Note: Make sure you have Photoshop set as your primary external image editor for the file type you want to edit.

Edit the original PSD source file in Photoshop

  1. In Dreamweaver, select a web-ready image that was originally created in Photoshop and do one of the following:

    • Click the Edit button in the image’s Property inspector.

    • Press Control (Windows) or Command (Macintosh) as you double-click the file.

    • Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Source With from the context menu, and then choose Photoshop.

      Note: This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want to set Photoshop as the default editor for JPEG, GIF, and PNG file types.
  2. After you edit the file in Photoshop, you can do one of the following to update the image in your page:

    • Reinsert the file and redefine optimization settings.

    • Paste the image or selection into your page. Dreamweaver uses your existing optimization settings

To reoptimize, click the Optimize button in the Property inspector to open the Image Preview dialog box. If the image was created in Photoshop, the Photoshop image is reimported and you can reapply optimization settings to it. If there is no Photoshop PSD file associated with the image, the web-ready image is displayed.

Edit the web-ready image file in Photoshop

  1. In Dreamweaver, select Edit > Preferences > File Types and define Photoshop as the default editor for JPEG, GIF, and PNG file types. It is set by default as the primary editor for PSD files.

    • To add a new file type, click the plus (+) above the left-hand panel.

    • To add or change the external editor for a file type, select that type in the left-hand panel and click the plus (+) above the right-hand panel. This puts you into the Select External Editor file locator dialog box.

  2. Select an image that originated in Photoshop and do one of the following:

    • Press Alt (Windows) or Option (Macintosh) as you double-click the file.

    • Right-click (Windows) or Control-click (Macintosh) the selected image, choose Edit With > Browse from the context menu, and then locate the Photoshop application file.

    • Select Modify > Image > Photoshop.

  3. After you have edited the file as needed in Photoshop, save the file.
  4. In Dreamweaver, the file is updated with your revisions, although you may need to reset the image’s size.

You can perform minor editing of your web-ready images, such as cropping or reoptimizing, with the Dreamweaver image-editing tools in the image’s Property inspector or by using the Modify > Image menu commands. The source PSD file is not updated with these actions, only the web-ready image.