Photoshop Tutorial: How to Make a Web 2.0-Style Logo

This is the first of a series of Adobe Photoshop tutorials I’m going to offer on how to create a logo in “Web 2.0” style.

What do I mean by Web 2.0-Style Logo? If you follow Web 2.0 closely, you’ll see similarities in the way logos are designed: Simple, glossed, gradient, bright-colored and often came with a slight reflection and a beta sign just like this:

web2logo2

Pretty ain’t it? Here’s a quick 6-minute video tutorial I prepared:

Some notes:
1. In Adobe Photoshop CS, I started with a new 800×600, 72 pixel/inch document with white background.

2. The font I used for the ALLEBA text is Trebuchet MS, 80 point and hexadecimal color 3399CC. You may use similar fonts such as Arial, Tahoma or Helvetica. I used the same color to replace black for the gradient effect. I set the opacity of the reflection to 50% and that of the white gloss to 30%.

3. For the starburst (where BETA is written), you need to open Character Map (Windows only) via Start > Programs > Accessories > System Tools > Character Map. Switch to the Wingdings font where you can find the starburst that I used for this tutorial. Copy the starburst then return to Photoshop. Pick the text tool, click on the workspace and paste. You will initially see the “®” character. Highlight “®” then choose the Wingdings font from the toolbar. Set the size to 60 pt and hex color FFCC00. The two colors I used for the gradient are FFCC00 and FFFF66 at a 135 degree angle. I set the drop shadow to 30% opacity.

4. I created this tutorial for those who are already familiar with the common tools and functions of Adobe Photoshop CS. This is my first attempt in creating a video tutorial that took me 2 hours to come up with a decent version! If you have any questions or are looking for additional Photoshop training, I’d be glad to answer them here.

Update: Here’s the link to a higher resolution video of this tutorial.
Happy logo making!

103 comments

  1. I created my first Web 2.0 logo following your tutorial and it was a breeze.

    I am mentioning your blog and video in my blog so that more people can know about this.

    Thank you so much.

  2. Thank you so much for making the effort to create a most useful video tutorial. I am trying to discover the best settings for publication to YouTube so that I can create a series of tutorials myself. Can you tell me which video capture application you used and your settings please. Thank you again for your work.

    Ray

    England

  3. Thansk a lot…….
    it is exactly what I was searching for. Awesome tut. thanks for sharing.

  4. Hi all,

    Could you pls help me in coming up with a logo for my catery. The idea I have is to have it with a persian cat in the background and then either around or ? have the catery name which is The Big 5. I know it’s asking a lot but can u come up with some ideas please!
    Thanks so much

  5. This tutorial is good, however most logos are done in a vector program. Photoshop will import smart objects, but exporting is always raster. Have you considered trying this in Illustrator or Flash?

  6. umh, gud day…can u pls. help me to make a logo for our feasibility study..?? our hotel name is Ai shy hotel.. the word “Ai” came from the Chinese word love!!
    Thank a lot..

  7. Not bad. Next time, save yourself some time and copy layer style then paste the layer style on to the other layer.
    Better yet, just do one type layer, then do your layer styles. Duplicate that layer, reflect. Done

  8. Not that bad i think, it makes sense to me actually… but it would be nicer if you do more screen capture than just writing… but all in all nice post…

  9. it’s my first time to try this and it looks pretty nifty. thanks for the easy to follow tutorial. 🙂 linked this entry in my blog. 😀

Leave a Reply