Fireworks tutorial: icons

In this tutorial i will show how to make a nice icon in fireworks, i use them on  my blog and i wanted to share the creation process with the rest of the world. I started to get tired of the shiny and “iphone looking” icons so i decided to make something different.

Part 1: Shadow
Fire up Fireworks and make a new document. You can ofcourse use which width and height you consider better. In “Canvas color” give it a transparent “color” so the color behind the rounded rektangel doesn’t
appear.

The width : 378
The Height: 381

378×381

Start of by selecting the “Rounded Rektangel” tool and draw a rounded rektangel in the canvas that has a width of 396 and a height of 368. This means the size should be 369×368 for the newbies.

This is the shadow for our icon so give it a darker nuance. If you were supposed make a red icon you would give the shadow a dark red-ish color.

Part 2: Color

Now that the shadow is done let’s start making a rounded rectangle in the shadow that has a size of 358×357

As you can see on the picture above, the color is linear. What you need to do is to select the rounded rectangle and push the drop-down menu near the color tool that is named “solid”. From here you go to Gradient > Linear and draw with the black line that pops up a vertical line over the icon. After that you wanna give the icon diffrent shadings so we push the color button next to “Linear“.

The first ‘arrow’ you see in the menu should use a lighter nuance while the second ‘arrow’ should use a darker nuance, but not darker than the shadow.

Part 3: Give it Font.

We are almost done with our icon, the only thing left is to give it a significant letter. Use the Text Tool in the toolbar and choose any letter you want. Mine is ‘FW’ which stands for Fireworks. Put the letter in the middle of the icon and give it a white color. The font that i use is “Bell Gothic std Black” but you can of course use any font you prefer the most.

We have to give the letters a “drop shadow” for the heck of it. Go to “filters” and push the (+) button to add a new effect. Go to Shadow and Glow > Drop Shadow and select it. You can customize the settings in the drop shadow effect if you would like to do it.

Save the document as a  “.PNG”. You can of course scale down the picture afterwards.

Finished result:

Here are some of my icons that i use on my blog.

I hope you liked this tutorial and be sure to check back again for more.