optimize and export in fireworks cs5 gc

2
1 Optimize and Export in Fireworks To export using Image Preview: 1. Open the image in Fireworks. 2. Select File > Image Preview to open the Image Preview. 3. Expand the Image Preview window by dragging a corner of the window (if necessary). 4. Set the size of the exported image (If necessary). Choose the size you need for your Web page. a. Click the "File" tab. b. Select Constrain to scale the width and height proportionally. c. Enter the desired width/height in pixels, or specify a scale percentage. Note: Do not hit "Enter". 5. Choose your optimization settings. a. Click the "Options" tab. b. Click the "4up" preview window button to divide the preview area into four previews. c. Set a percent size (if necessary) to view your optimized image. 100% gives the most accurate view, but you might need to zoom in/out to see the entire image, depending on the size of your window. When choosing your final optimization settings, you can drag the image around to see specific areas, as necessary.

Upload: others

Post on 12-Sep-2021

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Optimize and Export in Fireworks CS5 GC

1  

Optimize and Export in Fireworks 

To export using Image Preview: 

1. Open the image in Fireworks. 

2. Select File > Image Preview to open the Image Preview. 

3. Expand the Image Preview window by dragging a corner of the window (if necessary). 

4. Set the size of the exported image (If necessary).  Choose the size you need for your Web page. 

a. Click the "File" tab.  b. Select Constrain to scale the width and height proportionally. 

c. Enter the desired width/height in pixels, or specify a scale percentage. 

Note: Do not hit "Enter".  

 

5. Choose your optimization settings. 

a. Click the "Options" tab. 

b. Click the "4‐up" preview window button to divide the preview area into four previews. 

   

c. Set a percent size (if necessary) to view your optimized image.  100% gives the most accurate view, but 

you might need to zoom in/out to see the entire image, depending on the size of your window.   

When choosing your final optimization settings, you can drag the image around to see specific areas, as 

necessary. 

 

   

Page 2: Optimize and Export in Fireworks CS5 GC

2  

d. Click the upper left preview; it becomes highlighted with a gray box around it. 

Choose an optimization preset from the dropdown menu (1), or create  your own settings in the 

"Options" area (2). 

 

e. Repeat for each of the other three previews. 

f. Compare the four previews.  Consider image quality (how does it look?) vs. file size/download time.  For 

any given format, there will be a tradeoff between the two. 

g. Choose your desired optimization settings; click the appropriate preview. 

6.  Export your image.  Click "Export" and choose an appropriate location and file name.  If exporting to the same 

folder as the original image, choose a different name so you don't overwrite it. 

A brief explanation of the presets: 

• GIF Web 216 Forces all colors to web‐safe colors. The color palette contains up to 216 colors. 

• GIF WebSnap 256 Converts colors to their closest web‐safe color. The color palette contains up to a maximum of 256 colors. 

• GIF WebSnap 128 Converts colors to their closest web‐safe color. The color palette contains up to 128 colors. 

• GIF Adaptive 256 Contains only the actual colors used in the graphic. The color palette contains up to a maximum of 256 colors. 

• JPEG – Better Quality Sets quality to 80 and smoothing to 0, resulting in a high‐quality but larger graphic. 

• JPEG – Smaller File Sets quality to 60 and smoothing to 2, resulting in a graphic less than half the size of a Better Quality JPEG but with reduced quality. 

• Animated GIF WebSnap 128 Sets the file format to Animated GIF and converts colors to their closest web‐safe color. The color palette contains up to 128 colors.