Imagine what it would be like if your two best friends—who had always hated one another—suddenly started getting along. Better yet, they have become best friends as well! With the release of Adobe Creative Suite 3, you don't have to imagine any more. Now you combine the image manipulation power of Photoshop with the Web authoring skills of Dreamweaver, seamlessly.

In this article, you'll learn how to apply the new power duo of Dreamweaver and Photoshop when customizing Web pages built in SiteAssist. The same techniques covered here can be put to use in any situation that calls for working with Dreamweaver and Photoshop.

Inserting Photoshop files

One of the biggest changes in Dreamweaver CS3 is the ability to open Photoshop PSD files. Like Firework's PNG files, the Photoshop PSD is a graphics source file and is not suitable for the direct viewing on the Web. To convert a Photoshop file to one that is Web-ready, Dreamweaver automatically displays the Image Preview dialog box—which can optimize the file and save it in a JPEG, GIF or PNG format.

Let's say that you want to use a new logo header created in Photoshop as your SiteAssist logo graphic. First, you'll need to make sure that the dimensions of your replacement image are suitable. In this example, the Product design is used, which has an overall width of 760 pixels and the Photoshop image fits perfectly with a width of 753 pixels.

Note: Naturally, if you needed to modify the width of the design, you could easily do so. As with all SiteAssist CSS changes, it's always best to insert your style changes into the my_styles.css file. The my_styles.css file is not re-generated or otherwise changed when the SiteAssist wizard is run, thus allowing you to maintain any altered style rules.

To include your Photoshop file as the logo, follow these steps:

1. Run the SiteAssist wizard as you would normally.

2. Click the folder icon next to the Logo field.

When the Select Image Source dialog box opens, note that the Files of Type field now includes *.psd as well as *.gif, *.jpg, *.jpeg and *png.

3. Locate your Photoshop source file and click OK.

Rather than load the file directly into Dreamweaver, the Image Preview dialog box appears. Veteran Dreamweaver users will recognize the Image Preview dialog as identical with the Optimize in Fireworks user interface; those designers who work extensively with Fireworks may also note that it was originally put to use as the Export Wizard.

The Image Preview dialog includes three tabs: Options, File and Animations. The Options tab is the primary interface for selecting your image's final format; you can choose from GIF, JPEG or PNG. Each format offers a full slate of optimizing options. You can, for example, limit the number of colors for a GIF or set the bit size for PNG files. In the current example, the Photoshop file will be saved as a JPEG.

4. From the Format list, choose JPEG.

The image can be optimized by changing the Quality slider to the desired level. If you'd like to compare two different Quality values, select the 2 preview windows option; you can view the effects of 4 separate settings at one time by choosing the 4 preview windows option.

5. Set the Quality slider to an appropriate value.

The Image Preview dialog also has controls for cropping or rescaling the image prior to saving in a Web-compatible format. However, because this exercise is to import the full PSD image, the options are not needed.

6. Click OK when you're ready.

Next, you'll need to save your newly exported file in your site.

7. In the Save Web Image dialog box, navigate to the desired folder in your site and enter a proper name in the File name field. Click Save.

The new path and filename is now shown in the Logo field.

8. Continue to complete the SiteAssist wizard.

You'll notice that the Photoshop image is now incorporated throughout the wizard preview.

Your Photoshop-created, Dreamweaver imported logo is now in place, throughout all your SiteAssist created pages.

Working with Photoshop Selections

You don't always have to include a complete PSD file; with Dreamweaver CS3, you can copy a selection in Photoshop and paste it—in a Web appropriate format—onto your Web page. Better yet, once the selection has been inserted, Dreamweaver remembers the source file and allows for updates and modifications from Photoshop. To copy a selection from Photoshop to Dreamweaver, follow these steps:

1. In Photoshop, select the image area you want to copy.

Photoshop has a wide range of selection possibilities, from the Marquee tool to the Color Range selector.

2. Copy the selection to the clipboard by choosing Edit > Copy or Edit > Copy Merged.

If your selection incorporates more than one layer, you'll probably want to use the Copy Merged command.

3. Optionally, choose Select > Save Selection and give your selection an appropriate name.

Should you need to modify your image from Dreamweaver, you'll need to reselect it in Photoshop; once the selection is saved, you can easily restore it by choose Select > Load Selection.

4. Switch to Dreamweaver and place your cursor where you'd like insert your copied graphic in the SiteAssist page; press Ctrl+V (Windows) or Cmd+V (Mac) to begin the paste operation.

The Image Preview dialog box appears with the copied selection.

5. Choose your format from the Options tab and make any optimization adjustments necessary; when you're done, click OK.

For this example, the copied selection is a bit wider than is optimal, so I switched to the File tab and entered a new value in the Width field.

6. In the Save Web Image dialog box, enter the path and name of your newly created file.

The copied selection appears as a new graphic in Dreamweaver at the current cursor location.

If you'd like to modify the pasted Photoshop image, select the image and, from the Property inspector, click the Photoshop Edit icon. The source file will re-open in Photoshop where you can make any modifications necessary. When you're done, re-select the graphic (this is where the ability to load a saved selection comes in handy) and copy to the clipboard. In Dreamweaver, with the original image selected, paste your clipboard to insert the new graphic.

About the author: Joseph Lowery is a world-renown Dreamweaver expert and author of the best-selling Dreamweaver Bible series from Wiley Publishing; his Dreamweaver CS3 Bible is now available. Joe is also Vice-President of Marketing for WebAssist; contact him at jlowery@webassist.com.