Fireworks Lesson 2-3:
Optimizing & Exporting Graphics

About Exporting Images

One of the most satisfying moments when working in creating graphics for Web Design is when you put the final touches on your artwork.  You have created a wonderful image for your site, but how do you get it there?  It is usually best to fine-tune the settings of your files before you export them to be used in another program

You can use the Fireworks Export Wizard and the Optimize panel to make the fine-tuning needed to create the best-quality images with the smallest file size.  Seven different file formats are available for your export files, depending on the purpose you have for them.

The native format for Fireworks is PNG.  You should always keep a copy of your original PNG files, in addition to the exported files you create.  If you needed to make changes to any of your images, simply change the PNG file and export it again.
There are two ways to export files from Fireworks.  One is to follow the step-by-step advice of the Export Wizard.  The second is to optimize the file manually by using the settings on the Optimize panel and then export the file by using the Export command or the Quick Export feature.

Optimizing and Exporting GIF images

GIF images are generally used for line art and images with solid colors.  GIF images can contain transparent areas and can be used for animation files.  If you choose GIF as your export file format, you need to pick the color palette for the export.  The disadvantage of GIF images is that they are restricted to 256 colors.

A color palette is a group of colors from which the image is created.  Fireworks contains several preset palettes.  The following table describes these default palettes:

Optimizing and Exporting JPEG images

Use JPEG to export photographs or any artwork with gradations or millions of colors in the image.  JPEG files cannot be transparent or animated.  Unlike GIF files, JPEG images don’t need a color palette. 

JPEG uses a lossy compression scheme, which means it looks at your image and removes information as part of its compression process.  This causes a loss in quality.  You set the level of quality to control the amount of compression on the Optimize panel.

Previewing before Exporting

You can preview your image within the document window before exporting them.  The Preview tab displays the graphic as it would appear in a Web browser, based on your optimization settings.

By splitting the window into two or four preview panes, you can compare multiple optimization settings side by side before exporting.  Fireworks also displays the file size and the approximate download time within each preview box.

Task 1 - Cropping your Finished Image to Exact Size Needed

1. Create a new folder in your Fireworks folder, named Lastname Exports.
   
   
2. Open your medal.png file.
3. Click the Selection tool and make sure that all objects are deselected.
4. In the Properties Panel, click the Fit Canvas button.
   All the empty space of your canvas is removed.
5. If your canvas still has some open space, search in the open space for stray objects you did not intend to keep. Select and delete any unneeded objects and Fit Canvas again.
6. Keep your file open for the next Task.

Task 2 - Selecting & Previewing GIF Optimization Settings, Exporting a GIF Image

You can also select your optimization settings by using the Optimize panel.
First you must determine which type of file you plan to export, such as GIF or JPEG.  You can then select the detailed settings.

1. To remove the background color, deselect all objects and in the Properties Panel, click the Canvas color box. Choose the red stroke (no color).
   You will see a gray and white checkerboard pattern in the background - this means the background is now transparent.
   
   
2. Look at the right side of your Fireworks screen. If you see a little triangle arrow pointing to the word Optimize, click the arrow to open the Optimize panel. 
   If you do not see it, choose Window, Optimize to open the Optimize panel. 
   
   
3. Click the down-arrow next to the Export file format box. 
   You will see several formats, such as GIF, Animated GIF, JPEG, etc, from which you can choose.
   
   
4. Select GIF.
5. Click the down-arrow beside the Indexed Palette box. 
   You will see the list of color palettes from which you can choose. 
   
   
6. Select Web Adaptive.
7. You can set the number of colors for the palette by using the Colors down-arrow. 
   For smaller files, use a small number. If you pick a number that is smaller than the actual number of colors in the image, some colors are lost.  The pixels with the lost colors are converted to the closest remaining colors on the palette.
   
   
8.  Set the Colors to 128, and Dither at 0%
9. On the top gray bar of the main window, click the 2-Up button.
   The document is now divided into two panes, showing the original PNG file and a preview of what GIF file will look like after exporting.
   
   
10. Examine the information listed at the bottom of the windows - the settings are shown, along with the relative file sizes of the original and the exported GIF. The time entry is the download time for the exported image.
11. Click in the Original image window. From the Transparency drop-down list, choose Index Transparency.
12. Click Rebuild to update the palette based on your current selection and the colors in your image.
13. Notice that the stripes on your medal turned 'transparent' along with the background - Index Transparency removes all instances of the background color, in this case white, so the stripes changed.
14. Switch back to No Transparency, the select Alpha Transparency.
    Now the image has only the background transparent - Alpha Transparency removes only the background color.
    
    
15. Choose File, Export to open the Export dialog box.
    The settings in the Optimize panel will be used to export from this dialog box. 
    
    
16. Save the file in your Exports folder using the same filename and a .gif extension, with Images Only as the Save as type.
17. Close the file without saving the PNG version.  Leave Fireworks open.

Task 3 - Selecting & Previewing JPEG Optimization Settings, Exporting a JPEG File

1. Open your venicecanal.png file.
2. If you have not already done so, fit the canvas to the image.
3. On the Optimize panel, choose JPEG as the Export file format. 
   JPEG images are always saved in 24-bit color, so you can’t optimize a JPRG image by editing its color palette.  The color table is empty when a JPEG image is selected.
   
   
4. Click the Preview tab at the top of the document window. 
   With the Optimization set to JPEG, you see what the file will look like in a browser. 
   
   
5. Click the 2-Up tab.  If necessary, size the document window so you can see both panes. 
   Highlight the value in the quality box and enter 100.  
   Quality determines the amount of data loss when compressing the file.  The lower the number, the greater the compression and the smaller the file, but the poorer the quality of the image.
   
   
6. Change the Quality value to 95.  The image should not significantly change quality, but the file size is smaller.
7. If necessary, change the value in the Smoothing box to 0. 
   Smoothing blurs the hard edges of the image, which do not compress well in JPEG format.  The higher the number, the greater the blurring and the smaller the file.
   
   
8. Choose File, Export to open the Export dialog box.
9. Save the file in your Exports folder using the same filename with the .jpg file extension, and with Images Only as the Save as type.
10. Close the file without saving the PNG version.  Leave Fireworks open.

Task 4 - Choosing Whether to Export as GIF or JPG

Sometimes you may have an image that contains photographic content, as well as areas you would like to be transparent, such as a feathered frame, or a composite of several photos. You will need to make some choices - if you need quality in the photo images, you will want jpg, but you cannot have transparency. If you really need the transparency, you may have to sacrifice photographic image quality.

1. Open your bitmapintro.png file.
2. Click the 2-Up tab.  If necessary, size the document window so you can see both panes. 
   The problem with exporting this file as a JPEG is that the transparent background will not stay transparent in the exported file.  JPEG does not support transparency, GIF does.
   
   
3. Click the preview image and use the Optimize panel to change its format to GIF. 
4. Click the 4-Up tab.  This tab shows one original and three GIF preview options.
   You can compare various settings by selecting a pane and then changing the settings for that image on the Optimize panel.
   
   
5. Click the preview image in the upper right corner; choose 256 for the value in the Colors box.  Click the lower right preview image and choose 128 for the color value.
   Note the file sizes are smaller, the less colors you include, but the quality may change as you lose colors. 
   
   
6. Choose JPEG as the Export type for the remaining preview image.  You can compare results of different optimizations settings by experimenting with the preview panes.
7. Choose Alpha Transparency for the two preview panes on the right. 
   The preview image now has no background color. but you can see that the feathering is not as smooth as in the original. 
   
   
8. Examine the Preview panes closely - note the difference in the quality of the GIF choices. You decide whether it is better to keep the background to keep the better quality of the JPG, or whether to keep the transparency along with the best quality possible as a GIF
9. Click the preview pane you choose to keep, thenclick the Original tab to accept the settings in the selected preview pane.  The Optimize panel reflects the choice you made.
   
   
10. From the File menu, choose Export. 
11. Save the file in your Exports folder using the same filename, the appropriate extention, and with Images Only as the Save as type.
12. Close the file without saving the PNG version.  Close Fireworks.

Task 5 - Export the rest of your Fireworks files

1. Open each of the rest of your lesson files, one at a time.
2. Crop away any extra empty canvas around your Vector images.
3. Use the 2-Up or 4-Up views to choose your optimization settings.
4. Optimize Vector images as GIF files with appropriate color and transparency settings.
5. Optimize Bitmap images that cover the entire canvas as JPG files with appropriate quality settings to make the file size as small as possible without visibly compromizing quality.
6. Optimize any Bitmap images with visible background canvas as you choose, to make the best-looking export.
7. Export each file to your Exports folder using the same filename and the appropriate file extension.
8. Close Fireworks when you are finished.

Place a copy of your Exports folder in the WebDesign Dropbox.