Lesson 4: The Power of Layers

Related video clips

There are seven video clips related to Lesson 4. Be sure to view these from the class CD or from the video link on the class site. These video clips are an important part of the Fireworks. Although this document describes particular features when working with layers, it does not describe all of the examples of layers shown in the videos.

The concept of layers

Some images you produce with Fireworks do not need layers. For example, all of the graphics created in Lesson 1 were created without using layers. You can crop, rotate, and resize graphics, even make backgrounds transparent, without using more than one layer. However, you will discover, layers are essential if you want to create composite images (made up of different parts) or want to create some artistic effects.

In Fireworks you use layers to create and manipulate, in isolation, various elements of an image. Layers are useful tools because they allow you to modify a single element of your image while leaving the rest untouched. The concept of layers was introduced by Adobe in its product Photoshop in 1996, and it is such an essential feature for more complex graphics that it could not have been left off by Macromedia in their product Fireworks. Layers are sometimes compared to sheets of acetate stacked one on top of the other. Where there is no image on a layer, you can see through the layers below. You can change the composition of an image by changing the order and attributes of layers.

The videos for Lesson 4 llustrate some of the ways that layers are used. As you have seen already in Lesson 2, even adding text to a photograph, to better explain a photograph, adds a layer to the photo image. This is demonstrated in the video Adding Text to Photographs. In Lesson 3, where we looked at features for working with text, if text in an image has different traits, then that text has to be in its own text box (and a separate layer). Videos for Lesson 3 show a few ways you can commonly use the layer feature.

If you have not looked at the videos, stop now and look at least the first three in the series for Lesson 4: Working with Panels, Creating a Drawing using Layers and Creating a Web Page Header.

Displaying the layer panel

Click on Window on the main menu and select the option for Layers. On a new graphic you might be creating, there would only be one layer--labeled Layer 1. If you had opened a graphic, like a logo or photograph, that would be in the Background layer. As is shown to the right, although there can be multiple layers, there can only be one active layer (in this case a layer named ground). Actions you perform will be done in the active layer. For example, to change the color of the ground, that layer has to be the active layer.

All panels can be "floating" as in the above example, or they can be docked at the top right part of the screen, as is shown to the right.

The video Working with Panels illustrates docking and undocking panels, by clicking and dragging on the gripper dots in the panel area. In general you would consider docking panels for features you use a lot. Certainly layers is a good panel to consider docking.

There are many actions that must be done in the layer panel, such as duplicating or copying layers, locking layers, or naming or renaming layers. These are addressed separately in this lesson.

Adding your own layers

If you want to create a composite graphic, with many layers, you can begin in the first layer, labled Layer 1. Then, as you need additional layers, you can click on the controller area in the layer panel to bring up a list of possible actions for the active layer. One of these is New Layer. Creating new layers is demonstrated in several videos, including Creating a Drawing using Layers and Creating a Web Page Header.

There is also an icon at the bottom of the layer panel to add a layer. It is highlighted in this screen capture to the right with a red box. Which ever method you use to add a new layer, it is added above the active layer in the layer panel.

Fireworks will sometimes add new layers as you perform certain actions, for example, adding text. This is one reason to leave the layer panel open, unless you are just resizing existing images.

Give names to your layers

As a new layer is created, in the dialog box shown to the right, you can type in a name for the layer. Take the time to give a meaningful name for each layer. This will facilitate locating the correct layer as you edit, move, or delete layers later.

You can also double-click on a layer name, in the layer panel display, even the default layer names, to enter a new name for the layer. This is demonstrated in the video Creating a Drawing using Layers, where the initial layer name of Layer 1 is changed to sky, since that is what that layer becomes in the drawing.

Duplicating a layer

Sometimes you will want to duplicate a layer. This was shown in the videos for Lesson 2, where a photograph was duplicated before making changes in the lighting levels or the colors in the photograph. This is not required, but is useful to keep the original "handy" for quick comparisons. Click on the controller area in the top right part of the layer panel to see a list of options for layers, one of which is Duplicate Layer. In Lesson 5, when we look at how to create buttons, you will see other situations where you need to duplicate layers.

If you select the option to duplicate a layer, the dialog box you see to the left will appear. You can indicate here how many duplications you want to make, and their location in the panel. I normally place the duplicate above the current layer, but it does not matter, since you can move the layer order later.The duplicates have the same layer name as the source, followed by the word copy.

There is a difference between duplicating an existing layer and added a layer. A duplicate has all of the traits or features of the "original" layer. If you pick Add a layer, that layer is empty.

Locking layers

In the video Creating a Drawing using Layers, each of the layers was locked as the drawing was created, to protect that layer. You can lock a layer by clicking in the open cell to the left of the layer name. A padlock icon shows that the layer is locked. A locked layer cannot be changed, even to have items in the layer moved in the drawing, until you click again on the padlock and the lock icon disappears. You can make web graphics with layers locked or not locked. It does not affect the resulting web image.

Changing the stacking order of layers

When you change the stacking order of layers, you are affecting how that image looks. Changing the stacking order of the layers is the same thing as moving layers within a drawing. Moving layers in a composite drawing is a very common procedure. The videos Creating a Drawing using Layers, Creating a Web Page Header and Doing a Photo Collage demonstrate the need to change the order of layers. For example, in the drawing video the mountains needed to be placed behind the ground, and the sun behind the mountains. Fireworks displays the layers from top to bottom, and if a layer on the top is covering up something below it, the layer below will not be visible.

To move a layer, click on that layer and drag it up and down in the layer stack. Release the mouse button when the highlighted line appears where you want to place the layer. Any layer that is not locked can be moved.

Making layers visible or invisible

In the layer panel, for each layer you create or is created by the program, you can see an eye icon next to a layer . To hide the content of a particular layer, simply click on the eye icon to turn off the display of the eye. Clicking in that column again will turn on the display of the eye. If the eye is showing in that layer, then the layer is visible. If it is not showing, it is invisible. In this screen capture, the mountain layer is not visible. If a web graphic were to be made with these settings, the mountain would not appear in the web graphic.

In Lesson 5, when we look at making buttons, you can see how useful the visibility column can be. It can be convenient for file management to have all layers associated with a graphic in a single graphic image, even though you make different web graphics from the same master Fireworks file, by turning the visibility feature on and off.

The opacity option

The opacity slider on the layers panel palette allows you to change the opacity of the active layer. The higher the opacity percentage, the less transparent the layer is. The lower the opacity percentage, the more transparent the layer. You can see in the screen capture below, since the opacity of the saguaro is 82 percent, some of the layer behind (in this case the mountains) is showing through.

Opacity changes are demonstrated in the video Creating a Drawing using Layers, Creating a Web Page Header, and Doing a Photo Collage. There are many situations where you won't change the opacity of a layer, but there are other situations when it creates a better final image.

You can change the opacity of any layer. However, all items in the same layer must have the same opacity.

Deleting a layer

Any layer, be it the background layer or a layer you add yourself, if that layer is not locked, can be deleted by dragging the layer to the trash can icon at the bottom of the layer panel. For example, in this composite drawing of a desert scene, shown to the left, the sun layer is the active layer, Clicking and dragging that layer to the trash can is one way to delete the layer. You can also pick the option of Delete Layer from the list of layer options which appear if you click on the controller area. Deleting a layer is demonstrated in the video clip Creating a Drawing using Layers.

The drop shadow "trick" when working with photographs

Drop shadow is really an effect and effects will be described more in Lesson 5. But I decided to include this feature in this lesson since it does relate to layers and it is a common thing some webmasters want to do. The video Adding Drop Shadows to a Photograph illustrates the tricks needed to apply a drop shadow to a photograph.

First, if you open an existing image, and want to apply a drop shadow, you select the image, and one of the choices in the Properties panel is + Effects. If you click on effects, one of the options is Drop Shadow. Picking that displays settings in the Properties panel for the drop shadow, as is shown to the right.
One of the windows is for the angle of the shadow. Clicking on that window brings up the angle controller which lets you position the shadow at any location around the object. This is shown in the video on drop shadows.

After adding a drop shadow to a photo, you will not be able to see the drop shadow unless you make the canvas larger than the photo, since the drop shadow is added OUTSIDE the photo. Use Modify, Canvas, Canvas Size to change the canvas size, and then crop off unneeded parts of the canvas. You can increase the canvas size before or after doing the drop shadow effect.

Using the rubber stamp tool

Sometimes you can have damaged photos, for example a slide or negative that has dirt or scratches on it and the resulting scanned photo shows these spots or marks. Sometimes there might be undesired reflection in eyeglasses worn by people, or a pole in the background which looks like it is sticking out of someone's head. In the video labeled The Rubber Stamp Tool to Fix Photo Imperfections, the flash from the camera is reflected in windows in the background of the subject. You can fix these photo imperfections or even do touch ups by using the rubber stamp tool.

	Before using the rubber stamp tool, you should duplicate the photo's layer, and then work on the copy of the photo. That way you can jump back and forth between the original and the revised photos. Begin the "cloning" process by selecting the Rubber Stamp tool in the Tool panel.
	Now hold down the ALT key and click to indicate where the pixels will be copied from. With the source area indicated (which is shown with a cross hair), click and drag in your image to erase the pixels there and replace them with pixels from the source area.

This feature is also commonly used when repairing scanned versions of old photos which have rips, spots, or missing sections. It is not uncommon to have to change magnification as you use the rubber stamp tool, particularly if you have to work along the edge of something in the photograph.

Associating text with a vector path

One of the videos for Lesson 4 is on Associating Text with a Vector Path. This feature lets you take a text block, which could be a single word or a phrase, select that text and then select an existing vector object (the screen capture shows a curved line). Then using Text from the main menu, and selecting Attach to Path, these two objects are merged into one object. To select multiple objects, select one using the Pointer tool in the tool panel, and then hold down the shift key and select the other item. If you watch what is happening in the layers panel, these items start out in separate layer areas. After the text is attached to a path, their layers merge as well.

This material was used in a distance class on Using Fireworks MX 2004 to Create Basic Web Images, given by Linda Ffolliott, ECAT, in the College of Agriculture and Life Sciences at the University of Arizona.