Home > Products > Dreamweaver > Support > Working with Fireworks
Dreamweaver Icon Macromedia Dreamweaver Support Center - Working with Fireworks
Edit the Fireworks image

Once you have set Fireworks as your external image editor and created your Dreamweaver document, you are ready to edit images from within the Dreamweaver workspace. When you launch and edit an image or an image slice that is part of a Fireworks table, Dreamweaver launches Fireworks and the PNG file from which the image or table was exported.

When the image is part of a Fireworks table, you can launch the entire Fireworks table for edits, as long as the <!--fw table--> comment exists in the HTML code. If the source PNG was exported from Fireworks to a Dreamweaver site using the Dreamweaver Style HTML and images setting, the Fireworks table comment is automatically inserted in the HTML code. For more information, see "Placing Fireworks HTML into Dreamweaver" in Fireworks MX Help (Help > Using Fireworks > Using Fireworks with Other Applications > Working with Macromedia Dreamweaver MX > Placing Fireworks HTML into Dreamweaver).

Now you'll edit the image.

1 In Dreamweaver, choose Window > Properties to open the Property inspector if it isn't already open.
2 Click the image to select it. The Property inspector identifies the selection as a Fireworks image or table based on the selected item.
3 To launch Fireworks for editing, do one of the following:
In the Property inspector, click Edit.
Hold down Control (Windows) or Command (Macintosh), and double-click the selected image.
Right-click (Windows) or Control-click (Macintosh) the selected image, and choose Edit With Fireworks from the context menu.
Fireworks launches and opens the associated PNG for editing. Note that the Fireworks file window tells you that you are editing from Dreamweaver.

If Fireworks does not automatically open the associated PNG, it will prompt you to find it. Navigate to blue.png in the images folder you set up for this tutorial and select it. (Keep in mind that when you create Fireworks files on your own, you will probably keep the PNG files in a separate directory.) When you work with the Fireworks source file and edit from Dreamweaver, changes are saved to both the source file and the exported file.
Once Fireworks has launched and the PNG file for your image appears, you can take advantage of any image-editing feature in Fireworks.
Now you'll change the car from blue to red.
4 Select the image in Fireworks.
5 In the Fireworks Property inspector, click the Add Effects button (or the Effects plus button, if the Property Inspector is expanded).

6 Choose Adjust Color > Color Fill.
A solid color covers the car and the Blending Mode pop-up window appears.

7 Choose Hue from the Blending Mode pop-up menu, and then pick the desired color from the color pop-up menu. You can watch the car change color as you select different swatches. For this tutorial, you'll make the car red.
If you accidentally lose the Blending Mode pop-up window, you can always return to it by clicking the Edit Effects button in the Property Inspector (the Add Effects button changes to Edit Effects once you add an effect), and clicking the circular icon next to the effect you've added.
8 When you are finished making edits, click Done.

Fireworks saves the changes in the PNG file, exports the updated image (or HTML and images), and returns focus to Dreamweaver. In Dreamweaver, the updated image or table appears in the document window.

Submit feedback about this tutorial.

To Table of Contents Back to Previous document