How To Turn A Hand Lettered Sketch Into A Digital Vector Logo Using Illustrator

 
 

Hand lettering has become an increasingly popular choice for branding and design because it brings a unique, personalized feel to the digital world. But, in order to make hand lettering as versatile as possible in branding and design, you’ll want to know how to turn your hand-lettered sketches into vectorized files that can be manipulated and resized with ease in digital programs.

In this tutorial, I’ll share with you the process for creating your own hand-lettered logo, taking you from pencil sketch to final, vector logo that can be scaled up or down without losing its incredible detail.

You can use the steps in this process to turn any of your sketches into digital files, not just for the purposes of a logo. You can make your hand-lettering into a book cover, t-shirt design, art print -- anything you can think of.

Before we get started, a few things to keep in mind:

1) You’ll need a pencil, ink pen, and paper (or whatever your hand-lettering tools of choice are). I highly recommend creating your lettering in black and white for the best possible digital outcome. You’ll also need access to both Adobe Photoshop and Illustrator (and we’ll talk about the difference between the two programs and why each one is crucial to the process.)

2) This is what I would consider an intermediate lesson, so if you're just starting out and you’re not sure what a digital file even is or you’re a little bit intimidated by programs like Photoshop and Illustrator, maybe bookmark this article and come back to it once you have a more solid foundation of the basics of hand lettering!

Okay, on to the main event...


Photoshop vs. Illustrator: Which is better for digitizing your lettering?

As I mentioned before, turning your physical sketch into a digital file makes your art exponentially more versatile. Once your letterforms live in the digital world, you can apply them to anything that you like.

These are just a few things I've applied hand lettering too in addition to logos.

The two programs I use on a daily basis to turn my sketches into digital files are Photoshop and Illustrator, and each of them serves a unique purpose. Let’s quickly go over the difference.

 

Photoshop:

Considered a "raster" program;

Used for pixel-based graphics
(graphics that are comprised of fixed-size squares of color called pixels.) 

Great for images or graphics at a fixed sized;

Way I use it: to alter and modify existing images and to create web graphics when I know the final size of the digital file needed.

Illustrator:

Considered a "vector" program.

Used for vector-based graphics (graphics that are comprised of paths created by mathematical relationships called vectors;)

Great for graphics that need to be scaled up or down depending on the situation;

Way I use it: to create vector-based graphics/shapes that I want to have the flexibility to use at any size (like icons and logos).

 

Time out: What the heck is a vector again?

As mentioned above, Photoshop deals in pixels, which are tiny, individual colored squares within your digital file. In a Photoshop document, there is a fixed number of squares (pixels) for the given document size. This is why if you scale a graphic in Photoshop way up, the squares scale with it, creating a jagged or blurry looking edge, losing your graphic’s “resolution.”

Illustrator, on the other hand, deals in vectors. A vector is a mathematical relationship between two points. Instead of a graphic being made up of fixed dots (pixels), in Illustrator a graphic is made up of points that can be stretched up or down proportionally with no problems thanks to these mathematical relationships (vectors.)

That’s why it’s so important to create a digital vector file for hand-lettered graphics like logos that you want to be as beautiful and crisp on a billboard as much as they would be on a tiny sticker.

Illustrator also has the capability to edit some of the shapes of your letters very precisely and specifically by adding or subtracting anchor points. So if you really want to edit the shape of a certain letter to the highest degree of precision, Illustrator is going to be the program for that.

 

 

Using Photoshop and Illustrator together

So, which of these programs is better for digitizing your lettering, you ask? The answer is… it depends on what you want to use your end product for!

I like to use both Photoshop and Illustrator in tandem when I’m creating digital files from my lettering, and think it works best that way because each of them has different strengths.

Photoshop can be great for editing my original hand lettered sketch, removing any stray pencil marks, or correcting things like alignment, spacing and proportion. Once my sketch is exactly the way I want it, then I’m able to bring it into Illustrator to vectorize it, which will finalize my design and allow it to become usable at any size.

However, you don’t always have to bring a digital sketch into Illustrator to vectorize it. If you know you’re creating your hand lettering for a fixed-size document (let’s say an 8.5"x11" art print, or a 1000x1000px Instagram graphic, going the extra mile to vectorize isn’t absolutely necessarily.

 

Illustrator’s Live Trace Tool

In this tutorial, I’m going to teach you the process of vectorizing a hand lettered sketch using a tool called “Live Trace” within Illustrator.

There are multiple ways to create lettering vectors within Illustrator (including “tracing” over your letters manually using the Pen tool), but I’ve found this is the quickest and most beginner-friendly tool for vectorizing, and I actually love that this tool often retains a bit of the rough, textured character from my sketch. 

Okay, that's enough backstory. Let's get into the tutorial!


 


The Process of Creating A Hand-Lettered Vectorized Logo

Step 1: Scan or take a photo of your hand-lettered sketch.

Here's the sketch of my inked logo for a fictional brand called Unicorn Pizza.

Yes, this is my logo for a fictional company called "Unicorn Pizza." 

 

The most important thing to keep in mind when preparing your sketch for this process is this: the more contrast you have in both your photo and your sketch, the better it will convert to a vectorized format in the long run.

That’s why I always make sure to go over a pencil sketch in black ink in order to maximize the contrast between the black of my sketch and the white of my paper.

While a scanner works best to retain that white vs. black contrast, most often these days I’ll opt for my phone to get a photo of my sketch because it’s usually right next to me. (Pro Tip: if you also choose to use your smartphone to get a photo of your sketch instead of a scanner, I recommend toggling on the grid lines on your camera, which will help you determine if the photo is capturing your sketch as flat as possible. To put the grid on your iPhone camera settings, go to Settings > Photos & Camera and down at the bottom you should see a toggle switch for turning the grid on and off.)

Once I take a good photo of my sketch, I email it to myself or Airdrop it to my laptop.



 

 

Step 2: Open your sketch photo in Photoshop.

The first thing I typically do with my photo open in Photoshop is to go to Adjustments > Black & White in order to immediately remove any halos of color or distracting color from the original photo. Then, I also like to crop my photo so that only the sketch is visible with the white background from my paper.

 
Vectorize_1_2.gif
 

 

Adjusting your Levels in Photoshop

Now, you can see because my photo was a little dark that my background has now become pretty gray. We want to change that! We want it to be as white as possible to provide contrast with the lettering before we bring it into Illustrator. 

The way that we’re going to do that is by adjusting something called Levels. To access the Levels panel, go to Image > Adjustments and select Levels.

Here we’re going to adjust the sliders to lighten our lights and darken our darks even further. As you move the right slider toward the middle, you’ll see all the whites within your image get whiter and brighter. I typically do that as much as possible until I start to lose some of my hand lettered sketch (you can see in the image below that it begins to look grainy if you move your levels too far to the left).

Then, as you move the left slider toward the middle, it will make the darks even darker. Ideally you want a good balance between those two so you retain as much of your sketch as possible.

 
 

The last step while you're still in Photoshop is to make any necessary adjustments before you pull your sketch into Illustrator. You can use Photoshop’s powerful tools to erase stray pencil or pen marks, adjust any spacing issues or proportion issues within your sketch. In this case I decided to use my Polygonal Lasso tool to isolate my Z and Transform it proportionally to be just a tad smaller.

 
 

 


Step 3: Copy your sketch from Photoshop and paste into Illustrator.

Once you have your sketch the way you want it in Photoshop, open up Adobe Illustrator and create a new document. Your canvas size doesn’t really matter for the purpose of using the Live Trace tool, so you can go ahead and select any default canvas size. (Since your final product will be a vector graphic anyway, don’t worry too much about whether your document is set to CMYK color mode, for print, or RGB color mode, for web, or whether it’s at a specific resolution. We’ll talk about saving your files in their proper format later on in this post!)

Now, pop back over to your cleaned up sketch in Photoshop, and you're going to copy your sketch from Photoshop and paste it into Illustrator. To do this, simply Press the M key in Photoshop to bring up your Rectangular Marquee Tool and drag your mouse across the entire canvas so every bit of your sketch is within your selection.

Tip: If your sketch is still on a locked background layer, make sure it’s unlocked by holding down the option key and clicking the background layer. (That little lock is going to disappear which means everything on that layer is now able to be copied.)

 
 

Now hit Shift + Command + C, or go to Edit > Copy Merged. Copy Merged allows you to copy everything visible to your clipboard, even if it’s on multiple layers.

Then, it’s back over to Illustrator we go, and all you do is hit Command + V to paste your copied sketch into your Illustrator document.

(Tip: The Live Trace is going to go a lot slower the bigger your sketch is, so I recommend holding down the Shift key, and dragging the corner of your sketch to resize it to fit onto your canvas.)

 

4. Use the Live Trace tool to convert your pixel sketch from Photoshop into a vector graphic.

The trick with the Live Trace Tool is understanding which settings create the intended effect that you want for your final vector graphic.

First, pull up your Image Trace panel by going to Window > Image Trace.

In simple terms, the purpose of this tool is to recognize what’s black versus what’s white in your sketch, and draw or “trace” vector paths based on that detected contrast. (Remember when I said contrast was going to play an important role in your final piece? This is why!)

An easy way to play around with the Image Trace settings is to make sure that lovely “Preview” box is checked. This will allow you to see the outcome of your settings adjustments before you actually turn your sketch into a vector.

image_trace_settings.png

You can select one of the default presets from the drop-down list (I recommend Black & White Logo to start and you can adjust the settings from there!)

If you're not entirely satisfied with the look of your vector provided by the popular presets, you can adjust the Advanced Settings individually. Here's a little guide to help you do that: 

Paths: 

The Paths slider controls how closely your resulting vector curves hug your original pixel sketch. When the slider is to the left, the fit is looser, and when it's pulled to the right, the fit is tighter. A looser fit has fewer points in the resulting curves and a tighter fit has more. Tip: the looser the fit, the smoother curve will generally be but the less closely it will hug your original sketch. This is why you want a good balance -- you want your vector to accurately represent your sketch but you can also use the Paths to smooth out some of your curves. 

Corners:

The Corners slider controls how likely it is that a sharp bend will be turned into a corner. When the slider is to the right, the more corner points you’ll get in your trace.

Noise:

The Noise slider value indicates the smallest number of pixels per region allowed. Regions with fewer pixels than set with the slider will be considered noise and removed from the final traced output. That's why if you have tiny pixels of texture or small dots topping off your "i's" and "j's" you want to drag your Noise slider as low as it will go so the program doesn't remove those small dots assuming they are noice. 

Ignore White:

Also important: make sure you check “Ignore White” which will make sure that the white background you pasted in from Photoshop will not be included in your vector.

Once you have all your settings where you like them, the final step is to click Expand. That is going to convert your sketch into the anchor points and paths, which is what you want for your vector logo. Now you can scale your graphic way up or way down and it’s still as crisp as ever.

 

5. use illustrator to add color and finalize your logo design.

Now that your hand-lettered logo is a digitized vector, you can add color to finalize your design. Use the Direct Selection Tool to isolate parts of your sketch and add color. 

 

6. Save your vector logo files in multiple formats.

Once you've finalized your logo design in your Illustrator file, it's time to save your files! This is probably one of the most confusing parts of creating a logo if you're not a designer by trade, but I've done my best to explain the multiple format versions I send below. 

File Formats:

Ai (Adobe Illustrator File): This format will allow you to save your original vector artwork which will be easily editable within Illustrator, should you need to make changes in the future.

Ai (Adobe Illustrator File): This format will allow you to save your original vector artwork which will be easily editable within Illustrator, should you need to make changes in the future.

PDF (Portable Document Format): This is a popular format because not only is it widely viewable on any device or computer, but by selecting "Preserve Illustrator Editing Capabilities" you're able to open this file in Illustrator and edit portions of it like you would an .ai file. 

PDF (Portable Document Format): This is a popular format because not only is it widely viewable on any device or computer, but by selecting "Preserve Illustrator Editing Capabilities" you're able to open this file in Illustrator and edit portions of it like you would an .ai file. 

PNG (Portable Network Graphics): Saving your file as a .png will not retain the vector capability that the other two formats do, but it will allow you to save a file with a transparent background for easy and quick use in any raster, pixel-based situation. (For example, I create web graphics a ton and I'm always grabbing my .png logo to quickly drop in as a watermark on those graphics.) 

PNG (Portable Network Graphics): Saving your file as a .png will not retain the vector capability that the other two formats do, but it will allow you to save a file with a transparent background for easy and quick use in any raster, pixel-based situation. (For example, I create web graphics a ton and I'm always grabbing my .png logo to quickly drop in as a watermark on those graphics.) 

Color Modes & Variations:

The most important thing to keep in mind about color modes is this: CMYK is for files intended to be viewed in print and RGB is for files intended to be viewed on a screen. That's why you'll see for all my vector files (typically used for print), I include a CMYK version and for my raster files (typically used on screens), I include an RGB version logo. 

 

To recap, here's a checklist of the final file formats and variations that I create for my logos.

Logo files

  • VECTOR: Adobe Illustrator (.ai) files
    • CMYK full color version
    • CMYK one-color version for light backgrounds
    • CMYK one-color version for dark backgrounds
  • VECTOR: Editable PDF (.pdf, with Illustrator editing capabilities enabled)
    • CMYK full color version
    • CMYK one-color version for light backgrounds
    • CMYK one-color version for dark backgrounds
  • RASTOR: PNG files (.png, with transparent background)
    • RGB full color
    • RGB one-color version for light backgrounds
    • RGB one-color version for dark backgrounds

Now you can use your finalized logo to build out your new branding and use your logo in print, on the web or whatever else you decide to do with it!

I hope this article has explained digitizing your lettering in a way that is helpful and easy to understand. Now, who wants to help me build my brand Unicorn Pizza? 😂🦄🍕