Creating a Web 2.0 Glossy Text Effect in Fireworks
This is a short tutorial on how to create a glossy text effect style in Fireworks. The technique is a bit different than the “shiny” text effect in a previous tutorial but it’s not that difficult to do.
To give you an idea on what effect we would be doing, here’s a sample:
I got this from a Photoshop tutorial posted in Photoshop Candy so it would be a tutorial translation to Fireworks which I think is easier for such effects.
I’ll be doing this in Macromedia Fireworks MX 2004 but any version will do.
1. First let’s choose a bold font. The thicker the better. Here I used Slugfest from SimplytheBest Fonts.
Slugfest font with a color of #5EBB00
It is important that this would be the final size, spacing, kerning of your text or else you’ll need to start all over again.
2. Ok for the gloss effect, first we need to create a copy of our text. Ctrl-C Ctrl-V.
3. With the copy selected, go to Text > Convert to Paths.
4. Then Modify > Ungroup.
5. Finally, Modify > Combine Paths > Union.
6. Then create an ellipse over the upper half of your text that would serve as your glossy area.
Make sure the ellipse is in front of the text
7. Select both Ellipse and the Composite Path then go to Modify > Combine Paths > Intersect.
8. Now fill the glossy area with a Vertical Linear Gradient from a light version of your color to the original color.
Gradient color used is from #E2FFC6 to #5EBB00
9. (Optional) For the outline, select your original text then use a 3 pixel basic soft-rounded stroke with a lighter version of our color. If you can’t find where to set the pixel of your stroke, it’s in the Stroke Options.
Color used for the outline is #E2FFC6
There you have it! It may looked kinda boring but slap it on a background with an Ellipse Gradient then apply the “reflection” effect and you’ll have something like this:
Sweet. Thank you for reading and be sure to check my other Fireworks Tutorials.
You might also be interested in:
- Creating a Web 2.0 Shiny Text in Fireworks
- Creating the “Aqua Sphere” effect in Fireworks
- Creating the “reflection” effect in Fireworks
- Creating a Web 2.0 style badge in Fireworks
Filed under: Fireworks Tutorials
Some nice tutorials for Fireworks Calvin, i’ve just gone through them all, without any problem thanks to your great descriptions!
Keep them coming i’ll be coming back!
Sorry in addition to above, how do we get the elipse gradient on the background like in your final step?
calvin: brian, just create a square/rectangle that would fit your whole background then fill it with ellipse gradient (from white to green or whatever color suits you). make sure you place the rectangle behind your text. let me know if you’re still having trouble.
Thanks, I never knew about elipse gradient fill, I have got it going now thanks!
There’s just one problem, the pictures seem to be grainy/low quality, i’m new to fw so not sure how to change this. On the Optimize tab, I have set to PNG32 but same result?
calvin: i think it’s the display settings. i also tried it in a laptop and the gradient looked blocky. can you post it somewhere? I’ll check it in my display if it’s still grainy.
When I Intersect the paths, the bottom of the text gets cut off. What am I doing wrong?
Sorry Don’t Worry. I know where I was going wrong.
calvin: for the benefit of the others who might experience the same thing. i think you have to exchange the position of your two paths (move the one in front one layer back).
great,, thanks for publishing these type of informative tutorials ……
Thank you so much for sharing your great talent dude, this I really a great help to all aspiring web and graphic designers. Keep it up and share more nice ideas. Your cool dude.