Calligraphy

May 30, 2017

Digitizing Calligraphy: The Basics – From iPhone Photo to Vector with Easy-to-Follow GIFs

Every calligrapher has different methods for digitizing calligraphy. There is no “best” or “right” way to do it, since there are so many different options. You aren’t even limited to Adobe software!

And you know what? You don’t even have to be a calligrapher. These steps can apply to any kind of illustration or hand lettering project that you have on your hands. This is the method that I have honed over the nearly three years that I have been practicing calligraphy. It just works. And then you get to put your lettering or illustrations on #allthethings to sell, keep, or give away.

I have been doing this for so long that I can walk through these steps in less than 2 minutes, so I know that you can, too. I use a combination of Photoshop and Illustrator (I rarely use just one or the other) because I want to maintain the quality of my calligraphy when I’m digitizing it, and the use of these tools combined is much more powerful than using just one.

Once your lettering is digitized and vectorized, you’re free to do whatever with it. Letterpress? Laser cutting? Enlarging it on a banner the size of a house Fixer Upper style? Endless possibilities. And that means more options for you and more importantly more options for your client.

I’ll talk you through:

  • Setting up your calligraphy so that it is easy to take a photo or scan of
  • Doing a quick clean up in Photoshop so that it is at its prime for live tracing in Illustrator (I.e. a tool for vectorizing calligraphy so that it is ready for letterpress, foiling, or simply changing colors to use on your website)
  • And finally, live tracing in Illustrator, and what all of those sliders in the advanced panel mean (they’re not as scary as you think)

Here are the tools I used:

Let’s begin!

SETTING UP YOUR PHOTO

Before you even letter your calligraphy, it is important to use the right tools so that you’re not setting yourself up for failure from the beginning.

You want to make sure that your ink is rich and black, and that your paper is nice and smooth. Not only because it’s easier to write on, but because rough, textured paper doesn’t scan or photograph well.

When you’re photographing your hand lettering, try not to put it in direct light. You will end up with bright spots or shadows on your paper (that means you’ll have to do extra clean up – we want to avoid having to do more work than we need to). Move your paper around the room until you figure out that sweet spot.

This is the photo I ended up with, and the one that we will use for this tutorial:

The important thing is to take a close up picture of your hand writing. Don’t use zoom, just move your camera as close as possible to your paper to get as much of your lettering in the frame without it being blurry. Keep your camera still, and then go for it!

TAKING IT INTO PHOTOSHOP

Step 1: Desaturate

The iPhone shot I ended up with turned out a little too yellow and orange. By “desaturating” it (removing the color), we end up with a photo in grayscale.

Step 2: Adjust the white level

Open up your levels tool. You can see in the gif above that by sliding the white level (the slider that is on the right) to the left, your paper gets brighter and whiter. This is what we want! That contrast between the whites and blacks is what will make live tracing in Illustrator much easier.

Step 3: Adjust the black level

Much like adjusting the white level makes the whites whiter, adjusting the black level makes the blacks blacker. Using the slider on the left, slide the black level towards the right and watch as your lettering becomes more defined.

Step 4: Adjust the grey level + make final adjustments

There is that slider in the middle that we haven’t mentioned yet. This is the grey level. By sliding it towards the left, you can get rid of that hazy shadow that shows up around the edges your lettering. Make any extra adjustments to the black and white levels as needed. As a general rule of thumb, moving a slider to the left makes a color lighter, moving a slider to the right makes a color darker

Step 5: Cropping

From the photo, you can see that I ended up with the top portion of my Rhodia pad. Crop your photo to get rid of the extra, so that you end up with a nice, clean graphic to work with.

Step 6: Erasing

There are a few extra spots left around our lettering. Click on your background layer, and then use your eraser to get rid of them before we save the file to take it into Illustrator.

TAKING IT INTO ILLUSTRATOR

Step 7: Image trace

Take your photo from Photoshop into Illustrator, click on that little drop down arrow to the right of “Image Trace” and then click on “Black and White Logo”. You now have a vectorized version of your lettering that you can resize to as big as a house without looking pixelated. (Gross!)

Step 8: Advanced panel: Ignore White

Open up your “Image Trace” toolbox, click on “Advanced” and then the “Ignore White” option to quickly get rid of your white background.

Step 9: Delicate or bold

Use the “Threshold” slider to make your lettering delicate (slidddde to the left) or bold (slidddde to the right). (CRISS CROSS…. Just kidding.) A common problem that calligraphers run across are their hairlines (thinner strokes) disappearing in spots. By slowly sliding the threshold to the right, you can remedy that. Make sure you check “Preview” at the bottom of the tool box so that you can see how adjusting the sliders affect your lettering.

Step 10: Texture

I personally love the texture that using a nib and ink creates. If you want more texture, slide the “Paths” slider the right. For less, slowly slide it to the left. If you slide it too far left, you end up with weird, blocky letters, so be careful. In a future tutorial, I’ll be showing you how to smooth out these lines if you’re not a fan of texture. (If you’re not a fan of texture, let me guess… you also don’t like coffee, chocolate, Gilmore Girls, and long walks on the beach? Just kidding.)

Step 11: Change colors

Once you’re satisfied with the way you have adjusted everything in your Image Trace tool box, go ahead and click on “Expand”. This will turn your calligraphy, illustration, or hand lettering into a series of paths and blue dots. Don’t fret. In the future we will be using these paths and blue dots to smooth out any miniscule mistakes. For now, you’re free to move about and change the color.

Here is the finished product ready for use on your website or about page!

You now have your digitized calligraphy, hand lettering, or illustration that you can change the colors of as quickly and easily as you please!

Leave a Reply

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