How to Use Slicing in Fireworks CS5 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Fireworks Creative Suite 5 supports slicing, a technique for breaking large files into smaller packets so they download faster. It’s also a method for attaching URLs to different regions of an image in a grid pattern.

A perfect candidate for sliced artwork is a navigation bar. Each tab is an individual slice that, when clicked in a web browser, takes the viewer to a different location.

Choose the Fit Canvas command.
Choose the Fit Canvas command.

Create the basic image

First, create the basic image — a rectangle, for this example. Follow these steps:

  1. Choose File→New to open the New Document dialog box.

  2. Type 500 in the Width box and 200 in the Height box; click OK.

    The new, blank document opens. (Notice that it’s larger than the image you’re creating; you see how to modify it later.)

  3. Select the Rectangle tool in the Vector section of the Tools panel. Click and drag to create a rectangle.

    Any size is fine.

  4. With the rectangle selected, click Fill Color in the Colors section of the Tools panel and choose a color.

  5. Choose Window→Info to open the Info panel.

  6. Enter 300 in the W (Width) box and 50 in the H (Height) box.

    You can also use the Properties panel to set this size.

  7. With the Pointer tool, click anywhere in the canvas outside the rectangle to deselect the rectangle.

  8. Right-click (Windows) or Control-click (Mac) and choose Modify Canvas→Fit Canvas from the contextual menu.

    The canvas adjusts to the size of the rectangle.

When you have no objects selected, you may also click the Fit Canvas button in the Properties panel.

The canvas adjusts to fit your object.
The canvas adjusts to fit your object.


Add text

Add text to the navbar.

  1. Select the Text tool in the Vector section of the Tools panel.

  2. Click Fill Color in the Colors section of the Tools panel. Choose a color.

  3. Set the font and font size in the Properties panel.

  4. Click the left half of the rectangle to position the insertion point wherever you want the text to begin, and type the text.


  5. Click twice to the right of the text area to deselect the active text area and create a new one.

    Hold Alt+Shift (Windows) or Option+Shift (Mac) keys and drag the initial text box to the right to clone and align a new text box.

  6. Type a word or two for your next navigation tab.

  7. Use the Pointer tool to reposition the text.

Slice it up

After you’ve prepared a simple but efficient navbar, use the Slice tool to create a couple of slices and then export them. Follow these steps:

  1. Select the Slice tool in the web section of the Tools panel; then click and drag from the upper left corner of the Home section of the rectangle toward the lower right corner.


    If you’re going for perfection, choose View→Rulers to display the rulers. When the rulers are visible, you can click and drag guides out of them.

    When a slice is active, the Properties panel changes to offer slice options.

  2. Change the format using the Slice Export Settings drop-down list.

    Choose the GIF format if the artwork has lots of solid color, or choose JPEG for images with lots of color gradation.

  3. Enter a link in the Link text box.

  4. Enter a brief description of the link in the Alt text box.

    Alt text is the text that appears while a page is downloading. It also appears in place of the graphic if a viewer has turned off the graphics display in his web browser.


  5. With the Slice tool, click and drag to surround the second half of the navbar. Repeat steps 3 and 4.

That is slicing in simple form. You can make the process as complicated as you want by creating entire sliced pages (because search engines like to search for text content) to navbars with many links and destinations.