How to Place Photoshop Smart Objects in Adobe Dreamweaver CS6 - dummies

How to Place Photoshop Smart Objects in Adobe Dreamweaver CS6

By Jennifer Smith, Christopher Smith, Fred Gerantabee

The ability to work with Photoshop files in Adobe Dreamweaver CS6 is useful for most designers who depend on Photoshop as part of their workflow. When you place Photoshop files on a page, Dreamweaver creates a Smart Object, an image that maintains a connection to the original Photoshop file from which it was created.

The image displays an icon that lets you know whether the original file was updated, and you can apply the changes in the original file to the image in one click.

To place a Photoshop file in your page, follow these steps:

  1. Click wherever you want to place the new image and then click the Image button in the Insert panel’s Common category.

  2. When the Select Image Source dialog box appears, browse and select a Photoshop PSD file and then click Choose/OK to select the image.

    The Image Optimization dialog box appears. This dialog box lets you save your image in the web-friendly GIF, JPEG, or PNG formats.


  3. In the Preset drop-down list, select the JPEG High for Maximum Compatibility option.

  4. Click OK to save the image.

  5. When the Save web Image dialog box appears, navigate to your site’s root folder and click OK/Save to save the image in the appropriate folder (such as your default images folder).

  6. When the Image Tag Accessibility Attributes dialog box appears, type in a concise, short description for your image (such as Man on Bike).

    The new image is placed and a small icon appears in its upper left corner. This Smart Object indicator shows two green arrows, indicating that the image is up-to-date.

Select the image you placed in the preceding step list and locate the Original text field in the Property inspector — this field displays the location of the original Photoshop file. To edit the image, you can simply click the Edit in Photoshop button in the center of the Property inspector to open the source file in Photoshop.