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:




PhotoshopTrend: Web 2.0 Photoshop tutorials
A categorized directory of hundreds of photoshop tutorials.
Web 2.0 Tutorials

Glossy web 2.0 button
Learn how to make a nice Web 2.0 style Glossy Button
using Layer Styles, also how to make a rollover

Cool Web 2.0 Badge
Make a good looking Web 2.0 style Badge, in a easy way
using the Polygon Tool and some Layer Styles



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:

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, I’d be glad to answer them here.
Happy logo making!

Video and other tutorials:

http://www.photoshoptrend.com/

 

I am starting to do some logos,so this is a BIG help.
Thank you.

Regards ah.

 

Yeah this is a big help. We hired some designers over the summer and we told them "we need some Web 2.0-style logos", and they looked at us like we were speaking another language. This will definitely help.

 

design a 2.0 logo is piece a cake for me..if you have the gradient pack for 2.0 design, it be easier..

before I'm using this pack,I designed the logo with manual gradient and lost a lot of time.. but if you are willing to hire someone to do it..there's a lot of designers here..

 

Thanks that is great

 

Excellent thanks! I'm going to have a go at this today ...

 

Would have been better if video had some voice also dictating what you are doing! Still good

 

Great tutorial dude, thanks!

 

How do you access the "reflection" option?

I haven't seen it in Layer styles.. Can anyone tell me where to find the "reflection" option? (I got CS2)

 

There are literally tons of tutorials around on creating logos in this style.

• http://designphase.net/web2.0_logo
• http://designphase.net/web_logo2
• http://www.fxdesigning.com/web2txt.php
• http://www.dreamdealer.nl/?action=viewTutorial&id=37
• http://pxlgfx.com/tutorials/Polished_Text/
• http://www.lineartutorials.com/Tutorials/Web20logo/

There are a few

 

Just my 2 cents... just adding "gloss" or reflection to some words or icon doesn't make it a successful logo. That's just the professional in me ranting.
But I'm sure your tutorials are beneficial to many up-and-comers!

 

Totally agree mac_crazy.

There is so much more involved. You need to think a lot about your client's identity and you need to come up with something that successfully represents their website or brand. You should always research your client and brainstorm ideas.

Rep up mate.

 

Thanks Matt! Your points are also very valid. At the risk of repeating myself for the 100th time on DP, there are obviously many designers on here who don't approach design this way, which is why they work for $3 a logo, etc.

But sorry, PhotoshopTrend, I'll stop hijacking your thread. Sorry bout that! Keep up the good work, I'm sure there are many who benefit from your teaching!

 

http://h-master.net/web2.0/index.php

 

Oh wow.. That.. Is that what I think it is?

 

It is my friend. It is indeed.

 

So I think we can pretty much assume this guy is a cheat/untrustable person.

 

Either he was short on time, has some web 2.0 plr content, or is just plain lazy.

Either way, the content wasnt that bad.