User Guide Cancel

Using Photoshop files in Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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

About Photoshop integration

Note:

The Photoshop Integration workflows are discontinued in Dreamweaver 21.0 and later versions.

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

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.

  1. 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.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy