Professional Documents
Culture Documents
http://www.garysimon.net/logotutorial/
Order Logo(s) Logo Design How to Make Money Online Projects Website Design
Testimonials
Client Login
Contact
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:
Client Login Design Forum Free Video Tutorials How to design a logo My video logo tutorials
I've known Gary for about 7 years now I think, maybe longer. He is one of the best designers I know of. Jon @ WickedFire.com Wow..this guy kicks ass. Seriously. I gave him complete creative control over the design with just a little input and it came out better than I could have imagined. Jason I ordered two logos from Gary and he had them done the same day and they looked amazing. If you are considering a logo design, have him do it. Nalbach
Adobe Photoshop
1 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.
(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: 2. Any slogans to use?: 3. Any specific color schemes in mind?: 4. What are you trying to convey through the logo?: 5. Any other specifics: BlueLaguna.Net "Your #1 Source for RPG Media" Match the current design Serious game-related site. You don't have to use the current header design. Get crackin'
2 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.)
3 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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
4 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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):
5 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.
6 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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
7 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.
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
8 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
Now select the magnifying glass in the tools menu and select around the girl, it will look like this zoomed up to about 400%:
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
9 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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
10 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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:
11 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.
12 of 13
9/23/2010 2:47 PM
http://www.garysimon.net/logotutorial/
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.
-------------------------------------------------------------------------------------------------------------
13 of 13
9/23/2010 2:47 PM