One of Firework’s most powerful features is Layers. Layers are similar to acetate or transparent paper. Each Layer in a Fireworks document or image can contain image data that adds to the image data placed on the Layers below.  Effectively, each Layer is an entire image unto itself within a master image. By combining these images together, you get what is called a composite, meaning an image composed of many different elements, in this case made up of multiple Layers. The best way to understand the concept of Layers, how they work, and why they are so powerful is to use them.

Open "intro.png" from the "unit007" folder.  We will be revisiting a more developed version of this file later in the manual but for the time being we’re going to use it as an introduction to layers. 

We’ll begin by examining the Layers Panel.  {Click} the Layers Tab in the Layers Panel Group.

(Figure 7.1)

The Layers Panel

Each Layer in the Layers Panel is stacked vertically and has its own title.  In this case we have 5 Layers labeled, "Web Layer, Mask Group2, Mask Group3, Title Text, and Mount Fuji."  "Web Layer" is at the top of the stacking order and "Mount Fuji" is at the bottom.   The pixel or vector information in "Web Layer" is completely visible because it’s at the top of the pile.  The information on the "Mount Fuji" Layer will be hidden by whatever pixel information is included in the layers above it.   Whether or not it is completely hidden depends on whether or not the Layers above it contain some level of transparency.

Each layer contains a Layer name, a locking toggle, an object toggle, and a visibility toggle.

It’s a good idea to name your Layers for easy reference and organization.  By default Fireworks names each new Layer "Layer x" where x represents a number, starting at 1. If you import a flat image (meaning an image with only one Layer, such as "diana.png" Fireworks defaults to naming the Layer "Layer". To change the name of any Layer simply {Double-Click} the Layer and enter a new Name in the "Layer Options" field.

If you wish paint on or edit a Layer all you need to do is {Click}on the Layer name to activate it. An active Layer’s name is highlighted in dark blue.

{Clicking}the "Visibility" toggle makes Layers visible or invisible in the Image Window. It’s important to note that even though a Layer may be invisible; if it’s the active Layer any changes you perform still occur. If you want to turn the visibility of a Layer off or on simply {Click}on the eye icon beside the Layer name.

Clicking on the Lock Toggle will lock your Layer in place and prevent you from either editing the content of that layer or changing its stacking order. You will know that your Layer is locked if you see a small lock icon beside the visibility icon.

(Figure 7.2)

Distribute to Frames, New/Duplicate Layer, Delete Layer

{Clicking}the Distribute to Frames button will place your layer content in individual frames.  The actions of this button are reflected in the Frames Panel.

{Clicking}the New/Duplicate Layer button creates a Layer above the currently active Layer. Click and drag a Layer on to the New/Duplicate Layer button if you wish to duplicate that Layer. {Clicking}, dragging and releasing a Layer over top of the Delete Layer icon deletes the Layer. You can also delete a selected layer by simply {Clicking} on the Delete Layer button.