Calvin’s Hub

You may notice that Web 2.0 logos uses a lot of gradients on their text to create a “shiny” effect.

In this tutorial, you will learn how to create something like the image on the right. I got it from G3 Fusion and the author calls the effect “Soft Floating Font” for who knows why. Anyway, check out his site if you want to know how he did the effect in Photoshop.

Ok let’s do this in Fireworks. I’m using Fireworks MX 2004 by the way but you don’t need advanced features for this tutorial.

1. Go ahead and create your canvas and type in your text. Wide fonts works well for this effect. I’m using Franklin Gothic Heavy, size 75, bold with a color of #0099CC.

2. Let’s do the easy parts first, the white and gray outline. To create the white outline, put a 2 pixel white soft stroke on your text. You won’t see the effect yet since your background is white.

3. Then we’ll add a glow effect to the text. In the Effects menu, choose Shadow and Glow > Glow. Use the following settings:

• Width = 1
• Softness = 0
• Color = #CCCCCC

Here’s how it looks like now:

4. Now let’s create the “shine” effect inside our text. Change the Fill Option into Linear Gradient.

5. Change the orientation of the gradient to vertical by rotating the line. Also adjust the gradient line to match the height of your text.

6. Now here comes the cool part. Create 6 gradient points on your gradient line with positions as that of the image below and with the following colors:

• 1st point = #8A9EB6
• 2nd point = #6E97B3
• 3rd point = #4790B1
• 4th point = #197AA5
• 5th point = #1A8FBA
• 6th point = #1BAAD4

To add gradient points, simply click on the area beside between the start and end points. Take note of the 3rd and 4th gradient point; they should be real close to each other.

Feel free to adjust the position of those points. To remove a gradient point, click and drag it off the area.

7. If you did it correctly, your text should look like the one in G3 Fusion.

If you want to use different colors, just change the colors on your gradient points. Or, you could simply play around with the Filters > Adjust Color > Hue Saturation. (It will convert your vector to bitmap so better save a copy first in case you want to change your text).

There you have it. Your very own shiny text that you could use for your logo.

You might also be interested in:

• Creating shiny web 2.0 buttons with Fireworks
• Creating a Web 2.0 Glossy Text Effect in Fireworks
• Creating the “Aqua Sphere” effect in Fireworks
• Creating the “reflection” effect in Fireworks

Filed under: Fireworks Tutorials