Creating a crazy cool logoListThumbs
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 the 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.
121 Comments
I think every body is unique and have our own style and thats great and can be seen here.Ilove this tutorial...simple but great!
This is a great tutorial. But, I'm a beginner and you forgot the important step that would really help if you want to use this at all.. exporting! May sound easy but what is the proper way to export these for the web...say for a web logo?
I thought the idea was fantastic. I didnt know you could delete lines within a shape. However it would be extremely helpful if you could explain where things are. For example, How do you change linear from b&w to tri-colored or how you got the shapes to interwine (white fill vs. empty). things like that. think super basic
this tutorial was awful it drove me up the wall this was hogwash and u should find a new job!!!!!!!
I really liked it!!!!!!! Its too good with lots of colors.
And i wanna lil help!!!!! :) i wont to make a logo which name is I Box, but i m confused that
which kind of logo i design!!!! So pleas will u tell me!!!!!
poxa cara vc é brazuka !? Me gusta tus tennis, se me mincante a ti tegusta
Amazing tutorial. Really nice logo design
SWEET tutorial. Your logo design process was simple and efficent
thx yr tutorial!! is great chance to let me learned more skill!! :D
Poxa cara, vc é brazuca?! que maneiro velho... bom saber :D.... parabens pelo tuto e pelo abduzeedo
wow....
its a big chance to me to learn more....
Your idea is beautiful. It was tough yet fun to follow through this tutorial. Regards!
very nice indeed.
Your logo design process is really good. I like this tutorial. Thanks.
I got problem with the clipping mask in step 7, i couldnt make it look like your 2nd image
Very nice! Thanks for the detailed tutorial!
Has any one seen the logica - logotyp..... http://www.logica.com
hmmmm. quite simular
Thanks for sharing! I have also made one for my business logo http://noobworks.com
The best tutorial i’ve ever seen on this website… and the best illustration also!
Love the tutorial and the idea behind the logo design.
fantastic tutorial, thanks ton!
thanks - it gave nightmare try to bring everything together
loved this tutorial and think the logo looks ace. :)
Nice post man :)
Really really helpful and nicely explained
Thanks for this tutorial!
Incredible!, you just make my mind go creative again :)
thx
This is excellent, I would like to see the drawing that came before this design was picked.
awesome tutorial...
Very good tutorial and inspiration, thanx...
great!!
This was a great inspiration and tutorial for me with a logo I needed to develop. just the right touch of something different. thank you!!!!
Excellent item. Really gives me something to think about.
Wow ! Great tutorial!
Great tutorial!
great tutorial, its pretty easy when you break it down like that.
I just acquired illustrator last week, I'm thoroughly impressed with it. I skimmed this tutorial, very well laid out, here's what it inspired me to create for my clothing business, "euphoric"
I saw these designs on a few deviantart galleries but never knew how these are designed. Thanks for sharing the talent :)
Ok, I've been looking for something like this for a long time!!
Thanks a lot!!
Regards from Holland!
Awesome , i'll try to do it, thanks.
Alem da logo ser muito criativa o site em si eh muito bom! parabens velho!
I find that the logo is more legible and eye pleasing in the earlier stages, thin and gradient-less. Not bad at all though.
The design is deffinatly unique but short of brilliant. It screams look at me but when you do you cant tell what your looking at. i can barly make out the word zagora the only way i knew it said zagora is because you mentioned the name if you hadn't i wouldnt have been able to make out the z or the g and barly the r a good design is nothing if your audiance cannot tell what they are looking at sry dude 0 out of 10 and the tutorial is alright but i dont see why anyone would want to do this....:/
Well, as somebody said, this tutorial wasn't clear. I think sometimes you run too fast so that the beginer couldn't catch! Evidental that we - the new illustrator - must find another way to keep caught your process, and the result is, our essencally feature diffirent from yours. So how we can do another the next time?
Please more patient and slowly if not, you couldn't a good leader :)
8 mark for your work, 5 for your attitude.
Thank you and sorry for my terrible English. I'm from Viet Nam you guy!
Creative! But since you use circle already, I will try to use square, same technique, see what it comes out with :)
I used to do a lot of work on 3D, but since now I work for the company and mainly to design package, logo and brands, I particularly fond of your tutorials, keep up the great works.
good work guys ;)
parabens cara, ficou muito bom mesmo.
obrigadao pela ajuda!
Featured here: http://www.presidiacreative.com/the-10-best-logo-tutorials-on-the-web/
thats a wonderful tutorial...
really smart logo.
... and tutorial of course.
thanks!
Wow great I tried to make it in Photo shop and almost successful what do you think it can it make in Photo shop
always good to do tutorials to learn but if your going to teach, you need to be a bit more detail oriented. there are a few things i didnt get. now i played with it and learned by figureing things out. but lets have a bit more detail.
It looks nice but this is quite easily the worst tutorial i have come upon. Immediately i was lost while things were being done without you stating, and took me a lot of time to just figures out what you did. Good try but do everyone a favor and don't make another untill you can fully explain each step.
I like this tutorial. More and more over the last year I have been using vector images in my website layout and designs. Thank you for the Illustrator tutorial, I look forward to more in the future!
Wow. Great logo! I really struggle sometimes since I do not know Illustrator well. Hence me visiting this tutorial. Good work!
hi fabio,
you have really cool tutorial as always. but i think your logo is too crowded both color and form. don't you agree?
Wow. What a great way to make letters. I have no talent for logo design, and I just love seeing creativity like that.
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