Graphics Tutorial (Beginner-Intermediate) for Macromedia Fireworks
Using Fireworks to Create Images Slices
by Judy Fontanella
I. Create your composite image or open one that has
already been created
For this tutorial, we will be working with an image that has already
been created. Download and then open start.png in Fireworks. You can download
the .png file
or the .zip file
depending upon which one works better for you. Note that we are starting
with an image that is 600 pixels wide - the width of the narrowest screen
size for my target audience. By starting with the narrowest size, I know
that the table that I am about to create will fit comfortably on a 600
pixel width screen so that my visitors won't have any horizontal scrolling.
Also note that the image has guides that have been set to help you see
where the slices will be. If you can't see the guides, go to "View"
and be sure that "Guides" has a check mark in front of it. Then
you should see the green guides. Also go to "View" and then
"Guide Options". Be sure that "Snap to Guides" has
a check mark in front of it. This will help you to draw your slices more
One more important thing to do before you start is to make sure your
Info Palette is visible. Go to "Window" and be sure that "Info"
has a check in front of it. Locate this Info palette. When you draw your
slices, you can check the sizes and origins of each of the slices in this
Info palette. If the sizes aren't the same as those given in the chart
below for each slice, you can type in the dimensions and origins that
you want. Your slice will change to the size and location that you typed
in after you hit the Enter/Return key.
The image is divided into 4 rows with 5 columns each or 20 sections.
However, we won't be making 20 separate slices. We'll combine a few of
the sections. The table that we will create to hold the slices will contain
some merged cells.
II. Create the slices for your image
the Slice Tool, carefully create the 12 slices shown in the diagram below.
It is very important that your slices begin and end exactly on the guides,
or you will end up with a very complex table that will be very hard to
modify later on. If you have turned on "Snap to Guides" under
"View" and "Guide Options," it will help you work
more accurately. Watch the origins and sizes of the slices in the Info
palette as you work. Your slices should have the same dimensions as those
in the diagram.
| 1. 170
x 77 (spans 2 columns)
x 77 (spans 3 columns)
170 x 25 (spans 2 columns)
131 x 25
151 x 17
19 x 17
430 x 17 (spans 3 columns)
151 x 81
19 x 81
430 x 81 (spans 3 columns)
III. Set the Optimize and Object Properties for each slice.
- Use the pointer tool to select the first slice in row one. It contains
the company logo. We will use the Optimize and Object palettes to set
the options for this slice. Click the 2-up tab so that you can preview
the results of your optimizing choices.
- Optimize Palette - This slice will optimize best as a .gif.
Choose .gif, Websnap Adaptive and 64 colors as shown.
- Object Palette - This palette sets the link and name of
the slices. For Type: select "Image". No URL, because this
image won't link to another page. For <alt>, type in "The
Resource Company". Target is "None". Uncheck "Auto
Name Slices" and name the image "logo". Fireworks will
name your image for you according to the row and column that they
are in, but I find it more helpful to give them a descriptive name.
- Select the second slice in the first row with the people in it. Use
the options shown below in the Optimize and Object palettes. Note that
this image compresses better as a .jpg.
- Use the diagram below to set the Optimize and Object options for
each of the other 10 slices in our image.
Alt: The Resource Company
Alt: Business People
Alt: Contact Us
Alt: Members' Area
Alt: Visitor's Tour
IV. Create the rollover images in Frame 2.
We would like to have a rollover effect for our three navigation images.
To do this we will need to create three additional images for slices 4,
5 and 6. Fireworks makes it very easy to do this using frames.
- Turn off the Web layer so that you can see your images better. You
do this by clicking the eye next to the Web Layer in the Layers palette
to toggle it's visibility off.
- Click the Frames tab on the Layers palette. You should now be looking
at the list of frames.
- Duplicate the first frame by clicking on the arrow on the top right
corner of the Frames palette and then selecting "Duplicate Frame".
You will now have 2 frames.
- Select Frame 2.
- In the document window, double click the text, "Contact Us",
to bring up the text editor. Select a dark, reddish brown for the text
color. (You may have to substitute another type face if Trebuchet is
not on your computer. Be sure to use the same type face for all of the
text in both of the frames.)
- Repeat step 5 for the text "Member Area" and again for "Visitor's
Tour Next ->".
V. Add the rollover behavior.
when the mouse is placed over one of the navigation buttons.
- Turn the Web Layer back on by clicking the empty box next to the Web
Layer to make the eye appear.
- Display the Behaviors palette by clicking on "Window" and
- Using the arrow took, select the "Contact Us" slice (slice
- Click the "+" button on the Behaviors palette and choose
"Simple Rollover" from the flyout menu.
- Repeat step 4 for the "Member Area" button and the "Visitor's
- You can preview your effect by turning off the Web Layer and clicking
on the Preview tab at the top of your image. Test your rollovers.
VI. Export your files.
- Choose File -> Export.
- In the Export dialog box, choose a location for all of the image files
that Fireworks is about to generate. I like to save them in a special
folder called "nav" so that I can find them easily. Also choose
a base name for your file. This will be the name of the HTML document,
as well. Make the rest of your settings match those displayed in the
image below. Fireworks will save your HTML file (index.html, in this
case) one level above your nav folder.
- Open and test your new Web page in your browser. At this point your
page looks like this.
I have shown 2 versions of the resulting table. The 2nd has visible
cell borders so that you can see where the cells begin and end.
VII. Use Dreamweaver to adjust your table so that it
fills the width of the browser window.
When I designed my page, I wanted to have a banner that would expand
and contract to fill the entire width of the browser window. Therefore,
I will now use Dreamweaver to tweak the table settings so that they do
just what I want them to do. Here is the finished
product. Here's how to do it:
- Go to Modify -> Page Properties and set all of the margins to zero.
- Select the table and set the width to 100%.
- Add a background image that matches the gold bar in the cells of
the second row. This background image will fill in the gaps between
the images when the table expands.
- Give the cells that are across the top and down the left side a black
background to fill in the gaps between images and provide a black background
for the links on the left.
- Adjust the cell alignments so that the images stay where you want
them to when the table changes sizes.
- I nested 2 more tables in this main table. The first is a fixed width
table that holds more links. It was placed in the bottom left cell of
the table. The second is an expandable table that holds the content
of the page. It was placed in the bottom right cell.
VIII. What did I gain by designing my page as one large
image in Fireworks and then slicing my image up and putting it back together
into a table?
- A page design that contracts to 600 pixels, but also expands to fill
a wider screen.
- A shorter download time because I could save parts of my image as
a .gif, parts as a .jpg and other parts as text areas.
- A quick, easy way to create my rollover images and insert them and
or add more rollovers later on.
- A way to see how my page elements are going to look together before
I spend a lot of time creating individual small images and laying them
out in a Web page.
- More time to devote to other things because Fireworks did a lot of
the coding as well as the image creation for me - much more quickly
than I could have done it myself.
Judy Fontanella owns her own Web design company called ArtBytes in San
Diego, California. She also teaches both online and face-to-face Web
design classes for Palomar Community College in San Marcos, California.