above

how to turn hand-lettering into a digital file

soshedid

Even wonder how to turn your hand lettered art into a digital file that you can use to overlay on a photo or have printed to display? Maybe you’d like to alter your original art – move things around, add more space, resize or recolor?

This post will show you just how to do it all.

NOTE: Get ready for A LOT of photos! I like to give as much detail as possible to show you just what steps to do and make things super clear. Follow along as you try this out and you’ll end up with a digital file you can save, print and share with others.

1. CREATE YOUR ART artworkspiral

I drew out this saying as a lesson in the Simplified Penmanship handwriting course using an art notebook and pen.

2. SCAN YOUR ARTWORK scan-the-art

There are so many different scanners on the market and you can use whatever works for you (even snapping a photo with your iphone can work!). I use a Fujitsu ScanSnap portable scanner. It is small and portable and I like that when it is not in use, I can just unplug it and store it in a basket. When scanning, you can change the settings to fit your needs. I like to scan at the highest resolution (600 dpi for color; 1200 dpi for black and white).

savefile

Rename your scanned image and save in appropriate file.

3. Adjust in Adobe Photoshop
2photoshop

You will use photoshop to clean up your artwork and remove the background. Open up the file in a new document.

1gray

Begin by changing your file into a GRAYSCALE image (if you did your lettering in color, the next two steps will not apply).

2bright

Next, open the BRIGHTNESS/CONTRAST tool and move your contrast all the way up. This will make you blacks blacker and whites whiter.

2brightcont

4. CLEAN UP YOUR ARTWORK 3erase

If there are any areas where pencil marks show through or you want to clean up lines, smudges, etc., now is the perfect time to do so.

I like to zoom in close and use the ERASER tool to remove the imperfections.
3erasefinish

Keep in mind, this is hand lettering, so no need to make it flawless!

5. REMOVE THE BACKGROUND

4newdoc

If you’d like to remove the background so that only the lettering on a transparent background remains, follow along with this step. This is not necessary (especially if you will be turning your lettering into a vector in Illustrator – see #7 . I do this mainly when I scan watercolor artwork and I want to isolate each item and remove the background – see this post for more on turning watercolors into artwork).

To remove the background, you’ll need to create a new document with a transparent background. Make your document the size of your scanned artwork.

7magicwanderase

Copy and paste your art to this new document.

magicwand

Using the MAGIC WAND tool, click on the background and click delete.

7erasebackground

You’ll see the white background removed and a transparent background. Inside the closed shapes the background will remain, so just click and delete each one.
7transparent

You’ll end up with your lettering on a transparent background. Go ahead and save as a PNG file (this will preserve the transparency. A JPG will not).

6. OPEN IN ADOBE ILLUSTRATOR 8illustrator

Start by creating an artboard at the correct size for your finished print (mine is 8×10 in).

9backgroundcolor

You can add a background (make a rectangle to the desired size and add a fill). If you are happy with your artwork, you can save as a pdf at this point and you’ll have a great artprint!

7. TURN YOUR ART INTO VECTORS

If you’d like to move, rotate, recolor or resize your lettering, you’ll need to make it into a vector. A vector is an image made of anchor points and paths (rather than pixels) that will allow you to alter your art without losing quality.

trace

You’ll use the IMAGE TRACE function which you can find in your top tool bar or from OBJECT>IMAGE TRACE. I like to use the black and white logo setting.

10-expand

Next click EXPAND.

10expanded

The result will be your artwork made up of tiny anchor points and paths (as seen with the blue marks) and a white background.

ungroup

To remove the white background, right click and select UNGROUP.

12-pullapart

Now pull that top white layer off and delete.

12erase

Go back through and delete the inside shapes to remove the extra white layer.

13vector

You’ll end up with individual vector images for each of the shapes in your artwork.

group

If you’d like to keep each word or line together, select the items, right click and GROUP. This will allow you to move and resize the words as a group rather than independently.

8. MAKE ADJUSTMENTS TO YOUR ARTWORK
14move

Now that you have vector images, you can make changes to your artwork. Go ahead and move words to reformat your design.

15recolor

Or recolor one letter at a time, whole words, or the entire phrase. To recolor, click on the art, open the COLOR PANEL and select a color. You can change the fill (the inside color) or the stroke (the outline color).

16resize

One of the best parts of turning your art into a vector is that now you can resize without losing any resolution. Group the whole thing together, hold down shift and pull the whole group out however big or move it in to make it small. You will not see blurry edges no matter how large or small you resize.

17-finish

When you are finished making edits, save your file!

If you are using it for printable artwork, save as a PDF.

If using for digital lettering, save as PNG.

If using as an image, save as a JPEG.

shebelievedwindow

Learning to turn your hand lettering into digital images opens up so many fun ways to use your art!

double-line-tiny

Interested in learning more about the art of Penmanship + Lettering or how to use Adobe Illustrator? I’d love to teach you!

Simplified Graphic Design - Adobe Illustrator for Beginners / jones design company simplifiedpencover
Click the images to learn more about the online classes offered.

14 Responses to how to turn hand-lettering into a digital file

  1. Rachel March 1, 2016 at 7:04 am #

    Hi Emily! I’m wondering what version of Photoshop you use? I’m new to graphic design, but I’m doing more of if for our church and would like to purchase Photoshop. Thanks for any tips–it kind of feels like learning a new language!

    • emily March 1, 2016 at 12:26 pm #

      I use the Adobe Creative Cloud – that way I always have the most updated version! It is a subscription, so you pay monthly.

  2. Gabriela February 25, 2016 at 1:55 pm #

    Hello Emily, how are you? Thank you for the post… great Idea!!

  3. katelyn ryan February 24, 2016 at 11:53 pm #

    i use a similar method for text all of the time! i love illustrator!

    http://www.katelynryan.com

  4. Kylie February 22, 2016 at 4:44 pm #

    Thanks Emily for this fantastic post!!!! I am really keen to do your Penmanship Workshop but dont have the time at the moment. Im hoping you do it again in the near future as Im definitely keen. I love your blog, your style and find you very inspiring. Thank you again….xx

    • emily February 22, 2016 at 8:06 pm #

      I’ll offer it again in May!

  5. Phyllis February 22, 2016 at 3:06 pm #

    Great post! Thank you for sharing :)

  6. Marijean Jenson February 22, 2016 at 1:27 pm #

    Can you do this in Pic Monkey. I don’t have Photo shop.

    • emily February 22, 2016 at 8:08 pm #

      I’m sure you can. I haven’t used pic monkey, but I believe it functions in many of the same ways as photoshop. Give it a try!

  7. Christine February 22, 2016 at 12:48 pm #

    Thanks, Emily! I’m really enjoying your simplified penmanship class, and now I’ll be able to use this tutorial to help me create wedding programs for my daughter!

    • emily February 22, 2016 at 8:08 pm #

      Oh, how wonderful!

  8. Mina February 22, 2016 at 12:07 pm #

    Love your post Emily! Really enjoying the penmanship online class :) Thanks for all that you do! Very inspiring :)

  9. Charlene February 22, 2016 at 9:14 am #

    Hi Emily! Have you tried adjusting the Layer Properties in Photoshop to make the background transparent? It makes a more smooth transition (if you want to avoid the blockiness of the magic wand)! It’s also great to achieve that “sketched” look in your strokes.

    • emily February 22, 2016 at 9:46 am #

      Great tip! Thank you. I will try it next time.

Leave a Reply