How to Use Photoshop SmartObjects in Dreamweaver CS4

Adobe Photoshop SmartObjects were introduced in Adobe Dreamweaver CS4. The SmartObject is connected to a Photoshop PSD file that can be used and modified on various pages as a web image. Here is how to work with it.

Difficulty:

Moderate

Instructions

Things You'll Need

• Adobe Photoshop
• Adobe Dreamweaver CS4

1. SmartObjects from a single PSD file can be used in multiple instances in a website. Each instance can be modified and still remain connected to the originial PSD image.

2. Start with a page that has been saved. Select Insert > Image or drag and drop a PSD file onto the page.

3. Preview Dialog box

   The Image Preview Dialog will appear. Here you can select the file format you want, crop, set quality and make other image optimization choices. When you are finished, click OK.

4. In Sync icon

   The image appears on the Dreamweaver page with a SmartObject badge in the upper left corner. The badge will notify you that the image is in sync with the original Photoshop image, or out of sync. The image shows a badge indicating "in sync."

5. Out of Sync icon

   Here, the image is "out of sync." When the image is out of sync, it means that the image has been modified, either in Dreamweaver or in Photoshop. Perhaps you scaled the image in Dreamweaver to be smaller than the original Photoshop object.

6. You have several choices in Dreamweaver when your image is out of sync. You can see them by right-clicking (Ctrl-Click on Mac) on the image to see the menu.

7. smart object menu

   If you select "Update from Original" the web image will be rerendered in the selected size and optimized for that placement. You can select "Reset Size to Original" and the image will return to its original size.

8. If you modify the image in Photoshop, the changes are made automatically in Dreamweaver when you save in Photoshop. When a SmartObject has been modified in Photoshop, you see a red arrow at the bottom of the web image in Dreamweaver. If you choose "Update from Original" now, the image contents will update, but NOT the size being used in a particular instance of the SmartObject. So, for example, if you are using a single PSD image in a thumbnail, a sidebar graphic and a footer graphic, each will retain its size settings while updating its contents.

9. You can also work on SmartObjects by accessing them in the Assets panel. Using this method, you can choose "Update from Original" when an image was changed in Photoshop and all the SmartObjects will be updated at once, rather than going through the Dreamweaver pages where the SmartObjects were placed one by one.

10. When SmartObjects are used in Templates, updating the template's dependent pages will update the images.