)
Creating a Web 2.0 style badge in Fireworks
Badges are very useful on a design project whether if it’s for print or for web. You can use a badge to indicate something new, a release status (e.g. beta, 1.0) perhaps or anything you can just think of. There are many web 2.0 badge designs out there and this tutorial will teach you how to create a basic badge in Fireworks. First, take a look at the following samples for inspiration.
Web 2.0 designs are characterized by bright colors using gradients, shiny surfaces and shadows and we’ll do the same on our badge. This Fireworks tutorial will also teach you how to use the punch and intersect command.
Alright let’s get started. Let’s try to recreate this badge on the right. As usual, I’m using Fireworks MX 2004 but any version with the Star Autoshape will do.
1. First create your canvas and your star using the Star tool in the Vector shapes menu. For this tutorial, I’ll be using this #0066FF as my main color.
Hold shift when creating your star to make the sides of equal length so your badge won’t look elongated.
2. Adjust the yellow points (click the yellow point and drag up or down) in your star so that it will form a badge. I increased the number of sides (leftmost point) to 25 and the depth of each point close to the edge.
Feel free to adjust the other yellow points to fully customize your badge. You can create the flower-like badge by adjusting the point that controls the roundness of each tip.
3. Let’s apply the gradient on our badge. I’m gonna be using a diagonal linear gradient from #9AC2FF to #0066FF. Feel free to use other color combinations and gradient styles such as radial or ellipse.
4. It’s now time to create the shiny surface effect. Create a copy of your badge (Ctrl-C, Ctrl-V). Then create an ellipse shape that will cut out the top part of your badge and place it in the desired position. Like this:
5. When done, select both badge copy and the ellipse and go to Modify > Combine Path > Punch. This will cut out the portion of the ellipse from the badge copy leaving the top part of your badge. If you use Intersect instead of Punch, the bottom part of the badge will remain.
6. Let us then apply the shine effect. Select the top half of the badge and change its fill to solid white.
7. Change the opacity of the white portion of the badge to 30 to complete the “shine” effect of your badge.
8. Almost done, let’s add the finishing touches. First, add an outline to our badge. Select the original badge and apply a 1-pixel soft stroke with the color #003399.
9. I want to add another outline but this time, a thick color white before I add my shadow. Select the original badge again then on the Effects, choose Shadow and Glow > Glow. Use the following settings:
- Color: white
- Width: 2
- Opacity: 100%
- Softness: 0
10. Then the drop shadow. Add another Effect, choose Shadow and Glow > Drop Shadow and change the distance to 3.
11. Finally add your text, shape, image or whatever to finish your badge.
Hope you learned how to create different styles of web 2.0 badges with the techniques I showed you.
You might also be interested in:
- Creating an iPhone App style icon in Fireworks
- Creating the “Aqua Sphere” effect in Fireworks
- Creating a Web 2.0 Shiny Text in Fireworks
- Creating shiny web 2.0 buttons with Fireworks
Filed under: Fireworks Tutorials
that was good
[...] sticker peel-off is a commonly effect used in badges that you’ve probably seen already in some web 2.0 sites. You can use this effect on Twitter or [...]