Introduction
Logo design is a hard thing to make a tutorial about. There are certainly some broad guidelines that I can write about but the actual process is too creative to be broken down into easy steps. It's really more of just fiddling around with different pieces and possibilities until you spot something that works.A case study would be more useful. Those guidelines are still all in here but this is more to do with how it works than being a step-by-step recipe of what to do.
The logo I've chosen is my highest profile one - at least as far as the web community is concerned. In 2005, the web's biggest webcomic collective, called Keenspace, decided to change it's identity to Comic Genesis and placed an open call on it's own forums for a new logo and website to suit. Being between jobs at the time and fancying a bit of graphic design, I pitched with my own.
This article uses a number of commercial logos to make points. The logos featured belong to Sega, Microsoft, Apple Computers and Nike. The logos are, of course, all trademarked to their respective companies. If they're not, then I suspect someone in their legal departments is in trouble.
Collecting Data
The first thing you should do when creating a logo is collect information. What is Comic Genesis? What do they do? If you know about the company, what they do and what they represent - or want to represent, at least - then you can make a logo that suits them. My first professional logo design was for an Australian software company. If they made games, the logo would have to be cool, hi tech and dynamic. As it happened, they specialised in accounting and financial programs for farmers which gives us a whole other direction to go in.What does the company want to convey with this logo? Do they want to be seen as fun? Cool? Serious? They might not know themselves but you can get a good idea of what would work from what they do. Do they have any preferences on colours? Font? Do they have a tagline or slogan? Where is the logo going to be used?
Okay, let's answer some of these.
Comic Genesis is a free hosting service for webcomics and they'll host anything as long as it doesn't breach someone's copyright. Each hosted webcomic gets it's own subdomain (such as "thewind.comicgenesis.com") and the comic creator creates his or own website there. There is no requirement to match any particular style with their webpages or even include the Comic Genesis logo. Comic Genesis also has no offices, no shop, no stationery or anything else - it's pretty much just the website and the logo the first step in redesigning it. (We therefore need to keep in mind that, in designing the logo, we are also starting to design the website.)
There is no overall feel to Comic Genesis as a whole. The comics it hosts can be any genre, style or quality. The logo would therefore have a hard time representing Comic Genesis no matter what you do. Science fiction? But there are fantasy comics. Humour? But there are serious graphic novels as well. Cartoons? What about the photorealstic comics? Comic Genesis is just too diverse in every area to be represented by a logo. Again, then, the logo doesn't have much to do beyond the main website.
Well, if the logo is nothing more than an ornament on a website, what does the website have to do?
Not much, as it happens. It allows you sign up to make your own comic or search through the many thousands already there to find something to read. However, most people will find the comics from link pages, adverts and friends rather than through the home page of the people who host it. I'm pretty sure you didn't find this tutorial by going to my ISP's website.
That's an annoyingly thorough list of negatives I just put you through and at the end here, we seem to have no actual purpose for the website or it's attendant logo at all.
Not quite.
Without any other purpose, the website becomes an advertisment - a cover for a book, if you like. It's there simply to look impressive, to draw you further in and hopefully get you to click on some interesting comics. It's a movie poster, although it happens to be an interactive one.
That we can work with. The current trend in web logos is to make them rounded, bright, glossy, attractive and appealing (They always put me in mind of Lego, in fact). They do look nice but with our (fairly shallow) purpose in mind, that style wasn't at all what was needed. Both the logo and the website need to be eye-catching, dynamic, cool, stylish and entirely the centre of attention.
The other thing worth doing during this thinking and planning phase is look through other people's logos - on the web or through the yellow pages or where ever. You can't copy them, obviously, but there are little ideas you can pluck out and inspirations that might spring out at you. At the very least, looking at logos while considering your own will leave your mind open to learn things from what was done with them.
Symbols
I had a real problem with the Comic Genesis logo, and it was that there weren't any hooks - no starting places from which I could get doodling. For example, remember that software company I mentioned just above? Since they do financial software for farmers, I can start playing around with symbols for farming or technology, and there are lots. Farmer Symbols
| Technology Symbols
|
Comic Symbols
- Speech bubble
- Scott McCloud's blinking eye
- Er...
Ick, no. It's far too overused for me to be happy with it. Keenspot uses it, as does Blambot, buzzComix, Talk About Comics, Top Webcomics, Comics.com, Speech Bubble Media... The list goes on. It's also a bit too obvious for my tastes. No.
Nevertheless, I did create one logo using the speech bubble motif and it didn't turn out too badly. I didn't post it as a possibility, though. I was just doodling in the hope that something interesting would happen and wasn't really seriously considering the speech bubble as a goer.
There is one last symbol that can work with any logo, and that is the initials of the name. My personal logo used on the front page of this site uses the letters J and F (actually J and an upside-down J).However, although logos made from initials can be clever and interesting if done right, they don't have much meaning by themselves. JF? What's that? The Johannesburg Farmers collective? The Jung and Freud fan club? A logo made from initials still needs a little something to point to what it's about and what it's for. That's why I hung my hat on mine.
Again, the initials were something I toyed with but I had a strong preference for a pure symbol here because I happen to like Comic Genesis and because a pure symbol is the most powerful type of logo.
Here, I'll show you what I mean...
They also allow the designer the most free reign, letting them create any sort of symbol they feel is appropriate without having to work around the initials or the company name. Simple and uncomplicated symbols is generally the way to go. Simple logos can be understood at a glance and carry more meaning and weight because of it as well as being more memorable. Microsoft Window's logo is the most complex of the three above (and used to be more so) but even that is pretty basic.
But, as I said, there just isn't much scope for symbols in comics. Hm.
Fonts
So, being a little stuck, I spent the first couple of days just generally being involved, critiquing other logos,suggesting ideas, ways to go, lamenting that blasted speech bubble and so on. However, one thing I did do, is fiddle around with fonts.Most logos involve the name of the company somewhere. Once a symbol becomes powerful enough, you can do away with it as Apple and Nike have done but, for the most part, the name is important to have. Some logos, of course, are just the text, such as Microsoft's. These are useful when there are no good symbols to use or when you want to create a logo quickly and easily. After all, to make one, all you need is a good collection of fonts and a discerning eye.
You should always try to lend some symbolism to the font where possible, particularly if the text has to stand alone. For example, the logo for my webcomic - a science fiction story about a female "gentleman" theif who runs at world record breaking speeds - is the title angled for speed and coloured with blues and glows to give a futuristic feel. Here's it's banner...
Actually finding an appropriate font is quite easy in Photoshop. You simply have to type out your text, click on the font name box at the top of the screen and then use the cursor keys to cycle through the available fonts.
There are three broad categories of fonts you need to be aware of, each with a different feel. Firstly, serif fonts. Serifs are those little tags that hang on the end of old fashioned fonts like Times New Roman. Serif fonts usually feel, well, old fashioned like I said, but also refined. Lawyers, doctors, plaques and certificates generally use serif fonts for this reason, as do newspapers and most things to do with fantasy or history. Serif fonts are rarely awfully dynamic looking.
Sans-serif fonts are fonts without those little tags, like arial. These look more modern, hi-tech, crisp and dynamic. They're used for the text on most websites and for anything to do with computers, science and science fiction
Finally, there are script fonts - running-writing if you like. They're not often used but when they are it is for their old-fashioned and elegant feel, such as on invitations and the covers of Jane Austin novels.
Back to Comic Genesis. In spite of the Biblical version, the word "genesis" generally carries a scientific or even a science fiction feel. Comic readers are also of the age group that would generally be attracted by things which are "cool" so I was definitely in the market for sans-serif fonts. I also, I have to confess, wanted to out-do Keenspot's logo, Comic Genesis's parent company. It had to be cooler than theirs.
I found about five sans-serif fonts I like and picked the one I thought was best before starting to play around with positioning. I already had the tag line, courtesy of Tangent, so that was being shunted around as well. I generally find that when playing around with pieces like this, they'll "click" into place just like a jigsaw puzzle piece. You'll just be shunting things around randomly and... There! That's perfect! Just needs a little tweak... Yes.
Now... All I needed was a logo.
Thinking on Paper
At one point, I got into a conversation with another logo designer on the forum about her logo. It was a planet with a ring, which to my mind is a universal icon for space. Yet, it wasn't Keenspace anymore, it was Comic Genesis.Discussions are how I get my own thoughts straight and are invaluable to me. Getting thoughts in writing - whether through discussions on forums, tutorials like this one, an essay or simply a personal rant - is a very effective way of both refining those thoughts and building on them. It guides your thinking and keeps it on the path. It also stops your mind from going in circles, as once something is on the paper your mind knows it's recorded and it doesn't need to remind itself of it later.
And it's useful in graphic design as well. I've already mentioned that you should collect data on your subject and I've made lists of possible symbols that could be used. Both of these are good basic examples. Simply doodling little logo ideas on paper is yet another.
Well, in this case I had a lovely discussion on a forum and they do tend to work best for me. It was in trying to explain my thoughts about the planet that I became aware of what I thought was wrong with it and what would therefore be right. The other designer thought the planet motif worked and argued her point well but I could only see it as a symbol for space and still felt it wasn't right. But as the discussion went on, I found myself giving examples of similar symbols that could work and it became clear to me that my hook should not be comics at all, but genesis. I just needed a symbol that I thought would be appropriate, something linked to God's creation. A shooting star, a rainbow, a sunrise... Even a planet would work if it was suitably green with oceans. None of those really sparked for me, though. I wanted something with more meaning, something that meant beginnings, potential and power. Something fundamental and basic - and iconic. Something I could play with. An atom was perfect.
So, naturally, I thought of a sun instead.
Special Effects
I had a gradient for a rather lovely non-lensflare sun that I created for the Australian software company's logo. I loaded it and played around but it didn't work because... Well...Logos must always work without colour or any special effects. You can certainly have your logo glowing prettily on the website but the logo must still work if you strip that glow away. This is mostly because it might some day need to go on a letter head but also because a logo that relies that heavily on the effects, that it isn't even the same symbol without them, is basically all style and no substance.
Microsoft is a company who learnt this the hard way. Or maybe they didn't. Maybe they changed their logo for unrelated reasons. At any rate, it used to be this...
Well, if you remove the special effect from my sun gradient it becomes a circle. Amazingly dull. I did try a few things but I didn't feel right using a classic spiky sun because the software company had that. Anyway, it's not an awfully good symbol for genesis, really. It means too many other things as well. I needed something better.
Fiddle, Fiddle, Fiddle
I played with my sun a little and eventually started seeing it as a nucleus of an atom. Rings... I needed rings...I made a quick one out of the ellipse tool in Photoshop, by firstly drawing an ellipse and then slicing out a smaller ellipse from the centre to make it a ring. I copied it and stuck them on the nucleus for electron rings. Then I spent some more time playing around with it, just doodling, rotating the rings to different angles, moving things around to see if they didn't suddenly click into place. Here's one version I saved for prosperity. The colours on the nucleus and rings don't match but it was a work in progress.
I had cut out the backs of the rings so that they appeared to go "behind" my sun-slash-nucleus. Then I decided I needed to do something with the rings that I might not be able to undo - I forget what - so I made a copy of one of them and moved it to one side... Hey, wait a minute...
In a way, I was lucky. Both the rings were the right way around at the time for their respective letters. Without that, the inspiration probably wouldn't have struck. On the other hand, I was moving things around all the time so it probably would have struck eventually anyway. The key, as I said earlier, to simply to fiddle - or doodle, if you happen to be working on paper - and keep and open mind as you do so, watching out for anything that might spark some inspiration.
At any rate, the rest took me about ten minutes, most of which was getting the angles of both initials just right. Then I just had to move the words around the logo until they clicked into place as well - on the right, as it happens - and it was done. Not only had all the pieces clicked for me, but so had the design itself. I was pretty sure I could play around with it and other ideas for another week and I'd get nothing I'd think was better.
Colour
A good logo will, as I've said, work without special effects or colour. The less effects and colour you have, the simpler the logo becomes, and the simpler the logo, the more versatile it is. For example, if the logo is simple and iconic enough, then the lack of colour frees you up to play around with different colours. Apple's logo is a good example. It used to be a rainbow-striped apple but they've since abandoned the rainbow and just left the fruit. Now freed of a set colour scheme, they use it with any colour and special effects they like, changing it around to suit different needs and circumstances. The logo is recognisable enough from the shape alone.
The first version of the "finished" logo pictured above had a yellow atom, thanks to the sun I started with, but the text was glowing blue. I tend to like using two or sometimes three colours in designs because I think it looks better to have a few colours that work together rather than just one colour in a few shades. However, it's also slightly harder because you have to find some colours that suit each other. In fact, two colours is pretty easy but three can be a problem. More than three is generally not a good idea but it can be done.
Anyway, after posting the two colour version, I very quickly realised I'd messed up. With two different glowing colours, the logo looked Christmassy and the blue colour was entirely the wrong symbolism. A blue glow represents electricity pretty exclusively. A red glow, in turn, is fire, green glows are generally aliens... The yellow of the logo seemed to be the only option for the text as well. Yellow was the sun - the largest nuclear furnace in our immediate vicinity. It had atomic power written all over it.
Well, no one had commented yet (which afforded me a little squiggle of paranoia) so I quickly changed it and re-uploaded a purely yellow version - albeit with a wine red bar as a background that I thought looked nice.
It didn't occurr to me until much later that, in spite of deciding otherwise early on, I'd ended up with a logo made out of the initials.
Ah, irony.
Recreating the Logo
Doodling is a great way to create a logo, but it often leaves you with something that's a little rough and almost certainly low resolution. For a proper logo, you need either a very, very large version or, for preference, a vector version. A vector format picture allows you to scale an image up or down without it ever becoming blocky or blurred. The key to the vector format is the pen tool, which can be found in Photoshop but I prefer using Illustrator since that program is made for vector artwork. If you can't get the hang of the pen tool, you should recreate the logo in at least 600dpi and 2400 would be better if you have the memory to slog through doing that (high resolution is slow).So, after I created the logo, I had to recreate it more carefully in Illustrator, tracing around the shapes that make up the original with the pen tool, creating mathematically calculated curves that can be resized without distorting the picture. Fortunately, the Comic Genesis logo was pretty simple on that front. Illustrator can't do the lovely glow so I saved it as a high resolution Photoshop file and added the glow there. I also saved a version which was pulled apart, so if people wanted to use the rings elsewhere, for example, then they could.Related Article
