About Smart Objects and Photoshop-Dreamweaver workflows

Copy/paste workflow

The copy/paste workflow lets you select slices or layers in a Photoshop file, and then use Dreamweaver to insert them as web-ready images. If you want to update the content later on, however, you must open the original Photoshop file, make your changes, copy your slice or layer to the clipboard again, and then paste the updated slice or layer into Dreamweaver. This workflow is only recommended when you want to insert part of a Photoshop file (for example, a section of a design comp) as an image on a web page.

Smart Objects workflow

When working with complete Photoshop files, Adobe recommends the Smart Objects workflow. A Smart Object in Dreamweaver is an image asset placed on a web page that has a live connection to an original Photoshop (PSD) file. In Dreamweaver Design view, a Smart Object is denoted by an icon in the upper left corner of the image.

Smart Object

When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the original Photoshop file.

When you use the Smart Objects workflow, you do not need to open Photoshop to update a web image. Additionally, any updates you make to a Smart Object in Dreamweaver are non-destructive. That is, you can change the web version of the image on your page while keeping the original Photoshop image intact.

You can also update a Smart Object without selecting the web image in Design view. The Assets panel lets you update all Smart Objects, including images that might not be selectable in the Document window (for example, CSS background images).

Image optimization settings

For both the copy/paste and the Smart Object workflows, you can specify optimization settings in the Image Preview dialog box. This dialog box lets you set things like file format, image quality, and so on. If you are copying a slice or a layer for the first time, or inserting a Photoshop file as a Smart Object for the first time, Dreamweaver displays this dialog so that you can easily create the web image.

If you copy and paste an update to a particular slice or layer, Dreameaver remembers the original settings and re-creates the web image with those settings. Likewise, when you update a Smart Object using the Property inspector, Dreamweaver uses the same settings you used when you first inserted the image. You can change an image’s settings at any time by selecting the web image in Design view, and then clicking the Edit Image Settings button in the Property inspector.

Storing Photoshop files

If you’ve inserted a web image, and have not stored the original Photoshop file in your Dreamweaver site, Dreamweaver recognizes the path to the original file as an absolute local file path. (This is true for both the copy/paste and Smart Object workflows.) For example, if the path to your Dreamweaver site is C:\Sites\mySite, and your Photoshop file is stored in C:\Images\Photoshop, Dreameaver will not recognize the original asset as part of the site called mySite. This will cause problems if you ever want to share the Photoshop file with other team members because Dreamweaver will only recognize the file as being available on a particular local hard drive.

If you store the Photoshop file inside your site, however, Dreamweaver establishes a site-relative path to the file. Any user with access to the site will also be able to establish the correct path to the file, assuming that you have also provided the original file for them to download.

For a video tutorial on the Smart Objects workflow in Photoshop and Dreamweaver, see www.adobe.com/go/lrvid4043_dw.