22Oct
2007

Create Web2.0 logos with Fireworks

Posted in Text by admin

You can make your very own Web2.0-style logo with Adobe Fireworks. Here I’ll teach you a few simple techniques that can help you do just that. There are more methods out there, but here’s my favorite ones.

1. First, make a circle and set its vertical linear gradient fill to #0099CC #003333. Type ‘f’ on it and set that to #FFFFFF, Trebuchet MS italicized, inner shadow distance 1.

You will get one simple yet attractive logo using the first letter of your company name. This is one technique. Here’s another.

2. Type the whole company name with Trebuchet MS or any other font you think is appropriate. Set that to vertical linear gradient with the same colors as the circle.

Now you already have a decent name logo. But I’m gonna show you more techniques.

3. Draw an ellipse and set it to #FFFFFF and 25% opacity. Put it between the two objects, above the name and below the circle.

This will make the text look glossy.

4. Now select the text and duplicate it. Modify>>Transform>>Flip Vertical. Set the fill to #003333 on both ends and set the bottom edge to 0% opacity. Position it underneath the original name to create a shadow effect. Don’t forget to adjust the gradient position: put it higher.

But wait, there’s more!

5. Using a Star tool, draw a star and set it to 10 points and decrease its radius to make it less pointy. Set its outline to #FFFFFF and add a drop shadow effect. Put it underneath all layers. Type ‘NEW’ in uppercase and fit that in the star.

6. And for the last technique, draw a rectangle and set it to vertical linear gradient fill with white on top and gray on the bottom. This will make the logo look like its sitting on a shiny floor.

And there you have it! I hope these tricks will make your logo look better.

Share this:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • blogmarks
  • SphereIt
  • Reddit
  • Furl
  • StumbleUpon
  • NewsVine
  • TailRank
  • Fark
  • Spurl
  • MisterWong
  • Slashdot
  • Ma.gnolia

11 comments

  1. Gravatar Sheril says:

    Good Job! Keep Posting more

  2. Gravatar ianaz says:

    thanks :)

  3. Gravatar CleverSage says:

    Thanks for the tutorial! The Web 2.0 design wave is upon us!

  4. Gravatar Justin says:

    No problem. It should be sweeping us all by now.. enjoy!

  5. Gravatar aryotalk says:

    OMG Good Tutorial for The Wallpapper and for Web 2.0

    Thanks

  6. Gravatar diger44 says:

    Awsome Tutorial!
    –Using Idea for my own website!
    Keep it up!

  7. Gravatar ravi says:

    awesome tut.
    Great work dude,………. Thanks :)

  8. Gravatar Zeezat says:

    Good one!!

  9. Gravatar maz says:

    bro love this ive used it on my own site looks too good. Its awazing what you can do in fireworks

  10. Gravatar kehinde isimi says:

    nice tutorial nut can any one do vectorization like in scanner darkly or digital painting in fireworks.thanks

  11. Gravatar Ragu says:

    Thx a ton buddy!! Really helped a lot!! Particularly i liked the colors u chose !!

Leave a Reply