How To Create A Web 2.0 Badge In Fireworks

By now everyone has seen the badges, which are sometimes called seals, all over the web. There’s a really simple way to do this using Macromedia Adobe Fireworks.

For this tutorial, we’re going to replicate the badge seen on Crucial Web Hosting. We’re going to duplicate the curved text by using the Text On A Path feature, and the actual badge is nothing more than a star with a lot of points, or rays, since a typical star has about three to five points.

Alright, let’s start by opening up Fireworks. We’re going to create a new image with a width of 200 pixels, a height of 200 pixels, and a white background. Now we can create our base shape, which is the star. Now we need to select the Star Tool.

001.jpg

And draw a star that’s 130 pixels wide.

002.jpg

Select and hold the Points handle and increase it to 22 points. Now we have a star with 22 points, but they are too long to be a badge.

003.jpg

Select the Radius 2, or inner radius, handle, and drag it until you have a shorter, more triangular point. Now it’s starting to look like a badge!

004.jpg

Time to give it some color though, since it’s quite bland. Select the Fill Category and change the fill type to a Gradient that is Linear.

Linear gradient

Our badge will look something like this, depending on what color you had originally chosen for the star.

Badge preview

That’s not the colors we want to use though, so click on background color and change the color on the left to #66AA00 and the color on the right to #CCDD77.

color change

You should now have a badge that looks like this:

new look

That’s not the direction of the badge we’re trying to duplicate though, so let’s move the lighter color to the top, and the darker one to the bottom.

different direction

Much better! If you notice on the original badge, there is a slight drop-shadow. With the badge selected, click on Filters → Shadow and Glow → Drop Shadow.

drop shadow

You’ll be given the option to adjust the shadow. For this badge, we’re going to give it a Distance of 2, 65% Opacity, 3 Softness, and 300° Angle.

drop shadow settings

So far, so good. Of course, now we need to add some text to this badge. We will start off with the text in the center. Select the Text Tool and change the font to Georgia, and the font size to 35. We want the color to be a little bit darker than the darkest color of the gradient on the badge, so we’re going to change the font color to #559900.

text

I should point out that on the original badge, the dollar sign is much smaller, but for the sake of this tutorial, we’re going to keep it the same size as the rest of the text. With the Text Tool still selected, click in the center of the badge and write $4.99. With the text still selected, hold down Shift and select the badge, so both the badge and the text are selected. We need to center this both horizontally and vertically. Click on Modify → Align → Center Vertical and then repeat that and select Modify → Align → Center Horizontal. Although, it’s much easier and faster to use the shortcuts, so just hold Ctrl + Alt + 1 and then Ctrl + Alt + 2.

align text

Now the text should be perfectly centered in the middle of the badge.

aligned text

You will notice that on the original badge, it looks like the $4.99 text has an inner bevel. To create this effect, select just the text, and hit Ctrl + C to copy it, and then Ctrl + V to paste it. Don’t touch anything after you do this. Now we need to move the duplicated text up one pixel, so click ↑ on the arrow keys, then hold down Ctrl + ↓. The second step moved the duplicated text layer below the original text. With our duplicated text still selected, we’re going to change the color to #000000, and adjust the Opacity to 50.

inner bevel

Now we need to repeat the above process, but this time change the color to #FFFFFF, and move the layer down by one pixel by clicking ↓ on the arrow keys. You should now have three instances of the $4.99 text, one being the original green, the second black that is moved up by one pixel, and the third being white moved down one pixel.

repeated

We’re almost done, and this last part is probably the trickiest, just because you have to play around with the size of the two circles to get the text exactly where you want it. With more practice, you’ll be able to gauge this with more accuracy. Go ahead and select the Ellipse Tool.

elipse tool

And create the inner circle, which is going to hold the text on the top of the badge, and give it a width and height of 80 pixels. Center the circle just like we did with the text.

inner circle

Now select the Text Tool and change the font to Verdana with a size of 12 and a color of #FFFFFF. Write out HOSTING FROM and position it the best you can just below the the top of the circle, vertically centered. With the text still selected, hold down Shift and select the circle, so both items are highlighted. Use the keyboard shortcuts to align the text to the top of the circle by holding down Ctrl + Alt + 4.

text

With both the text and circle still selected, click on Text → Attach to Path, or use the shortcut key and hold down Ctrl + Shift + Y. Now the text is attached to the circle, but we need to adjust the offset. With our new attached path selected, change the Text Offset to 15.

attatch to path

You should have something that looks like this:

should look like this

The text on the bottom follows the same process as the text on the top, with some slight variations. Go ahead and make another circle with a width and height of 95 pixels. Using the same font face, size, and color, write out PER MONTH, but this time center it just above the very bottom of the circle, and as best as you can vertically centered. With both the text and the circle selected, hold down Ctrl + Alt + 6.

per month

Attach the text to the circle just like we did before, but this time, before we set the text offset, we need to reverse the direction of the text by going to Text → Reverse Direction. Now set the text offset to -47.

reverse

It won’t look right yet, because we need to increase the Kerning of the font to 22.

kearning

And we end up with something like this:

like this

You could save this as is right now, or you can adjust the text offset and kerning a little more, and move the inner and outter circles up or down. I went ahead and made the dollar sign smaller and tweaked some of the offset and kerning, and this is what we end up with:

another version

And that’s it, we’re done! You can download the finished Fireworks PNG file to play around with if you’d like.

Any suggestions, ideas? Feel free to comment on this article!

Back to Top

Leave a Reply