Thursday, December 28th, 2006 7:52 pm by
J David 
Print this page Share This
Finding the right Font
Well, obviously we are going to have to find a suitable font. It seems that an oft used 2.0 font is Arial Rounded, which if you like it, is just fine. If not, you can just hunt around for a nice font. The only thing is that is should be fairly wide (no thin script fonts) and when we start to work on it, we are going to make it fairly large, so make sure it looks good at a bigger size. To find some really good 2.0 style fonts, I would recommend either Vitaly Friedman’s List or the one from Smashing Magazine.
Now spell your favorite word
This is the part where we start working with fireworks. Go ahead and open it up, and create a new file with a width of 600px and a height of 300px and a 72px per inch resolution, just to give us a nice big area to work with; you can resize it after you are done. I have also chosen to use a white background.
Ok, with our beautiful canvas ready to go, we can select the ‘Text Tool’ then click on the canvas and type our magic word (or any non-magical word… it’s up to you). I have selected Share-Regular as my font and made it a size 80 and the color is #6699CC.
Alrighty. You can stop here if you want. Honestly, that doesn’t look too bad to me… But, I guess you came here to see something shiny, didn’t ya? Fine, let’s trudge on.
Shine up your text
We first need to create a clone of the text we already have. To do this, simply select the text you wrote, then press ‘Ctrl+Shift+D’ and a new element will appear that is an exact duplicate of what you already have. Next, I like to make one of those duplicates invisible by clicking on the little picture of an eye next to the lower layer in the layer inspector, which makes that little eye disappear. I do this so that I can focus on the shiny layer.
Now we want to give this text a gradient, but we need it to be uniform across the text, not individually on each letter. To achieve this, use the ‘Subselection Tool’ (the little white arrow) and select our text, then go to ‘Text > Convert to Paths’ or just press ‘Ctrl+Shift+P’. Now we have a bunch of individual paths that we need to combine, so, with an obvious move, we will go to ‘Modify > Combine Paths > Union’ to make one path; sorta. But at least our gradient will now work properly. Select the text, and then in the ‘Property Inspector’ change the color fill from ‘Solid’ to a ‘Linear Gradient’. Make sure that the gradient goes from your original color to white, and that it starts from slightly underneath the word to slightly over the word.
The next step is a little more complicated. First, select the ‘Pen Tool’ and click about an inch or two to the left of the word, near the bottom of the word. Now move your cursor to the same spot on the right side of the word and click and hold down the mouse button. With your mouse held, you can change the curve of the line you just made. Generally, you want to make a nice arch going through your word. Finally, close the shape and you should have something that looks like this:
Now, select both the word and the shape you just created at the same time. With the two selected, go to ‘Modify > Combine Paths > Punch. You now have the shiny layer for your word!
The finishing touches
We have reached the home stretch! You can go ahead and reveal your first word (the one sans gradient) and you should have something that looks a lot like a shiny word. If you want to, you can add a very subtle drop shadow to enhance the effect. And if it doesn’t look quite right to you, fear not! You can tweak the image by changing the opacity of the shiny layer (generally to around 70%-80%), or even its gradient. Here is how my web 2.0 text came out:
And remember: Simplicity is key… for some reason… Here are some other things I did with this technique. You can add multiple curves with multiple heights and achieve various effects.
Related Link: web design agency styles and designs are changing to adhere to the new web 2.0 style and effects. Using Fireworks and the text tool you can create web 2.0 text.
awesome!
Thanks! Just what I was looking for!
Very nice, I am glad to see a fellow Fireworks user making web 2.0 style graphics.
this is a cool web site
Very nice tutorial. However, I’ve a slight problem. After drawing the shape and combining the paths and punching it, it seems to be cutting off the text that intersects the shape. What am I doing wrong?
Hi,
Thanks for the great tutorial… very easy to follow, and very useful!
Gr8!
Great tutorial but im having the same problem as Teren
For Kris and Teren, make the other layer visible now.
Thanks for answering James!
Thanks for this site!
guiop.info
[…] Here is how my web 2.0 text came out: And remember: Simplicity is … 11 Responses to ” Create web 2.0 style text with Macromedia Fireworks ” Comments RSS … Continue […]
Actually… Some of use prefer Fireworks… Just a response to a post you made elsewhere.
So… Thank you. This was much nicer then having to convert or flip back and forth!
Nice ! A great tutor!
thanks good post.
It’s very nice tutorials WEB2.0 logo! Thanks!
very nice and easy to follow tutorial.
keep up the good work.
Very interesting, cool!
Hi,
I tried this great tutorial and it works fine - but if I use a stroke around the text, I get the following result, where the stroke is also along the path after the punch inside the text:
http://alexonasp.net/temp/dnh.png
Is there a way to have the stroke only around the final text but not inside?
It’s the simple tricks which are the most effective - great stuff, thanks very much
Being a programmer I am more inclined towards the underlying components of Web2.0 technology such as XML/SOAP etc.
I was having a rough time wrapping my head around what seemed to be “simple” procedures using GIMP/Fireworks.
This tutorial has me sitting here with a big smile on my face as I now have the confidence to start redesigning all of my interfaces to make them shiny.
I am going to attempt something with buttons now. Thank you for the encouragement to continue with this perfect tutorial.
Incredible. Thanks for making it pretty.
Thank you for this great tutorial!!!
Great tip, and very simple to implement, i would never have thought about using combine paths > punch. Well done!
[…] Web 2.0 Style Text With Fireworks […]
[…] Estilo Web 2.0 con Fireworks, visitar […]