Adobe Dreamweaver CC 2015 - Manual (Page 337)

330
Page content and assets
Last updated 6/3/2015
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.
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 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 on roundtrip editing with Photoshop, see Roundtrip editing with Photoshop .
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.
Note: You do not need Photoshop installed to make the update from Dreamweaver.
Update multiple Smart Objects
You can update multiple Smart Objects at once using the Assets panel. The Assets panel also lets you see Smart Objects
that might not be selectable in the Document window (for example, CSS background images).
1 In the Files panel, click the Assets tab to view site assets.
2 Make sure that Images view is selected. If it isn’t, click the Images button.
3 Select each image asset in the Assets panel. When you select a Smart Object, you’ll see the Smart Object icon in the
upper left corner of the image. Regular images do not have this icon.
4 For each Smart Object that you want to update, right-click the filename and select Update from Original. You can
also Control-click to select multiple filenames and update them all at once.
Note: You do not need Photoshop installed to make the update from Dreamweaver.
Resize a Smart Object
You can resize a Smart Object in the Document window just as you would any other image.
1 Select the Smart Object in the Document window and drag the resize handles to resize the image. You can maintain
the width and height proportions by holding down the Shift key as you drag.
2 Click the Update from Original button in the Property inspector.
When you update the Smart Object, the web image non-destructively re-renders at the new size, based on the
current contents of the original file, and the original optimization settings.