Design Learning Guide for Fireworks: Working with layers

The Layers panel in Fireworks CS4 is integral to the design process. This powerful panel of useful features makes it possible for you to control the visibility, locking status, stacking order, and overall organization of your document. But that just scratches the surface of this part of Fireworks because the Layers panel also allows you to share common elements between layers, control slices that will be exported as individual image files. The Layers panel is also the area where you can set the level of opacity and add blend modes to create unique effects.

You can dock the Layers panel with the Pages and States (formerly Frames) panels, making it easy to jump between the three integrated sets of features. Using the States panel, you can create different visual looks for the states in web or desktop application, add rollover buttons to your website, or create animated GIF files. And the Master Pages now simplify the process of combining all of the pages in a site into a single Fireworks PNG file. All of this organization makes your projects more portable and easier to share with team members.

This section discusses the process of setting up your workspace, and describes how the Web Layer is used to contain all the information created with the Slice tool. I also cover how to share interactivity across all pages in your document using the Pages panel. I go into detail about the items available in the Layers panel options menu, how to rename and organize layers, and describe how to add and delete layers and sublayers.

As you are working, you'll find it helpful to temporarily hide and lock objects that you are not changing, so I discuss how to hide, show and lock layers.

Another helpful feature allows you to create a new bitmap directly from the Layers panel. I provide the steps to do this, as well as how to set the transparency and apply blending modes to the elements in specific layers. Layers are very powerful, and understanding how you can make these settings and organize objects will make it easier to accomplish your tasks.

Setting up your workspace

In the default workspace layout, the Layers panel is grouped with the Pages and States panels. Pages are another very important panel in Fireworks. You may encounter situations where it is advantageous to see both the Layers panel and the Pages panel simultaneously (see Figure 1).

To move the Layers panel to a separate panel dock, click and drag the Layers tab out from its dock. When you release the mouse, the Layer panel is displayed into its own panel. Double-click the tabs of unwanted docked panels to collapse them. This will free up some real estate so you can clearly see both the Layers panel and the Pages panel at the same time (see Figure 2).

Working with the Web Layer

Let's examine the list of items in the Layers panel for this open document.

The top item is the Web Layer. The Web Layer contains all of the interactive elements in the document: slices and hotspots. Slices and hotspots are created using the Slice and Hotspot tools. When the Web Layer is visible, these elements are shown as a transparent green overlay on the design.

Slices cut up areas of graphics into smaller pieces; the individual images are created when you export the finished document.

Hotspots are interactive elements used to create image maps. Hotspots are often used when creating navigation buttons, or to add multiple links to a single image.

Every Fireworks document contains a Web Layer, even if you do not choose to use the Slice and Hotspot tools.

The Web Layer can contain sublayers. To see the contents of any layer, click on the triangle located to the left of the layer name to expand it (see Figure 3).

The little icon to the right of the Web Layer, Hotspots and Slices sublayers indicates that the interactive elements in this layer are shared across all states in the States panel. This is the default behavior because slices and hotspots allow you to create rollover buttons. Sharing layer content across all states is also useful when creating animated GIFs.

You may wish to organize your Web Layer into sublayers. This allows you to organize the interactive elements. Additionally, you can group a set of elements (hotspots or slices) and then share them across multiple pages.

Sharing interactivity across multiple pages

While a layer is selected, use the Layers panel options menu to set the layer's contents to be shared across all pages in the Pages panel.

To access the Layers panel options menu, click the three horizontal line icon in the top right corner of the Layers panel (see Figure 4).

The options menu contains many other helpful settings as well (see Figure 5).

To rename a layer, double-click on its layer name, and then type in the new name in the text field. You can rename layers and sublayers as often as you'd like. The layers retain their order and do not sort alphabetically (see Figure 6).

Understanding layers and sublayers

Continuing on, the next items in the list in the Layers panel are the main layers and sublayers. Layers and sublayers contain the bitmap graphics, image assets, text, vector shapes, and any other visual elements in the design.

In Figure 6, the main layers are named:

• Header Text
• Navigation
• Design Elements

Layers are containers that hold elements of the design. They define the structure of the document, as well as the stacking order (the arrangement of objects above or below other objects). You can place sublayers inside of layers in order to organize groups of objects that are related. If you prefer, you can create a layer that does not contain any design elements inside it; a layer can contain a series of sublayers, each containing its own set of graphics.

Organize your layers in the way that makes the most sense to you, using descriptive names that allow you to quickly access the elements of the design. Since application and web designs often share elements across multiple pages, it may be helpful to organize items based on whether they are shared or unique to a single page.

Creating sublayers

There are several ways to create sublayers. The bottom of the Layers panel contains an option named New Sub Layer. Select a layer and then click this button to generate a new sublayer inside the selected layer (see Figure 7).

The Layers panel options menu also includes an option to create a new sublayer in the selected layer (see Figure 8).

Alternatively, in the Layers panel you can click and drag any layer into another layer (to convert it into a sublayer). Sublayers are hidden when their top layer is collapsed. When expanded, sublayers are slightly indented to the right beneath the layer name. In the example below, Luxurious Carpets is an object within the Navigation layer (see Figure 9).

You can also nest sublayers inside of sublayers. The way you configure your layer structure can facilitate the editing process, because you can quickly navigate to the section of the document you wish to change.

Since you can collapse and expand the contents of each layer, it is very helpful, especially with larger documents, to keep sublayer elements compartmentalized in this way. Complex documents can be managed carefully by strategically categorizing and labeling each component of your design.

Creating and deleting layers

Create a new empty layer by clicking on the Create New Layer icon located at the bottom of the layer panel (see Figure 10).

To delete a layer, click and drag it to the trash icon at the bottom of the Layers panel. You can drag individual sublayers to the trash, or you can drag an entire layer to the trash, and all of its sublayers will also automatically be deleted.

Note: Fireworks does not ask you to confirm before deleting a layer—and a layer may contain a significant amount of work! If you accidentally drag a layer or sublayer to the trash and then realize you did not wish to delete it, choose Edit > Undo to undo the deletion.

Hiding/showing and locking layers

In the Layers panel, you can choose to hide and show layers. An eye icon is located in the far left column next to each layer and sublayer. Click on the eye icon to hide the contents of that layer (and any content in its sublayers). You can hide individual sublayers as well. If you click the empty box where the eye icon once was, it reappears and the content for that layer or sublayer is again displayed on the canvas. The eye icon is a toggle switch: when the eye is visible, the content is visible and vice versa (see Figure 11).

In the example shown in Figure 11, the Web Layer and the Header Text layer are currently hidden.

If you wish to toggle the visibility on or off for a series of layers, press and hold the mouse button as you slide the cursor along the eye icon boxes and they will quickly all toggle to the opposite hide or show setting.

Lock layers to avoid moving an element by accident. Click on the box to the right of the eye icon, to enable locking. When locking is turned on for a layer, a lock icon is displayed (see Figure 12).

In the example shown in Figure 12, the Navigation layer is locked.

While the layer is locked, you are unable to select the objects on the canvas. Locking a layer can also make it easier to select a portion of a design that is overlaid with another design element. By locking the unwanted areas, you'll be able to easily select the item you wish to edit. The lock icons work the same way the hide/show eye icons do, they are toggle switches that alternate between on and off. And just like the visibility, you can click and drag over a column of lock boxes to lock or unlock a series of layers.

You can toggle the visibility of any layer, locked or unlocked. Similarly, you can lock any layer, whether it is visible or not.

Creating a new bitmap image

At the bottom of the layers panel, there is an option to create a New Bitmap Image. By default, the background of the new bitmap image is set to transparent (see Figure 13).

When you click the new bitmap image icon, a new object is automatically created. You can then paste a bitmap to that sublayer, or use the bitmap tools to draw directly on the new transparent canvas (see Figure 14).

When creating a new bitmap in this fashion, be sure to immediately place some content on the transparent canvas; otherwise the new empty bitmap sublayer will disappear as soon as you click away from it.

Tip: It is a best practice to name each sublayer as soon as you create it, to keep the Fireworks document organized.

Setting transparency and applying blending modes

If you wish to set the transparency for a layer or sublayer, you can use the Opacity slider located in the top of the Layers panel. Select a layer or sublayer you wish to affect, and then use the Opacity slider to set the level of transparency (see Figure 15).

The default setting of 100% displays a completely opaque object. If you set the opacity to 0%, the contents of the layer or sublayer are completely transparent. The value of the opacity setting determines how transparent the affected objects will be, with a setting of 50% being exactly half transparent.

Blending modes are preset algorithms that control how pixels in the base color of the selected image display against the background pixels (the color of the pixels in the background and any objects below the original image in the layer structure).

Different blend modes cause different interactions between the foreground (the object to which the blend mode is applied) and the background pixels. The resulting effect is the color of the pixels that have been transformed—based on calculations made to both the object with the blend mode applied and any objects placed underneath.

Tip: Keep in mind that if you move or change the objects beneath the object to which the blend mode is applied, the design will look different, even though the original object and its blend mode have not been changed.

Use the blending mode drop-down menu to set a specific blend mode to a selected layer or sublayer. The default state of the blending mode drop-down menu is "Normal." Click to choose from the list of available blending mode options. These are the same set of blending modes found in Adobe Photoshop and other Adobe products, such as Adobe Flash (see Figure 16).

Experiment with using a combination of transparency settings and blending modes to create complex and unique effects in Fireworks CS4.

Where to go from here

To learn more about working with layers, read Using pages, states, and layers in Fireworks CS4 by David Hogue. Also check out the Layers section of the Using Fireworks CS4 onlinedocumentation.

Finally, explore other areas of the Design Learning Guide for Fireworks CS4.