How to Make Hand Drawn Logos in Illustrator

Have a comment?

Your email address will not be published. Required fields are marked *

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

Reaching about 10 years experience developing for the web, and have been doing various forms of graphic design since he discovered a copy of Photoshop in his brother's room a long long time ago. Mail him if you want work done.

Mail him

News

Sticky Situation: Old Newspaper WordPress Theme v2.4 is Out

At the end of last year I found myself in a sticky situation. I set 10 patrons as a goal for releasing the next Old Newspaper WordPress Theme update. Then we got to 9. I was all excited, and then people started dropping off. At the same time, we were going through low season for new sales (Christmas, into the…

News

One Backer Left Until The Next Old Newspaper WordPress Theme Releases

A new update is coming to the Old Newspaper WordPress Theme, and this time it’ll change more than ever before.

Tips & Tricks

How to Increase Instagram Engagement in 2019

Let me break it to you at once. The keyword is engagement. We are not looking for just likes or comments. We are on the search for genuine human interaction. Just like in real life. A lot of the problem with Instagram engagement in 2019, is that people are so tired of spam. Tired of…

Tips & Tricks

How to Always be Successful

That is a big title, right? Aren't we all chasing success in some way or the other? But to claim that it's possible to always succeed... well, hang in there just a second. In order to capture the elusive success, we have to pin her down! Who is she, and when do we even know…

News

7H Batterier Brand Development and Website

An old battery store, packed with as much experience as there are batteries, gets a new owner and needs to build a fresh brand. We are contacted, and the rest is history.

Tips & Tricks

5 Tips For Working With a Digital Agency

Before starting a project, be it web design, a video or some branding work, there are some things you as a customer may do to make the process as swift and cost effective as possible.