Preparing Images using Fireworks MX 2004
Part 1: Interface basics....5 Part 2: Editing a scanned image...9 Part 3: Optimizing an image for the web...14 Part 4: Placing and editing images on a web page..21 Part 5: Highlighting information...30 Part 6: Creating a banner for a course web site..40
Preparing images using Fireworks

Fireworks Introduction

In this chapter, you will learn the basic skills you need to prepare images for the web, using Macromedia Fireworks. After you have completed this chapter you will be able to place images on your course web site with confidence. Next, we will introduce you to creating enhancements found in many instructional graphics. Some graphics contain information that is not readily apparent to a student. When an instructor shows a slide in a class, she or he can point to different areas and make comments. What happens when students see graphics of this type on your web site? We will show you how to highlight critical information in a graphic in order to make it more meaningful to your students outside class. Finally, for those who are interested in learning more about creating graphics through a practical activity, we will take you through the steps of creating a banner for your home page.
Part 1, Fireworks: Interface Basics, will introduce you to two essential features of the Fireworks interface: the Toolbox and Panels. This brief introduction will enable you to complete the activities that follow with greater ease. Part 2, Editing a scanned image, will show you how to make necessary adjustments to an image once it has been digitized. Part 3, Optimizing an image for the web, will show you how to select the best compression method for an image, and export it as a web-ready JPEG or GIF. Part 4, Placing and editing images on a web page, will show you how to insert an image on your web page using Macromedia Dreamweaver, and make edits to an image once it is in place, using the unique integration feature of Fireworks and Dreamweaver. Part 5, Highlighting, will show you two different methods of highlighting critical information in a graphic to make it more meaningful to students. Part 6, Banner, will take you through the steps of creating a banner for your home page. The tasks in each part are listed below.

Contents

Part 1: Interface basics...5 Task A: Learning to use the Toolbox..Error! Bookmark not defined. Task B: Learning to use the Panels.Error! Bookmark not defined. Part 2: Editing a scanned image.. Error! Bookmark not defined. Task A: Changing the orientation..Error! Bookmark not defined. Task B: Cropping the image.Error! Bookmark not defined. Task C: Cleaning up the image..Error! Bookmark not defined. Task D: Adjusting the resolution..Error! Bookmark not defined.
Part 3: Optimizing an image for the web.. Error! Bookmark not defined. Task A: Creating a JPEG.. Error! Bookmark not defined. Task B: Creating a GIF.. Error! Bookmark not defined. Part 4: Placing and editing images on a web page. Error! Bookmark not defined. Task A: Placing an image on a web page. Error! Bookmark not defined. Task B: Making changes to an image once it is in placeError! Bookmark not defined. Task C: Resizing an image once it is in place. Error! Bookmark not defined. Part 5: Highlighting information.. Error! Bookmark not defined. Task A: Highlighting using simple shapes. Error! Bookmark not defined. Task B: Adding explanatory text.. Error! Bookmark not defined. Part 6: Creating a banner for a course web site. Error! Bookmark not defined. Task A: Creating the canvas...40 Task B: Creating layers...41 Task C: Creating text....41 Task D: Importing a bitmapped image...43 Task E: Resizing a graphic element...43 Task F: Manipulating layers...44 Task G: Cropping the graphic...45 Task H: Saving the graphic as a PNG file..45 Task I: Exporting the graphic as a GIF or JPEG. Error! Bookmark not defined.

Part 1: Interface basics

Goal Contents
To learn the basic interface of Fireworks. Task A: Learning to use the Toolbox Task B: Learning to use the Panels
Task A: Learning to use the Toolbox
This is the Fireworks Toolbox. Usually, it is located on the left side of the screen. The Toolbox contains various tools you need to create and edit images. The workshop activities will only require you to use a few of these tools. Important: If the Toolbox is not on your screen, or if you accidentally close it, you can open it again by choosing Toolbox
As your mouse approaches a tool, a label with the name of the tool appears. This is helpful when you are first learning the names and purposes of the tools. Its possible to turn off the labels once you are a more advanced user. To select a tool, generally all you need to do is click on it.
A triangle in the bottom right corner of the tool means that there are other tools hidden under the tool.
To see the listing of tools grouped together, hold down on the mouse button on the tool button. The group of tools will pop up. To select one of the hidden tools, drag across to its button and release the mouse.
Task B: Learning to use the Panels Another group of tools
In Task A, you learned to access Fireworks tools by using the Toolbox. Fireworks provides other options and features in windows that contain pulldown menus, levers, text fields and other devices that allow you to change settings. The Window pulldown menu will show you all the tool panels available (see picture at left). It will also help you if you accidentally close a panel or a toolbox. Simply go to the Windows pull-down menu and click on the one that you wish to see. (A checkbox next to the name means that element is already visible on the screen.) One of the most important panels in Fireworks is the Properties Launcher. This panel will show you all modifiable properties of any selected element in your image. To select an image click on it. Some of the properties that you can modify, if the element you have selected posses them, are: Fill, Stroke, Effects, Height, Width, etc. A useful rule of thumb when modifying an image is to begin your work by looking at the options available to you in the Properties Launcher.
Another set of these tool-panels includes: Optimize, Layers, Frames and History, and Answers. Fireworks stacks the tools up in Panels within one window, usually located on the right of the screen. You can open the panels by clicking on their titles.
Part 2: Editing a scanned image
To learn how to make necessary adjustments to an image once it is digitized. Task A: Changing the orientation Task B: Cropping the image Task C: Cleaning up the image Task D: Adjusting the size and resolution
Task A: Changing the orientation Step A.1

A gray and white checkerboard may appear where you have erased. You are seeing the "canvas" behind the picture: you've erased the picture color, so the area is now transparent. When you export your image as a gif or jpeg, this transparent area will be replaced by the background color of the image. Choose a background color by selecting Modify -> Canvas -> Canvas Color under the Modify pull-down menu. (You can also select transparent as your background color or export the image with a transparent background.)
Task D: Adjusting the resolution Step D.1
A computer screen only displays a limited number of dots per inch, generally around 96. If an image is set to a higher resolution than this, the extra information is displayed by making the image larger. Choose Modify -> Canvas -> Image Size.

Step D.2

In the Image Size dialogue box uncheck the Resample Image checkbox. Choose pixels/inch in the Print Size pulldown menu to the right of Resolution and type 96 in the box. Now the image has a resolution of 96 dots per inch and Fireworks did not resample the image, in order to accommodate the drop in resolution.
Click OK. Unless you are an experienced designer or wish to learn about pixel dimensions, it is best to wait to change the size of the image until you have inserted it on your web page and can see what adjustments are needed. Fireworks Part 4 Placing and editing an image on your web page will guide you through this process.

Step D.3

From the File pulldown menu, choose Save. Save the file as "sign.png. Save the file in the local folder you defined in the Dreamweaver session of the workshop.
Part 3: Optimizing an image for the web
To learn how to optimize images for the web. Task A: Creating a JPEG Task B: Creating a GIF

Task A: Creating a JPEG

Optimizing images for the web is a necessary step before uploading images to your web site. Scanned images or high-quality photos from digital cameras create large files that can significantly slow down the operation of your site, especially for users with slow connection speeds. Therefore, it is always a good practice to optimize your images with applications like Fireworks or Photoshop before including them in your web site. The general rule is that JPEG compression is best for images with subtle graduation of color, such as this photograph. Experiment to see if this rule holds true for this particular image, and see for yourself the strengths and weaknesses of JPEG and GIF compressions.

Step A.1

Open the file flower.png in the Fireworks folder within the Practice Files folder. Save a copy in the local root folder you defined in the Dreamweaver session of the workshop.
Click on the 4-up tab in your document window.
Four preview windows will open, showing you how your graphic will look using different methods of optimization for the web.

Step A.3 Step A.4

Resize the window until the preview area is large enough for you to judge the quality of the image. Choose the Hand tool from the Toolbox located near the bottom and on the left in the Tools panel. Use the Hand tool to move the graphic (click on the image and drag) and control which part appears in the preview window.

Step A.5

You will want the top left of these four preview windows to remain Original, so that you can compare the results of different optimization methods to your original graphic. One by one, click on each of the other three windows (a window will become outlined in black when it is selected), and assign each window a different optimization method, using the pulldown menu in the Optimize panel (usually located on the right of the screen). Be sure to try both JPEG and GIF formats.
Examine the file size, the download time, and the quality of the images in the preview windows.

Step A.6 (optional)

Notice on the left side of the Optimize panel that you can override the default choices, if you wish to make custom choices. For JPEGs, you may want to experiment with Quality. For GIFs, you may want to experiment with number of colors.
As you experiment, continue to examine the file size, the download time, and the quality of the images in the preview windows.

Step A.7

Finally, choose the best compromise of quality and fast download time. Click on the preview window to make your selection. Remember, it will become outlined in black to indicate it is selected.

Step A.8 Step A.9

From the menubar, choose File -> Export. Name the file flower.jpg (if you havent selected JPEG as the best compression, consult a coach) and click Export. The graphic will be exported using the optimization method you selected. Place the file in the local root folder you defined in the Dreamweaver session of the workshop. You now have a web-ready graphic.

Task B: Creating a GIF

The general rule is that GIF compression is best for images that contain just a few colors or have large blocks of color, with little or no subtle graduation, such as a line drawing. Experiment to see if the rule holds true for this particular image, and increase your knowledge of the strengths and weaknesses of JPEG and GIF compressions.

Step B.1

From the Fireworks File pulldown menu, select Open and find the file sign.png, which is located in the local root folder you defined in the Dreamweaver session of the workshop.
Resize the window until the preview area is large enough for you to see a representative area of the graphic.

Step B.4

Choose the Hand tool from the Toolbox. Use the Hand tool to move the graphic (click on the image and drag) and control which part appears in the preview window. Again, you will want the top left of these four preview windows to remain Original, so that you can compare the results of different optimization methods to your original graphic. One by one, click on each of the other three windows (a window will become outlined in black when it is selected), and assign each window a different optimization method, using the pulldown menu of the Optimize panel. Be sure to try both JPEG and GIF formats. Examine the file size, the download time, and the quality of the images in the preview windows.

Step B.5

Step B.6 (optional)
Remember, on the right side of the Optimize panel you can make custom choices. For JPEGs, you may want to experiment with Quality. For GIFs, you may want to experiment with number of colors.
As you experiment, continue to examine the file size, the download time, and the quality of the images in the preview windows

Step B.7

Finally, choose the best compromise of quality and fast download time. Click on the preview window to make your selection. Remember it will become outlined in black to indicate it is selected.

Step B.8 Step B.9

From the menubar, choose File -> Export. Name the file sign.gif (if you havent selected GIF as the best compression, consult a coach) and click Save. The image will be exported using the optimization method you selected. Place the file in the local root folder you defined in the Dreamweaver session of the workshop. You now have a web-ready graphic.
Part 4: Placing and editing images on a web page
To learn how to place an image on a web page To make edits to the image once it has been placed on the web page quickly and efficiently by using Dreamweaver/Fireworks integration. Task A: Placing an image on a web page Task B: Making changes to the image once it is in place Task C: Resizing an image once it is in place
Task A: Placing an image on a web page Step A.1
Make sure flower.png and flower.jpg are in the local folder you defined in the Dreamweaver session of the workshop. If not, place them there now. Note: You will always want to save your web-ready images in your local root folder. Launch the application Dreamweaver.
Note: The next few steps are performed in Dreamweaver. Step A.3 Step A.4
Make sure your site is open. (Look under Site in the pulldown menu to see if the site you defined in the Dreamweaver session is checked). An Untitled Document (an empty HTML document ready for you to edit) should have appeared when you launched Dreamweaver. If not, from the menubar, choose File->New. Save the Untitled Document by choosing File -> Save from the menubar. Name the file flower.html. Important: Save the file in your local root folder! In the Dreamweaver Toolbox towards to top of the screen, click on the Insert Image icon.

Step A.5 Step A.6

Locate the image flower.jpg (in your local root folder) and click twice on it to select it. The image will appear your HTML document. The image is placed wherever the blinking cursor was located at the time when Insert Image was selected.

Step A.8

If the Property Inspector is not open, choose Window -> Properties from the menubar. The Property Inspector shows you important information about the image and is usually located in the bottom left or middle of the screen. Notice the name of the image in the Property Inspector. The path information (what the browser needs to know to find and display the graphic) is automatically generated by Dreamweaver.

Notice also that the Property Inspector displays a thumbnail of the image, the file size, its width and height, Alt text, and alignment. You can control the position of the image by clicking on the Justify Left, Center or Justify Right icons circled below. If Dreamweaver did not ask you to define an alternative text tag for the image, enter one now in the ALT box.
Task B: Making changes to an image once it is in place Note: The next few steps are performed in Dreamweaver. Step B.1
You can edit the image after it is in place, using the built-in integration feature of Dreamweaver and Fireworks. First, you must select the image by clicking on it (single-click) When an image is selected, it is bordered with black and has small black squares in the lower righthand corner and edges.
Click the Crop button located on the right in the Property Inspector.
A dialog window will appear letting you know that your action will permanently alter the image. Click "OK."
Youve decided to trim the area around the rose. You will see a selection rectangle appear around the image. To make adjustments, click on one of the black rectangles, and tug.
When the results match the illustration below, double click inside the area of the image defined by the marquee.

Step B.6

You are done. Dreamweaver has cropped and adjusted the size of the image.
Task C: Resizing an image once it is in place Note: The next few steps are performed in Dreamweaver. Step C.1
Youve decided the image is too large for your web page it takes up too much room on the page. You could resize it by holding down the Shift key and dragging the corners, with Dreamweaver MX 2004s resample tool. First, go ahead and resize the graphic by holding down the Shift key and dragging the corners. (Holding down the Shift key will ensure that the images proportions remain the same as it is resized). When the graphic is small enough, let go of the mouse. If you make a mistake and distort the image, click on refresh to revert to the original size and try again.

Next, note the new height and width of the image. It will appear in bold, indicating that this does not represent the true size of the file yet, only the size as it will appear in a browser.
Once the image is the approximate size you would like it to be, click on the Resample image button, located on the right, in the Properties Launcher.

Step C.3

Dreamweaver will usually notify you that the changes to the image will be permanent. Click OK.
Dreamweaver has resampled and resized the image. Depending on your image and whether you are stretching or making it smaller, the results may or may not satisfactory. If you are unsatisfied with the results, use the steps below for resizing the image. Otherwise proceed to Part 5: Highlighting information in manual.
Note: The next few steps are performed first in Dreamweaver then in Fireworks. Step C.4
Youve decided the image is too large for your web page it takes up too much room on the page. You have tried the Resample image button but are unhappy with the result. There is a way to solve this dilemma. First, go ahead and resize the graphic by holding down the Shift key and dragging the corners. (Holding down the Shift key will ensure that the images proportions remain the same as it is resized). When the graphic is small enough, let go of the mouse. If you make a mistake and distort the image, click on refresh to revert to the original size and try again.

Step C

Next, note the new height and width of the image. It will appear in bold, indicating that this does not represent the true size of the file, only the size as it will appear in a browser. The file size (and download time) has not changed. You will have to change the true size of the image file in Fireworks.
First, write down the width and height that currently appear in the Property Inspector on a piece of scrap paper. Then, click on the Edit with Fireworks button in the Property Inspector.
Note: The next few steps are performed in Fireworks.
If Fireworks is not open, it will launch. Dreamweaver will usually automatically find the original, editable PNG file, but it may ask you to locate it and you will see this dialog box:
If you click Yes, you will need to find the original png file. You can click No if you do not have the original png file or feel bold enough to work directly on this copy of the file.

Step C.4

Under the menubar, choose Modify -> Canvas -> Image Size.

Step C.5

Type the new height and width (written on your scrap paper) in the boxes under Pixel Dimensions and click OK.

Step C.6

Click the Done button and Fireworks will save the newest version of the PNG file and create a new JPEG or GIF, depending on the optimization method used originally and whether you chose to use the original png.

Step C.7

Return to Dreamweaver. The width and height should no longer appear in bold because the images width and height has been updated to match the resizing you did in Dreamweaver. (You may have to click the Reset Image size in the Properties Inspector.)
Part 5: Highlighting information
To learn how to highlight information in a graphic to make it more useful for instructional purposes. Task A: Highlighting using simple shapes Task B: Adding explanatory text When modifying images or creating your own images and graphs, bear in mind the following visual design principles: 1. Visual design and display techniques should not compromise the integrity of your image. 2. Integrate word and image, especially if the text refers to or describes the image. 3. Use the principle of the smallest effective difference to convey information with subtle color techniques. 4. Use multiples of space and time to facilitate comparisons. 5. Clearly indicate the scale of the object in the image.
Task A: Highlighting using simple shapes Step A.1
Choose horsehead.tiff, located in the Fireworks folder within the Practice Files folder. You would like to show students the horsehead-shaped formation in the Horsehead Nebula. You will do this by outlining it using one of Fireworks basic shapes.
In the Layers Panel, usually located on the right side of the screen, use the pulldown menu on the right to create a new layer.

Step A.4

A dialog box will appear. Name the layer Highlight. Click OK.
Select the Highlight layer as the layer you will edit by clicking on it in the Layers panel.

Step A.6

From the Toolbox, select the Rectangle tool, located under the Vector heading in the Tools panel.
Using the Rectangle tool, draw a rectangle around a horsehead-shaped dark form in the Horsehead nebula.
If the rectangle appears solid, select None from the pulldown menu in the Fill panel, second from the left in the Properties launcher.

Step A.9

Apply a Stroke to the rectangle using the pulldown menu in the Stroke panel, which is third from the left in the Properties launcher. Use the Stroke Color button to change the color to grey.

Step B.11 Step B.12

If you would like to make further edits, click on the text. The Properties Launcher will revert to the textual options. In some images, it is necessary to create a rectangle (light-colored or dark-colored) on which to place the text in order for there to be sufficient contrast for readability. In the Layers Panel, use the pulldown menu on the right to create a new layer. Name the layer Text Background.

Step B.13

If necessary, select the Text Background layer as the layer you will edit by clicking on it in the Layers panel.

Step B.14

Now select the Rectangle tool from the Toolbox.

Step B.15

To draw the background rectangle, click on the area to the upper left of the text Horsehead-shaped formation in the Horsehead Nebula and drag down and to the right until the rectangle covers the text.

Step B.16

Apply Solid as Fill, using the pull-down menu in the Fill panel of the Properties laucher.

Step B.17

Choose black as the color from the Color well. When choosing background colors, select one that provides good contrast for the text and does not distract the viewers from the larger image. In this instance, black works all right because that is the color of space. But other color combinations are possible.

Step B.18

The black Text Background rectangle is covering the text. Correct this in the Layers panel by dragging the Text Background layer below the Text layer (click on Text Background and drag it to its new position, shown below).

Step B.19

The text is now visible. You may need to adjust the rectangles position. Click on the rectangle with the Pointer tool (single click) to select it. Then use the arrow keys on your keyboard to move the rectangle. If the rectangles size needs adjustment, delete it, and repeat steps 14 and 15.

Step B.20

From the menubar, select File -> Save. Save the file as horsehead.png. You can make future edits to this file format easily and without loss of quality.

Step B.21

After the PNG file is saved, you can optimize the image, to create a web-ready JPEG or GIF file (instructions for this are in Optimizing an image for the web in this section of the manual).
Part 6: Creating a banner for a course web site
To learn how to create a graphic for use as a banner for a course web site. The graphic will consist of two main components: an imported bitmapped image. Task A: Creating the canvas Task B: Creating layers Task C: Creating text Task D: Importing a bitmapped image Task E: Resizing a graphic element Task F: Manipulating layers Task G: Cropping the graphic Task H: Saving the graphic as a PNG file Task I: Exporting the graphic as a JPEG or GIF

Task A: Creating the canvas Step A.1
From the menubar, choose File New.
A dialog box will appear. Enter the canvas size (width 450 pixels, height 175 pixels). Click OK.
Task B: Creating layers Step B.1
If the Layers Panel is not open, then from the menubar on top, choose the Window pull down menu then select Layers.
In the Layers Panel, double click on Layer 1. (If necessary, click on the Layers tab to access the panel).
A dialog box will appear. Rename Layer 1 Text" and press Return.
Task C: Creating text Step C.1
Choose the Text tool from the Toolbox.
Click on the canvas. A blue box with a cursor in it will appear. Type 21:144 Childrens Literature in the box. Choose the font, size and color (you will have to highlight the text first) in the Properties Launcher. If you arent satisfied with the results, simply select the text, and make necessary adjustments.
Apply an Effect using the pop-up Effect menu in the Properties Launcher. Suggestion: apply Inner Bevel (under Bevel and Emboss).
You can set a variety of parameters for any of the effects you choose. Dont be afraid to experiment.
Experiment with other effects, such as Drop Shadow (under Shadow and Glow). You can apply multiple effects. A list of the effects you apply is generated in the Effect panel. To turn off an effect, uncheck it. To delete an effect, highlight it and
click on the Minus button above the effects area.
Continue to experiment until you are happy with the results.
Task D: Importing a bitmapped image. Step D.1
Return to the Layers panel. Access the special pulldown menu by clicking on triangle in the upper right-hand corner, and choose New Layer." Name this layer Illustration.
From the menubar, choose File

Import.

Choose the file tale.tiff, which is located in the Fireworks folder within the Practice Files folder. Place your cursor over the area of the canvas where you would like to place the image. (The cursor will change into an inverted L shape as it moves over the canvas). Click on the canvas. The bitmapped image will appear.

Task E: Resizing a graphic element Step E.1
The bitmapped image is too large for the canvas. Rather than increase the height of the banner, you will resize the bitmapped image. Click on the image you just imported to select it. From the menubar, choose Modify Transform Scale.

Step E.2

Step E.3
Place your cursor over the lower right square, until it turns into a two-sided arrow (you may have to resize the window). Drag the corner of the graphic upward and to the left until it fits into the canvas. Double click on the graphic when it is correctly resized. You will probably want to adjust the position of the image. Fine adjustments are best made by using the arrow keys on your keyboard rather than the mouse.
Task F: Manipulating layers Step F.1
The graphic is covering the text. In the Layers panel, click on the Illustration layer and drag it below the Text layer. The text should now appear on top of the graphic. Now that the illustration is in place, you will probably want to reposition the text. Click on the text to select it (a blue rectangle will surround it when it is selected). Drag it to an area where it does not cover the two characters in the graphic. Try the upper section of the canvas. Tug on the corners of the box surrounding the text until all the text appears on one line. If the text is too large to fit on one line, doubleclick on it and adjust the size.

Step F.2

Task G: Cropping the graphic Step G.1
If there is excess white space surrounding the graphic and text, you will want to crop it. Otherwise, it will make the file unnecessarily large. From the tool bar, select the Crop tool.

Step G.2

Click on the upper left corner of the area you would like to preserve, and drag the crop marquee down and to the right until all the area is covered. If you need to make adjustments, let go of the mouse button, click on one of the black rectangles, and tug. When you are satisfied with the results, double click inside the area of the graphic defined by the marquee.
Task H: Saving the graphic as a PNG file Step H.1
From the menubar. Choose File -> Save As. Save your file as mybanner.png. Always save your graphic as a PNG file before exporting it as a GIF or JPEG. A PNG file is easily editable if you would like to make changes in the future.
Task I: Exporting the graphic as a GIF or JPEG Step I.1
Four preview windows will open, showing you how your graphic will look using different methods of optimization for the web. You will want the top left version of these four preview windows to remain Original, so that you can compare the results of different optimization methods to your original graphic.

Step I.2

Macromedia - Fireworks MX 2004
Help International Search
Your Account Home Productsq Showcaseq Supportq Developersq Solutionsq Downloadsq Companyq Store q
You may not have everything you need to view certain sections of Macromedia.com. Please see our site requirements.

HomeProducts

Macromedia Fireworks MX 2004
Design, optimize and integrate web graphics
Buy or upgrade Fireworks MX 2004 Free 30-day trial Order by phone: 1-800-457-1774
Fireworks MX 2004 lets users import files from all major graphics formats and manipulate both vector and bitmap images to quickly create graphics and interactivity. Images can be easily exported to Dreamweaver, Flash and third-party applications.
$100 Value Add the excitement of video to your website easily with Flash Professional. Buy Studio MX 2004 and get Flash Professional free a $100 value. Offer ends June 30, 2005. See terms. Buy now
Latest News Mac OS v10.4 "Tiger" Compatibility Macromedia Fireworks is compatible with Mac OS X v10.4 "Tiger." Any future updates about compatibility will be reported in the Emerging Issues TechNote.
New In Fireworks MX 2004 Built-in File Management Collaborate easily with new check-in/check-out control and built-in FTP.
New Photo Editing Tools Touch up photos with Replace Color and Red Eye Removal tools.
What's new in Fireworks MX 2004? (10 min)
Supercharged Performance Manipulate large images and complete common tasks as much as 85% faster.
How do I use Fireworks MX 2004? (20 min)
More new features Top 10 reasons to upgrade System requirements
http://www.macromedia.com/software/fireworks/ (1 of 4)6/20/2005 2:13:33 PM
Fireworks MX 2004 in Action See how customers such as Gulfstream Aerospace, The Museum of Modern Art, and Southern California Edison use Fireworks to create, optimize, and export interactive web graphics.
See Fireworks showcase Read reviews

The Museum of Modern Art

Get More Done with Studio MX 2004 Get more done by purchasing Fireworks as part of Studio MX 2004, the integrated tool set that includes the newest versions of Fireworks, Dreamweaver, Flash and FreeHand. Studio MX 2004 is also available with Flash Professional.
Read more System requirements FAQ
Streamlines web development
Fireworks Home At a Glance Features Upgrade Center System Requirements FAQ Reviews and News

Purchase Options

Buy or upgrade
http://www.macromedia.com/software/fireworks/ (2 of 4)6/20/2005 2:13:33 PM

Call 1-800-457-1774

Fireworks in Action

Showcase Edge Newsletter

Fireworks Developer Center
Sample Files Cross-Product Integration Creating and Editing Graphics Effects and Commands More in Developer Center

Support and Training

Documentation Fireworks Support Center Training & Certification Fireworks Online Forums Register Your Product

Downloads

Free Trial Updaters Extensions
Related Products Dreamweaver MX 2004 Accelerate site development through tight Dreamweaver integration.
Macromedia Flash MX 2004 Bring Fireworks designs to life as rich interactive experiences.
ColdFusion MX 7 Serve up Fireworks graphics and interactivity in record time. Read more about the MX 2004
http://www.macromedia.com/software/fireworks/ (3 of 4)6/20/2005 2:13:33 PM

product line

Company | Site Map | Privacy & Security | Contact Us | Accessibility | Report Piracy | Send Feedback 1995-2005 Macromedia, Inc. All rights reserved. Use of this website signifies your agreement to the Terms of Use. Search powered by
http://www.macromedia.com/software/fireworks/ (4 of 4)6/20/2005 2:13:33 PM