Sie sind auf Seite 1von 25

WEB 2.

0 Logo Design Tutorial


by Logo Samurai.com
There are literally dozens of different ways to design a Web 2.0 logo, the most time
consuming methods will definetely bring you better results but there are also extremely
simple ways to create a good looking logo within a few minutes.
Today we are going to show you a very basic tutorial that if used in the right way can give
your logo a very nice glossy look.
f you like this tutorial but would like a professional to design your logo check out
!"#"$%&'(%.com our logos are very professional and very affordable, visit us for
cheap logo design.
Today you will learn how to create this)
Step1
*or this tutorial, we will be using +hotoshop. %lthough there are other softwares you could
use to design your logo +hotoshop is surely the most popular one and that,s whay we are
going to use it.
-. "pen your +hotoshop / any version of +hotoshop is "0 1, click the tab
FILE > EW
&ake sure to select !I"ELS as your
size scale.
%lso remember to set the
WIDT# $ %00
and the
#EI&#T $ '00
2ow 3ust hit the () buttoon.
2ow that you have your 400 x 500 window created let,s pick our text color. n order to do
this simply click the $6'%(7 like the picture below shows.
8hoose the color 9!%80 / don,t worry, you will be able to change the color later1.
"nce you picked your color it,s time to write your text, for this tutorial we will be using the
word : $%&'(% : / because of !ogo $amurai of course ;+ 1 but you can use whatever
you want.
To $tart typing your text 3ust click the : T : in the tool bar like the picture below shows.
"nce your text is ready go ahead and click the tab L*+E, > ,*STE,I-E > T+!E.
This step will change your text from it,s vector format to a pixel format, which is easier to
work with in +hotoshop.
2ow that your text is written and (%$T7(<7= go ahead and duplicate your layer.
To duplicate your layer right click your text,s layer and choose D.!LI/*TE L*+E,.
2ow you have this)
n case you can,t find your !%>7($ menu don,t freak out? @ust chill and click the tab
WID(W and select L*+E,S. 8heck out the picture below)
"0, this is the best part, now you will your text will to start to look like a Web 2.0 logo.
$elect the layer that contains your text / the layer without the :copy: next to it 1 , and then
click the tabs EDIT > Stro0e.
>ou will then see a little window like the one we,re showing below)
ps) &ake sure to keep the same configurations as the image below, the same width, color
and location / outside 1 else.
"nce you hit the "0 button your text will look like this)
2ow the magic begins, select the !%>7( where your text with a red outline is located and
double.click it.
>ou will see a menu with many options, see the image below)
2ow you will double.click that 9!%80 to WAT7 gradient in order to choose your own
colors.
n order to get a nice gradient effect you need to select two tones of the same color, for
example, if want my text to be outlined by a nice orange gradient must select a =%(0
9!'7 and then a !#AT 9!'7 / you may do this with the colors you prefer 1
To selece the dark orange you must double.click the black sBuare and choose a dark blue.
To select the light orange you must double.click the white sBuare and choose a light blue.
>ou text will look like this)
=oesn,t look that good huhC (elax, now choose the other layer, that one with a :copy:
written next to it.
2ow double.click that layer to reveal the menu below)
"nce you select the #(%=72T "D7(!%> you will be able to choose two different
colors, 3ust like we did with the dark blue and the light blue.
This time you won,t select anything too colorful, your first color must be !#AT #(%>
and the second one WAT7)
>ou text will look like this)
t looks much better than before but we still have some effects to add.
2ow click and hold the $6'%(7 located at the tool bar and select the 7!!+$7 T""!)
%fter you selected the 7llipse Tool draw an ellipse right over your current logo. f your
ellipse has any color other than white 3ust click the 8"!"( 9'TT"2 at the top of the
screen and change the color to white)
%fter you change the color of your ellipse to WAT7 your logo will look like this)
n order to get the effect we want you must select the !%>7( where the 7!!+$7 is
located and decrease its opacity to 50E.
t,s pretty simple, check this out)
We already have something good here, let,s 3ust get rid of all these layers that are on the
way. 8lick the tab !%>7( F *!%TT72 &%#7, this will delete all the unnecessary things
and keep only what realy matters.
Aere,s the logo)
!ooks pretty good huhC t can get better, if you are 3ust a regular person you may use this
text this way but...if you are a $%&'(% , you,ll probably want to take the next step.
Step2
!et,s add a reflection on the ground.
>ou will select the (78T%2#'!%( &%(6'77 T""! and slect all your logo. "nce this
is done you will press /trl 1 / / to copy your logo 1 and then /trl 1 2 / to paste it in the
same place 1.
"k, now that you,ve already copied and pasted your logo you have to press 8trl G T , to be
able to transform your logo.
"nce you see a rectangle around your logo try to deform it to make it look like this)
What we will do now is fade this layer a little bit in order to make it look like a reflection.
To do this you must select the deformed logo,s layer and double click, we,ve done this
before, again select the #(%=72T "D7(!%>)
The only difference is that this time you will select the second $6'%(7 at the top of the
window instead of picking colors)

When you select that sBuare you will see something like this)
>ou will pick those two little sBuares at the bottom of the image and turn them to WAT7.
Aere,s your logo)
f you want to enhance the looks of this refelction you may decrease the opacity of the
reflection,s layer.
The best result will be reached at H0E of opacity)
%nd here,s the final logo)
f you have a website, a company, a blog or even 3ust a &y$pace page visit
!"#" $%&'(% to check out our logos and other services.
We have designed thousands of logos during the past months and we would love to design
your logo as well.
"ur prices are definetely lower than those from other websites on the internet and our
designs....well, take a look at them yourself and let us know what you think ;1
These are 3ust a few of our logos, to see more of our work or to purchase a cheap logo
design make sure to visit !"#" $%&'(%.
>ou may also send us an e.mail / logosamurai3ya4oo.com 1