How to create a WEB 2.0 style logo
17 February 2011
Step 1
Make a new file with the dimension 600 x 450 pixels (CTRL+N) and type the text for your logo (preferably in a simple and clean font with rounded corners, like the helvetica Rounded wich i used):
Step 2
Double-click on the textlayer in the layerpanel to add a layerstyle to this type. Choose a "gradient overlay" with the following values:
That will result in this:
Step 3
After that, make a new layer. In this new layer, create an oval shaped selection as shown below and fill this selection with white (ALT+BACKSPACE):
Step 4
Select the layer containing the white oval you just created in the layer panel and click (while holding CTRL!) on the thumbnail of the textlayer you created earlier. If you've done this right, you'll have a selection in the shape of your text.
Next, you have to press CTRL+SHIFT+I. With this shortcut, you'll inverse the selection. When you do this, you've selected everything EXCEPT the text:
Step 5
Press DELETE to remove all excess white:
Step 6
Give this layer an opacity of approximatly 33%:
Step 7
Select both the layer with the white overlay and the layer with the text and copy those layers. You can do this easily by selecting both layers with CTRL pressed (only in CS2) and dragging thos layers in the "new layer" icon in the bottom of your layer view. Merge those two copied layers in one layer by pressing CTRL+E. Flip this new layer vertically (in the menu: edit->transform->flip vertical) en drag this layer down to match the bottoms of the texts:
Give the mirrored text a gradient to let it blend in with the background (like done in the previous image). To do this, you have to apply a layer style to the mirrored text with this values:
Step 8
Add a yellow, star-shaped, shape:
Stap 9
Apply a layerstyle to this star with this values:
And a border:
And a drop shadow:
All together results in this:
Stap 10
At last, add a white text in the yellow star (make something up. BETA is very trendy to add to everything, so you can use that):
Make a new file with the dimension 600 x 450 pixels (CTRL+N) and type the text for your logo (preferably in a simple and clean font with rounded corners, like the helvetica Rounded wich i used):
Step 2
Double-click on the textlayer in the layerpanel to add a layerstyle to this type. Choose a "gradient overlay" with the following values:
That will result in this:
Step 3
After that, make a new layer. In this new layer, create an oval shaped selection as shown below and fill this selection with white (ALT+BACKSPACE):
Step 4
Select the layer containing the white oval you just created in the layer panel and click (while holding CTRL!) on the thumbnail of the textlayer you created earlier. If you've done this right, you'll have a selection in the shape of your text.
Next, you have to press CTRL+SHIFT+I. With this shortcut, you'll inverse the selection. When you do this, you've selected everything EXCEPT the text:
Step 5
Press DELETE to remove all excess white:
Step 6
Give this layer an opacity of approximatly 33%:
Step 7
Select both the layer with the white overlay and the layer with the text and copy those layers. You can do this easily by selecting both layers with CTRL pressed (only in CS2) and dragging thos layers in the "new layer" icon in the bottom of your layer view. Merge those two copied layers in one layer by pressing CTRL+E. Flip this new layer vertically (in the menu: edit->transform->flip vertical) en drag this layer down to match the bottoms of the texts:
Give the mirrored text a gradient to let it blend in with the background (like done in the previous image). To do this, you have to apply a layer style to the mirrored text with this values:
Step 8
Add a yellow, star-shaped, shape:
Stap 9
Apply a layerstyle to this star with this values:
And a border:
And a drop shadow:
All together results in this:
Stap 10
At last, add a white text in the yellow star (make something up. BETA is very trendy to add to everything, so you can use that):
You must have JavaScript enabled to use this form!
19 comments
New on Dreamdealer
Behind the scenes: CSS-only Clock
Intelligent image cropping with focal point
image-rendering: pixelated
Don't forget about inherit
Are you still using PX for font sizing?
Share this page
About the author
This post was writen by Johan van Tongeren, owner of this website. Johan is a professional frontend developer and an amateur petrolhead. This website is his personal playground which changes almost every day. More...
MONJUR HASAN
07 April 2013Very Nice
felix fredrick
14 December 2012this logo is fantastic
kbrahim
01 February 2012Thanks fot this very useful tutorial ,I duplicated the "text layer " & "white layer" I put each layer over the original layers and I give it a gaussian blur effect ,i got a great result ,thanks again.
kartik
14 November 2011i love oll indians
Steven
25 January 2011I made quite a nice logo by following this. I was using PS6 so Step 5 didn't work for me. I had to manually rasterize the image before deleting the background white (at least I think that's what I did).
Chris
15 December 2010Its a great toturials - thanks !
Tara
08 June 2010I love this! You make such an attractive effect very simple to achieve!
Sunshine
28 September 2009great tutorial
Cubame17
14 July 2009Very nice tutorial,thanks.
http://oprecio.com
Steve
25 January 2009This is a great tutorial. I am wondering if you can have a look at the logo on www.webtiful.com, and give me some suggestion on it via enquiry@webtiful.com. Very much appreciate it.