Lab 5: Fireworks

Creating and modifying images is part of the work you must do to design an effective webpage. Fireworks is a software application used to perform these tasks, and it is licensed for use on the public computers at Wellesley.

The following Fireworks documents are found on the Wellesley server, and provide helpful documentation and tutorials in addition to what we will cover in the laboratory today:

How to Install and Use Fireworks - to get your own copy of Fireworks

Fireworks Beginning Tutorial - provides a nice introduction with lots of illustrations.

Getting started

Click here for a warm image to get us started.
Launch FireWorks, and open the image within the application.
- The area where you see the image is the canvas, where you will work on your graphic.
- To the left of the canvas is a panel of drawing and other tools. This is called the Tools window.
- Below the canvas is a "properties" window. It displays properties of the selected object or tool.
Keep the canvas, the properties and the tools window open for today's lab.

Transforming, Resizing, and Cropping

Click on the image to select it, and then try some of the rotations and flips from the Modify / Transform menu.
Enlarge the image: "Modify / Canvas / Image Size ". Set it to some predetermined size, such as a height of 200 px. If the "constrain proportions" box is checked (it is by default), the other dimension will be modified to retain the aspect ratio.
Save the image on your Desktop. What is the file extension? What is the file size? (Note: PNG is the native file format for Fireworks.)
Choose the crop tool from the tool window, and drag the crop tool over the picture to highlight a portion of it.
Double-click in the highlighted region and the picture will be cropped.

The Info Window

To find the coordinates of a pixel in your image (useful when you are doing an imagemap), do the following:

Go to "Windows / Info" to turn on the "Info" panel. You'll see a small window appear with the X and Y (horizontal and vertical) coordinates and color of the pixel that the mouse is pointing to within the image.
Select the Pointer tool (the black arrow in the upper left of the Tools window)
Move the black arrow over the image. The Info window now reports the X,Y location of the tip of the arrow, and the color of the pixel at that location. Remember that X increases left to right and Y increases top to bottom.

Creating your own graphics using Fireworks

Here's a template for a cs110 gum chewing web site that was created in Fireworks. mock up gum site for fireworks lab

There are three parts to this exercise. You'll create graphics similar to each of the three shown below, and export each in GIF or JPEG format so they can be incorporated into your web pages.

Make sure you always save a copy of your PNG file, in case you need to edit your graphic in the future!

Part I: A three dimensional sphere
By using a color gradient and a drop shadow, a flat circle becomes a three dimensional sphere. a sphere

Part II: Changing an object's color
It is often useful to be able to change color of parts of an image (like a photo)

Part III: Banners for web pages
Various text effects in Fireworks help you create stylish and attractive web pages.

For instance, instead of using HTML header tags, you can create cool graphics for headers for your web pages.

Introduction| Syllabus| Assignments| Documentation| Project

Computer Science 110
Date Created: June 2001
Date Modified: January 2008