What you will learn

Hey, Walter here. Creator of the Webtoon Original series HAXOR. I also created Shiver Bureau, Cubicles, Metalshark Bro, and worked on a ton of other properties.

 

Today, I want to pass along some knowledge on a topic that is very near and dear to my heart. Knowledge that can make or break your Webtoon. A skill that will pull your reader in or make them run away screaming.

 

What is this amazing thing that will make your Webtoon look professional and polished?

 

Lettering.

 

That's right, lettering. Lettering is often overlooked by many creators, simply viewed as a chore that needs to get out of the way so the comic can be done. But one can argue that lettering is just as important as story and art. Some may even say it's more important.

 

That's because lettering is the magic door that allows the reader into the world of your story. If that door is too small or too oddly shaped, your reader cannot get into your story.

 

Luckily with just some basic knowledge, it's possible to create professional-looking lettering. So let’s make that door.

Video Tutorial

Creating a professional balloon

The first step of lettering is creating a balloon. It can be tempting to type your dialogue first and throw a quick ellipse-shaped balloon around it. However, there are two reasons we don’t want to do this. First, the ellipse shape will have a little extra empty white space, which means we’re covering up more artwork. Not good. Second, I think we can make a more aesthetically pleasing shape.

 

Enter the rounded rectangle, aka perfection.

This rounded rectangle (though I prefer to think of it as a bloated circle) wastes less space than an ellipse while being less obtrusive than a rigid box shape. Balloons are like people and can come in all shapes and sizes. This is my preferred balloon shape and one that is used in many professional and popular comics. It’s a great place to start for standard dialogue.

 

Creating this shape takes a little more work, but once you have you can reuse it. I’ll show you how to do that later.

 

First, create a new canvas that is 1900px x 3040px. I use this resolution for my Webtoon, and it shrinks down to Webtoon’s required file size of 800px x 1280px perfectly. This resolution also gives us the option to physically print a panel at a standard American comic book size. DPI doesn’t matter for Webtoons, but let’s enter 300dpi so our theoretical printer doesn’t get confused. If you use a different canvas size, you will have to tweak all the size settings I mention below to work at your personal canvas size.

Now select the Text tool and the Ellipse Balloon Sub tool. Hit "T" on your keyboard for a shortcut to the tool.

Make sure the line color is black, and the fill color is white. The line color is what outlines the balloon, and the fill color is what’s inside the balloon. Choose the rectangle shape and set the roundness to 2000. Set the brush size to 9. This is a little thin, so feel free to adjust the style of your comic. A good rule of thumb is to have the brush size be slightly thinner than your panel borders. I would suggest setting anti-alias to weak, as this will keep our balloons crispy with sharp edges but not jagged ones.

Finally, the brush shape. This will determine the pen, pencil, brush, etc. that is used to draw the outline of your panel. I prefer to use the same pen tool that I use for drawing. It makes everything feel more cohesive.

 

Now we’re almost there, but this shape looks a little mechanical. We want to give it a little bit of style, our own personal touch. Hit "O" on your keyboard to quickly access the Object tool and click on your new balloon to select it.

Now you’ll see your balloon is selected with these two boxes. Quick note, this is how you would also modify any of the balloon settings we just talked about. For example, if you want to make the balloon outline thicker and change colors, simply select the balloon with the Object tool and adjust the brush size in the tool properties.

Now we will tweak the shape of the balloon by moving these red dots just a little. Still using your Object tool "O", click and drag the dots slightly outwards. This will make the balloon feel more organic like it was hand-drawn. We only want subtle changes here, so don’t make it obvious, let your artist’s brain take over.

Side note, the blue dots and lines will let you change the size and rotate the balloon.

 

Finally, we need to create the tail. Hit "T" to select the Text tool, then select the Balloon Tail Sub tool. Select Spline and set the width of the tail to 80. Feel free to make an artistic choice to go wider or narrower. Now click inside your balloon, near the edge, to start the tail. Click once more halfway to your endpoint. Finally, double-click at your endpoint or hit "Enter" on your keyboard.

We can even go one step further and create a connecting balloon. Using the Object Sub tool, select the balloon. Now hit ctrl-c to copy the balloon, now hit ctrl-v to paste the balloon. Copy/paste is also available through the ‘Edit’ menu. Now use the blue lines to move the new balloon. Notice how Clip Studio Paint automatically joins the balloons together for us. Thanks, Clip Studio Paint.

Play with different sub tools and their settings to create unique balloons for robots, monsters, cell phones, etc. You can get a lot of unique shapes with the Balloon Pen tool.

 

And that’s it, we have our perfect balloon. That was a little more work, but don’t forget we can reuse this balloon. But before that, we need to add our lettering.

 

Lettering

Hit "T" to quickly access the Text tool and choose the Text Sub tool. Choose your preferred comic dialogue font. If you don’t have one, have no fear. Simply point your browser to http://blambot.com for a bunch of free fonts created by a professional comic letterer who’s been working in the business since 2002. We’re going to use his font ‘Smack Attack’ which is one of his free fonts that I used for my two graphic novels. For this font and this canvas size, set the size to 18 and the line spacing to -3. That’s a negative 3.

Important Note - Not all fonts are created equal. If you use a different font, you may need different settings. A quick way to determine font size is to zoom out until the width of the canvas on your screen is roughly the same size as a phone’s width. Change the font size to the smallest size that is comfortable to read. Remember, Webtoon readers are usually on mobile devices, so the font needs to be easy to read on a small phone screen.

 

The best way to set line spacing is to type three lines, then set one of the words in the second line to bold. Set the line spacing so the bold word doesn’t touch the first or third line. Don’t make them too far apart. Again, zoom out, is it hard to read? If so, add more line spacing.

WOOT! We’ve got our word balloon. That may have seemed like a lot of work, but once you do it a few times, it’s second nature. Good news though, you don’t have to do it again. As I promised, let’s reuse this balloon.

 

Right-click on our text layer and click "Duplicate Layer". Now we can simply, move this new balloon to the correct location, select the Text Sub tool, and type the new dialogue over the old dialogue. All of our balloon settings and font settings are retained, and we don’t have to redo anything.

All we need to do is resize the balloon and re-aim the tail using the Object tool "O". With the Object tool, we can resize a balloon by moving the blue lines. Then we use the Object tool to select just the Balloon Tail and reposition it. We can even flip it if we pull one of the blue lines over the opposite blue line.

You can also select the individual points on the tail to achieve more precise alterations.

 

Side note, sometimes I flip and rotate the balloon randomly to achieve more balloon shape variation in my Webtoon. A very small detail, mostly likely unnoticed, but it makes me happy in my letterer’s heart.

 

Now we have a great looking dialogue balloon and the creation is complete, but our work isn’t done. We still have a Webtoon to letter. Here are some simple lettering tips to keep your dialogue looking great.

Guidelines and Best Practices

The Diamond Shape:

 

You want your dialogue to be roughly the shape of a diamond. Meaning, that the middle lines should be longer than the top and bottom lines. This will fit perfectly into a squashed box. Granted, the shape may need to get thinner or wider depending on space restrictions within the art.

 

The Mouth:

 

The tail of the balloon should be aimed towards the mouth or whatever is producing the dialogue, like a phone or TV. Though not always possible, make your best effort to get as close as possible.

 

Placement:

 

Although Webtoons are unique from print comics because you can stick word balloons outside of a panel, there is still a possibility to run out of room and also misplace balloons. You shouldn’t have a large amount of dialogue without any art. Balloons that need to be read first, should be higher than other balloons. You don’t want to have balloon tails crossing each other, and usually, you don’t want balloons creating a wall between characters. This should be figured out during the thumbnail phase of your Webtoon.

Crossbar I:

 

The capital “I” is reserved for the personal pronoun. Words, even if at the start of the sentence should only use lowercase, non-crossbar I. This is just a visual appeal and spacing tip. This applies only to using UPPERCASE style. If you use mixed case for your comic, this doesn’t apply.

 

Consistency:

 

Your balloons should be consistent, same line width, same tail width, same typeface, and font. The consistency will keep the lettering from being distracting. There are many reasons to break this rule such as yelling, whispering, and monster voices. However, do so sparingly and with artistic thought.

Side note, most of the time when we say font we are actually referring to typeface. The typeface I use is "Smack Attack", however the font I use is "Smack Attack - Normal - Size 18". Sometimes I may use the font "Smack Attack - Bold - Size 18" for yelling.

Art is the boss:

 

Never cover up important art with dialogue. Reshape the dialogue to something that respects the art.

The End?

You are now on the path to amazing lettering that will carry your reader into the world of your story like a soft cloud. Now, this tutorial is a starting point. Just like writing and drawing, lettering is an art form and is open to interpretation and innovation. Learn the rules, break the rules, fix the rules.

 

If you want more videos about Clip Studio Paint, lettering, and just making comics in general, check out my YouTube channel.

 

Have fun making comics!

 

Walter Ostlie

http://youtube.com/walterostlie

http://walterostlie.com/haxor

http://walterostlie.com