How to Make Hand Drawn Logos in Illustrator

Have a comment?

Your email address will not be published.

You might have left one of the fields blank or be posting too quickly.

Thanks for your comment. We appreciate your response. Reload the page to see your comment.

Please wait a while before posting your next comment.

What is on your heart?

One of my personal favorite approaches to making logos in Illustrator, is where you hand draw it first, then scan or photograph it and pull it into Illustrator to vectorize it and refine it. Using this approach you have the opportunity to either straighten up your lines and turn your simple sketch into a perfectly symmetrical logo, or keep the hand drawn qualities, if that is the style you are aiming for.

Step One: Draw by Hand

First I sit down with my pen and paper till I have something I am more or less happy with. The better it is before I digitalize it, the easier it will be to work with once I get it into Illustrator. For this example I made a really quick rough sketch, partially because of time, and partially because I wanted the hand drawn qualities to be seen in the final result.

If you don’t want to spend time doing this, see if any of our vectorized words can be used in your project.

When I am happy with it, I photograph it, get it into the computer and open the picture in Illustrator. I use Adobe Illustrator CC. The image has to have a sharp contrast between black and white for it to work. The more contrast, the better the result. The picture below works just fine.

The Bird sketch. Ready to be imported into Illustrator.

The hand drawn Bird sketch. Ready to be imported into Illustrator and made into a logo.

Step Two: Trace Your Hand Drawn Logo in Illustrator

Once the image is in Illustrator and you have clicked it. There is an option in the toolbar called “Image Trace”. Click it, and the image will be turned into vector. It should be black and white by default, but you can adjust it in “Image Trace Panel” in the toolbar on top or through the menu: “Window > Image Trace”.

Trace your hand drawn logo with Illustrator.

The Image Trace icon we are looking for.

Inside the Image Trace Panel it is important to select “Black & White Mode”, as well as opening “Advanced” and check “Ignore White”. This splits your image into pure black and pure white, and then makes all the white parts into transparent. You may also adjust “Treshold” option to change the black/white ratio.

When you like your result click “Expand” in the toolbar. That leaves you with only the black outlines of your vectorized logo/icon, now turned into vector.

My rough, vectorized logo.

My really rough, hand drawn vectorized logo.

Using tool: Window > Image Trace.

Step Three: Clean Up Your Logo’s Lines

When I have my rough little vector, I first of all run “Object > Path > Simplify”. Make sure to check the preview box, and pull the levers until you are roughly happy with your result it. It should be better than before, but it is far from finished.

The path is simplified, removing some of the jagged corners.

The path is simplified, removing some of the jagged corners.

Using tool: Object > Path > Simplify.

Step 4: Rearrange Your Logo’s Parts

Now is the time when I move around the elements to arrange them like I want them. Maybe my hand drawing was not exactly like I wanted it, but instead of redrawing it until it reaches perfection, Illustrator gives you the luxury of being able to move your objects around after they’re traced.

I enter the group and pick out which letters I want to work with, and then I mainly rotate, shear and move elements. Sometimes I stretch them a little. And if one letter is a little too thin, I may use “Object > Path > Offset Path” to make it a bit fatter.

Shear is found by right clicking the element, then “Transform > Shear”. It is best to check the preview box here too, to make sure the result becomes optimal.

There I have moved around, stretched and sheared some of the elements. I think the composition is getting better.

Here I have moved around, stretched and sheared some of the elements, giving it a bit more coherence across the logo. I think the composition is getting better.

Using tools: Object > Path > Offset Path, and Transform > Shear.

Step Four: Smooth Those Edges

This is the main tool in the tool belt (except for the Image Tracer maybe). Illustrator’s smooth tool let’s you rub your logo’s edges till they become smooth. Pull out that tool from your main toolbar (left side by default) and start smoothing.

This is where the handiwork starts, and it is the process that takes the most time. The more time you spend here the better the result—especially if your are going for a symmetrically straight logo. For this project I wanted to keep the rough hand-drawn look, so I didn’t spend overly much time here.

Smoothing those paths for a long, long time.

Illustrator’s smooth tool gets the job done.

Using tool: Smooth Tool (Left hand Toolbar).

Quick Tip: Save Logo Versions

I always save versions of my hand drawn logo along the way, so if I do major changes and then regret it, I don’t have to command Z for eternity. I just throw a copy outside the canvas once in awhile, leaving them there until the project is finished and I know whether I will revert to any of them or not.

Saving some versions along the way.

Saving some logo versions along the way, in case I will have to revert to one of them.

Step Five: Making Your Logo Bolder?

When I finish a shape, I often test to see if it looks better fat or thin. So I copy it, and open “Object > Path > Offset Path” again, and try to add a pixel or two.

Of course, making the logo bolder, will also make it seem more rounded, so you may want to go around and make some corners more narrow with the vertex tool.

Trying offset path on the logo.

Trying offset path on the logo to see if it looks better a bit bolder.

In this case, I decided the original thinner version was better, so I went with that.

Using tool: Object > Path > Offset Path.

Step Six: Hand Drawn Turned Digital

I almost always use my logos somewhere on the web, so I save them as an svg as well as the basic ai file. If I am working with a customer, I may also create some other files, like a square png version that can be used for profile pictures in various places.

To create the svg, I open a new file—size doesn’t matter—paste in my logo, icon or whatever it is I have made, and crop the Artboard with “Object > Artboards > Fit to Artwork Bounds”.

Then I simply save as svg and it is finished.

Gif me the Bird!

Gif me the Bird!

Using tool: Object > Artboards > Fit to Artwork Bounds.

Final Words

The hand drawn logo has now gone through all the steps required to make it a finished Illustrator logo file! I hope you find this useful. If you do, please leave me a comment and let me know.

Best of luck!

This one was written by Benjamin Antoni

I am a Brand Strategist with 10+ years of broad design experience, where UX, web and logo design have been my main focuses. My most comprehensive experience is having built the Red Hat Factory brand from scratch, but I also work part time with helping other brands find their identity and grow from there.

Mail him

Branding

Hand-drawn Branding VS Digital Design

An old rugged brand calls for hand-drawn branding.

Branding

Why Brands Fail (And How to Avoid It)

You'd love if I just handed you the answer to why brands fail, wouldn't you? This is why your brand fails! It is of course a very complex questions. But after working with brands of all sizes for over 10 years, I believe I have some ways to clue you in. The keyword in a…

Branding

5 Elements a Quality Branding Kit Should Include

While a branding kit can include anything that you deem necessary to anchor the tone of the brand, there are some key elements that probably are worth including in any quality branding kit. What components we will discuss: Graphic assets LogoAccent ColorTypeface Story assets Vision StatementGuidewordsValues #1 Your branding kit should include a logo While…

Branding

How to Make a Branding Kit

A branding kit can be so much. How do you go about making one?