Unlimited Blog: Februari 2011

How to Create an Awesome logo

Introduction

Back when I began
my ventures on computers in 98 on AOL, I was one of the many mesmerized
by the world of AOL "proggies". I began to code my own with
VB and I remember one of the things I loved to focus on personally, was
the whole intro art. I saw a few, I can't remember the names now, but
their amazing fire effects with their lightening bolts blew my mind away.
Thus began my journey of design.

I've designed for
approximately 9 years now and I've learned a lot. It has also helped me make money online. From mainstream corporate
professional design, to fun gaming design, to adult design. The accumulative
experience of all these avenues have really helped further my abilities
when I confront each new project.

In this tutorial,
I will start and finish a logo while documenting the entire process. I
encourage you to open up photoshop and follow every step, it will help
you learn a lot more than just reading it.

I've used the technique
I will be teaching to develop a lot of logos. Here are just a few:

Adobe Photoshop

I will be using Adobe
Photoshop CS2 to design this logo. Many swear by illustrator, but I believe
for the purposes of making a tutorial, it'd be best to use photoshop as
it will cater to a wider audience. More people have used photoshop than
Illustrator. Besides, I've created 95% of all my logos in Photoshop, so
take what you will.

Let's Start
: The Project

A buddy of mine runs
a gaming website, bluelaguna.net, and he has wanted a new logo for some
time, so I agreed to do it for this tutorial. So let's take a look at
the current logo:

(Note: The image above isn't a logo, it's an entire header. The actual name
bluelaguna.net along with the slogan is the actual logo. I thought it
would be a good idea to show the entire header though to see how it reacts
with the overall design.)

One of the most important
things this logo lacks is readability. When a user visits a web site,
or visits any medium in which a logo is displayed, the first thing that
hits them should be the logo. And for some reason or another, the first
place us humans look is the upper left hand corner of a site. The current
logo is placed in the middle of the header and the small font and the
dark blue in "BLUE" is hard to read.

There's also nothing
exciting with this logo. For a logo to be effective, it has to "brand"
an image, it needs to stick in your head. All this logo is is times new
roman on caps lock.

Now that we've gone
over why their current logo is not suitable, let's begin with the actual
tutorial.

Gathering Information

It's important to
always know the specifics of what you or the client is looking for before
you start. Generally for most projects, I only need to ask the client
5 questions:

	1. Name of the service/product:	BlueLaguna.Net
	2. Any slogans to use?:	"Your #1 Source for RPG Media"
	3. Any specific color schemes in mind?:	Match the current design
	4. What are you trying to convey through the logo?:	Serious game-related site.
	5. Any other specifics:	You don't have to use the current header design. Get crackin'

Pretty straight forward,
now we know what we have to work with.

1. Setting up your Document in Photoshop

Once you have photoshop
open, go to File -> New.
Then specify the name of the logo, and a width of 600 and a height of 500.

Then click "OK" (Refer to the screenshot below).

After you
click "OK" Your setup should look like this:

(I'm on a 1600x1200 resolution.) For the menus on the
left, I have the layers view, and the Characters in view.)

2.
Experiment with Font Selections

As a starting point,
I always experiment with a font that I think will work well with the logo.
You have to develop an eye for what font will or will not work, with the
specifics of the project in mind. Since for bluelaguna we're trying to
focus on a serious yet gamer'ish feel, a serious font selection might
be the best bet. Having yourself an arsenal of fonts is very important.
I have several thousand myself.

Select the Text Tool on the
left menu: (As shown on the image to the right)

Adjust the
settings on the Text Properties at the top to match these settings:

In the character
window to the right, set AV to -60 as shown below: (This simply shortens the space between
each separate character, I like starting out with this setting,
I don't know why :)

Type "BLUE
LAGUNA" in the document space (First, be sure
that the background is white, you can use the fill tool for this.
And I've decided to go with all caps to start out with, since
all caps is generally deemed more serious).

With the
type tool selected, and layer 1 selected, select the font list
menu (where it says Arial):

You can do this next section in either three ways.

- Hit the "Down" arrow to change the font view of "BLUE
LAGUNA".

- Hit the Down Arrow of the Font List to see the list of available
fonts with a tiny preview of the font.

- Download a font viewing program.

I personally just use the first method, although I sometimes use
a font viewing program. Our goal here is to find fonts that might
work with the logo.

Once you
come across a font that looks like it could work, you should Duplicate the layer in the Layers Window to the right,
and then hide the previous layer (The layer
you right clicked and selected "Duplicate" from. This
way, you've saved that font selection (the hidden layer), and
you have a new layer to find more fonts from):

3.
Good and Bad Font Selections

Since our goal with
this particular logo is to be serious, we need serious looking fonts.
It simply takes time to develop an eye for what is serious and what isn't.

Here
are a few examples of bad font selections for this project:

The first logo
(the top), has a very laid back, fun / unprofessional tone to it.

The second logo
is simply "goofy" looking, and it's generally always bad
to select a logo that has an inherent shadow.

The third logo
is way too "ragged" with its frills all over the place,
definitely a no go.

Calligraphy
logos are generally outdated, especially ones with weird "drops"
coming from them.

The last logo
you can hardly even read. Remember, a logo should be easily readable.

Here
are a few examples of good
font selections for this project:

All of these
logos with the exception of 4 and 6 are pretty much similar.

#1, 2, 3 &
5 are all very simplistic and serious in appearance.

Logo 4 still
appears "serious" even though it is significantly different
from the rest. I chose this just in case I want to experiment with
piecing together fonts for the word "Blue" and "Laguna".

Logo 6 is a
very bold / italicized logo that says nothing but serious.

4.
Finalizing a Font Selection

Once you have some
possible font selections, each in their own layer, you further analyze
them and see which works. With logos that have more than one word, most
of the time it is good to separate the appearance of the words from each
other. Since this particular project has two words, "Blue" and
"Laguna", we're going to want to separate them by possibly choosing
two different fonts. You can also separate words from each other by keeping
the same font, but changing the color. So I'm going to experiment with
the 6 good font selections above.

This
is what I've come up with:

Although I didn't
use one of the 6 fonts I selected initially for the word "blue",
I simply used an unboldened version of "LAGUNA", which
keeps a consistent feel but also allows for separation of the two
words.

5.
Adding in a symbol

Sometimes logos work
well with only the use of fonts, but most times adding in a relevant symbol
of some sort will really make a logo stand out. When I say "symbol",
I mean any part of the logo which isn't actual text. So let's start with
the first font selection from above:

Now here is where
having an eye for design and experience is a really big help. We need
to begin contemplating ideas of what exactly we can add to this logo to
make it awesome. So, the first thing I do is just sit there and stare
at the font selection and think of what exactly the product/service/site
is all about. Well, BlueLaguna.Net is about gaming, more specifically
speaking, it's a site that offers RPG media (Role Playing Game) media.
Therefore, we have two things to work with: RPG and Media. What exactly
can we associate with both RPG and Media? Well, we don't necessarily have
to convey both RPG and Media through the logo (if you try to get too complex,
the logo will become cluttered). We can choose one or the other if we
want. I think it'd be most logical to focus on the whole RPG aspect, as
you can find media all over the place and it isn't an entirely unique
concept.

So let's do some research
on Role Playing Games. We need to figure out a symbol which can really
represent RPG. The current BlueLaguna.Net features a 3d female, perhaps
that has something to do with RPG? Well, let me do a search on images.google.com
for "RPG". The results turn back a few different female characters,
Hmm! The first few results, keeping in mind the 3d female character on
the current header of bluelaguna.net, seem to suggest that depicting a
female in the logo might be the best bet. It also seems that weaponry
/ mystical environments are associated with RPG as well.

Now that I know what
I can associate with RPG, I can come up with some possible ideas for a
symbol. I think maybe featuring a face of one of these RPG'ish females
with maybe a hint of mysticism.

The Pen Tool is your Friend

The most important
tool when it comes to logo design is the pen tool. If there is one tool
to thoroughly understand, it should be the pen tool. The pen tool allows
you to create any shape(s) you want, and maintain vector format (which
is very important if you ever want to size your logo up n' down (for professional
print or whatever.)

It's always good to
draw your logo by hand without copying over a picture (vector tracing),
but if you aren't very talented and don't have much experience, it might
be your only option. So for the sake of making the biggest impact on this
tutorial, I will teach you all an awesome technique for creating great
looking symbols for you logos.

Finding
a suitable picture

If you're going to
trace, I always suggest using a site like istockphoto.com to find the
image and pay for it. This way you won't be using copyrighted images to
trace over. Or taking your own picture to trace over. Unfortunately though,
istockphoto has nothing with RPG or "anime". So I just went
on images.google.com and found a picture which I think is suitable, here
it is:

When
I came across this picture, I got the idea that I can vector trace
over her face and hair to create what I want, and then integrate
it along with the font selection in some unique way.

So once you've
found the picture you want to trace (if not the same one), save
it to your hard drive, open it up in photoshop, CTRL-A, CTRL-C to
select it and copy it, and go back to your main logo document and
CTRL-V.

Now you've imported
this picture into your logo document. Once you've imported it, with
her layer selected, you can cut off the bottom half of her body.
(Select the first tool in the upper left corner of the tools menu,
Rectangular Marquee Tool), select the bottom half of her body and
hit the delete key. Your screen should look something like this
by now (You can hide the text layers behind it).

Vector
Tracing

Now select the magnifying
glass in the tools menu and select around the girl, it will look like
this zoomed up to about 400%:

Now
select the pen tool in the tools menu:

Make sure that the
foreground color (the black square at the bottom of the pic to the upper
right ---^) is the same dark blue color of the text we specified.

In the layers window
to the right, select the little round circular > icon on the upper
right corner of the window, and click on "Create New Layer"
in the window that comes up. Hit "OK" and then in the layers
window, with the new layer selected, change the Opacity to 0%. We do this
because once we start tracing over the image, we don't want the dark blue
color hiding the picture of the girl below.

And with the pen tool
selected, click a point somewhere on the outline of the hair (at the top),
and then click to make another point somewhere on the hairline where the
line will begin to form. You can hold down and "direction" the
angle of the line to create a certain type of curve. It takes awhile to
get the hang of, but it's very easy once you get the hang of it. After
plotting points of an entire section of hair, yours should look similar
to this: (Note: I've lightened the opacity of the girl to illustrate what
your lines should look like so far)

(opacity 100%)

It's not perfect,
but for now it's a good start.

Now I'm simply going
to continue creating more shapes, like the facial features. After 15-20
minutes or so of creating the different facial features and the face itself,
here is what I have come up with:

As
you can see, I specified a different color for the face (light blue).
And by now I have around 15 different layers. There's a separate
layer for the top portion of each eye, the bottom portion of each
eye, the middle, and the small glare. There's also a layer for the
face background, and the ear.

So let us continue
and add some shading...

After about 20
more minutes of shading, this is what I've come up with:

There are a
total of 3 different layers for the hair. It's somewhat of a tedious
process to do hair shading simply because there's a lot of strands
of hair! But you have to just condense them and get the general
idea of the shading and it will work out well.

Then I did some
light shading work on the face and the neck.

Now I consider
the actual draft of the symbol complete. Let's make our initial
text layer visible and see what we can do to integrate the symbol
with the text.

First, you will want
to select the very last to the very first vector layer that you created
(you'll have a couple dozen or more), hold down the shift so you can select
them all. Then in the layers window click the little circular round button
and select "New Group From Layers". This will put all of the
layers of the girl, into one easily manageable layer group. This way,
you can move around the one group and it will keep all of their positions
together so it won't break up her face.

Now this
actually doesn't look too bad, in and of itself. But the proportion of
the anime head is too big, in relation to BLUELAGUNA. So we will want
to scale down the head. Let's try moving it over to the left, and adding
the slogan + the ".net" text. This is what it looks like:

Now it
looks pretty damn good eh? The only other thing I did, was with the pen
tool, I added a white shape over the "B" in "BLUE"
so that the face doesn't collide with the B.

Unfortunately
I messed up and didn't design this over the dark blue'ish background that
the bluelaguna.net has. So I'm going to change the colors of the logo
to fit a background of an appropriate header for the site.

As you
can see, simply changing colors around can really change the look and
feel of a logo. I'd consider this logo a winner.

6.
Conclusion

I can
pretty much guarantee you that if you're a first time user of the pen
tool or photoshop for that matter, it won't turn out so pretty like mine
did. It takes some time and patience to really get the hang of it. It's
all about getting a little creative and working at it for awhile.

Unlimited Blog

Membuat Postingan menggunakan Windows Live Writer

How to Create an Awesome logo

Hantu di Warnet

Hantu Wanita di gedung Merdeka Bandung

Download Nightmare Side Ardan : Hantu Wanita bernyanyi

Download Nightmare Side Ardan Fm : Desa Misterius

archives

Sponsor

categories

archives