Dreamweaver to Fireworks: Image Editing

Suppose that you have a logo on your Web page and your client suddenly wants it in a different color. Normally, this would mean launching another image-editing program, tracking down the logo, opening it, editing it, saving it, switching back to Dreamweaver, and then re-importing the logo onto your page. Whew, that's a lot of steps. Using the special integration features between Dreamweaver and Fireworks, though, greatly simplifies the entire process — a few clicks of the mouse can replace all of those other time-consuming tasks.

The following steps show you how to select an image in Dreamweaver, automatically open it in Fireworks, edit it, and update the image back into Dreamweaver with just a few mouse clicks.

To launch Fireworks directly from Dreamweaver and edit an existing image, follow these steps:

1. In Dreamweaver, select a .gif or .jpg image you want to edit.

2. In the Properties Inspector, click the Edit button.

The Find Source dialog box appears asking if you want to edit an existing document for the source of the file that you selected.

3. Click one of the options in the Find Source for Editing dialog box.

Clicking Yes lets you select a different file from the actual optimized image file on your page. For example, you can select a PNG version of the optimized graphic (which may have been the original file from which you exported the optimized Web version of the graphic on your page). Clicking No opens the source file that you selected in Dreamweaver (the actual GIF or JPEG file that's linked on the page).

If you click No, Fireworks launches with the GIF or JPEG image that you selected. If you click Yes, Fireworks allows you to pick an alternate image and launches by opening the alternate image in a new document. If you created the original image in Fireworks, the alternate image will be a PNG file. PNG is the Fireworks native file format. If you created the original image in another graphics program, for example, PhotoShop, your source file is a PSD. Fireworks does support most .PSD files created in PhotoShop 6 or higher.

Because the source file of the image used on your Web page was probably optimized earlier, editing an optimized GIF or JPEG image usually doesn't give you the best image quality results after you edit, re-optimize, and re-export it back into Dreamweaver. Going back to the original, pre-optimized version of the graphic gives you the option to start again from scratch. By clicking Yes in the Find Source for Editing dialog box, you can select a different file from the optimized source graphic. If you exported the image from a PNG file, you can select the PNG instead, edit a higher quality version of the file, and export it without suffering extra image degradation.

After clicking Yes or No, the image document opens in Fireworks.

4. Make the edits that you need to make to the image within Fireworks.

You can make any changes or edits to the image using any of the tools in Fireworks as well as using the Optimize panel to change the optimization settings for the file.

5. When you're finished editing the image, click the Done button in the Fireworks document window.

After clicking the Done button, the Fireworks document fades to the background, and the Dreamweaver document automatically comes into view. The image automatically updates on the page, reflecting the recent edits without requiring any other action on your part other than saving the document.

After you press the Done button in Fireworks, you can't undo any changes you make to the image files by selecting the Undo command. The changes are permanent.