Home >> Software Help >> Fireworks >> Slicing Your Layout

Slicing Your Layout in Fireworks

Why slice up your page?
There are a lot of reasons why web designers slice their page up into smaller image files. Some parts of an image will compress better as a jpg and others will compress better as gif. Also, if you want images to be in a navigation bar, like the one at the top of this page, or if you want to create a series of rollover graphics (images that change when your mouse rolls over them) or if you simply want to create a very tight layout, while still maintaining complete control of your HTML code, then Fireworks is the software to do it.

Once you have created what you want your page to look like in Photoshop, you can bring it into Fireworks. Here is an example from the New Media Center web page (at http://nmc.loyola.edu):

Step 1: Create Web Page Layout in Photoshop

Use pulldown guides by grabbing at the ruler along the edges and divide your page up into squares. We do this because ultimately we will put these 7 images (the squares that say Loyola College will be one image and each of the categories will be one image) into a table in Dreamweaver.

Each of these images is on a seperate layer, and there are two versions for each picture, an off version and an on version. By hiding (with they eyeball icon next to the layers) or viewing different elements, I can toggle between the off and the on version of each image. To create the on version, I copied the layer with the off image and then I reduced the opacity of the duplicate and added a text description. Now I have 2 of the same exact image, one will be visible before the mouse rolls over and the other will be visible when the mouse is on the image.

1who.gif	1who_on.gif

Step 2: Save your file in Photoshop format (.psd) with all of your layers, and then open the file in Fireworks. Fireworks preserves all of the layers you created in Photoshop, and the guides as well (now green).

Step 3: Select the slice tool and drag along each area that will be a separate image (using the layer guides from Photoshop). Notice that the middle image, Loyola College, can be one long image that occupies three table cells.

illustration 1	illustration 2

Use the black arrow pointing tool to select the first image to export. Notice how the red box around that slice of the image turns blue.

Step 4: Go to the Object Window (should be open when you select one of the slices)

1. Uncheck Auto-Name Slices 2. Name image (no spaces!) specify -on or -off if it's a rollover to distinguish it from the other version 3. Hit Export Button

Step 5: Choose your settings to optimize your image and hit export. Fireworks will automatically add the file extension .gif or .jpg depending on which file format you use.