Open Source Comics: Lettering in Inkscape

I’m a kopylefty. Also, I can’t always afford the latest version of Photoshop or Illustrator. And, regardless of my mastery of the torrenting arts, I still don’t like to pirate things if there’s some kind of other option. And as far as vector graphics programs you don’t have to pirate Illustrator, because Inkscape is there for you.

Illustrator’s the go to solution for mainstream comic book lettering. Often independent artists hand letter their work, but if you want to emulate the look of those garish men in spandex punching each other you at least need some sort of vector art program. I’m going to teach you the basics of the free solution: Inkscape.

When I first started using the program I had to teach myself how to use it. The program itself is very useful, even if it does have a lot of rough edges. There are a few comics lettering tutorials people have posted, but all of them have left out a bunch of information I consider vital.

First things first, I’m going to warn you about a couple things. Inkscape assumes all raster images it imports are 90 dpi (or dots per inch). And the other problem is that Inkscape only exports PNG files. Both of these can create issues if you want to print your files. But there are solutions. I’ll get to them in a little bit.

Here’s the layout of Inkscape. The first thing you want to do is load up your comic page. Here’s an example from Big Red Christmas, the holiday comic I did with my wife last year.

Caption Blocks

Next up select the Text Tool and figure out where you’re going to put your text. With the text tool selected, one of the top toolbars will transform into a text widget. From here you can control the font, letter size, alignment and a couple other things.

This isn’t a design tutorial, so I won’t tell you what fonts to use (other than don’t use Comic Sans, for the love of Eris) and I won’t tell you what font size to use either. For me, I figure out what I’m trying to do. Is this character a superhero? From what era? Or is he a barbarian warrior? Then I trawl Blambot for an appropriate font. I might need to go off into the wilds of the free font websites, but thar be dragons. If I had some extra money I’d spring for some Comicraft fonts. But I’m using Inkscape, so I’m doing my best to avoid pay options.

And as for sizing? Figure out what your final size is going to be and make sure whatever size you select will be readable at that size.

Now, it’s time to use that text tool. With it selected you will draw a cursor wherever inside your image you click. From there you can add any text you like, complete with line breaks wherever you want.

One feature that comes in extra handy at times is the Text Tool Box. It’s available through the Text->Text and Font menu, or as a button on the top bar.

This gives you a few more options than the top bar. Mainly, it gives you access to line spacing, which can be vitally important if you’re using a font not originally created for comics.

Let’s turn these into caption blocks. First, click the rectangle tool from the toolbar. This will create a bare bones rectangle wherever you click->drag it.

Whoops. It looks like I accidentally covered over my original lettering!

Luckily, there’s a solution. You can raise or lower all the objects in an Inkscape file two ways. You can hit the dropdown menu with Object->Raise/Lower. I use the Page Up/Page Down, which use the same function. Lower the selected box until it lowers itself below the text like this:

Now the text is readable, but it doesn’t quite look complete. Hit Object->Fill & Stroke to bring up a menu to alter your box’s properties. The “Stroke” in this case is the outline around your object. The “Fill” is everything inside the stroke. Play with the options however you like. I’m here to teach you the basics, not elaborate theory.

Here’s what I came up with.

That looks okay, but I’ll use this opportunity to teach you something else that might become useful.

Create another box in the empty space of the caption block. Select both blocks at the same time. You do this the same way you would in any program. Use the select tool and hold down the shift key, then click both objects.

Now click on Path Menu at the top. This gives you a bunch of exciting options, the most useful are Union and Difference. Use Path->Difference (or the Ctrl - keyboard shortcut). What this does is it takes the two objects and carves out a space from the older object using the shape of the newer object. The result looks like this:

What ever am I going to do with that other text, though? Let me put another box under it.

I’m not covering the entirety of the text because I’m gonna show you a few things.

Pay special attention to the handles at the edges of the box. Let me show you something else that’s useful. Drag the circle downward.

Now I’m going to Edit->Duplicate or Ctrl D the box and move it around so that covers under the rest of the text.

Be careful when reshaping objects with a stroke. The stroke will get refigured each time relative to how you’re altering the shape. I’ve nudged it so little it’s not obvious. But anyway, I’ve now shaped the block around the rest of the text. Next I’m going to Path->Union AKA Ctrl +. This takes the two boxes and merges them together and you get this:

Using these techniques you can create all the basic effects that you’ll see in caption blocks in comics.

Word Balloons

Now let’s move onto something a little bit more complicated and hands on. Let’s start off by laying down
some more text and putting an oval underneath it. The Oval Tool is a couple clicks below the Rectangle Tool. You should be able to figure this out for yourself.

The first thing you will want to do is hit Path->Object to Path. What this does is take the oval object you just created and it transforms it into a primitive object. The next thing you’ll want to do is select the Paths and Nodes tool.

This will show you a bit more of how Inkscape (and any vector art program) runs under the hood. All the objects you’ve created, all the boxes and even the text, are created from points in your page. These points have mathematical functions that tell Inkscape how to connect them. This shows how the oval object works. Click on the handles and play with them a little to get a feel for how this stuff works.

Once you’re done playing undo all your changes and go back to the original state.

Edit->Select All (or Ctrl A) to select all the points in the current object, then click the Insert New Nodes button on the top menu.

This creates a new point in exact middle of all the other points. Play with these points until they look less goofy.

Now you’ve got to add the balloon tail. Select the Pen Tool.

Once you click, the Pen Tool will create raw points with lines connecting them. Once you’ve created the points you want then you double click to create an open shape, or you can create a closed shape by double clicking on the handle that shows up where you first clicked.

I’m going to create an angle pointing out from the balloon roughly at Stardust, so I can create the most basic balloon tail.

Next I select one of the lines and click the Curve button up top.

Play with the handles until you get a shape you like.

With that done you can Path->Union (or Ctrl +) the balloon and tail together, resulting in this:

By now you should have a good grasp on the basics. Let me apply a bit more theory. Here’s a new word balloon.

Note how the balloon overlaps the panel border and Fantomah’s wrist. I select the pen tool and create closed shapes around where I want to clip the word balloon.

I Path->Difference these shapes and voila. Now the balloon fits the panel borders better and appears to slide under Fantomah’s wrist.

I’ve shown you pretty much everything you’re going to need to utilize most of the functions in Inkscape for lettering comics. There’s one last thing I have to show you; how to export your finished image.

When you’re done hit File->Export Bitmap. That will bring up this dialog.

Now here come the two issues I warned you about at the beginning. Inkscape treats all images as if they’re 90 dpi and it can only export PNG images. If you’re exporting for the internet you’re fine. You might want to convert the image to another format or play with the color space, but the PNG format can hold as much information as any other web format, so it’s a good place to start.

If you’re getting ready for print, though, this can be an issue. Fortunately you don’t have to export a bitmap image and Inkscape can natively save itself to about fifty million formats.

See?

I haven’t actually used this method and I suspect it will still save the image at 90 dpi, but that can be surmounted by importing it into another program, the obvious choice for me would be Open Office Draw because it’s also Open Source, and alter the print resolution before sending it on.

Or you could export everything but the base image and overlay it onto the original image at the appropriate resolution if you really wanted to.

With that in mind, Inkscape is still an incredibly useful tool, and it’s free. You can’t beat that price.

Now go read Super Wizard and Garry: The Legend Continues, two comics I extensively use Inkscape on.

It’s Go Time

Welcome to Garry: The Legend Continues. I’m Joey Peters, creator of Super Wizard.net, as well as the writer of the comic you’re reading now. My fellow contributor, Donna Martinez, is my wife. We’re a couple small wheels on the Boston Comics scene. If you go to lots of cons in the area you’ve probably met us. We’re hoping to raise our visibility in 2011 and Garry is at the forefront of that strategy.

For years I’ve been trying to get Donna to work on a webcomic. The thing is, while she’s an incredibly good artist she’s very hard to motivate, and so I’m doing my best to keep her constantly working, so as not to give her a chance to lose motivation. She’s been steadily working on stuff since December, when she illustrated my lumberjack/superhero xmas story for Super Wizard. This is the continuing phase of that.

Garry burst fully formed from my brain on Christmas Eve Eve. The idea of a barbarian living in the modern day kicked into my head and the rest of his cast filled in pretty quick: Fred, his necromancer roommate who’s long since lost his body, another fae, elfin roommate, and of course the normal guy, who’s pretty much just there to act as a go between for these strange fantasy characters and the normal world. Once the Big Red McLane story was long since done I laid the concept on Donna and she immediately took to it and here we are.

I showed the link around to various people and we got a very positive response. Let’s do it up. More comics are forthcoming every Monday, Wednesday and Friday.