Working with images in Dreamweaver CS4

Note: This tutorial was written for Creative Suite 4. Although the screenshots may differ from what you see on your screen, the content is still valid for Creative Suite 5.

Birdland is a famous jazz club in New York City, but it is also a playground and fictitious site for my son Scotty, an amateur ornithologist, and my sister Jillian Kossin of Jillian Photography, a professional photographer who took the bird images used to create the site.

In this tutorial I will show you how to use the Fireworks and Photoshop image editing integration tools in Dreamweaver using the Birdland website as an example. You can download the support files and follow along to create the design for the website.

Figure 1 shows the Birdland site in its original form; Figure 2 shows the site after I used Photoshop and Fireworks to "jazz" it up.

Before delving into the Birdland project, you will want to set the stage for the application. In this section of the tutorial you will perform the following tasks:

• Specify editors for various file types in Dreamweaver
• Set up a Dreamweaver site definition

Specify editors for various file types in Dreamweaver

Dreamweaver lets you choose the external application that it will automatically launch when you click on files of a compatible type in the Dreamweaver Files panel. To specify which file types you want to associate with a specific tool, follow these steps:

1. Choose Dreamweaver > Preferences (Mac), or Edit > Preferences (Windows).
2. Under Category, choose File Types > Editors (see Figure 3).

3. Select any image extension, such as .png, .jpg, or .jpg in the Extensions list.
4. Select an application in the Editors column. (Dreamweaver is smart about locating appropriate image editing applications, but you can also click the plus (+) button to navigate to other applications and add them.)
5. Click the Make Primary button to set the application as the default.
6. Repeat steps 3 through 5 for each extension you want to set up. If you do not see a particular extension in the list, you can click the plus button (+) to add it.

Set up a Dreamweaver site definition

The first step in setting up a new site in Dreamweaver is to create a site definition. This allows Dreamweaver to manage files and helps you use its productivity features, including image editing.

1. Choose File > New Site.
2. Click the Advanced tab in the Site Definition dialog box (see Figure 4).

3. In the Site Name field type Birdland.
4. For the Local root folder, click the Browse button and navigate to where you want to save the files for the Birdland site.
5. Create a new folder named Birdland.
6. Click Choose (Mac), or click Open and then Select (Windows).
7. Click OK.
8. If you haven't already done so, download the support files for this tutorial.
9. Locate the starter_files folder and copy the images and index.html file inside it to the Birdland folder you designated as the local root folder of the Birdland site.

Note: For more information on setting up a site, refer to the Dreamweaver online help.

Let's start jazzing up Birdland by adding the banner graphic. You will use a Photoshop (PSD) file that Dreamweaver will turn into a Smart Object when you insert it and optimize it on the page. A Smart Object retains its connection to the source and allows you to quickly update multiple instances of the source document when you modify the original.

Add the Photoshop Banner

In the following steps, you will insert a Photoshop document, optimize it for the Birdland page, make an edit to the original, and then update the instance on the page.

1. Open index.html.
2. Click in the black rectangle beneath the header title in Design view (see Figure 5).
3. Click the Split View button in the Document window and make sure your cursor is between the opening and closing strap div tags.

4. Choose File > Insert.
5. Navigate to birdland.psd in the source_files folder.

   Note: You might want to take a moment to look at the original Photoshop file. It has five layers, four of which are photographs of birds that could be refreshed every so often with new bird images. The bottom layer is a background layer that can change colors, a task you will perform later in this tutorial.

6. In the Alternative Text dialog box, type Birdland.
7. Dreamweaver opens Image Preview (see Figure 6).

8. In the Options panel, set the image format to JPG and the quality to 80%. The File tab provides settings for adjusting the image size and export area, but you can use the defaults for this image (see Figure 7).

9. Click OK. The image displays on the page and has a Smart Objects icon to show that it is linked to an original PSD file (see Figure 8).

10. Pass your mouse over the Smart Objects icon and you will see a tooltip that assures you that the image is synced to the original.

    Looking over the page, I wonder whether the borders between the bird images might look nicer if they were black rather than white. Let's test that out now.

11. Right-click on the birdland image and choose Edit Original With > Photoshop CS4 (see Figure 9). (Your menu may be different depending on what image editing applications you have on your computer.)

12. When the original PSD file opens, select the background layer in the Layers panel (see Figure 10).

13. Choose Edit > Fill.
14. In the Fill dialog box, select Black from the Use pop-up menu under Contents.
15. Click OK.
16. Save the Photoshop file and return to the Birdland page in Dreamweaver. You'll notice a new icon in the left top corner of the image. The red and gray arrows alert you to the fact that the image is no longer synced with the original (see Figure 11).

17. Right-click on the Birdland image and choose Update From Original (see Figure 12).

Alternatively, you can use the Photoshop icons in the Property inspector to perform the update and other integration tasks (see Figure 13).

Dreamweaver updates the image so that it is in sync with the original. The synced Smart Objects icon returns.

Figure 14 shows the the completed banner.

Copy and paste from Photoshop

You can also copy and paste an individual layer or group of layers from a Photoshop document. Perhaps you want to turn each of the individual bird layers into separate bird icons to place next to a paragraph about each bird, or maybe you want to create a graphic that includes two of the birds.

In this latter case, draw a selection marquee around two of the birds in Photoshop, choose Edit > Copy Merged (so that Photoshop copies multiple layers), and paste the layers at the insertion point in Dreamweaver (see Figure 15). Dreamweaver opens its Image Preview dialog box where you can set an image format and size for the new graphic. The pasted graphic does not wear the Smart Object icon, but it does remain connected to the original. You can click the Photoshop editing icon in the Property inspector to launch Photoshop to edit the original.

You are going to use Fireworks for the next integration task.

First take a moment to examine the options in the Dreamweaver Property inspector (see Figure 16). The first thing you will notice is that next to the Fireworks Edit icon you'll see the same options that were available for the Photoshop icon: An Edit Image Settings icon that opens the Image Preview dialog box, and an Update from Original icon that will let you quickly update an instance after you modify the original.

You'll also notice additional icons that let you perform basic image editing tasks such as Crop and Sharpen. I'll return to those a little later.

Export the egret from Fireworks

In the next steps, you'll open a PNG file in Fireworks and use the Export Wizard to export the image as a JPG.

1. In Fireworks, open the Preening.png file in the source_files_start folder.
2. Choose File > Export Wizard (see Figure 17).

3. Click Select an export format (see Figure 18).

4. Click Continue.
5. On the next screen the default setting is The Web. Click Continue.
6. Fireworks analyzes the image and displays the format options for your image. Click Exit.
7. Fireworks displays previews of your choices so that you can compare them and make your selection. Select JPEG as the format (see Figure 19).

8. Click the File tab.
9. In the Width field, type 300. Fireworks will automatically set the height in proportion, as long as you have Constrain selected (see Figure 20).

10. Click Export.
11. Navigate to the images folder of the Birdland site.
12. In Dreamweaver, place your insertion point in front of the paragraph of text under "About Jillian, the Photographer" (see Figure 21).

13. Choose Insert > Image.
14. Navigate to Preening.jpg in the images folder of the Birdland site.
15. For the alt text, type Egret preening.
16. With the image still selected, choose left from the Class popup menu in the Property inspector. This will apply a left float to the image so that the text wraps around it (see Figure 22).

Note: When you choose File > Export, you'll find many additional options in the Export popup menu. You can export to an Adobe PDF, a Dreamweaver Library item, HTML and images (which reconstitutes the composite graphic into a table-based layout, a legacy workflow), or CSS and images (see Figure 23).

Edit the egret image in Fireworks

The image of the egret needs a little work: its dominance throws off the overall balance of the design (see Figure 24). In examining the preening egret, you decide that perhaps it would benefit from an auto vector mask.

1. In Dreamweaver, make sure the egret is still selected.
2. Click the Fw editing icon in the Property inspector.
3. Dreamweaver displays a dialog box that asks you if you want to use a source PNG or edit the JPG file directly (see Figure 25).

4. Click Use a PNG.
5. Navigate to the Preening.png file in the source_images folder of your Birdland site and select it.
6. With the original PNG open in Fireworks, choose Commands > Creative > Auto Vector Mask (see Figure 26).

7. Select the left bottom option under Shapes (see Figure 27).

8. Click Apply. Fireworks creates a soft mask on the egret (see Figure 28).

9. Click Done and the original PNG will be modified.
10. In Dreamweaver, restore the class that positions the image to the left of the text by selecting left from the Class popup menu in the Property inspector.

The connected image is larger than needed, but rather than return to Fireworks or the Image Preview dialog box for adjustments, you can use one of the Property inspector's quick and easy editing icons to fix the problem.

1. Select the image. Hold down the Shift key as you click the right bottom corner, then drag inward to resize the egret image until its width is about 300 pixels (see Figure 29). The width field in the Property inspector will change dynamically as you drag the corner of the image.

Note: Dreamweaver writes a new height and width into the code, but the actual image still has the same set of dimensions and same larger file size. To match the actual image with the dimensions in the code, click the Resample icon in the Property inspector.

2. With the image selected, click the Resample icon now. Dreamweaver warns you that this will permanently alter the image (see Figure 30). In this case there are no worries; the image is connected to an original, and if you change your mind later, you can always generate a new image from it later.

With the Property inspector you can perform other basic editing tasks to the image. By selecting the image and clicking the various icons, you can crop, adjust brightness and contrast, and sharpen an image right from Dreamweaver.

3. Select the Crop icon to crop to a specific area within the image (see Figure 31).

4. Select the Brightness and Contrast icon to adjust how these properties affect the highlights, shadows, and midtones so that there is a better balance of light and dark in the image (see Figure 32).

5. Select the Sharpness icon to sharpen the image (see Figure 33). The scanning process naturally softens edges in an image, and sharpening increases the contrast around the edges.

Take a minute to play with these image editing tools to tweak the egret image in the Birdland design.

That's it. Using the round-trip features between Dreamweaver and Fireworks and between Dreamweaver and Photoshop, you've quickly created a jazzier Birdland design.

Where to go from here

For more details on how to integrate Dreamweaver with Photoshop, Fireworks, and other applications, see Working with other applications in Using Adobe Dreamweaver CS4. Also refer to the following resources:

• Fireworks workflow videos
• Learn Dreamweaver CS4 videos
• Dreamweaver Help and Support