Six Things to Keep in Mind when Designing a Logo

I thought this was worth re-posting. It's an article from iStockPhotography...

So you fancy yourself a Paul Rand or Saul Bass and want to design some logos for iStock? Great! You've come to the right place! Logo design needs to begin with a great idea or concept, backed up with some jedi-like vector skills to bring it to life. In this article you'll find some design and technical tips to get you started and keep you on the right track. I've included some important things for you to think about as you are creating, as well as some reminders on how to keep your files technically sound for submission to avoid the dreaded "Subpar" rejection.

Thought and planning are a huge part of Logo design: preparation is key. We've prepared a set of considerations here for any illustrators ready to plunge into Logos. Keep the following in mind during your planning and throughout the process.

Please note: The 'good' versions of logo design seen below were each designed by some of our amazing logo contributors. They'd never dream of submitting anything like the 'bad' files you see here, which we created for illustrative purposes only!

It All Starts With a Great Idea

Start by selecting a Business Category or something that inspires you. Try to envision who the client will be or what kind of company or business may want to buy your logo. Creativity sometimes strikes when you combine a couple of ideas. For example, you may decide on creating a logo for a security company. For this business category you probably would want to convey trust, strength and reliability. This can be accomplished by choosing appropriate subject matter and using style, colors, weight, balance and shapes. The idea could be a bear with strong angular or masculine shapes and bold, dark colors combined with a sturdy font to finish it off.

By clearly visualizing who your client is and with some forethought, research and planning, the end result should be an appropriate symbol that immediately identifies the company, and clearly communicates the product or service. This is absolutely key to a successful logo design and should always be foremost in your mind while conceptualizing your design.

When you have your concept, start sketching it out to quickly come up with ways you can execute the idea. Starting in black and white can help ensure that your design is clear, legible and reproducible without any distracting features. Adding great color, style characteristics, or subtle effects will help make your design unique to stand out amongst the competition. Add some type to bring some context to your design and choose a font that compliments the symbol and communicates clearly. To ensure a successful logo remember to keep your design, Simple, Memorable, Timeless, Versatile, and Appropriate.

Read more on how to sketch out your ideas here

Reproducibility

It's extremely important that Logos are created with versatility in mind. As the main component of a company's corporate identity, the logo acts as the cornerstone of their visual brand. This means it must be reproducible using a huge variety of formats and processes while maintaining the integrity of the logo as it is utilized. Logos may be printed on anything like small business cards and pens to extremely large billboards and signage. They need to work well using traditional print methods like offset lithography and screen printing for T-Shirts, as well as other things the buyer may want like rubber stamps, stickers and embroidered golf shirts. Of course, it must also look fabulous on screen for use on websites and other pixel based media. It's a good idea to test your logo file at a monitor resolution of 72ppi at an inch or so wide to see what issues may pop up.

Here are some things to watch out for to keep your design from ending up on top of the reject pile:

— Consider carefully how much detail to add to your logo design. Lots of small shapes and skinny lines should be avoided as they could disappear or print very broken and rough when reduced to small sizes.

— The white spaces, or negative spaces, between shapes should be consistent and not too close together or they may fill in causing a loss in the definition of objects.

— Gradients should be used selectively, creatively, and only when they enhance the design. At one end, if tints are too light, they can disappear when printed and only show up as white. Conversely, dark tints can fill in to solids causing the logo to look muddy and unclear which can happen easily when printed in a newspaper. Also, gradients may not work with some reproduction processes that can not use continuous tone.

— It's easy to get carried away with our design by adding tons of fun and interesting things but the bottom line is it has to reproduce really, really well. In the end, ask yourself, "Does this help or hinder my design?" If the logo communicates the intended message just as well (or better) without it, take it out.

The excessive use of detail in this logo will seriously compromise its ability to be reproduced. Fine details like the sharp pointed tail and thin lines will disappear when printed at smaller sizes and the small white shapes will fill in losing their definition. Outlined type with extreme gradients will print poorly as well, making the type hard to read at any size. On the right, the elephant is drawn with bold shapes, leaving ample white space in between for definition. Just the right amount of detail is used to help convey the idea and the solid flat colors used will ensure that this design will reproduce great with pretty well any process. I wouldn't recommend using multiple colors like this in the type all the time but in this case it works to make it fun and exciting.

In these examples the differences are noticeable mostly through the addition of a heavy black drop shadow and the application of gradients to every shape. Gradients can work when used sparingly but in this case they are far too severe, and would look dreadful at a small size. The tiny hairline strokes on all the shapes will also be problematic especially when this logo is printed as a 4 color process job. The example on the right is clean, clear, and looks great at any size.

Read more on printing methods here
... and here

Reversals. What the heck are these?

Nope, we don't want you to create a mirrored image of your design and it is not necessarily a negative. A Reversal Logo is simply a version of your file that is created to ensure it looks great when used on black or dark colored backgrounds. Logos with dark or mid-tone level colours may not be visible so another version is needed. Again, its all about versatility so the buyer can use your logo design anywhere they want. A common method of doing this is by changing all of your colors to white. It doesn't have to be all white, as light or bright colors may be used, but by using white, you are keeping it neutral and making it usable on a large spectrum of dark colours. It also gives the client an added bonus of having a 1 color version of the logo if you chose to not create a solid Black Version or created a Black Version with tints of grey. Solid, 1 color logos are great to use as watermarks or as a reference for a die-cut or foil stamp.

Please do NOT place any kind of colored box behind your design. "But no one will see my design!", you say with despair! Yes, it looks invisible as it is now an all white logo in an all white document. Don't worry, we've thought of that! When you upload your white PNG file (with transparent background) it will show up on a nice black background conveniently supplied by iStock so your wonderful creation will be available for all to see.

The concept of a 'reversed' logo design can be confusing if you've never designed a logo before. In the example on the left, there is a black box placed in behind the design. While it may look nice on screen, this could look awful if the logo was placed on top of a photograph or different colored background. The logo itself has also been 'reversed' by mirroring the design! The example on the right shows an all-white logo selected in Illustrator: No background necessary. This design is ready to place onto any color the client wishes.

Color Palette

Never underestimate the power of color! There is so much emotion inherent in color and its psychological power can be extremely persuasive. Warm, cool, neutral, vivid, complimentary, analogous, soft, light, dark, bright, saturated — all of these color types can be used effectively to enhance our intended message. How we combine these colors is also equally important as they can create contrast, balance, and weight to help convey our idea.

Have fun choosing colors for your design and experiment with many different options and combinations. Color selections need to be appropriate for the subject matter. For example, it wouldn't be a good choice to use red for a dentist office, that's scary! Red is alarming and can symbolize blood. Instead, choose professional, calming colors. Soft blues or browns may be more appropriate.

Full color logos, or designs that use a large range of CYMK colors can look really great, but can also be very expensive or difficult to reproduce. Consider keeping your design to a couple of colors to keep costs down, and use tints of those colors when more levels are needed. Smaller color palettes can also work to keep logos from looking too busy and cluttered. Be inventive with your color choices and step out of the Illustrator default color swatch trap, there’s a whole world of color to explore!

The sample on the left is using far too many colors than is necessary, making it very busy and more difficult to define the individual objects. The use of fluorescent and uncomplimentary colors makes the overall composition unappealing and less attractive. Using default colors straight from the swatch palette and plain black for the type make the design much less sophisticated than it could be. The sample on the right utilizes a beautiful main palette of custom mixed complimentary colors of orange, green and brown. They all work together in harmony to bring the cute kitties to life while adding a warm and cozy feeling. The use of dark brown for the type keeps it complimentary to the graphic and maintains a good contrast necessary for legibility. Using the same orange that's in the kitties for the "petcare" type offers additional visual interest and helps separate it from the main type. This helps give the eye a break and enhances legibility as well.

Read more on color pallettes here
... and here

Simple is good right?

That's a yes and no answer. YES, logo designs should be simple to effectively communicate an idea and to be easily reproducible. NO, they shouldn't be limited to simplistic stars, circles, ovals, squares and rectangles. It's important to keep logo graphics relatively simple to make them useable in many applications and print processes, but not at the expense of style! Chances are if you create something too simple it may look like like hundreds of other icons out there already. Not good! A company's logo has to work to differentiate them from their competition in order to be successful, and they don't want to buy logos that they could make themselves using Illustrators Shape Tool.

Think about what you can do to add you own style or flair to make your design unique. When designing simple logos it's important to find ways of adding subtle but highly effective visual interest. You can do this by giving equal consideration to both positive and negative space and the careful placement of each shape. Use different perspectives can add tons of visual interest putting a unique spin on your design. A little twist, shape or tapered line here and there can simulate motion or other effects making the design much more dynamic than it would be otherwise. Simply styled directional devices (shapes that lead the eye) can add real excitement. Get in there with the Pen Tool and add some personality!

The left example is very simple in its execution, using only basic square and circle shapes. The placement of all of the objects has left the overall composition looking static and boring while the plain black type is under considered, effectively ensuring that this logo generates about as much excitement as flossing your teeth. The example on the right however, has cleverly used positive and negative space to create the plate. The entire logo is comprised of only four shapes by creating two simple arcs to help define the plate and by letting the cutlery bleed off the bottom edge. The combination of these design choices and using Tragan for the font, give it a simple, classic, stylish feel appropriate for this audience.

The logo on the left is plain, and was created using simple squares, rectangles and triangles. It took literally 10 seconds to draw, so to jazz it up a little we added a snazzy orange outline (which took an additional 2 seconds to apply). The problem is that there must be thousands of simple symbols like this out there. The logo on the right, on the other hand, is also very simple but the designer has kicked things up a notch by incorporating a clever magnifying glass and using reversed gaps in between shapes to create a much more interesting visual composition.

Choosing a Typeface

OK, you've got your award winning logo design in the bag and now its time to add some text and a name. This will help add context to your design and give the buyer a clear idea of how it may be used (like it doesn't already do that!). A quick reminder here to remember to research any name you would like to use to help avoid any potential copyright or trademark issues. You must make sure it is not currently in use by any other company and a quick search on the internet should help you along the way. A safer bet is to stick to generic terms like, Construction Contractor, Attorney Logo, Retail Business, etc. It's not necessary to add a tagline or brand statement but if you do, make sure you have done it in such a way that it works well with the logo and any other logotype and that it is clearly legible without being too small to read.

Next step, read the font licensing agreement for your chosen typeface. Yes, these can be long and boring but it's important to make sure you have the rights to use this font in a manner that is compatible with the sale of your logo to iStock clients. Specifically look for the Usage Agreement section that states it allowable for Commercial Use in this way. Just because your font was 'Free' does NOT mean its OK for Commercial use! Also, 'Free' does not necessarily mean 'good'. Use quality fonts to add to your great logo design to keep the whole package looking good.

Choose a font that is appropriate and looks great alongside your logo. This can mean choosing a font that has complimentary shapes to match the style of your design or match the mood of the idea. A very professional business such as an attorneys office, would require a more formal looking font perhaps using caps or small caps. A font for a children's clothing store could use a more casual, friendly font using lowercase letters. Try not to choose fonts that are too funky or illustrative. Yeah, they're fun but they can seriously compromise the legibility of your logo and are really more for use in headlines, posters and other media.

Read more on font selection here
...and typography in general here

Keep your type simply colored as harsh gradients, drop shadows and skinny outlines can create issues in reproduction making it very hard to read. Find a good spot to place your text alongside your logo and choose a size that is appropriate. Usually this means aligning it to some part of the logo to keep things looking neat and tidy. Remember to not get to close to the symbol, (give it some breathing room!) and find a size that strikes a nice balance. Again, think about how the logo will be used. Text that is too small in relation to the symbol will be too small to read when the logo is reduced to fit on a business card. A good habit is to test print your logo at about 1 to 1.5 inches wide and see what issues pop up.

Last step, include the name of ALL fonts used in the "Font used" field in step 4 of the upload process. The font field will only appear if you've clicked on 'YES' for the last question on Step 3 of the upload process ("This logo contains a font or typeface that I did not create"). This is because some people don't use fonts in their submissions – when they click 'No', they won't have to enter the font name.

Hard to read? It sure is! Skinny outlines, drop shadows and other effects used on type all work against keeping it clear and legible. The "Tiederhouse" text is too tightly kerned while the "Attorney ay law" type has far too much letter spacing. The type is placed too close to the graphic without enough breathing room and the tagline is much too small in proportion. The "Tiederhouse" text uses the font "Hobo" which is a 70's style font not at all appropriate for a professional law office. The sample on the right uses a much more professional and appropriate looking serif font with spacing and shapes that seem to mimic the construction of the symbol. It's clear, easy to read and is just the right amount of distance from the torch device. Making the line between the text gold colored would have been a nice touch.

We hope these tips give you something to keep in mind as you design your next logo submissions. Happy designing!

Image credits

'Grenade' sketches by 72ppi
'Circus' logo by DistinctiveDesign
'Shrimp' logo by samoyloff
'Love Coffee' logo by samoyloff
'Cat Twins' logo by o-che
'Paper Document Company' logo by filo
'Dining Room' logo by mediaploy
'Real Estate Search' logo by filo
'Torch' logo by lagomar4
'Salmon' logo by samoyloff
Get out of your comfort zone by alvinburrows
Printing Press by Franck-Boston
Splatter by bruce7

How to make a Logo

So I'm continuing to learn about visual design and especially logo design so that I can make the logo for our web site. C is also coming up with stuff on his own and in an attempt to have us both learn more about this I googled logo designs tutorials and here's what I came up with... It's pretty good :) thanks Gary Simon...


- - - - - - - - - - - >

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.