Operation Manual

350
USING DREAMWEAVER
Working with other applications
Last updated 3/28/2012
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.
Create a Smart Object
When you insert a Photoshop image (PSD file) into your page, Dreamweaver creates a Smart Object. A Smart Object
is a web-ready image that maintains a live connection to the original Photoshop image. Whenever you update the
original image in Photoshop, Dreamweaver gives you the option of updating the image in Dreamweaver with the click
of a button.
1 In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
2 Select Insert > Image.
You can also drag the PSD file to the page from the Files panel if you’re storing your Photoshop files in your website.
If you do so, you’ll skip the next step.
3 Locate your Photoshop PSD image file in the Select Image Source dialog box by clicking the Browse button and
navigating to it.
4 In the Image Preview dialog box that appears, adjust optimization settings as needed and click OK.
5 Save the web-ready image file to a location within your website’s root folder.
Dreamweaver creates the Smart Object based on the selected optimization settings and places a web-ready version of
the image on your page. The Smart Object maintains a live connection to the original image and lets you know when
the two are out of synch.
Note: If you decide later that you want to change the optimization settings for an image placed in your pages, you can
select the image, click the Edit Image Settings button in the Property inspector, and make changes in the Image Preview
dialog box. Changes made in the Image Preview dialog box are applied non-destructively. Dreamweaver never modifies
the original Photoshop file, and always re-creates the web image based on the original data.
For a video tutorial about working with Photoshop Smart Objects, see www.adobe.com/go/lrvid4043_dw.
Update a Smart Object
If you change the Photoshop file to which your Smart Object is linked, Dreamweaver notifies you that the web-ready
image is out of sync with the original. In Dreamweaver, Smart Objects are denoted by an icon at the upper left corner
of the image. When the web-ready image in Dreamweaver is in sync with the original Photoshop file, both of the
arrows in the icon are green. When the web-ready image is out of sync with the original Photoshop file, one of the
icon’s arrows turns read.
❖ To update a Smart Object with the current contents of the original Photoshop file, select the Smart Object in the
Document window, and then click the Update from Original button in the Property inspector.