creating crazy cool logo

7/30/2019 Creating Crazy Cool Logo

1/45

Home Tutorials Wallpapers Interviews News About Contact/Ads Join Login Twitter Store

Creating a crazy cool logo

Im 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.

byabduzeedo | Jan 24, 2008


2/45

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) theMove dialog box will open. Now


3/45

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.


4/45

Step 3

Lets create a circle below the first and the third circle. Those will be the Z and theGletters.

Step 4

Using the Direct Selection Tool(A), select some segments of the circles and delete

them like the image below.


5/45


6/45

Step 5

Select all objects and change the Stroke Weight to 20pt, After that add 2 more

elements above the Z and theR 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.

Abduzeedo's Tags

inspirationdaily inspirationtutorialphotographywallpaperillustrationdesignphotoshopgraphic designweb designsites of the weekiphonewallpaper of the weekvideobeof the weekinterviewfireworks video of the weekgiveawayTypographyhdr logo free abdutees funny pictures moti

graphics art poster web quick tips 3dweb 2.0ads illustrator contestposters blog photo manipulation inspirao

more t

Icon Ads Wall


7/45


8/45

Step 6

Change the stroke colors. I used green for the Z, brown for theAs, red for the G andR,and blue for the O.


9/45

Step 7

Select theA

or the second circle and open the Move dialog box. Move it closer to thefirst letter, Z. Repeat that for the other letters. After that change the order of the letters

so theR goes in front of the lastA, but through theO. Tip: To do that you will have to

create new elements in order to mask them. Use the Move command for precision.

Abduzeedo's Tags

inspirationdaily inspirationtutorialphotographywallpaperillustrationdesignphotoshopgraphic designweb designsites of the weekiphonewallpaper of the weekvideobeof the weekinterviewfireworks video of the weekgiveawayTypographyhdr logo free abdutees funny pictures moti

graphics art poster web quick tips 3dweb 2.0ads illustrator contestposters blog photo manipulation inspirao

more t

Icon Ads Wall

Ad Ad Ad Ad Ad Ad Ad Ad Ad Ad AdDo you want to advertise here? Click H


10/45


11/45

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.


12/45

Step 9

Select the G and theR 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 Blurand use like 3.5pt. After that place it beneath theZ

and


13/45

theR like the image below.


14/45


15/45

Conclusion

After we had an idea of wha 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 justpart of the process and you will find many ways to achieve the same result.


16/45

106 Comments

Happy CloudMoments

06/16/2009

Very nice! Thanks for the detailed tutorial!

About The Author

i llustrator logo tutor ial TypographyMore content from:

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 c an follow me on Twitteror my personal site

at http://fabiosasso.com .

www.LimeExc an e.co Fee ac - A s Goo e


17/45

Anonymo us06/15/2009

Has any one seen the logica - logotyp..... http://www.logica.com

hmmmm. quite simular

ikram.hakimi06/02/2009

Thanks for sharing! I have also made one for my business logo

http://noobworks.com

prafuldass05/29/2009

The best tutorial ive ever seen on this website and the best illustration also!

LeadManagement

System05/28/2009

Love the tutorial and the idea behind the logo design.

Soo05/28/2009

fantastic tutorial, thanks ton!


thanks - it gave nightmare try to bring everything together


18/45

lisa05/14/2009

loved this tutorial and think the logo looks ace. :)

M Patel05/05/2009

Nice post man :)

Really really helpful and nicely explained

Marc05/03/2009

Thanks for this tutorial!


Incredible!, you just make my mind go creative again :)

thx

Alex H05/02/2009

This is excellent, I would like to see the drawing that came before this design was

picked.

deerawan05/01/2009

awesome tutorial...


19/45

kdogan05/01/2009

Very good tutorial and inspiration, thanx...


great!!

JennTC04/29/2009

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!!!!

kpss04/24/2009

Excellent item. Really gives me something to think about.

WebmasterForum

04/20/2009

Wow ! Great tutorial!

Robertas

Great tutorial!


20/45

04/10/2009

RBRProductions

04/09/2009

great tutorial, its pretty easy when you break it down like that.

MitchMahoney04/02/2009

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"

designcode03/30/2009

I saw these designs on a few deviantart galleries but never knew how these are

designed. Thanks for sharing the talent :)

Ruben -psycrotic

03/27/2009

Ok, I've been looking for something like this for a long time!!

Thanks a lot!!

Regards from Holland!

T-Law03/25/2009

Awesome , i'll try to do it, thanks.


21/45

webii03/25/2009

Alem da logo ser muito criativa o site em si eh muito bom! parabens velho!

Chrisgay03/17/2009

I find that the logo is more legible and eye pleasing in the earlier stages, thin and

gradient-less. Not bad at all though.

spawn022002/27/2009

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 theonly 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....:/

VuNguyenVietnammese02/19/2009

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 findanother 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,


22/45

Bryan, thekungfu fighter

02/18/2009

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.

richard02/10/2009

good work guys ;)

Anonymo us

02/08/2009

parabens cara, ficou muito bom mesmo.

obrigadao pela ajuda!

Brukhar02/07/2009

Featured here: http://www.presidiacreative.com/the-10-best-logo-tutorials-on-the-

web/

LaxmanKoushik02/06/2009

thats a wonderful tutorial...

frank katzer02/05/2009

really smart logo.

... and tutorial of course.

thanks!


23/45

harmon01/28/2009

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.

letscounthedays

01/02/2009

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!

Timothy12/29/2008

Wow. Great logo! I really struggle sometimes since I do not know Illustrator well.

Hence me visiting this tutorial. Good work!


24/45

adevar12/15/2008

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?

Mark12/09/2008

Wow. What a great way to make letters. I have no talent for logo design, and I just

love seeing creativity like that.

Yakup Gvler12/03/2008

It is a really perfect tutorial.

Andreia11/05/2008

Ol Fbio,

muito bom trabalho!

Esse tutorial me ajudou bastante, especialmente porque sou iniciante.

Conto com outras dicas!

Arigato!!

Busby11/04/2008

The BEST logo tutorial that i have seen so far.

giakonstantino

Very good job Fabio. I really like this one. _ .

While some of the critiques have been warranted, what people must remember is


25/45

10/11/2008

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.

wisam09/26/2008

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

XdreamphonyX09/25/2008

parabns pelo site cara, tenho orgulho de saber que o abduzeedo de brasileiros,

parabns mesmo, aprendi muito com seus tutoriais!!!

jjbeginner09/24/2008

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.


26/45

kpss09/10/2008

Very good. Thank you so much.

kpss08/28/2008

Very nice tools. Thank you for gathring such huge information.

Bauzer08/27/2008

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 theshape 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.

atama

08/16/2008

Amazing creativity! And definitely very crazy cool!

WebmasterBLog

08/05/2008

Thank you very much.


27/45

Ines07/31/2008

Great! Awesome tutorial =)

Tobi07/29/2008

Thanks learn't a fair bit on this good way to practice illustrator skills!

time wasted.07/27/2008

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.

Danh ba web2.0

07/16/2008

Great Tutorial ! Thanks for share

HarmonicDesign07/06/2008

Thanks heaps.

Your a Gem.


28/45

Anuj Bhatia06/17/2008

>>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" easily2. Be used systematically in brand-reinforcement & communication design.

Anuj Bhatia

Desing Director

Xeye Design

VICTOR(MEDELLIN)

06/09/2008

excelente muy bueno felicitaciones por esta maravillosa pagina

allergy05/16/2008

Thank you for your good tutorial. Cool site. :)

Anonymoust y05/14/2008

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


29/45

Veronica05/13/2008

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

Kitsune05/09/2008

Muy buen tutorial, me encant. Te felicit por ello, es muy instructivo y educativo...

Gracias por compartir tus conocimientos.

Chaito...

rigoros04/26/2008

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

LaBarge04/19/2008

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


30/45

infinite03/28/2008 there was a tutorial on stuff like this...

Thank you, thank you very much.

suresh.s03/25/2008 oh what! super tutorial.

BenRulz03/22/2008

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....!!!

computer jobs03/16/2008

very impressive!

modemlooper03/09/2008

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.

Ian03/06/2008

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!


31/45

Thanks For all the good information....

Ian


That says zagora? DUDE! THAT SAYS 3OSOYO

GKDesigns03/04/2008

That's shit, who made that crap?

Doktor Gonzo03/04/2008

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.

Hugo02/21/2008

This is a really great tutorial. I especially like the color scheme. This is awesome!

Justin02/20/2008

I love lunch ladies.

maahh forget my post before... just used the delete key :D:D omfg sorry


32/45

Anonymo us02/20/2008 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 imstupid... guess this is easy but dont get it ...

help me pls

greetz

Rob02/15/2008

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.

Zach02/13/2008

To me saying that your strategy was to release it with the tagline is a cop out at theexpense 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.


33/45

sabrina02/07/2008

i like your tutorials!

thanks for share the things you know

Sorry about my English im from Venezuela :)

Daniele02/06/2008

Very nice tutorial, and it is well explained

Wagner02/06/2008

Caraca! Maneira meu amigo! S No entendi nada de nada!

HimanshuKapoor02/06/2008

coudn't believe it's so simple. Thanks.

petnos02/05/2008

its amazing...

illebas02/05/2008

Very nice tutorial... Your work is very good as well. Out of curiosity.... Who stole

your computer????? That sucks!! Couldn't imagine that.


34/45

Edward02/05/2008

You have some great tutorials, keep 'em coming!

giackop01/29/2008

Thanks for the comment in my blog!! I really appreciate it!!

Kris Adams01/29/2008

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.

DavideBisconti01/29/2008

Very nice logo !!

Yury, logodesign maniac

01/26/2008

Reminds me of a gogo.ru logo :)


35/45

gatoroti01/26/2008

really nice! ill use this method to make a logo.

thx much


Agreed... It looks nice, but that shadow is terribly sloppy.

shank1jdl01/26/2008

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.

CubidoN01/25/2008

Thank you for that COOOOOOL logo tutorial

This is great site! Thanks mate!

Zevuart01/25/2008

concept is not so bad but the shadows are just shit.

Xavier01/25/2008

Very cool logo!


36/45

JonathanSolichin01/25/2008

cool, I've always wondered how people do this. :)

abduzeedo01/24/2008

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.

Chris01/24/2008

Amazing creativity! And definitely very crazy cool!

Chris

Tama

01/24/2008

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...

Shabith01/24/2008

Good tutorial!


37/45

Post New Comment

fatihturan01/24/2008

Your logo design process is really good. I like this tutorial. Thanks.

fatihturan01/24/2008

The content of this field is kept private and will not be shown publicly.

Comment: *

Homepage:

E-mail: *

Your name: * Anonymous


38/45

SAVE PREVIEW


39/45

Advertise Here


40/45

TUTORIALS

Reader Tutorial: Illustrating a

Camaro 2010 by Juli o Leite

Reader Tutorial: Aurora

Borealis Wallpaper in

Photoshop

Video Tutorial: The No BS

Retouching

Photoshop Quick Tips #11:

Creating Glow Lines

Photoshop Quick Tips #10:

Using Pattern Overlay

Creating an amazing Palm

Pre icon on Fireworks

Sparkling Hot Girl in

Pixelmator

Meat Text Effect i n

Photoshop


41/45

WALLPAPERS

more


42/45

FLICKR GROUP

FOLLOW US

Participate! J oin theAbduzeedos' flickr

group.


43/45

Twitter

Full post

Short Version

Email

Tutorials


44/45

HOSTED BY


45/45

Home Interviews Tutorials Wallpapers About Us Contact Us Blog Flux Directory and BlogCatalogBack to the Top

creating crazy cool logo

Documents