Create Web2.0 logo with Fireworks

Published at May 14, 2007   Filed Under Video, Web 2.0    

feedIf you're new here, you may want to subscribe to my RSS feed or Email alerts. Thanks for visiting!


Alleba has created a nice photoshop tutorial on how to create web2.0 logo, i am not a fan of photoshop but i use fireworks a lot compared to photoshop for webdesign. I played with fireworks to create a web2.0 logo and finally i could create one. I will explain here how did i do that.

Tutorial

Open fireworks and select a new document, here type your logo text. Now right click on the text to convert it to path by selecting convert to path. After that go to modify in the menu and go to combine paths and select Join.

Select gradient and apply gradients, for this tutorial i used #0066CC and #D2E4F6 colors for font. After applying the gradient right click the text and go to edit and select duplicate. You will see one more instance of the logo drag this to down and right click this and go to Transform and select Flip Vertical.

Now on the second instance of the logo apply a box with same width and height of the logo and select gradient with colors #FFFFFF and #666666.

Now select the box and second instance of the logo, go to modify and from mask options select Group as Mask.

Our Web2.0 logo is ready how about adding a beta button to this. For this go to Start > Programs > Accessories > System Tools > Character Map. Select Wingdings font where you can find the starburst symbol copy that and paste in fireworks workspace. It appears as ® character. Highlight ® then choose the Wingdings font and set the size to maximum. Follow the steps outlined above Convert to path > Combine path > Join > select gradient use colors #FFCC00 and FFFF00. Apply drop shadow effect from filters, i used 10 distance, 65%, 4 and 315 angle. Type beta over that button, now web2.0 logo is ready.

Special thanks to Michael, although i dont understand his language his pics are quite useful.

I used Fireworks 8 for this tutorial.

If you liked this post, feel free to subscribe to my RSS feed

4 Responses to “Create Web2.0 logo with Fireworks”


  1. Michael Müller
    May 22nd, 2007 10:58 pm
    Hi!, thanks for the reference!
  2. ram
    May 23rd, 2007 1:56 am
    @Muller
    you are welcome
  3. Derek Padula
    August 5th, 2007 5:40 am
    That was great. I’ve always wondered how to do that stuff, and now I know.

Trackbacks/Pingbacks

  1. Create Web 2.0 Buttons with Fireworks at Technology Bites
  2. May 23rd, 2007 5:38 pm

Leave a Reply