J David Macor

There are many different tutorials on how to create Web 2.0 style graphics with Photoshop, but I have had a hard time finding one for Fireworks. Maybe it because only 3 people use Fireworks, including me, but hey, that is 2 guaranteed visitors! Anyways, let me know if you find this useful.

Now, lets take a look at our finished product first, just to make sure you actually care to read further:

So, if you are in fact in the right place, then let’s start the tutorial. Open up Fireworks (I am using version 8.0) and create a new file. I have chosen to make the canvas 400 by 400, just to give myself a little extra room to work.

Now, we will choose the star shape tool and draw a star to your liking. Then, when you select your newly created star, you will see several little yellow squares. These are adjustable sliders that control the various aspects of the star. Use them to tweak it to your liking. I made mine with 12 points and then rounded off all of the sharp edges. Here is what I have so far:

As you can see, we’ll us a simple orange (#FF6600). Now, we add a diagonal gradient that goes from our orange to white. Lets start the gradient in the middle of the image and move it well past the end of the star. It should look something like this:

Now we will add a few little effects to add more depth to the base of our badge. Lets put a drop shadow (distance: 6, opacity: 65%, softness: 4, angle: 226) and an inner shadow (distance: 0, opacity: 65%, softness: 5, angle: 315). Our image now looks like this:

Alright, now this baby has some depth and is starting to look shiny! Ok, now to complete the shiny finish, we will need to duplicate our star, so while the star is selected, press ctrl-alt-d. Now move your second star off to the side so that you have room to work. The next step is to select the pen tool (under vector on the left) and click once above and to the left of your new star. Click the tool again, below and to the right of the star.

Now, we can click an hold our second point and adjust the curve of the line we just made.

Now, we will just complete the shape with the pen tool and end up with something like this:

Now quickly remove the effects from our new star. They are not necessary for this part. So next, we select both the shape we made with the pen and the second star. Now go to the top menu and select modify-combine paths-punch. Our image now looks as follows:

Now we will apply a white to black (the preset option) gradient and set it from the top right to the bottom left. We will also change the blend mode to screen (in the properties bar). Now we can reduce the size of this selection proportionally, but only just slightly and then position it over the first star:

Now, how shiny is that?! The last step is to add some text and put it beneath the chopped star layer and voila, you have a pretty badge! I chose a rounded arial font and rotated it to match my gradients and put a short drop shadow.

If something isn’t clear, feel free to leave a question in the comment area and I will try to address it.