Creating Web Images Using Fireworks

This tutorial will help you use Fireworks to edit original photos for Web use. Please remember to save a copy of your original image before making the modifications described below.

Cropping an image

If you only want to use a certain area within an image, you will need to crop the desired area. Click on the Marquee tool icon, then drag a rectangle around the area that you want to crop (this is done by holding down the left mouse button). Then click on Edit > Crop Document.

Setting the size and resolution

Images saved on the Web should not have a resolution greater than 72 DPI (DPI = Dots per Inch), and should be no wider than 500 pixels to fit in the WWU template. Select Modify > Canvas > Image Size

• Select Constrain proportions and Resample image checkboxes
• In Pixel dimensions, set the width to 500 pixels or less; the height will update itself automatically.
• In Print size, select Pixels/Inch, and type 72 in the Resolution text box.
• The image at right shows what your window may look like after making the modifications
  

After clicking on OK, you should notice your image shrink in size.

 

Changing the contrast and lightness

If an image seems too light or dark, or if the colors seem unnatural, you may need to adjust the contrast and lightness settings.
To do this from Fireworks, first click on your image, the go to Filters > Adjust Color > Brightness/Contrast.

• Be sure that Preview is checked to show you what the image will look like if you make the change.
• A brightness or contrast of 0 means that the setting is unchanged from the original image.
• Play around with the brightness and contrast scale bars until you are satisfied with the image.
• Click on OK when you are done to save your settings.

Sharpening an image

If an image seems too blurry, you may be able to fix its appearance by sharpening it. Click on your image, and then click on Commands > Batch Commands > Sharpen Selection. You may repeat this several times until the image is to your satisfaction. Please note that using the sharpen command too many times can make your image look worse that it would by being a little blurry; use your own judgment on how much sharpening an image needs.

Saving an image for the Web

Once you are satisfied with all the changes made to your image, you will need to save it as a Web-compatible format. Click on File > Image Preview.

• Make sure that the format is set to JPEG for photos, GIF for drawings.
• Set the quality to 100 (this ensures that your image will look as good as possible).
• Select an appropriate level of smoothing. Smoothing helps ensure that your image does not look choppy; however too much smoothing will make the image look blurry. An appropriate level of smoothing is 4, but you may select a different level if you deem it necessary.
• Always keep Progressive browser display unchecked (this ensures compatibility with the Flash image gallery included with the WWU template).
• Keep Sharpen color edges unchecked (this will keep your image looking as smooth as possible).
• Make sure that Remove unused colors is checked (to keep the file size small; this will not affect your image quality).
• You can preview your image by looking at the right hand side of the window.
• Once you are ready to save your image, click on Export.
• A new window will allow you to choose a file name and location for your image. Click on Export when you have found an appropriate location and entered in a name. Remember that file names for the web should never contain spaces or special characters.
• The image below shows some appropriate, sample settings for exporting images.