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.
Wow, I always knew that fireworks is great for us,
Very useful indeed. Learned a lot here!
This web 2.0 stuff is very useful to me.
Great tutorial, very useful info. More please…
Great post, thanks man, I learned a lot
That was a well written article, very interesting,thank you for a good read.
_____ \\\!!!///____
______( ô ô )______
____ooO-(_)-Ooo___
Ich möchte einen netten Gruß hinterlassen
und ich würde mich freuen, wenn Sie auf
meiner Homepage auch einmal
vorbei schauen würden!
Nice tutorial! I didnt think that`s so easy
Great tutorial. Have your thought about putting some social bookmark buttons on your site? At least include one for Digg so we are able to ping them up!
beatiful works.. thanks!
beatiful works… thanks!
Great tutorial, thanks
I appreciate the fact that you exerted the effort in creating this post and making it publicly accessible.
REally nice information. i will apply in some of my works.
thank you for sharing
Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.
best regards,
very nice share thanks
I think this type of article is useful for many readers blog.Thank you sou much.
Thanks for the tutorial. Smashing Magazine.and Vitaly’s is a good reference.
Thanks for the tutorial Vitaly’s site is a good idea.
Thanks for this nice tutorial dude, love it awesome. And now I know.
This is a great tute guys. Just what I’ve been looking for. Cheers!
nice and cool
great tutorial. i definitely have to try this myself.
Wow, a great succinct and informative tutorial with a “real world” (or is that “virtual world”) application. I’ll definitely be using this technique in the future. Many thanks for sharing.
Nice simple Web 2.0 tutorial and thanks for the font resources, I am always on the lookout for some great fonts!
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.
I have many fonts but sometime its too hard to select the right font.
I learned a lot here
Another great idea is to make sure the design is coordinated with the style of everything else involved.
This ensures a smooth seemless transition.
this is lovely post. thanks
wow, suprised what a great effect this gives. I’m going to give fireworks a try, thanks for the tutorial
Wow, a great succinct and informative tutorial with a “real world” (or is that “virtual world”) application. I’ll definitely be using this technique in the future. Many thanks for sharing.
Another great idea is to make sure the design is coordinated with the style of everything else involved.
This ensures a smooth seemless transition.
Great succinct and informative tutorial with a “real world” (or is that “virtual world”) application. I’ll definitely be using this technique in the future
Thank you for this very precise tutorial on producing web 2.0 style fonts in Fireworks. It is certainly a lot easier and faster than the methods I had been using to date.
Wow great tutorial! Like the website and cant wait to read more. Thanks for sharing!
Select the text, and then in the ‘Property Inspector’ change the color fill from ‘Solid’ to a ‘Linear Gradient’. I think this ensures a smooth seemless transition.
???? ??? ????? ????????? ??? ??????????? ?????? – ???????????
Nice tutorial, simply but really nice effect
Unfortunately some designers mix up techniques which make some layouts just ugly. Remember that simplicity is the key of good design 