Design Learning Guide for Fireworks: Saving and exporting files

Fireworks uses PNG as its native file format. However, Fireworks PNG files include editing information and special metadata that does not exist in regular Portable Network Graphics files. It's important to know the difference between these different types of PNG files and name them accordingly. In addition to providing information on how to do so, this section covers best practices for using the improved interface in Fireworks CS4 so you can save time and increase productivity while you output files.

This section describes the process for saving and exporting files from Fireworks CS4. I also provide best practices for file naming to make it easy to keep your master PNG files separate from the PNG files generated in other image editing programs. Finally, I discuss how to close multiple files simultaneously with the tabbed interface and how to save a copy of a Fireworks document to create a new iteration of a project.

Saving files in Fireworks CS4

Fireworks CS4 follows the convention along with the other products in Creative Suite 4 by displaying a visual indicator (an asterisk "*" at the end of the filename) whenever there are changes ready to be saved (see Figure 1).

Fireworks also prompts you to save the document if you attempt to close the file without first saving the changes.

Select File > Save to save the current file. If it is the first time you've saved it, you'll be prompted to enter the filename and specify the file's location in your computer's directory structure.

When you choose to save the file you are essentially overwriting the existing file with the recently changed version. (If you add effects, such as Live Filters, Fireworks CS4 will suggest saving the document in its native PNG file format, to preserve the editable areas for later revisions).

Tip: Whenever you save files, I highly recommend adding the suffix .fw to your filenames (before the .png extension) so that you can distinguish between the PNG files you generate in Fireworks and the PNG files you create in other programs. For example: logo.fw.png.

One of the timesaving features in Fireworks CS4 is the ability to open multiple documents with the tabbed interface. If you wish to close and save all of the open documents simultaneously, right-click (or Control-click on Mac OS) on any of the tabs and choose Close All from the context menu that appears (see Figure 2).

Fireworks CS4 will prompt you to save each file (if needed) before closing it.

Saving a copy of a Fireworks document

If you wish to save a copy of the current document, choose File > Save As. Rather than automatically saving the file in the default file format, you are presented with options to save the current document in a variety of different file formats: PNG, BMP, GIF, Animated GIF, AI, JPEG, SWF, PSD, TIF, and WBMP.

You may wish to save the file for web delivery (in GIF, Animated GIF, JPEG, PNG or SWF file formats) or choose a file format such as AI or PSD so that you can bring the document into Illustrator or Photoshop to continue making changes to it.

To learn more about preparing Fireworks files to work with them in other file formats, see Using Fireworks with other applications in the Using Fireworks CS4 online documentation.

Tip: It is a good idea to save iterations of the current document you are working on, so that you can keep back up copies in case you wish to revert to the last stage of the design progression. Be sure to save the backup versions of the document in the PNG file format to preserve editability so that you can continue to make changes later.

Where to go from here

To learn more about importing and opening files in Fireworks CS4, watch Getting images in and out of Fireworks by Jim Babbage on Adobe TV.

To get more information about exporting files in Fireworks, read this TechNote: Supported file formats in Fireworks CS4.

To learn how to export your Fireworks document as a CSS layout, read Exporting CSS and images in Fireworks CS4 by John Wylie and watch Exporting CSS and images by Jim Babbage.

Finally, explore other areas of the Design Learning Guide for Fireworks CS4.