Find Help Find Email
Help Desk Home

Help Desk > Tutorials > Other Software

Printable Version

Preparing Images for the Web or Powerpoint using Fireworks

Fireworks is installed in the following public labs:

Quigley 220, Bio-Tippie, Carnegie 105, Carr106, Murray 116 and Murray 117

Some machines in Quigley 220, Carnegie 105, Carr 106 and Murray 116 also have scanners attached, so that photographs can be scanned and then prepared for the web or Powerpoint following the instructions below.

Preparing an Image for the Web or Powerpoint

Open Fireworks by selecting Start > Programs > Macromedia Fireworks 4 > Fireworks 4 (or Start > Programs > Macromedia > Macromedia Fireworks 4 > Fireworks 4 on some machines)

Click File > open and then browse to the location of the image on the local hard drive or a floppy.

Make sure that the Fireworks Tools palette and the Optimize palette are open.

screenshotscreenshot

These palettes can be opened using the Window menu if they are not already open.

screenshot

You can close down any palettes you don't need if they are in your way or use F4 to temporarily hide all open palettes (F4 again to restore palettes).

Use the crop tool screenshot to crop the image to the desired look. Once you've selected the area you wish to keep with the crop tool, double-click inside the area to crop the image.

screenshot

If necessary, click Modify > Image size and replace pixel dimensions for width with an appropriate number. A width of 250-300 pixels is a good size for the web. Anything over 600 pixels is generally considered too large, as many users will have to scroll horizontally to see the entire image. When you change the width of an image, the height will automatically resize to keep the image in proportion.

screenshot

NOTE: Changing to a larger width than the original width may produce a poor image and is not recommended.

Click on the image using one of the pointer tools screenshot, so that there is a blue selection box around the image.

screenshot

Click Xtras > Sharpen > Sharpen to sharpen the resized image. If this makes the image look too harsh, click Edit > Undo to undo the sharpen filter.

When you have the image looking the way you want it to look on the web or in your presentation, it's time to optimize and export the image.

Your Goal: To get the best quality image for the smallest file size.

Guidelines:

To optimize the image:

Click the "4-up" tab on the image window.

screenshot

The top left window is the original document; others are optimized versions. Note the information under each image (image type, file size, download speed).

screenshot

Using one of the pointer tools, click on one of the three optimized images. In the optimize palette, click the Settings dropdown and choose a jpeg or gif setting, depending on your image type.

For jpegs, make one of the jpeg choices from settings, then adjust the Quality slider as desired (lower quality = lower file size).

screenshotscreenshot

For gifs, make one of the gif choices from Settings, then adjust Colors (fewer colors=smaller file size) and perhaps palette (websnap adaptive, web216, and adaptive are the best choices)

screenshotscreenshot

Continue to adjust settings, making slightly different settings choices in each case, until you have an image that strikes a good balance between looking good and having a small file size. Click on the image you are happiest with to select it.

screenshot

Click File > export... to save this version as a jpg or gif--it will automatically save it in the format you've selected in the optimize window.

screenshot

When you are done with the image close it. Fireworks will ask if you want to save the image--it's asking about the original image, not the exported one you already saved.

screenshot

If you want to leave your original image untouched, you can say "no" to the save. If you say yes, Fireworks will save it as a .png file, and all the optimization information will also be saved.

If you are working in a lab, ftp your optimized and original images to your network or web account before you leave, or you will lose all your work. When you are creating your web page or Powerpoint presentation, be sure to use the optimized jpg or gif image, and not the original image or the saved Fireworks png file.

 


Printable Version