9tutorials – The best collection of tutorials

Here is another web 2.0 logo design tutorial! Here is another popular style with a shiny box. A good tip with doing web 2.0 designs, and logos is try to keep the shiny/3d/etc effects on one to two elements of the page. Over doing it wont be good for usability and it will make it look very cluttered. There is a general rule to use about one or two shiney elements and leave the rest not so done up. With light shadows here and there to create the realistic effect. Adding subtle drop shadows will give the polished effect, and will make your designs look great. Well, lets get started!

Open a new canvas of any size really. If you are going to create a very detailed logo the bigger the canvas the better. I just added a nice blue effect on the top just to add some interesting effect.

 

 

Typography

Most of this logo is typography, most good logos are. There are some really well done graphical logos been done (firefox), but simple typography effects can go a long way! You can use any fonts you have, I used a font I paid for. What I did to position the text is to use the guide lines (rulers) to get it perfect. You can see it in the psd if you download it.

 

 

Creating the logo design

 

Here are the blending effects I did for the rectangle box.

 

 

White border

 

I added a white border inside of the box. CTRL+CLICK on the layer of the box, On a new layer fill the selection in with white, and go to Select>Modify>Contract and contract it by one pixel. Than contract it by a pixel again, and press delete again. Now you will have a nice white inner border.

 

 

Final touches

I put a “?�? on the box with the text tool, and I added this blending effect on it:

To add a nice shiny effect I used the round marquee tool and made a round selection above the box in a new layer. I turned down the opacity about 30% and deleted the bottom have with a another round marquee selection.

I hope you enjoyed this! You can download the PSD here
Copyright @ Designphase 2007

Tags: logo, Photoshop, Web Design, web-2.0

This entry was posted on Tuesday, May 8th, 2007 at 5:20 pm and is filed under Photoshop. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.