Working with Smart Objects in Dreamweaver and Photoshop
- Making Images into Smart Objects
- Smart Object Integration in CS5 Versus CS6
- Getting Ready to Place Images
- Making an Image into a Smart Object
- Updating Smart Objects
Images probably convey much of the message of the websites you build in Dreamweaver. If your site is photo-based, such as a photographer's portfolio site, images might even be the main part of your message, although most sites use images primarily to supplement the text.
However important images are to your particular site, you'll need to create a workflow to place any images on your site, and that means figuring out a way to prepare the images in Photoshop and then place them into your web pages in Dreamweaver. Adobe has built image integration into Photoshop and Dreamweaver, so you can start with an image in Photoshop and bring it into Dreamweaver. When your clients inevitably want changes in their websites, you can make your changes to the original image in Photoshop; those changes will reflow through to Dreamweaver, saving you lots of time in image replacement.
Making Images into Smart Objects
Images in Dreamweaver that are linked to original files in Photoshop are called Smart Objects. You can choose a Photoshop file in Dreamweaver's Select Image Source dialog to place that file into your Dreamweaver web page. The image file is copied and placed into Dreamweaver in JPEG, GIF, or PNG format as a Smart Object, which maintains a link to the original Photoshop .psd file. When the .psd file is updated and saved, Dreamweaver lets you know that the file has changed so you can update the copy in your Dreamweaver document. Dreamweaver also remembers the path to the Photoshop source file and allows you to reopen the image file for modifications in Photoshop.
A big benefit of the Smart Object approach is that you can use a single .psd file in multiple locations in your site. When you update the Photoshop file, you can update any Smart Objects based on that file throughout your site, all at once. You can even have multiple Smart Objects on a single page, perhaps in different sizes, or cropped differently—all linked to the same Photoshop file. You also can update each Smart Object independently.