OverviewMacromedia Fireworks is a graphics program designed sepcifically for Web image and page creation. It combines some features of bitmap (raster) graphics programs like Adobe Photoshop with vector (object) graphics like Adobe Illustrator. In addition, it provides help in creating animations and other Web-specific items.
This exercise gets you acquainted with Fireworks tools which deal with bitmap graphics. You will be creating a Web page promoting Washtenaw Community College's International Festival.
Create a FileStart Fireworks and create a new file 600 pixels wide by 400 pixels high. Resolution should stay at 72 dpi (the default) and the background will probably work best if it's black.
Save the file in Fireworks .png format on your Zip disk. (Use a name like Festival.)
Select Photos to Form a CollageHint:
Use your browser to look through the images in this directory:
From among this selection of images, choose at least five to use in your collage. Save them on your own storage medium by using the browser's SaveAs command.
Choose the important parts of each imageYou will need to cut out parts of images and superimpose them on one another using layers. For this exercise, use only Fireworks, since the point is to get acquainted with its tools - both their strong and weak points.
This part of the exercise can be discouraging, because of Firework's lack of some tools you may have gotten accustomed to using in Photoshop. But don't be discouraged! With the Magic Wand and Eraser tools, you can do just about everything you need to. Here are some tools to find and experiment with:
As you cut out parts of the pictures, please be sure to do so in a professional manner. Don't simply cut out rectangular areas of the source picture and paste them into your collage.
Assemble your Web
page Hints:
Paste the cutout parts of the images into your Web page. Arrange each image by moving it around until you have a solid texture of images. The results should not have either rectangular blocks or chunks of background color left over from their original images. Your work will be judged for professionalism and artistic composition.
Be sure to save your file frequently!
Optimize for the
Web When you are satisfied with your collage, save one last time in Fireworks .png format. Then optimize the image using the 2-Up or 4-Up tab near the top of the image window. (This is similar to Photoshop's File > SaveForWeb feature.)
To choose GIF or JPEG and select compression options, open the Optimize pad in the upper right corner of the Fireworks window (but it can be moved!). Evaluate the quality of the compressed image and its relative size, comparing the compressed version with the original. (See module D23h for more details on optimizing for the Web.)
When you're satisfied with the balance of quality and file size, use the File > Export menu command to save your image in the public_html directory on your storage device.
Put it on the Web
Server Using FTP, transfer your GIF or JPEG to your space on the WCC Web server, in the INP 152 folder. In an email message, let your instructor know what the URL for the image is.
Audience: This is for people who have some familiarity
with image editing (such as Photoshop) and want to learn bitmap image editing
techniques in Fireworks.
Objectives: When you successfully complete this lesson, you will be
able to...
About this document...
Module D31i: Introduction to Fireworks: This document is part of a modular
instruction series in computer technology. For more information, see the overview
or the list of modules in this series, D: Computer Aided
Drawing and Imaging. This document has been used in the following classes:
INP 143.