Welcome to the Digital Hub of J David Macor, a financial professional in Dallas, TX.

Web 2.0 Style Text With Fireworks


12.28.06 Posted in Fireworks, How To, Tutorials 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.

Tutorial Pic 1

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.
Tutorial Pic 2

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.

Tutorial Pic 3

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.
Tutorial Pic 4

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:
Tutorial Pic 5

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:

Tutorial Pic 6

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.

Coca Cola Logo
Bubbly Logo



189 Responses to “Web 2.0 Style Text With Fireworks”

  1. Wow, I always knew that fireworks is great for us,

  2. get ex back says:

    Very useful indeed. Learned a lot here!

  3. This web 2.0 stuff is very useful to me.

  4. Great tutorial, very useful info. More please… :-)

  5. Criar site says:

    Great post, thanks man, I learned a lot

  6. That was a well written article, very interesting,thank you for a good read.

  7. Germany Sylt says:

    _____ \\\!!!///____
    ______( ô ô )______
    ____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!

  8. Greengames says:

    Nice tutorial! I didnt think that`s so easy :)

  9. 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!

  10. majik says:

    beatiful works.. thanks!

  11. majik says:

    beatiful works… thanks!

  12. rosario says:

    Great tutorial, thanks :)

  13. resume says:

    I appreciate the fact that you exerted the effort in creating this post and making it publicly accessible.

  14. REally nice information. i will apply in some of my works.
    thank you for sharing

  15. Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.
    best regards,

  16. m65 says:

    very nice share thanks

  17. Closet Doors says:

    I think this type of article is useful for many readers blog.Thank you sou much.

  18. Thanks for the tutorial. Smashing Magazine.and Vitaly’s is a good reference.

  19. Thanks for the tutorial Vitaly’s site is a good idea.

  20. Borge says:

    Thanks for this nice tutorial dude, love it awesome. And now I know.

  21. This is a great tute guys. Just what I’ve been looking for. Cheers!

  22. Social Media says:

    great tutorial. i definitely have to try this myself.

  23. 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.

  24. Kieran says:

    Nice simple Web 2.0 tutorial and thanks for the font resources, I am always on the lookout for some great fonts!

  25. 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.

  26. Travel Guide says:

    I have many fonts but sometime its too hard to select the right font.

  27. Jewelry says:

    I learned a lot here

  28. Another great idea is to make sure the design is coordinated with the style of everything else involved.

    This ensures a smooth seemless transition.

  29. wow, suprised what a great effect this gives. I’m going to give fireworks a try, thanks for the tutorial

  30. Valador says:

    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.

  31. Grohe Kiev says:

    Another great idea is to make sure the design is coordinated with the style of everything else involved.

    This ensures a smooth seemless transition.

  32. 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

  33. H Miracle says:

    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.

  34. Dan says:

    Wow great tutorial! Like the website and cant wait to read more. Thanks for sharing!

  35. 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.

  36. ???? ??? ????? ????????? ??? ??????????? ?????? – ???????????

  37. Randy H says:

    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 ;)

Leave a Reply

Search
Categories
Other Places I Roam