Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Drawing Techniques How to Create a web 2.0 Style Logo
rss

How to Create a web 2.0 Style Logo

Author: Johan van Tongeren More by this author


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):

Click to enlarge
Click to enlarge

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:

image 2

That will result in this:

Click to enlarge
Click to enlarge

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):

Click to enlarge
Click to enlarge

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:

Click to enlarge
Click to enlarge

Step 5

Press delete to remove all excess white:

Click to enlarge
Click to enlarge

Step 6

Give this layer an opacity of approximatly 33%:

Click to enlarge
Click to enlarge

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:

Click to enlarge
Click to enlarge

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:

image 9

Step 8

Add a yellow, star-shaped, shape:

Click to enlarge
Click to enlarge

Stap 9

Apply a layerstyle to this star with this values:

image 11

And a border:

image 12

And a drop shadow:

image 13

All together results in this:

Click to enlarge
Click to enlarge

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):

How to Create a web 2.0 Style Logo Tutorial: Final Result (Click to enlarge)
Click to enlarge


About the Author:

Johan van Tongeren is a 25-year webdesign professional from the Netherlands. He has more than 5 years experience with webdesign, php programming and usability. His website, www.dreamdealer.nl, has a collection of tutorials that he writes in his free time. Feel free to visit www.dreamdealer.nl and request a tutorial on any subject. Requests can be send to info@dreamdealer.nl.


Author's URL: www.dreamdealer.nl

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "How to Create a web 2.0 Style Logo"