back

Discover timesaving image-editing features in Dreamweaver CS5

by Tommi West

Dreamweaver CS5 includes many features to facilitate faster web development. Templates and Library Items allow you to store common elements in a single location for quick updates, and the Files panel makes it easy to rename filenames and folders when you need to change a site's structure or move things around. In addition, the Live View and Design View modes enable you to review your changes within the Dreamweaver workspace, so that you don't have to upload files and launch a browser to check your work.

In this article, I'll highlight some of the other great timesaving features in Dreamweaver CS5 that speed the process of image editing. I'll describe the built-in image adjustment features in Dreamweaver, the workflow for performing roundtrip-editing, and how to use Smart Objects with Photoshop.

Roundtrip-editing refers to the process of editing image files and site graphics by invoking the appropriate image editor (Fireworks or Photoshop) from within the Dreamweaver environment. It is the result of seamless integration between the Creative Suite products. And as web developer, it is an integral part of my development workflow.

Before roundtrip-editing existed, there was a great deal of switching back and forth between products. After optimizing and exporting all of the necessary sliced image files, there were always minor adjustments needed once the images were inserted on the page. Making small image changes used to require leaving Dreamweaver, launching Fireworks or Photoshop, locating the correct master file to edit, opening it, making changes, saving those changes, exporting the new file, then returning to Dreamweaver and reinserting the image. Fortunately, the days of hunting for files on your drive and struggling to keep master PNG and PSD files in sync with site files are over.

To follow along with these instructions, download the sample files (ZIP, 658K).

The process for working with image files in Dreamweaver is very intuitive. Just like editing other site elements, you'll use the options in the Property inspector to adjust the image files. The Property inspector is a contextual panel that shows the settings available for the selected item. To edit an image, the first step is to select it in the Document window, so that the Property inspector displays the corresponding image information (see Figure 1).

Select an image file to access its properties.

Figure 1. Select an image file to access its properties.

For the purposes of this example, imagine that the client viewed the first draft of the site and provided feedback. Specifically, they requested the following changes to the home page:

To address these changes, you'll begin at the bottom of the list and work up to leverage some of the image adjustment features available in Dreamweaver before invoking roundtrip-editing and working with Smart Objects in Photoshop.

If you are following along with the sample files, download and uncompress the ZIP file.

Place the contents of the round_trip folder in a subfolder of one of your existing sites that you've defined in Dreamweaver. Or if you prefer, save the folder to your desktop and then define a local folder, and set the folder named round_trip as your local root folder (see Figure 2).

Define the site by adding a site name and setting the local root folder.

Figure 2. Define the site by adding a site name and setting the local root folder.

After entering the site definition information as shown in Figure 2, click Save to close the Site Setup window and Done to close the Manage Sites dialog box.

Now that the sample files are inside a defined site, Dreamweaver understands the relationship to them. The site files are displayed in the Files panel. Take a moment to review the site structure, which includes an HTML file named home.html, a css folder containing the main.css stylesheet, and an images folder that contains the images that are inserted in the page (see Figure 3).

The Files panel lists the site files, subfolders and assets.

Figure 3. The Files panel lists the site files, subfolders and assets.

In these instructions, you'll be working with home.html. The final version of the home page is named home-complete.html. Some images are duplicated to show the before and after states of editing.

Using the Property inspector to edit images

Dreamweaver includes built-in functionality to update image files, which are perfect for making minor changes. Use the following instructions to work with the image adjustment features in Dreamweaver to sharpen the cat photo.

Note: Depending on your Dreamweaver preferences, you may see the following dialog box before the image adjustment controls are displayed (see Figure 4).

The Alert box reminds you that the updates are permanent.

Figure 4. The Alert box reminds you that the updates are permanent.

If you wish to hide this message in the future, click the check box next to "Don't show this message again" and then click OK.

  1. Double-click the home.html file to open it in the Document window.
  2. Select the cat photo. The Property inspector displays its properties.
  3. Click the Sharpen icon (the cone shape) to see the Sharpen dialog box.
  4. Adjust the slider settings or enter a numeric value between 1 and 10 (see Figure 5).
Use the slider to set the level of sharpening to 9, and then click OK.

Figure 5. Use the slider to set the level of sharpening to 9, and then click OK.

This operation can be reversed by selecting Edit > Undo. However, it does directly update the image file without saving a backup copy, so proceed carefully. It's a best practice to make a copy of your site files before performing these types of updates, in case the client changes their mind and you need to revert.

Next, you'll adjust the brightness and contrast of the neon sign image and take advantage of another handy feature that is included in the Property inspector. Follow these steps:

  1. Select the neon sign photo. The Property inspector displays its properties.
  2. Click the Brightness and Contrast icon (the two joined half circles) to access the Brightness and Contrast controls.
  3. Adjust the slider settings or enter numeric values between –100 and 100 to set the new levels of brightness and contrast (see Figure 6).
Use the sliders to reset the photo's brightness and contrast.

Figure 6. Use the sliders to reset the photo's brightness and contrast.

In a real-world scenario, after making these changes you would put the file to the remote server and choose Yes in the dialog box that asks, "Put dependent files?".

Roundtrip-editing with Fireworks

Roundtrip-editing enables you to jump seamlessly from Dreamweaver into an image editing program (Fireworks or Photoshop) in order to make a quick change to the master source file, export the new version of the site file, and then jump right back to working in the Dreamweaver workspace. This capability offers the following benefits:

Before using the roundtrip-editing feature, it's important to check your Dreamweaver preference settings. Choose Dreamweaver > Preferences (Mac) or Edit > Preferences (Windows) and select the File Types / Editors category. Select each image file type in the Extensions pane and set the primary image editor for that file type in the pane to the right. Here's a quick list of the standard settings for each file type and editor; for the purposes of this tutorial, ensure that these editors are selected:

Now, let's address the next item on the to-do list: updating the color of the wings in the logo. Follow these steps:

  1. Double-click on home.html (if it is not already open).
  2. Select the logo in the top left corner.
  3. In the Property inspector, click the Edit button (see Figure 7).
    Click the Edit button (Fireworks icon) to begin editing the master.

    Figure 7. Click the Edit button (Fireworks icon) to begin editing the master.

  4. Note: The Fireworks logo is displayed as the editor because the master PNG file was created using Fireworks and Fireworks is set as the editor for PNG files in the Dreamweaver preferences.

    Fireworks launches automatically and displays the master file. Select each of the wings and use the Fill color chip to set them to white (see Figure 8).

    Edit the file and click Done to complete the round-trip editing process.

    Figure 8. Edit the file and click Done to complete the roundtrip-editing process.

  5. Click Done to export the new PNG file, return to Dreamweaver, and see the updated logo appear on the page.

Dreamweaver is displayed and the updated logo file with the white wings appears in the Document window. You are now poised to continue making changes to the page. If needed, you could click the Edit button to edit the logo file again. As you can see, roundtrip-editing is a shortcut to updating site files while allowing you to stay focused on editing web pages.

Roundtrip-editing with Photoshop using Smart Objects

In this section, we'll address the next request on the client's update list, to change the background color of the reader sitting next to the bookshelf.

The reader image is a JPG file that was exported from the source file named shelf.psd in the masters folder. At the moment, the shelf.jpg file inserted on the page is in synch with the PSD master file, because there were no changes made in Photoshop since the JPG file was exported and inserted in the page. The green icon in the top left corner indicates that the two files are still in sync.

In the previous section, you clicked on the image in Dreamweaver to select it, and then clicked the Edit button in the Property inspector to launch Fireworks with the master file open and ready to be updated. The same functionality is available to launch Photoshop, although Photoshop doesn't display the Done button. The Photoshop icon appears when the JPG is selected, because of the Dreamweaver preference settings (see Figure 9).

The sync icon in the top corner is green because the files are in sync.

Figure 9. The sync icon in the top corner is green because the files are in sync.

  1. Click the Edit button (Photoshop icon) to open the PSD file in Photoshop. Photoshop opens, and the master PSD file is displayed.
  2. Use the Color Fill icon in the Layers panel and choose a new color (#767769) from the panel that appears (see Figure 10).
    Select a new color and then click OK.

    Figure 10. Select a new color and then click OK.

  3. Choose File > Save to save the PSD file in Photoshop.
  4. Return to Dreamweaver and notice that the sync icon is now red; this indicates that Dreamweaver is aware that the master file has been changed and the JPG is not currently in sync.
  5. Right-click (or Control-click) on the sync icon to see the context menu. Choose the option to Update from Original (see Figure 11).
Select the option to Update From Original to update the JPG file.

Figure 11. Select the option to Update From Original to update the JPG file.

Dreamweaver reloads the shelf.jpg image with the revised background color. The green sync icon shows that the two files are in sync again (see Figure 12).

The Update from Original operation updates the shelf.jpg file.

Figure 12. The Update from Original operation updates the shelf.jpg file.

You can use Smart Objects in this fashion to update source files in Photoshop and keep them in sync with the site files.

Best of all, the updates you make using Smart Objects are applied to an entire site. If your site contains multiple pages with the same Smart Object inserted, the process of choosing Update from Original feature automatically updates the JPG file on all of the pages — even HTML files that are not currently open.

Using these timesaving image-editing features in Dreamweaver can really reduce your production time. Use Smart Objects and roundtrip-editing when it's necessary to make major changes in Fireworks and Photoshop and keep the master files in sync. And be sure to take advantage of the built-in image adjustment features in Dreamweaver when you need to make more minor changes that only affect your site files.

‹ Back


Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.