Learn how Photoshop is integrated with Dreamweaver. Work with Smart Objects in Photoshop - Dreamweaver workflows.

About Photoshop integration

You can insert Photoshop image files (PSD format) into web pages in Dreamweaver and let Dreamweaver optimize them as web‑ready images (GIF, JPEG, and PNG formats). When you do this, Dreamweaver inserts the image as a Smart Object and maintains a live connection to the original PSD file.

You can also paste all or part of a multi-layered or multi-sliced Photoshop image into a web page in Dreamweaver. When you copy and paste from Photoshop, however, no live connection to the original file is maintained. To update the image, make your changes in Photoshop, and copy and paste again.

Note:

If you use this integration feature often, you may want to store your Photoshop files in your Dreamweaver site for easier access. If you do, be sure to cloak them to avoid exposure of the original assets, as well as unnecessary transfers between the local site and the remote server.

For a tutorial on Photoshop integration with Dreamweaver, see Integrating Dreamweaver with Photoshop.

About Smart Objects and Photoshop-Dreamweaver workflows

There are two main workflows for working with Photoshop files in Dreamweaver: the copy/paste workflow, and the Smart Objects workflow.

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
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 roundtrip editing with Photoshop, see Roundtrip editing with Photoshop.

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.

    Note:

    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.

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.

Edit a Smart Object’s original Photoshop file

After you create a Smart Object on your Dreamweaver page, you can edit the original PSD file in Photoshop. After you make your changes in Photoshop, you can then easily update the web image in Dreamweaver.

Note:

Make sure that you have Photoshop set as your primary external image editor.

  1. Select the Smart Object in the Document window.
  2. Click the Edit button in the Property inspector.

  3. Make your changes in Photoshop and save the new PSD file.
  4. In Dreamweaver, select the Smart Object again and click the Update from Original button.

Note:

If you changed the size of your image in Photoshop, you need to reset the size of the web image in Dreamweaver. Dreamweaver updates a Smart Object based only on the contents of the original Photoshop file, and not its size. To sync the size of a web image with the size of the original Photoshop file, right-click the image and select Reset Size To Original.

Smart Object states

The following table lists the various states for Smart Objects.

SmartObject state

Description

Recommended action

Images synched

The web image is in sync with the current contents of the original Photoshop file. Width and height attributes in the HTML code match the dimensions of the web image.

None

Original asset modified

The original Photoshop file has been modified after the creation of the web image in Dreamweaver.

Use the Update From Original button in the Property inspector to sync the two images.

Dimensions of web image are different from selected HTML width and height

The width and height attributes in the HTML code are different from the width and height dimensions of the web image that Dreamweaver created upon insertion. If the web image’s dimensions are smaller than the selected HTML width and height values, the web image can appear pixelated.

Use the Update From Original button in the Property inspector to re-create the web image from the original Photoshop file. Dreamweaver uses the currently specified HTML width and height dimensions when it re-creates the image.

Dimensions of original asset are too small for selected HTML width and height

The width and height attributes in the HTML code are larger than the width and height dimensions of the original Photoshop file. The web image can appear pixelated.

Don’t create web images with dimensions larger than the dimensions of the original Photoshop file.

Original asset not found

Dreamweaver cannot find the original Photoshop file specified in the Original text box of the Property inspector.

Correct the file path in the Original text box of the Property inspector, or move the Photoshop file to the location that’s currently specified.

Copy and paste a selection from Photoshop

You can copy all or some of a Photoshop image and paste the selection into your Dreamweaver page as a web-ready image. You can copy a single layer or a set of layers for a selected area of the image or you can copy a slice of the image. When you do this, however, Dreamweaver does not create a Smart Object.

Note:

While the Update from Original functionality is not available for pasted images, you can still open and edit the original Photoshop file by selecting the pasted image and clicking the Edit button in the Property inspector.

  1. In Photoshop, do one of the following:
    • Copy all or part of a single layer by using the Marquee tool to select the portion you want to copy, and then choose Edit > Copy. This copies only the active layer for the selected area into the clipboard. If you have layer-based effects, they are not copied.
    • Copy and merge multiple layers by using the Marquee tool to select the portion you want to copy, and then choose Edit > Copy Merged. This flattens and copies all the selected area’s active and lower layers into the clipboard. If you have layer-based effects associated with any of these layers, they are copied.
    • Copy a slice by using the Slice Select tool to select the slice, and then choose Edit > Copy. This flattens and copies all the slice’s active and lower layers into the clipboard.

    Note:

    You can choose Select > All to quickly select all of an image for copying.

  2. In Dreamweaver (Design or Code view), place the insertion point on your page where you want the image inserted.
  3. Select Edit > Paste.

  4. In the Image Optimization dialog box, 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 defines the image according to your optimization settings and places a web-ready version of your image in your page. Information about the image, such as the location of the original PSD source file, is saved in a Design Note, regardless of whether you have enabled Design Notes for your site. The Design Note allows you to return to edit the original Photoshop file from Dreamweaver.

Edit pasted images

After you paste Photoshop images in your Dreamweaver pages, you can edit the original PSD file in Photoshop. When using the copy/paste workflow, Adobe recommends that you always make your edits to the original PSD file (rather than the web-ready image itself), and then repaste to maintain single sourcing.

Note:

Make sure that you have Photoshop set as your primary external image editor for the file type you want to edit.

  1. In Dreamweaver, select a web-ready image that was originally created in Photoshop and do one of the following:
    • Click the Edit button in the image’s Property inspector.
    • Press Control (Windows) or Command (Macintosh) as you double-click the file.
    • Right-click (Windows) or Control-click (Macintosh) an image, choose Edit Original With from the context menu, and then choose Photoshop.

    Note:

    This assumes that Photoshop is set as the primary external image editor for PSD image files. You may also want to set Photoshop as the default editor for JPEG, GIF, and PNG file types.

  2. Edit the file in Photoshop.
  3. Return to Dreamweaver and paste the updated image or selection into your page.

If you want to reoptimize the image at any time, you can select the image and click the Edit Image Settings button in the Property inspector.

Setting Image Optimization dialog box options

When you create a Smart Object or paste a selection from Photoshop, Dreamweaver displays the Image Optimization dialog box. (Dreamweaver also displays this dialog box for any other kind of image if you select the image and click the Edit Image Settings button in the Property inspector.) This dialog box lets you define and preview settings for web-ready images using the right mix of color, compression, and quality.

A web-ready image is one that can be displayed by all modern web browsers and looks the same no matter what system or browser the viewer is using. In general, the settings result in a trade-off between quality and file size.

Note:

Whatever settings you select only affect the imported version of the image file. The original Photoshop PSD or Fireworks PNG file always remains untouched.

Preset

Choose a Preset that best suits your requirements. The file size of the image changes based on your chosen preset. An instant preview of the image with the applied setting is displayed in the background.

For example, for images that have to be displayed with a high degree of clarity, choose PNG24 for Photos (Sharp Details).  Select GIF For Background Images (Patterns) if you are inserting a pattern that will act as the background of the page.

When you select a preset, the configurable options for the preset are displayed.  If you want to further customize optimization settings, modify the values for these options.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy