Slicing Images - Part 1

Click here to see example of completed pop-up menu.

"Slicing" in Fireworks provides you with the means to divide an image into selective parts that can then be optimized, as well as made into interactive hyperlinks. To slice in Fireworks do the following:

1. With Fireworks open, go to and select the File/Open menu item. In the dialog box, make sure you are in the folder on the Desktop where you saved the tutorial files, and then locate, select, and open the file titled, "Webpage.jpg."

You will notice the web page is composed of bitmap and vector images. As a .jpg file, the file size of the image is about 33k. It would be inappropriate to save the file simply as a JPEG file because many of its components can be made to be GIF files. By slicing the file into pieces and then optimizing those pieces, the files could be saved and made to download more effectively as part of a web page.

2. At this point, click on the Slice tool from the Toolbar, and use the tool to draw a slice over the pen image located on the left side of the page. Once done, draw slices also over the three-bitmap (photographic) images located on the right side of the page.

3. Next, use the Slice tool again to draw a slice over the "Compass" vector image located in the upper-left hand corner of the page. Once done, draw additional slices over the, "Mountain Biking," "Kayaking," and "Rock Climbing" vector images located on the right-hand side of the pen image.

4. You will now apply URL addresses to selective slices transforming the slice into a hyperlink. Choose the Pointer tool from the tool palette. Then click on the slice covering the "Mountain Biking" vector image.

5. Use the "Type" color swatch on the Properties Inspector to change the color of the slice to red. Once done, in the "Link" text field, type in the following URL address:

http://www.mountainbike.com

Highlight the URL address and copy it (Edit/Copy) in order to use it again. In the "Alt" text field, type in the words, "For Mountain Biking."

6. Next, using the Pointer tool, click on the slice covering the mountain bike bitmap image. Use the color swatch on the Properties Inspector to change the color of the slice to red also. Once done, click your mouse cursor in the "Link" text field, and then paste (Edit/Paste) the URL address you previously copied. In the "Alt" text field, once again type in the words, "For Mountain Biking."

7. Next, click on the slice covering the "Kayaking" vector image. Use the color swatch on the Properties Inspector to change the color of the slice to blue. Once done, in the "Link" text field, type in the following URL address:

http://www.worldkayak.com/

Highlight the URL address and copy it (Edit/Copy) in order to use it again. In the "Alt" text field, type in the words, "For Kayaking."

8. Next, using the Pointer tool, click on the slice covering the kayaking bitmap image. Use the color swatch on the Properties Inspector to change the color of the slice to blue also. Once done, click your mouse cursor in the "Link" text field, and then paste (Edit/Paste) the URL address you previously copied. In the "Alt" text field, once again type in the words, "For Kayaking."

9. Next, double click on the slice covering the "Rock Climbing" vector image. Use the color swatch on the Properties Inspector to change the color of the slice to yellow. Once done, in the "Link" text field, type in the following URL address:

http://www.owa.com/youth/rock.html

Highlight the URL address and copy it (Edit/Copy) in order to use it again. In the "Alt" text field, type in the words, "For Rock Climbing."

10. Next, using the Pointer tool, click on the slice covering the rock climbing bitmap image. Use the color swatch on the Properties Inspector to change the color of the slice to yellow also. Once done, click your mouse cursor in the "Link" text field, and then paste (Edit/Paste) the URL address you previously copied. In the "Alt" text field, once again type in the words, "For Rock Climbing."

This concludes Part 1 of this exercise. Click here to continue to Part 2.

to top of page