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 accurately.

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

Using 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)		2. 430 x 77 (spans 3 columns)
3. 170 x 25 (spans 2 columns)		4. 138 x 25	5. 131 x 25	6. 161 x 25
7. 151 x 17	8. 19 x 17	9. 430 x 17 (spans 3 columns)
10. 151 x 81	11. 19 x 81	12. 430 x 81 (spans 3 columns)

III. Set the Optimize and Object Properties for each slice.

1. 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.

2. 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.
    

3. Use the diagram below to set the Optimize and Object options for each of the other 10 slices in our image.

1. Type:Image, Link: None, Alt: The Resource Company Name: Logo gif/64		2. Type: Image Link: None Alt: Business People Name: people jpg/75 quality
3. Type: Image Link: None Name: topleftbar .gif/32		4. Type: Image Link: contact.html Alt: Contact Us Name: contact .gif/32	5. Type: Image Link: members.html Alt: Members' Area Name: members .gif/32	6. Type: Image Link: tour1.html Alt: Visitor's Tour Name: tour .gif/32
7. Type: Text	8. Type: Image Name: corner .gif/16	9. Type: Text
10. Type: Text	11. Type: Text	12. Type: Text

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.

1. 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.

2. Click the Frames tab on the Layers palette. You should now be looking at the list of frames.

3. 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.

4. Select Frame 2.

5. 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.)

6. Repeat step 5 for the text "Member Area" and again for "Visitor's Tour   Next ->".
    

V. Add the rollover behavior.

Now we have to add the Javascript code that exchanges the rollover images when the mouse is placed over one of the navigation buttons.

1. Turn the Web Layer back on by clicking the empty box next to the Web Layer to make the eye appear.
2. Display the Behaviors palette by clicking on "Window" and then "Behaviors."
3. Using the arrow took, select the "Contact Us" slice (slice 4).
4. Click the "+" button on the Behaviors palette and choose "Simple Rollover" from the flyout menu.

5. Repeat step 4 for the "Member Area" button and the "Visitor's Tour" button.
6. 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.

1. Choose File -> Export.
2. 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.

3. 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:

1. Go to Modify -> Page Properties and set all of the margins to zero.
2. Select the table and set the width to 100%.
3. 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.

4. 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.
5. Adjust the cell alignments so that the images stay where you want them to when the table changes sizes.
6. 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?

1. A page design that contracts to 600 pixels, but also expands to fill a wider screen.
2. 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.
3. A quick, easy way to create my rollover images and insert them and the Javascript code into my page. Note: Fireworks will write the same Javascript Code that Dreamweaver does, so it's easier to make changes or add more rollovers later on.
4. 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.
5. 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.

Learning Podcasting by Carolyn Wood.

Complete list of past tutorials.