The Process – Tutorial

The process of creating custom mono-weight script lettering from sketch to final vectored, polished piece

Unless you've been living under a rock for the past five years, lettering has grown a presence that, frankly, it's hard to ignore. Platforms like Instagram have become an incubator for the thriving lettering community, and maybe you've been itching to be a part of it. Having the skills to create custom typography isn't necessary, but it will definitely make you more valuable. Like most skills, it will take practice and patience. I know for me, my first lettering projects weren't that good. You might feel the same way, and that's ok. The more you do it, the better you will get. 

To help figure out your workflow, I want to share my process boiled down to a few steps. You just need a basic understanding of Adobe Illustrator and Photoshop and a pencil and paper. Keep in mind, this is my personal process, so don't feel like you have to do things my way. I use Illustrator, and you might use Procreate on an iPad or even just pencil and ink. Either way, share your work and tag me in it!

Sketching

Before any work is done on the computer, I always begin with rough sketches. Think fast and loose. Don’t worry about getting the lines perfect. Simply play around with different styles and shapes of letters. Each quick sketch should build on top of the next. I can't stress enough how important it is first to sketch out your letters using pencil and paper. Getting your hand tuned with the flow of letters and being comfortable with tools like pencils, markers, and brushes is a great skill to have.

When I have a sketch I want to move forward with, I use a ruler and draw out a set of guides to help the letters align. If you’re familiar with type, there's the Baseline (the line where the letters sit), the X-height (the height of a lowercase x), and the Cap-height (the height of the uppercase letters). I eyeball the spacing between the words (the leading) and lay out more lines that will determine the axis of the letters. I’ll roughly pencil out the letterforms using the guides. When I’m pleased with what I have, I'll draw over the pencil with a marker. This helps to give the letters more contrast when I upload the file into Illustrator. Then I will snap a photo of the sketch with my phone and airdrop it or email it to myself. Then I’ll upload that photo into Illustrator and start vectoring.

Vectoring

This is where most of the time is spent and where you might get the most frustrated. Using the pen tool in Illustrator can be a pain when you're not entirely sure how to use it. Let's take it slow.

I first create a new document that's 1500px by 1500px. This will give me enough space to play around. I'll upload the photo of the sketch into the document and reduce the size to a few hundred pixels large and place it on the top left of the document, reducing the opacity down to 40%. Then I will create a new layer where all my working vectoring the image will live. Using the pen tool, I'll recreate the line guides that I made in the sketch. When the guides look good, I'll select the lines I created and hit Command + 5. This will turn the lines into guides. Cool, huh?

Here comes the hard part, recreating the type with the pen tool. A few words of advice: Less is more—meaning the fewer anchor points, the better. The more points you use, the more clunky the letters will look. This will help to create smooth and elegant curves.

Another piece of advice is always to try to place the anchor points on the extremes of the letters—meaning the far top, the far bottom, the far left, and the far right. Depending on the curve, you can get away with just placing the anchor points on the far top and far bottom. When pulling the bezier handles, it's best practice to pull the handles either horizontally or vertically by holding Shift while you drag the cursor. Since the anchor points are placed on the extremes of the letters, this will give you the best curves. Sometimes you will need to ignore this advice with specific curves or angles of lines. If you hold Option while pulling a bezier handle, you can control one handle individually. This is helpful when a large curve leads to a much smaller one.

It is also important to note that when bezier handles are working on the same curve, you want to try to avoid intersection. You want each handle to do their fair share of effort.

NOTE: Always try to duplicate the art around the Illustrator artboard during each step. That way you can go back to a previous step by selecting the correct piece of art that was duplicated and not have to hit Command + Z a thousand times.

Now for the final touches. I added some dimension by cutting out pieces on the line where other lines overlapped by using the scissor tool. This gives the letters the illusion of having shadows. Then I grouped the words "The" and "Process" separately by selecting each word and hitting Command + G. Next, I center-aligned the two words together and expanded the path from a stroke to a fill by going to Object > Expand. After that, I selected all the type and united all the shapes together using the pathfinder tool in the control panel (Window > Pathfinder).

Finally, I like to select the whole object using the direct select tool and choosing live corners. I start by plugging in 10px. This effect will soften up hard edges and give your type an aged and inked look.

Presentation

For this project, I wanted the type to be displayed on paper. What I did was set up a scene with a notepad, a mechanical pencil, and a rusty old quarter. That button in the middle is just something for my camera to focus on. Getting my camera to focus on white paper can be a pain, so using a small object that I can clone out in Photoshop is an easy trick. Using natural lighting, I shot the scene with plenty of room to play with the crop. Shooting wide on flat lays like this is a good habit to have. Nothing is more annoying than realizing the type you worked so hard to create doesn't comfortably fit within the scene you just shot, so you have to go back and reshoot it all over again.

Now it's the home stretch. I exported the photo of the scene off my camera and opened it up in Photoshop, making sure to crop the image to a square (for Instagram, obviously). Going back to Illustrator, you want to copy the art and then paste it into Photoshop as a Smart Object. Keeping the art in the middle of the canvas, I'll tweak the size while holding Shift + Option. When I'm happy with the proportion of type relative to the objects around it, I'll export the file as a JPG and then airdrop or email that JPG to myself so I can edit the image in the app VSCO. VSCO is what I use to edit images, so feel free to use whatever app you feel the most comfortable in.

Final product

This is the final edit I posted on Instagram. This whole process took me about four hours to complete. This is my approach to vectoring mono-weight letters, but be sure to see how others tackle similar projects. There are some incredible hand-lettering tutorials made by incredibly talented individuals dotted around the internet. Thanks for taking time to read this tutorial, and I'm excited to see what you all create!

See the original post here. And be sure to follow me on Instagram.