Tutorial: How to Make a Web 2.0-Style Logo

[PhotoshopTrend]

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/

[Tails]

Awesome tutorial! While I can't stand the "reflection" that most Web 2.0 logos have, I love the whole glossy and professional look. I'll try this out later!

[LilyWexfordfogr]

I just discovered a friendly new website called Photoshoptutorials.dk which tracks the latest tutorials from around the internet, and provides you with a single source to find and use tutorials. http://www.photoshoptutorials.dk

[Lovely]

Thanks for sharing the tutorial and the link.
Cheers

[iceman88]

Nice work and great job. This is well worth the look. Please post new tutorials in regard to this matters. Thanks it really helped a lot.

Photo Coupon Code

Hosting Discounts