How To Turn Your Hand-Lettering Into a Web Graphic From Start To Finish


More and more these days I’m using hand-lettering as a design tool throughout my brand presence over at Made Vibrant, not just in the art I produce, but also in things like web graphics and social media images.

I love that it adds a personal touch of humanity to otherwise standard digital designs, and I also love that it allows me to include "typography" that I know no one else in the world will have. 

If that's something you're interested in doing for your own brand, I thought it might be helpful to show you my step-by-step process from start to finish for creating these kinds of hand-lettered graphics. 

The process can be broken down into three phases, and hopefully this in-depth post will help you get started mastering all three! 

Now... on to Phase 1!

phase 1:

Decide on a basic composition by sketching out some thumbnails.

Whatever your phrase is that you want to hand-letter on your web graphic, you want to begin by planning out the basic composition of how the words in that phrase will fit together.

When I say "composition" here, I'm simply referring to how the various parts of your hand-lettered sketch fit together and are positioned in relation to one another. 

(Over time and with practice, you may be able to streamline this process and come up with these in your head, but I still try to put my ideas down on paper to make sure I don't have to re-do my piece down the road.)

Some things to keep in mind about composition:

  • Emphasis. Think about what word or words in your phrase you want to emphasize. You may want to make those words stand out by making them bigger, bolder, or in a different style.

  • Balance. Is there a way to create symmetry or balance in your design? Look for words or phrases that can be paired up or reflected in a similar way.

  • Connection. Do you want any of your letters to connect with one another? OR do you want them to mold around each other like puzzle pieces? Look for opportunities to create connection between letters/words if so. (ps. There's a bonus video below on how to cultivate this skill!)

For example:

Let's say I want to letter the phrase "Just Keep Creating." Below is how I might draw out three different "thumbnails" (aka tiny sketches) with different compositions.

Ultimately I realized that I wanted the most important word to be "creating" so by making Just Keep slightly smaller and making the "C" and "G" of Creating a bit taller, I've made a little cradle of sorts for the two less important words in my composition to hang out. 

I may not have been able to see that at first had I not sketched out a few possibilities first.


phase 2:

Draw out your piece in pencil first and then fill in your letter forms in ink. 

Once you have a basic idea of what you want your composition to be for your hand-lettered piece, the next big step is, of course, to DRAW IT!

Now, if you’re new to hand-lettering, I’ve broken this down even further into mini-steps, showing you how I build my individual letters in phases.

And now here's how my "Just Keep Creating" piece came together in these stages!

Step 1: Letter forms in pencil!

Step 1: Letter forms in pencil!

Step 2: Going back over in ink. (You'll notice I just use my pencil marks as a guide so I can focus more on letting my hand flow and less on "tracing" my pencil perfectly!)

Step 2: Going back over in ink. (You'll notice I just use my pencil marks as a guide so I can focus more on letting my hand flow and less on "tracing" my pencil perfectly!)

Step 3: Thickening strokes.

Step 3: Thickening strokes.

Step 4: Filling in my letters.

Step 4: Filling in my letters.

Step 5: Erasing any stray pencil marks.

Step 5: Erasing any stray pencil marks.


phase 3:

Make it digital! Add your lettering to your web graphic.

Now that you have your hand-lettered piece, it’s time to add it to your web graphic using Photoshop. (Scroll down to see these steps presented in video format!)

Step 1: Take a photo of your piece with your smartphone. 

Be sure that you’re taking your photo straight on and not at an angle or it will warp your letters. You also want to make sure it’s good lighting. 

You can also use the settings on your camera to turn on gridlines if it helps you keep things squared up. 

This is why it’s also important to do your hand-lettered piece in black ink on white paper because you want maximum contrast between your lettering and the page. 

(Note: you can also scan your photo, but I find that taking a photo is faster and usually works just as well.)

Step 2: Send your photo to your computer. 

Usually I use Airdrop to send my photo from my phone to my laptop over wi-fi, but you can just as easily email it to yourself as well. Just make sure if you do that you select “Actual Size.” You want your photo to be at the highest resolution possible when you pull it into Photoshop! 

Step 3: Open both your web graphic AND your lettering photo in Photoshop. 

Whatever photo you want to add hand-lettering to, whether it’s a blog post image, a sidebar banner or just a photo, make sure you have that open in Photoshop first. Then, select your photo that you just sent to yourself, and open that in Photoshop as well. 



Step 4: Adjust the Levels in Photoshop to maximize contrast. 

Hit Command + L (on a Mac) to pull up your Levels menu in Photoshop.

You’re going to use the Levels sliders to make the whites/highlights of your paper as light as possible (right slider) and the darks/shadows of your lettering as dark as possible (left slider).

Be sure you don’t slide the left hand side too far or you’ll start to lose the crispness on the edges of your lettering. (However, if you want a more rough and textured look, you might like that!)

For good measure, I also hit  SHIFT+ Command + U which brings the saturation all the way down, making the photo black and white. This aids in the contrast by removing any colored “halos” that might show up around your letters. 


Step 5: Cut your lettering and paste into your web graphic. 

Once your lettering looks nice and crisp, use the selection tool to select the area around your lettering and use CMD + X to cut it from your document. 


Then, pop over to your web graphic document and hit CMD + V. This should paste your lettering in as a new layer. Then you'll just want to resize it so it fits on your canvas. (Be sure to hold down your shift key as you transform so you retain your proportions!)


Step 6: The magic! 

Now that your lettering is in your web graphic, there’s just one problem -- there’s a big white background around it!

To fix this with one click, head over to your Layers palette and make sure your lettering layer is selected. Change the layer style to “Multiply” which will turn everything that’s white transparent! 

Then you’re free to adjust your lettering as you wish. 


...And ta-da! 

A fun, hand-lettered graphic for your branding/social media needs!


Step 7 (Optional): Change the color of your lettering. 

If you don’t want your lettering to be black, here’s how I change the color of my lettering.

First, undo the last step by setting your Layer Style back to “Normal.” 

Then, Command + click your lettering layer which should make a selection pop up of only that layer (look for the dancing ants around your layer!)

Head up to Select > Select Range... and use your eye dropper to pick up the white color of the paper background around your lettering. Be sure you click the eye dropped in the white INSIDE your dancing ants. This will tell it to select everything that is that color within your lettering layer. 

Then hit... DELETE. This will leave only your lettering remaining. 


If you want SUPER crisp edges around your lettering and you don't like the rough texture from your pen/paper, you can also vectorize your lettering in Illustrator at this stage (something I go over in video form inside the Better Lettering Course! Click here to join for just $20!)