Adding new layers

This sample project to develop the media player skin is built entirely with vector objects. Since it involves creating many different types of shapes, and using a variety of design techniques, we'll get to take a look at many of the features in Fireworks CS3, such as the pen tool, live filters, layer effects, masks and styles. I've included step-by-step instructions and lots of screenshots, so you'll be able to follow along even if you are relatively new to working with Fireworks.

If you haven't already, download the sample files provided on the first page of this article. Uncompress the ZIP file and open media_player_skin.png in Fireworks CS3. This is the example of the media player that we'll be recreating. Open the Layers panel by selecting Window > Layers (or by pressing the F2 key). It consists six layers. So the first thing we need to do to recreate this file is to make all these layers in a new project.

Setting up the structure

Create a new Fireworks document by selecting File > New. Set the size of the canvas to 800 × 600 pixels and set the canvas color to white (#FFFFFF). Make a new layer by pressing the New Layer icon at the bottom of the Layers panel (see Figure 1).

Figure 1. Click the New/Duplicate Layer button to create a new layer

Each time you press the button you create one new layer. Press the button five more times, to make a total of six layers (see Figure 2).

Figure 2. Click the button a total of six times to create six new layers

You can double-click on each layer to rename it. Rename each of the layers in your document with the names listed in Figure 3.

Figure 3. Rename the new layers to match the layers in the sample project PNG file

Click the lock icon to the left of each layer to lock all of the layers except one; leave the layer named Wings unlocked (see Figure 4).

Figure 4. Lock all of the other layers, with the exception of the Wings layer

Page 2 of 7

Previous Page

Next Page