PDF (adobe.com)

Create a Smart Object

When you insert a Photoshop image (PSD file) into your page, Dreamweaver creates a Smart Object. A Smart Object is a web-ready image that maintains a live connection to the original Photoshop image. Whenever you update the original image in Photoshop, Dreamweaver gives you the option of updating the image in Dreamweaver with the click of a button.

  1. In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
  2. Select Insert > Image.
    You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website. If you do so, you’ll skip the next step.
  3. Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and navigating to it.
  4. In the Image Preview dialog box that appears, adjust optimization settings as needed and click OK.
  5. Save the web‑ready image file to a location within your website’s root folder.

Dreamweaver creates the Smart Object based on the selected optimization settings and places a web-ready version of the image on your page. The Smart Object maintains a live connection to the original image and lets you know when the two are out of synch.

Note: If you decide later that you want to change the optimization settings for an image placed in your pages, you can select the image, click the Edit Image Settings button in the Property inspector, and make changes in the Image Preview dialog box. Changes made in the Image Preview dialog box are applied non-destructively. Dreamweaver never modifies the original Photoshop file, and always re-creates the web image based on the original data.

For a video tutorial about working with Photoshop Smart Objects, see www.adobe.com/go/lrvid4043_dw.