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.
Figure 1. The original Birdland website.
Figure 2. The Birdland website after I jazzed 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:
- Choose Dreamweaver > Preferences (Mac), or Edit > Preferences (Windows).
- Under Category, choose File Types > Editors (see Figure 3).
Figure 3. The File Types / Editors Preferences dialog box on a Mac.
- Select any image extension, such as .png, .jpg, or .jpg in the Extensions list.
- 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.)
- Click the Make Primary button to set the application as the default.
- 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.
- Choose File > New Site.
- Click the Advanced tab in the Site Definition dialog box (see Figure 4).
Figure 4. Setting up the site definition for the Birdland site.
- In the Site Name field type Birdland.
- For the Local root folder, click the Browse button and navigate to where you want to save the files for the Birdland site.
- Create a new folder named Birdland.
- Click Choose (Mac), or click Open and then Select (Windows).
- Click OK.
- If you haven't already done so, download the support files for this tutorial.
- 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.
- Open index.html.
- Click in the black rectangle beneath the header title in Design view (see Figure 5).
- Click the Split View button in the Document window and make sure your cursor is between the opening and closing strap
Figure 5. Use Split view to verify the insertion point.
- Choose File > Insert.
- 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.
- In the Alternative Text dialog box, type Birdland.
- Dreamweaver opens Image Preview (see Figure 6).
Figure 6. The Image Preview dialog box in Dreamweaver.
- 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).
Figure 7. You can crop and size images using the File panel settings.
- 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).
Figure 8. The linked image has a Smart Object icon that indicates the image is either in sync or out of sync with the original
- 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.
- 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.)
Figure 9. One way to edit the instance from the original is to right-click and choose Edit Original With.
- When the original PSD file opens, select the background layer in the Layers panel (see Figure 10).
Figure 10. The modified color of the background layer.
- Choose Edit > Fill.
- In the Fill dialog box, select Black from the Use pop-up menu under Contents.
- Click OK.
- 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).
Figure 11. The Smart Object icon now shows that the instance is no longer synced to the original.
- Right-click on the Birdland image and choose Update From Original (see Figure 12).
Figure 12. Right-click and select Update From Original.
Alternatively, you can use the Photoshop icons in the Property inspector to perform the update and other integration tasks (see Figure 13).
Figure 13. The Property inspector has icons that you can use to perform image editing tasks.
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.
Figure 14. 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.
Figure 15. If you select one layer in Photoshop, choose Edit > Copy; if you select two or more, select Edit > Copy Merged.
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.
Figure 16. Fireworks options in the Dreamweaver Property inspector.
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.
- In Fireworks, open the Preening.png file in the source_files_start folder.
- Choose File > Export Wizard (see Figure 17).
Figure 17. You can use the Export Wizard to analyze and export an image.
- Click Select an export format (see Figure 18).
Figure 18. Click Select an export format.
- Click Continue.
- On the next screen the default setting is The Web. Click Continue.
- Fireworks analyzes the image and displays the format options for your image. Click Exit.
- Fireworks displays previews of your choices so that you can compare them and make your selection. Select JPEG as the format (see Figure 19).
Figure 19. Fireworks offers image format options that you can customize.
- Click the File tab.
- In the Width field, type 300. Fireworks will automatically set the height in proportion, as long as you have Constrain selected (see Figure 20).
Image 20. Size the image by using the File tab of the Image Preview dialog box.
- Click Export.
- Navigate to the images folder of the Birdland site.
- In Dreamweaver, place your insertion point in front of the paragraph of text under "About Jillian, the Photographer" (see Figure 21).
Figure 21. Place the cursor in front of the first paragraph of text under "About Jillian, the Photographer".
- Choose Insert > Image.
- Navigate to Preening.jpg in the images folder of the Birdland site.
- For the alt text, type Egret preening.
- 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).
Figure 22. After inserting the image, apply the left floating class.
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).
Figure 23. Options under the Export command.
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.
Figure 24. The egret could use an auto vector mask.
- In Dreamweaver, make sure the egret is still selected.
- Click the Fw editing icon in the Property inspector.
- 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).
Figure 25. Dreamweaver asks if you want to use this file or the original PNG.
- Click Use a PNG.
- Navigate to the Preening.png file in the source_images folder of your Birdland site and select it.
- With the original PNG open in Fireworks, choose Commands > Creative > Auto Vector Mask (see Figure 26).
Figure 26. Adding an auto vector mask to the egret.
- Select the left bottom option under Shapes (see Figure 27).
Figure 27. Select the bottom left option under Shapes.
- Click Apply. Fireworks creates a soft mask on the egret (see Figure 28).
Figure 28. A soft vector mask.
- Click Done and the original PNG will be modified.
- 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.
- 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.
Figure 29. Drag the image to 300 pixels and then click the Resample button to resize the actual image to the new dimensions.
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.
- 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.
Figure 30. Dreamweaver warns you that what you're about to do is destructive to the pixels in the image.
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.
- Select the Crop icon to crop to a specific area within the image (see Figure 31).
Figure 31. Click the Crop icon to crop the image.
- 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).
Figure 32. Adjust brightness and contrast.
- 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.
Figure 33. Sharpen the image.
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: