Creating a crazy cool logo
I’m a huge fan of typography and logo design, even though I havent worked on too many logo design projects I had the opportunity to express my love on a few, but at the same time, very pleasant ID projects. One of them was in 2005 for a company called Zagora.
When they hired us to create their ID design they said that they wanted something very unique and modern. Besides of that we spent like 4 hours talking about ideas and concepts in order to know exactly what we would have to do.
In this post I will show you how we created the logo. I will skip the drawing parts, yes there were tons of drawings before going to the computer, because when they stole my computer and backups in 2006 they took all my photos of the drawings.
This logo is pretty much a bunch of circles, I used a circle for the module and deleted some segments in order to create the characters.
Step 1
In Illustrator, using the Ellipse Tool (U) create a circle.
Step 2
Select the Circle and hit the Enter Key (return) the Move dialog box will open. Now we can move the circle horizontally or vertically and create copies as well.
First we will create the horizontal one, so just add the width of the circle in the horizontal field and click on the copy button. Repeat this process until you have 6 circles side by side.
Step 3
Lets create a circle below the first and the third circle. Those will be the Z and the G letters.
Step 4
Using the Direct Selection Tool(A), select some segments of the circles and delete them like the image below.
Step 5
Select all objects and change the Stroke Weight to 20pt, After that add 2 more elements above the Z and the R like the image below, and delete a segment of the last A. Tip: Use the Object>Transform>Move and Object>Transform>Reflect commands for more precision.
Step 6
Change the stroke colors. I used green for the Z, brown for the As, red for the G and R, and blue for the O.
Step 7
Select the A or the second circle and open the Move dialog box. Move it closer to the first letter, Z. Repeat that for the other letters. After that change the order of the letters so the R goes in front of the last A, but through the O. Tip: To do that you will have to create new elements in order to mask them. Use the Move command for precision.
Step 8
Once you have a nice spacing and all the letters are well positioned, select all objects again and go to Object>Path>Outline Stroke. This will convert the Strokes to Fill.
Step 9
Select the G and the R and apply a linear gradient. Use Orange to Red for the colors.
Step 10
Duplicate the element above the Z and change its color to black. Go to Effects>Blur>Gaussian Blur and use like 3.5pt. After that place it beneath the Z and the R like the image below.
Conclusion
After we had an idea of what we were looking for, the design process became pretty straight forward. That means that once you know what you have to do the tool is just part of the process and you will find many ways to achieve the same result.
About author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
It is a really perfect tutorial.
Olá Fábio,
muito bom trabalho!
Esse tutorial me ajudou bastante, especialmente porque sou iniciante.
Conto com outras dicas!
Arigato!!
The BEST logo tutorial that i have seen so far.
Very good job Fabio. I really like this one. ^_^.
While some of the critiques have been warranted, what people must remember is that as designers, we give the client what they want. If they want a logo that is illegible, we can fight for legibility until the cows come home, and if they're still not willing to budge, then what do we do? We give them what they want, get our compensation, and move on to the next project. Also, you are not talking about a logo for a company in the US. Some companies only want eyecandy and so we provide them eyecandy.
I look at this logo design as almost graffiti-inspired. Anyone who's studied graffiti, knows that the legibility lies with the audience. If you're not apart of the intended audience, then you can't read a wildstyle piece. Obviously, the audience for Fabio's client is of a younger demographic, so this logo fits.
The main fact remains that the client got what they wanted and Fabio was compensated for giving them what they wanted.
i would like to creat a logo with text very similar to starbucks logo in the concept, I need to know how to write the text arround a circle like coffee or starbuks.
any one can help me
parabéns pelo site cara, tenho orgulho de saber que o abduzeedo é de brasileiros, parabéns mesmo, aprendi muito com seus tutoriais!!!
For a beginner who is learning to do this kind of stuff. It requires a bit more info. I can't get the letters in separate colors, considering part of the A is overlapping in the next letter, and yeah...major confusion and i have to give up now ... dunno how to do it.
Very good. Thank you so much.
Very nice tools. Thank you for gathring such huge information.
Not a bad tutorial. I will agree that you should redo some of the steps, because some things weren't clear, when you moved the R in to the O, it didn't seem like the shape I was told to make was the one there, thank god for visual aids.
While the tutorial was hard to get through, its still a neat design.
Amazing creativity! And definitely very crazy cool!
Thank you very much.
Great! Awesome tutorial =)
Thanks learn't a fair bit on this good way to practice illustrator skills!
this tutorial interested me for a good 20 minutes..... 20 minutes that lead to 30 minutes........ 30 minutes of my life i will never get back!!!!!!
your steps are NOT very clear. and you haven't explained how to exactly achieve the shape of the letter r weaving through the o.
if your going to post a tutorial, make sure you actually the steps to achieving your overall design.
Great Tutorial ! Thanks for share
Thanks heaps.
Your a Gem.
>> Good design skill. Abuse of typeface and readability standards.
Young Designers must remember not to loose the basic criteria of
Identity & Branding while interfacing with design tools.
i.e. >>Branding that can 1. Be understood, interpreted and "read" easily
2. Be used systematically in brand-reinforcement & communication design.
Anuj Bhatia
Desing Director
Xeye Design
excelente muy bueno felicitaciones por esta maravillosa pagina
Thank you for your good tutorial. Cool site. :)
this is most waste tutorial of the millenium.
dont post such time pass things again...
this wasted 10 mins of mine to got throught.
tnx
awesome tutorial! You did a great job explaining and a great job presenting. Your layout of the tutorial was excellent! Loved all of the shading of the screen shots.
This has awakend my imagination. Thanks for a great tutorial!
-v
Muy buen tutorial, me encantó. Te felicitó por ello, es muy instructivo y educativo... Gracias por compartir tus conocimientos.
Chaito...
hey! i really like this! good job! but i dont understand step 9! if i select two letters (shitclick, aint it?) and apply gradient there isnt a flowing gradient, it stocks at the end of letter 1 and starts again at letter 2.
please help me ! :)
greetz
rigoros
Hey, beautiful work! I'm so into this design stuff and I appreciate your tutorial, and think you did a great simple explanation of the procedure. By the way the drop shadows rock! They add so much as well you choice of colors. Great job!
Great stuff man. I've just recently bought the book 'Logo Mondo' and I wondering if there was a tutorial on stuff like this...
Thank you, thank you very much.
oh what! super tutorial.
Hey cool logo....very creative...lovely colors..!!
the idea at first is very beautiful .... and i (viewer) wanted to know what this meant....in about 10 secs ..i cud understand this was zagora... amazing stuff...keep 'em coming....!!!
very impressive!
Uhmm when you see the swoosh logo what does it say? When you see the white apple what does it say?
Its a logo not the name of the company.
Well,
I like the logo, and really I can read it.. I think it took a lot of creativity to actually do something like that, and you even explained how to do it. I give this post 10 out of 10!
Thanks For all the good information....
Ian
That says zagora? DUDE! THAT SAYS 3OSOYO
That's shit, who made that crap?
Sorry, but the logo is'nt good. I can't read it! The Z is no Z and so on... No, this is not final. But the technics are pretty good.
This is a really great tutorial. I especially like the color scheme. This is awesome!
I love lunch ladies.
maahh forget my post before... just used the delete key :D:D omfg sorry
thanks alot for your tut!
yes its very helpful! i really like it! but i dont get it with the direct selection tool... do i have to press alt or ctrl? i dont get the function of deleting one point :O omg im stupid... guess this is easy but dont get it ...
help me pls
greetz
awesome. i saw this logo on logopond a while ago and loved it. thanks for posting this.
I had no idea this logo said Zagora until i read the top. It looks like shit to be completely honest with you.
To me saying that your strategy was to release it with the tagline is a cop out at the expense of legibility, as you seem to be sacrificing clarity for style. If I had not read 'Zagora' at the top of the page I honestly wouldn't know what to think, nor would I know what this company is about (I still don't). The shadows are sloppy and inconsistent. I appreciate what you're doing by showing people your process, but perhaps a stronger solution would've made for a better tutorial.
i like your tutorials!
thanks for share the things you know
Sorry about my English im from Venezuela :)
Very nice tutorial, and it is well explained
Caraca! Maneira meu amigo! Só Não entendi nada de nada!
coudn't believe it's so simple. Thanks.
its amazing...
Very nice tutorial... Your work is very good as well. Out of curiosity.... Who stole your computer????? That sucks!! Couldn't imagine that.
You have some great tutorials, keep 'em coming!
Thanks for the comment in my blog!! I really appreciate it!!
Yea. This is really cool.
Those losers that have bad comments are just jealous.
I think its really great that there are people like you that will take time to explain to other's how this type of stuff is done. So that we can benefit from your knowledge.
Good work mate.
Very nice logo !!
Reminds me of a gogo.ru logo :)
really nice! ill use this method to make a logo.
thx much
Agreed... It looks nice, but that shadow is terribly sloppy.
Zevuart is lame. It takes a lot to put together and post a tutorial but so little to be a critic. The shadows maybe a little off but look at the overall scheme here. It's a great tutorial. Great job.
Thank you for that COOOOOOL logo tutorial
This is great site! Thanks mate!
concept is not so bad but the shadows are just shit.
Very cool logo!
cool, I've always wondered how people do this. :)
First, thank you all for the comments. About the difficulties in reading Zagora, that's true there are lots of people that couldnt get the word Zagora at first. However when we released the logo the strategy was using it with the name in the tagline, so people would get the meaning.
Amazing creativity! And definitely very crazy cool!
Chris
Really a good and simple tutorial! thanks!
The only thing that leaves me perplexed is that actually I have some difficulties in reading Zagora in your logo...
Good tutorial!
Your logo design process is really good. I like this tutorial. Thanks.
Your logo design process is really good. I like this tutorial. Thanks.
Post new comment