Fireworks Layers

Introduction

Adobe Fireworks and other, similar programs (like Adobe Photoshop, or GIMP -- a free image editing program) have a number of powerful features, but it's all for nothing if you don't understand layers. Layers enable you to construct an image from a number of different elements. Layers also make it possible to edit the image elements individually.

The Layers Panel

Layers panel
Fireworks CS4 Layers Panel
Click to copy the PNG file of the smiley image.
Open the Layers Panel
You can open and close the Layers Panel -- and any other panel -- at any time.

  1. Click Window from the menu at the top of the screen. There should be a black check mark next to all open screen elements.
  2. Select Layers to open the panel.

Layers Panel Features
Let's look at how the Layers Panel works:

  • Most Fireworks images will have multiple elements within one layer (Layer 1 in the example to the right).
  • Fireworks will make new elements for you, in most cases.
  • The element being edited is highlighted in blue.
  • Any layer can be made invisible by clicking the eye icon (red circle). Clicking again will make it re-appear.
  • To remove (delete) an element, click it and drag to the trash can at the bottom of the Layers Panel.

Working with Layers

The order of layers matters!

  • The layer on top is the one that is "closest" to the viewer.
  • If Layer "A" is above Layer "B" in the Layers Panel, then Layer "A" will be "in front of" Layer "B" in the image.
  • You can change the layer order by clicking and dragging the layers "up" and "down" in the panel.

Rename Layers

Meaningful names make it easier to keep your images organized, and help prevent mistakes!

  1. Double-click the name of the layer to open it.
  2. Type in a short, descriptive name and hit [Enter] to save the new name and close it.

Make Unused Elements Invisible

You can have an image with a huge number of layers and/or elements and turn various parts of the image off and on to export a wide variety of images for the Web.

  • Click the "eye" icon at the left side of the panel to make any element invisible.
  • Export the image with the element invisible, and it will be gone from the exported image.

Editing Individual Elements

It's easy to edit individual parts of a complex Fireworks image.

  1. Click the element you wish to edit.
  2. Select your tools and start editing, but be careful! It's easy to switch layers accidentally by clicking another part of the image.

Remember:
One of the most common mistakes in Fireworks is to accidently make a change to the wrong layer. Keep an eye on the Layer Panel, and know what you're editing!

Creating "Rollover" Images with Fireworks and Dreamweaver

"Rollover" images are pictures that change when the user touches them with their cursor. They are fairly easy to make in Dreamweaver, but you have to start by making two images in Fireworks.

  • One method that works very well is to copy and paste an element, then make a change to it to create the "rollover" image.
    1. Create the original image (what the image will look like before "rollover") in Fireworks.
    2. Select File > Image Preview and Export the image.
    3. In the Layers Panel, select the element you wish to change for the "rollover" image.
    4. Press [Ctrl] + [C] to Copy it.
    5. Now press [Ctrl] + [V] to Paste a copy of the element in the Layers Panel..
    6. Make the original element invisible.
    7. Click the new copy to edit it, then make your changes to the element.
    8. Select File > Image Preview and Export the image. Save it with a different filename.
    9. In Dreamweaver, select Insert > Image Objects > Rollover Image.
    10. Browse to select the Original Image and the Rollover Image, as well as a URL to link to if desired. Type a brief description in the Alternate Text, for the benefit of visually impaired visitors.
    11. Save the page, Preview in a browser, and test to make sure your rollover image works properly.

Printer-friendly version of this exercise (PDF)