Creating an icon in Fireworks

Adobe Fireworks is a familiar tool to a significant subset of web developers. There are many reasons for this. In addition to the benefits of integrating with Dreamweaver, Fireworks has an easy-to-use interface and includes a wide array of web-focused features. The image creation, slicing, and optimization tools make Fireworks extremely useful for both beginning and advanced users alike.

Because graphic elements are fundamental to high-quality web design, they require extra attention. Web icons—the basic ingredients of any well-designed site—have a special place in this group. Creating icons with Fireworks is easy, and it is also a really productive way to create your site files. This article provides a step-by-step guide to creating a folder icon in Fireworks.

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.

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).

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

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.

Once you've completed the process of preparation, including the initial design sketches and setting up the layer organization, you're ready to start working on the actual development.

The first step of this project is to create a stylized inner side of the folder. Start with a basic shape that you can manipulate by applying a few transform and copy/paste actions to it. To do this, use the Vector tools from the Tools panel. If the Tools panel is not already open, select Window > Tools from the main menu or use the keyboard shortcut (Control+F2 for Windows, Command+F2 for Mac).

While the Inner Side layer is selected, use the Rounded Rectangle tool from the Tools panel (see Figure 4) to draw a large rounded rectangle, which should take up approximately 50% of the canvas.

Next, draw a smaller rounded rectangle with rounder corners over the bottom left side of the existing rectangle. If you need to adjust the roundness of the corners, use the Pointer tool to slide the yellow diamond-shaped handles from side to side. Once you've positioned the second rounded rectangle, select both rectangles and choose Modify > Combine Paths > Union to create a single object (see Figure 5).

Now remove the roundness of the right side corners. Select the Rectangle Tool from the Tools panel and draw a rectangle over the object, making sure it is taller than the rounded rectangle. Adjust the width of this new rectangle to make it as wide as needed to hide the round edges of the right side corners. Once you've positioned the new rectangle to hide the rounded corners on the right edge, select both objects and choose Modify > Combine Paths > Punch (see Figure 6). This removes the rounded corners on the right side of the folder. Now you have the basis for the folder icon object in a 2D perspective.

At this point you are almost finished creating the basic object you'll use for the inner side of the folder. Next apply some transformations to achieve a more stylish 3D look. To create a 3D perspective, select the object and choose the Skew tool from the Tools panel. Use the Skew tool to give the object an oblique angle and simulate a 3D perspective view of the object. To make the perspective more realistic, use the Distort tool to adjust the bottom to make it more oblique than the top (see Figure 7).

Copy and paste the object and move the shape on top slightly to the right by pressing the right arrow key on your keyboard several times. The goal is to position the top shape slightly to the right so that the object underneath shows through on the left side, like a thin outline. Apply a linear gradient horizontally on the top object. You can do this by selecting the top object and using the Property inspector to set the fill color (see Figure 8).

After you've applied the linear gradient color fill, adjust the linear gradient colors. Click the Fill color chip in the Property inspector and choose new colors for the gradient fill (see Figure 9).

The left color of the gradient should be set to #FFFFFF and the right should be set to #999999. After you've set the colors of the gradient, use the Pointer Tool to adjust the horizontal direction of the gradient on the object (see Figure 10).

Now you're ready to create the outer side of the folder. You might find it useful to turn off the visibility of the bottom layer by clicking the eye icon located next to the layer's name in the Layers panel—although you may also prefer to keep the bottom layer visible to see a real-time preview of the final graphic. This is a matter of personal choice. However, we definitely recommend locking the bottom layer by clicking the space immediately to the right of the eye icon to ensure that you don't accidentally make changes to the elements you've created so far (see Figure 11).

Select the Outer Side layer and draw a rounded rectangle that is approximately half the width of the inner side object and about the same height. Use the Rectangle tool to create a thin rectangle over the right side and choose Modify > Combine Paths > Punch to remove the rounded corners on the right side, just as you did for the inner side of the folder.

Draw a smaller rounded rectangle and align it to the top left of the existing rectangle. While both of the rectangles are selected, choose Modify > Combine Paths > Union to merge the two rectangles into a single object (see Figure 12).

To finish the object for the Outer Side layer manually adjust the degree of roundness in the bottom left corner of the small rectangle to create an angled line. Select the Zoom tool from the Tools panel and magnify the curved area so that you can see the detail of the small rectangle's bottom left corner. Use the Subselection tool to select the object. You'll see a blue outline with some white points that follow the object's silhouette. Click the individual points and drag them to straighten the rounded corner and make it more of an angled curve. If desired, you can also use the handles on each of the points to adjust the slope of the curve further (see Figure 13).

Set the magnification back to 100%. Next, adjust the perspective of the outer side of the folder to give it a more oblique look. Use the Skew tool to slant the object's direction, then use the Distort tool to adjust the obliqueness of the bottom side. Basically, follow the same process you used to adjust the perspective of the inner side of the folder, except this time the top side of the object should be a little more oblique than the bottom to match the perspective (see Figure 14).

Now the manipulation object for the outer side of the folder icon is finished. Just as you did for the inner side of the folder, copy and paste the object and move it slightly to the right by nudging it with the right arrow key. Add a radial gradient to the top object and position the gradient to the top left corner. The process for applying a radial gradient fill is just like applying a linear gradient color fill, except this time select Gradient > Radial from the drop-down menu in the Property inspector (see Figure 15).

Set the left color chip of the gradient to #F90100 and the right color chip to #7A0102.

To create a shiny 3D detail to the top of the outer side, select and copy the top object, paste it on top of the other objects in the layer, and then move it slightly to the right (about three pixels) so that a small column of the gradient filled object is showing on the left side. Fill this new copy with a solid white color. Now copy the white object and paste it, but this time fill it with solid black color. In order to create this kind of detail, we recommend using contrasting colors (such as white and black) so that you can concentrate on the detail. To create the shiny effect, you'll need to cover most of the white object's area with the black one, except for the far left area that you want to keep. The part that remains after you apply the opacity represents the shiny 3D effect. Use the right arrow key to move the black object slightly to the right (approximately three pixels).

Now you're going to use the Punch feature to cut the area of the black object from the white object. The white area that remains provides the shiny 3D effect. Before using Punch to remove the black area, modify it slightly to make it cover the areas of the white object you want to remove. Use the Zoom tool to focus on the areas labeled 1, 2, and 3 in Figure 16. While each area is magnified, use the Subselection tool to select the black object and reposition the line points to ensure that the black object covers the white object in each area.

After you are satisfied with the placement of the black object, set the magnification back to 100%. Select both the black and white objects and choose Modify > Combine Paths > Punch. The part that remains is the shiny 3D effect, and all that is left to do now is change the opacity of the white object to 35% to make it appear shiny (see Figure 17).

The next part involves adding three vertical stripes on the right of the outer side of the folder. Select the Rectangle tool and draw a thin rectangle a few pixels wide that spans the height of the outer side. Fill the rectangle with a linear gradient color. Change the color chips of the gradient, using two slightly different dark red colors. Copy, paste, and move the stripe to the right for the second stripe. Then copy, paste, and move that stripe to the right to create the third stripe (see Figure 18).

Next create the glossy shadow over the top of the outer side of the folder icon. Copy and paste the top copy of the manipulation object on the layer—the one with the radial gradient color fill. After you paste, fill the copy with a solid white color. Select the Ellipse tool and draw an ellipse over the object you've just created, placing the ellipse so that it covers everything you want to remove from the white highlight object. Select both the ellipse and the white filled object. Select Modify > Combine Path > Punch so that only the area uncovered by the ellipse remains. Change the opacity of the remaining white object to 25% to create the glossy effect (see Figure 19).

Now add the glossy effect to the Inner Side layer. First, hide the visibility of the Outer Side layer and lock it. Then unlock the Inner Side layer and click the eye icon to view the Inner Side layer if it is currently hidden. Copy and paste the top copy of the folder object—the one with the gradient fill. Fill the new copy with solid white color. Select the Ellipse tool and draw an ellipse over the area of the white object that you want to remove. Select both the ellipse and the white object, and then choose Modify > Combine Path > Punch. Select the remaining part of the white object and set its opacity to 25% (see Figure 20).

Turn on the Outer Side layer's visibility so you can see how your icon looks so far (see Figure 21).

Finally, you can customize your icon by adding a text label to the folder tab. While the Inner Side layer is selected, use the Rectangle tool to draw a rectangle on the protruding edge. Fill it with a solid, off-white color. Use the Skew tool to adjust the rectangle to fit the perspective. Select the Text tool and type some text for the label. While the text is selected, use the Skew tool to rotate the text and adjust it to match the perspective. Rearrange the order of the objects in the Inner Side layer so that the label rectangle and text are located below the glossy shadow effect of the inner side of the folder icon (see Figure 22).

All that is left now is to export the icon in the file format of your choice and use it as a design element for your website.

Hopefully this article has given you some new ideas for creating web icons, and perhaps also provided you with a tour of some of the web design features available in Fireworks. It's a powerful tool that you can use to easily convert your ideas into high-quality design elements, allowing you to develop any graphics you can imagine as part of your creative process.

If you haven't already, download and review the sample files provided at the start of this article. Read through the steps again to get a better understanding of how the folder icon is created.

The Fireworks documentation provides a wealth of useful materials, no matter if you are a beginning user or an experienced professional. Also be sure to visit the Fireworks Developer Center to find useful tips and tutorials.

And, of course, start designing your own icons. If you'd like some ideas, try recreating any of our free icons available at dryicons.com/free-icons/.