Making an Image into a Smart Object
To place a Photoshop image into Dreamweaver as a Smart Object, follow these steps:
- Click to place the insertion point where you want the image to appear in the document. In Figure 2, I've selected an image placeholder on my web page.
- Click the Images button in the Common category of the Insert panel (see Figure 3). Alternatively, you can choose Insert > Image or press Ctrl-Alt-I (Mac: Command-Option-I).
- In the Select Image Source dialog, navigate to and select the Photoshop file that you want to insert.
- Click OK (Mac: Open). The Image Optimization dialog appears, as shown in Figure 4.
- Using the Preset and Format pop-up menus, select the file format you want to use, and tweak the settings for that format as needed. In this example, I wanted to maintain the image's background transparency, so I chose PNG8 as the format used in Dreamweaver.
- Click OK. The Save Web Image dialog appears. Give the image a name, navigate to where you want to save it, and click Save.
- The Image Tag Accessibility Attributes dialog appears, as shown in Figure 5. Enter a description for the image, and then click OK. The optimized image from Photoshop appears on your web page.
Notice that this image differs from other images that you place from your images folder; a badge in the upper-left corner of the image indicates that it's a Smart Object (see Figure 6). Two green curved arrows in the badge indicate that the Smart Object on the Dreamweaver page is synchronized with the original Photoshop image.
If the Photoshop image is modified and saved, the bottom green arrow in the badge turns red, indicating that the original file has been changed. The next section explains how to update the Smart Object without opening Photoshop.