-
Recent Comments
Thursday, December 28th, 2006 7:52 pm by
jdmacor 
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.
57 Responses to “ Web 2.0 Style Text With Fireworks ”
Leave a Reply
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 [...]
[...] the same time. … Related Link: web design agency styles and designs are changing to adhere to …http://www.jdavidmacor.com/2006/12/28/create-web-20-style-text-with-macromedia-fireworks/Visio 2002: Generating a Web Site Map … link on your web site, and each shape includes … model [...]
great stuff , thanks .
Nice effect. Very ‘now’ and subtle - I like it.
Here are some more Web 2.0 font possibilities:
http://www.modernlifeisrubbish.co.uk/article/great-fonts-for-web-2.0
Bruce Arnold, Web Designer
Miami Florida
awesome tutorial dude!! great work! I was looking for something like this. I’ve got a package of Web 2.0 style gradients for PS but no such thing for Fireworks. Can’t believe its so easy! who needs PS patterns n gradient templates n stuff!! thanks a lot!
Nice affects, i also tried to get this one, but not get the results fine as here you are having now, but still i am happy to use this tutorial
Great job buddy!
thanks admin
thanks admin
thanks admin
thanks guy…while the most keep publishing tutorials and guides only for illustartor, you talk about create web 2.0 style using fireworks…this is great, go on!!
[...] 2.0 mit Firefox Text für Logos, Reflection-Effekt und Badges mit [...]
That’s the most simple and easiest tutorial I’ve ever seen for web 2.0 logos.
Love these styles, use them all the time. Check out http://www.daniel-lyons.co.uk for examples
Very nice and well explained tutorial..
Thanks a lot David !
Great tutorial. I will use this for my sites.
Awesome styles. Use them a lot on many of my web designs.
Awesome styles. Use them a lot on many of my web designs. Check http://www.123website-design.co.uk
Great Tutorial. I too have started a new tutorial site. I’ll post this up there.
son of a gun if i didn’t search for fireworks text effects and you’re the first site in the list, oy.
thanks a lot
Awesome..!!
Reminds me when I first learned how to make a web 2.0 style text with Photoshop..
Damn yeah.. it WAS exciting. In about a week, I made 50 different text styles in my name :p
Though I’ve never tried it in fireworks, and reading through the post, it certainly seems similar to Photoshop in quite a few ways
thanks you super
nice tutorial. thanks a lot..
GREAT TUTORIAL FOR kampanye damai pemilu indonesia 2009
Thank you for the spent time. Very useful information
Well, I think we all have to quickly change the way the age old traditional fonts looks. Web 2.0 should demand the change
Great tutorial, keep up the good work
http://www.daniel-lyons.co.uk thanks daniel
Great, simple but neat!
thanks
I cant make! i dont know putting pen tool by combinign its path!
Great styles. To import these styles click on the options icon on assets panel then select import styles option. Then an open file dialog will appear. select this file then click okey.