Tutorial

This tutorial will will show you how to create stylish web 2.0 badges. So what is a Web 2.0 badge? It is a bubble used in modern websites that call for the attention about a service or message. Some common traits of Web 2.0 badges are bright colors, glossy effects, gradient fades, rounded corners and star shapes etc. Used correctly, it can help you market your website successfully.

This tutorial was written for Fireworks CS3

The completed tutorial preview:

Figure 1: Completed Tutorial

1. Basic Star

Select the Star Tool, click and drag to create a basic star with a diameter of around 153 x 153px. Drag the Points Handle up to increase the number of rays to around 25, then drag the Radius 1 & 2 Handles to produce shorter, more triangular rays. See Figure 2.



Figure 2: Basic shape

2. Duplicate and offset

Create a duplicate of the shape with right-click Edit > clone. Offsetting can be made manually with the Scale Tool (Q) + ALT - SHIFT to reduce the diameter from the center or go to Window > Others > Path and select the Inset/Expand path tool. Use the settings in Figure 3 with a 2px offset.



Figure 3: Offset the Path

3. Inner Shadow.

Apply an Inner shadow effect to the second star. Use the settings in Figure 4.



Figure 4: Inner Shadow

4. Final badge 1

You could stop here and use the badge as is but in the next step we will show how to apply the gloss look.



Figure 5: Final badge 1

5. Duplicate a third star

Create a duplicate of the second star with right-click Edit > clone but no offset. See Figure 6.



Figure 6: Third star