Editing a digital photo for your website in Fireworks

Open the file containing the original file: File, Open

Crop the photo as desired, either as a rectangle with the crop tool, in which case you 1) click on the tool, 2) draw a rectangle containing the part of the photo you want to keep, and 3) press the enter key.

Or, alternatively, you can select a circular image with the following steps: 1) choose the Oval Marquee Tool. Note: if the rectangle marquee tool is displayed instead, click and hold the mouse on that tool, and select the oval tool. 2) Holding the Shift key to constrain the oval to a circle, drag your mouse over the area that you want to select. 3) Select the inverse (the area outside the circle) by clicking the Select menu and choosing Select Inverse. 4) Press the Delete key to delete the area outside the circle. 5) Click the Edit menu and choose Crop Document. Do this once again: Edit, Crop Document.

At this point, regardless of whether you made a rectangle or a circle, you are left with an image that contains the content you want in your final image. The last steps are to set the image size and resolution for your website.

Click on the Modify menu and choose Canvas and then Image Size. Choose a resolution of 72dpi, and the dimensions appropriate for your site. Note: choose either width or height, but not both, and let Fireworks constrain (maintain) the proportions and resample the image. Click Okay.

To see the image actual size, click the zoom drop down and choose 100%

If you are using your image as a background (or a rollover), you might want to increase the transparency of the image. Do this by choosing the Select tool and clicking on the image. Then, with the Transparency slider, adjust the transparency to suit your needs.

To change the background color from transparent to another color, click on the Modify menu, and then choose Canvas and Canvas Color. Click on Custom and choose your preferred background color.

If you are using the image as a rollover navigation button, try saving one with a high transparency setting, and the mouse-over version with no transparency.

Export your image as a jpg in you website images folder and save the original as a png file in your website originals folder, as outlined on the other Fireworks handouts.