Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Working with Smart Objects in Dreamweaver and Photoshop

  • Print
  • + Share This
If your websites use a lot of images, you've probably spent plenty of time jumping between Dreamweaver and Photoshop to make changes, and then trying to keep track of which files are current and which need to be synched. Now you can cross that nightmare off your task list. Tom Negrino, coauthor of Dreamweaver CS6: Visual QuickStart Guide, shows how using Smart Objects in Dreamweaver CS6 can keep your images in sync automatically.
Like this article? We recommend

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.

  • + Share This
  • 🔖 Save To Your Account