Fireworks Article

Creating an icon in Fireworks

Preparations for icon creation

Before you start developing your icon, you must first have a clear vision of how your icon will look. For a moment, step away from your machine and try to visualize your idea. Sketching on a piece of paper isn't required, but you may find it very helpful to draw out your ideas in order to determine the design direction of the icon you are developing. This approach might provide you with answers to some very important questions: "Where do I start?", "How should I organize the layers?", "How many layers do I need?" etc. For the purposes of this article, we'll use the provided sample files to create a folder icon. You can download and open the sample file (folder_icon.png) available at the beginning of this article to follow along with the steps. Once you have opened and reviewed the provided PNG sample file, you're ready to start. Begin by creating a new Fireworks document. The size of the canvas for this project is 400 × 400 pixels.

The initial visualization of the folder icon contains two basic elements: an inner and an outer side of the folder (see Figure 1). Because of the folder's design, it is logical to begin with two layers.

Figure 1. Simple sketch of the folder icon

If it isn't open already, you can access the Layers panel by selecting Window > Layers or pressing the F2 key. Once it's open, you'll see the Layers panel on the right side of the screen. By default, one layer (named Layer 1) already exists. Rename the existing layer Inner Side by double-clicking the existing layer name. Click the New Layer icon at the bottom of the Layers panel to create another layer (see Figure 2).

Figure 2. Creating new layer

Rename the new layer, Layer 2, as Outer Side (see Figure 3).

Figure 3. Organization of the two layers for the folder icon project

We've found that separating elements into different layers makes things easier because you can develop each part of the icon separately. However, it is important to note that there isn't a hard and fast rule about how you must organize your layers—other than organizing your project in a manner that makes the most sense to you, and offers you the ability to work in an environment that brings out the best of your design capabilities. In other words, layer management is a matter of personal choice (some designers may wish to use a single layer, while others may choose to create a separate layer for each line they draw). Also, keep in mind that as you develop your design, you may decide to add or remove one or more layers. As a result, your final layer structure may differ from the initial layer organization you create.

Page 2 of 3

Previous Page

Next Page