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.

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

Cards WordPress Theme

We are getting close to launching our second WordPress Theme, called Cards. And as the name suggests, it is built around a whole lot of cards.

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

Hand Lettering for the Web

With the rise of small brands, start-ups, handmade, locally bought, organic, vegan, and all those back-to-the-roots movements, the demand for hand lettering has gone up radically. There was a time when everything was supposed to be square and digitally perfect, but now these two styles live side by side in a beautiful synergy. Digitalizing hand…

Tips & Tricks

How to Make a Font—an Overview

Are you considering creating a font? Maybe you already have drawn the typeface by hand, or maybe drawn up the lines in Illustrator. I have finished my first font, and believe I have a few tips to pass on from my experience. This article is intended to give an overview, and to make sure that…

Tips & Tricks

How to Add “Products Shown” to Facebook Posts

Have you seen those Facebook posts that have products or services shown on them under the title, "Products shown?" Ever wondered how to show them there? Here is a complete walkthrough of how to do it. How do you add “Products Shown” to your Facebook Posts I made a tutorial video that goes through every…

News

Our First Typeface is Here—Ink & Blotts

Finally we release a font! Inspired by my current reading of Harry Potter and the infamous store Flourish and Blotts, I have named the typeface Ink & Blotts. It was a typeface-related side project that lead me into creating this first font of ours. Download the font for $10. Click here. If you used a little…