Operation Manual

To the top
Note:
To the top
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 Optimization dialog box. This dialog
box lets you specify the file format and image quality. If you are copying a slice or a layer, 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.
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 Optimization 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.
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 Optimization dialog box. Changes made in the Image
Optimization 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
602