The making of ILIIT #22, or how to produce a colored comic strip using pencils, pens, rulers, paper, scanner and the Gimp

On the 21st of March, 2010, I published the 22nd installation of my (serious) comic strip I Live in Interesting Times. Unusually, I took extra scans and screenshots of the process on the way.

Here is a step-by-step reconstruction of the process I currently used, as applied to ILIIT #22. Each step is linked to the section discussing the step in detail.

  1. I finished a script for the strip.
  2. I pencilled the strip.
  3. I inked the strip.
  4. I digitized the strip.
  5. I lettered the strip in the Gimp.
  6. I colored the strip in the Gimp.
  7. I converted the strip to a web-friendly format.

Now, these sorts of tutorials are often written by two kinds of people: On the one hand, we have the master of the craft, explaining her craft to those still learning it. On the other hand, there is the novice, having just learned enough to produce not totally worthless pieces, eager to share his new knowledge to all who deign to listen. Most assuredly, I am, as of this writing, of the latter kind.

There are nine and sixty ways of constructing tribal lays, and every single one of them is right! wrote Kipling. That advice extend from writing ballads to all kinds of creative endeavours, including comic strip writing. There is no "the best way" superior to all others, and certainly the method described here is not optimal.

One deficiency in my current method is that it takes me four to six hours to construct one strip. While that might be acceptable to a professional cartoonist, it is way too slow for my current needs. My current schedule for ILIIT is a strip every other day, which translates to around 20 hours per week! That workload is not sustainable over the long term, as long as I do this as my hobby.

There are other deficiencies in my method, technical ones. I will bring them up as they come up in the detailed sections below.

I use these techniques because they are the techniques that allow me to create a comic right now, as opposed to (say) three years from now (after having studied other techniques and mastered them). NEVER LET ANYONE TELL YOU YOUR WAY CANNOT WORK, especially if it does work for you. However, always be prepared to find ways that work better FOR YOU; I know I am.

Here are my detailed notes on my current process.

I finish a script

My script for ILIIT #22 reads as follows:

                              STRIP #22
                              2010-04-21
PANEL 1

A closet.  Both are up; Grossom is closing the manhole.

PANEL 2

Pacwoman: It's clear outside.
Pacwoman: Try to look happy.  I bet nobody will recognize you that way.

PANEL 3

EST EXT a tube platform.

PANEL 4

Ticket controller: Your ticket, please, sir?

If you have read the finished strip, you will immediately recognize that it tells more or less the same story, but the details have changed. Grossom is actually still in the manhole, Pacwoman's first line is actually in the first panel, the ticket controller's line is different.

The purpose of the script, for me, is to force me to think it through before I pick up that pencil. A strip needs to, first and foremost, advance the story: move the plot along, tell us something new about a character, or reveal something about the setting. Any one of the three alone will do, but the jackpot would be to accomplish all three in one strip. Similarly, a strip needs to have some sort of an ending: in a humor strip, it'll be the punchline, and in a continuous strip like ILIIT, it'll be some sort of a cliffhanger. To do all that, I need to be able to consider the strip as a whole, in a form where I can make changes, or even start from scratch, without incurring a prohibitive time penalty. I can usually start and finish a script, assuming I have at least a vague idea of what I want to do, in about half an hour.

I usually start with the dialogue. In a comic strip, there isn't much room for talk. The script allows me to compose the dialog, and then mercilessly cut it until it is the sparest possible.

In addition to dialogue, if I envision a scene change, I will cue an establishing short ("EST") and give a short description (often starting with "EXT" for external or "INT" for internal; though I notice I had these reversed in the #22 script). If there is a specific action that needs to be taken, I include that.

The panel divisions come later, and sometimes I leave that up to the pencilling stage. A good example of this is the script for my favourite strip, #17:

                              STRIP #17
                              2010-03-11

Marian Tealy gets up from her desk, walks to the bathroom, closes the door
on a booth, and screams.   She walks away.

In paneling, I have to decide how many panels to have, and how to lay them out. My most common layout is four identical panels, laid out in a 2x2 grid, but I have used (and plan to use) other layouts. Unusual layouts are good for big emotional moments, like in #8 and #17, but I have, to my shame, used it also to lower my work load (for example, #12 would have worked much better if I had used multiple panels for pacing the dialog).

I pencil the strip

Once I have a script, I pick up a pencil (the hardest pencil I can find!) and some rulers and start sketching. I do this on the actual paper where the finished line art will go.

In a normally paneled strip, the first task is to pencil the panel borders. I usually draw on two separate A4 sheets, with panels 1 and 3 going on one and panels 2 and 4 going on the other. I start the borders by making small guide marks: I use a panel size of 20,0 cm x 14,0 cm, which leaves nice 5 mm margins and a bit more space between the two panels on the paper.

An image of the panel guides
Figure 1. Panel guide marks on an A4 sheet.

One of the most time-consuming phases in the whole strip creation process is the pencilling of the establishing shot. The purpose is to establish the scene, to show the reader where we are. Establishing shots tend to be fairly detailed, and they usually require time-consuming perspective constructions.

An image of the background pencils for Panel 1
Figure 2. The first establishing shot's background pencils.

In Figure 2, we see the first establishing shot sketch of #22. The script called for a closet, but at this point, I mainly look for something that evokes a similar enough atmosphere while being within my ability to draw. Hence, I visualized walls with shelves. I set the horizon fairly high, to give lots of room for the floor. I set two vanishing points at the either end of the horizon line; this probably puts them too close to each other, but I am not comfortable yet drawing with a vanishing point outside the picture. The two walls (and the manhole in the floor) take time to draw, because perspective needs to be fairly precisely drawn.

Once I have the background (and a solid feel for the three-dimensional space I'm depicting), I start thinking about where to put my characters. In this case, I've made the room's dimensions (accidentally) such that I can't have any adult character stand on the floor and still have their eyes on the horizon line, as is proper. Thus, Pacwoman gets to sit. I also despair of actually drawing the manhole's cover being moved around, and thus place Grossom still climbing up.

The completed pencils of Panels 1 and 3
Figure 3. The completed pencils of Panels 1 and 3.

This strip is unusual in that it has two establishing shots. The third panel requires a subway station, with my principal characters somehow entering it from their closet. Subway stations, like many other public buildings, have occasional doors which the public isn't allowed to open, and I figured that one such door could easily hold such an exit from the underworld.

Most of the composition of the subway station establishing shot was rather accidental. I modeled the station based on some of the Helsinki Metro stations I have visited. I decided on a single vanishing point perspective, and put the point smack in the middle of the panel, horizontally speaking. Then I put in the two tunnels, their tracks, and the platform lines. The best place for the door seemed to be in between the tunnels, and obviously that put it right at the vanishing point. I only later realized what a boon that was: it put my principals, small as they had to be there, on a focal point in the drawing, and they didn't get crowded out by the other people I added later. (Notice how everyone in that panel, except the child, have their eye level approximately at the horizon line.)

I often start a human form from the feet up. Other times I start with the head; but the size of the head is easy to get wrong when I don't yet have the rest of the body placed. My adults are about seven heads long, and I find it a useful rule of thumb to put the breasts, where they need to be drawn, at about one head down from the chin (and the hips two heads further down). In a really tricky situation, I'll actually measure the millimeters!

Sometimes I use action lines (basically, the shape of the imaginary line starting at the top of the head and going through the spine down to the average position of the two feet), and quite often I use stick figures (with collar and hip lines). The stick figure is especially useful when I'm placing a character in a perspective drawing; the collar and hip lines help to keep the figure true to the perspective setup.

Incidentally, I hate drawing small human forms. The smaller the form, the less room there is for detail, and the less opportunity there is for character differentiation. In the early ILIIT strips I was constantly taking too large shots, forcing me to work with really small heads.

The completed pencils of Panels 2 and 4
Figure 4. The completed pencils of Panels 2 and 4.

The panels that are not establishing shots, I generally draw fairly fast and with minimal backgrounds. Often, as in Panel 2 in #22, I actually use floating heads. Established characters might get as minimalist treatment as a suggestion of their hair, viewed from back – particularly when I want to emphasize the facial expression of the other person in the scene. Detail, taken in moderation, is an excellent thing in the establishing shots, but in the medium and close-up shots, they distract. New characters, of course, have to be treated more like establishing shots, with more detail. It is, of course, no minor thing that non-establishing panels are an order of magnitude faster to pencil than establishing panels.

I ink the pencils

A pencil is not suitable for digitization, as the preceding figures amply demonstrate. Also, the pencils tend to include various construction lines like stick figure or action lines, or perspective guidelines (for example, you can easily see the horizon line in the lower panel of Figure 3 – it was, by the way, the first line drawn in that panel).

What I do is I use various drawing and marking pens to draw over those lines I want to keep. This is, in the jargon, called "inking", regardless of whether one actually uses ink. Once all the lines that need to be have been inked, and once the ink has dried, I use an eraser to remove all the pencils.

The completed inks of Panels 1 and 3, before erasing
Figure 5. The completed inks of Panels 1 and 3, before erasing. Unfortunately, the pencil lines didn't get scanned in very well.
The completed inks of Panels 2 and 4, before erasing
Figure 6. The completed inks of Panels 2 and 4, before erasing.

I digitize the strip

Once the inks are done and the pencils are erased, it is time to move the strip to the computer. I scan the two original A4 sheets separately in my HP Deskjet F4180 scanner, at 300 dpi and using line art settings.

Image of xsane settings
Figure 7. xsane settings
Unmodified raw scanner result
Figure 8. Unmodified (apart from scaling down) raw scanner result of Panels 1 and 3
Unmodified raw scanner result
Figure 9. Unmodified (apart from scaling down) raw scanner result of Panels 2 and 4

The two images need to be combined. First, I create the combined image: it is important to remember to make it a color image, so that coloring can be done later in the process. The dimensions of the image, in this case, are basically twice a raw image in the horizontal image and once a raw image in the vertical dimension, with some extra space vertically to accommodate the boilerplate texts I use.

The creation of the cooked image
Figure 10. The creation dialog for the combined image.

The panels I then simply copypaste on the new combined image. It occurred to me later that it makes more sense to paste each scan (or even each panel) in its own layer, but I did not do so here.

This is also the phase where I might do digital corrections to the image (adding forgotten or deleting accidental lines).

Combined image
Figure 11. Combined image

It is a good idea to rename the default layer, since the default name is not very descriptive. Right-clicking on the layer in the layers window activates the relevant menu.

Menu for layersLayer name change
Figure 12. Changing a layer's name

I letter the strip in the Gimp

Lettering in Gimp, as I do it, consists of three (sometimes four) phases.

First, I use the text tool to actually write the text to be lettered. I can fairly easily give the text whatever rectangular shape that I wish it to have, simply by manipulating its borders. The result is a separate text layer, and it is very important to let the layer be, and not merge it down; that way, I can easily edit the text if it becomes necessary.

Lettering the strip title
Figure 13. Lettering the strip title

Once I have a text layer, I have to go erase the preliminary lettering from the line art layer (whose purpose as a reminder has now been served).

Erasing the preliminary lettering

Figure 14. Erasing the preliminary lettering. Note that I am presenting things a bit out of order here. The alpha channel trick I am going to present in the next section has already been done here. However, it does not matter here, except so far as the layers dialog looks a bit different.

Once the preliminary lettering is gone, I can move the text layer on its proper spot – I often find it useful to create the text layer somewhere out of the way first, so that I can read both the text layer and the preliminary lettering.

Sometimes, I will have drawn the speech bubble in the inking stage, but often I leave it to after the digital lettering. I find that the paintbrush tool (with straight-line assist) is more than enough for my use, even though the result is a bit jagged. The eraser can be used, gently, to smooth out some of the jaggedness. Note that it is useful to use a separate layer for each bubble, and to crop the layer afterward, to save memory.

Creating a layer
Figure 15. Creating a layer for a bubble
Drawing a bubble
Figure 16. Drawing a speech bubble
Autocropping a layer
Figure 17. Autocropping a layer

I color the strip in the Gimp

NOTE: My coloring skill is currently rather basic. Perhaps I will write another tutorial later, for the advanced techniques, once I've learned them myself!

There are two secrets to line-art coloring in Gimp (or any other similar graphics program): (a) put the color under the line art and (b) use the scissors select tool to control flood fills.

Putting the color under the line art allows you to be a bit fuzzy about where your color areas end. Without this technique, there is a real danger of spilling color over the lines, and while in Gimp you can always undo, it becomes very slow and very frustrating very fast!

The key to the technique is to have everything but the lines themselves be transparent. There is a very simple way to accomplish this in Gimp: you can convert a color (white, in the usual case) to the alpha channel (which controls transparency).

Color to alpha in the menu
Figure 18. Selecting the color-to-alpha action
Color to alpha dialog
Figure 19. The color-to-alpha dialog
Result of the white-to-alpha action
Figure 20. The result

Now, the strip as a whole should not be transparent. Therefore, I create a new white layer and move it to the bottom of the layer stack.

Creating the white layer
Figure 21. Creating the white layer
Moving the white layer to the bottom
Figure 22. Moving the white layer to the bottom by drag-and-drop

The actual coloring process is simple but tedious: a) decide what feature (say, a character's skin) you are coloring now, b) decide the basic color of that feature for flood fill purposes, c) create a new layer to hold that feature's color, d) use (repeatedly, if necessary) the scissors selection tool and the bucket fill tool to flood-fill that feature, and e) autocrop the layer. Repeat until done.

I find that it is easiest to start from foreground features: people's skin, their clothes, furniture and so on. After that I do large background areas such as walls. I put the background colors on a lower layer, and thus can flood fill the whole area without having to worry about foreground features.

Color selection is an artistic decision. For me, color has two main functions. The most important function is to clarify the picture by the contrast between neighbouring features. Secondary to that is to suggest the actual color of the feature in question. For skin color, I sometimes use Google Images to locate a picture with the right kind of skin color. However, I almost never can use a realistic color directly, and I tweak the color in the color selector. In other cases, I hunt in the color selector for a pleasing color.

Triangle color selector
Figure 23. The triangle color selector

Of course, many times I can take an earlier strip and steal its colors. – One must be careful here, since a color interacts differently with different surrounding colors.

Picking a color
Figure 24. Picking a color from an earlier strip

With color selected, I'll pick up the scissors selection tool and start marking the boundary of my feature (or some part of it). The beauty is that I suggest the boundary by marking some points, and it automatically infers where the border goes. Sometimes it gets it wrong, in which case I need to move points or add new points. Once I am satisfied, I turn it into a selection by clicking inside the bordered area, and bucket fill it.

Scissors tool in action
Figure 25. The scissors selection tool in action
The bucket fill tool
Figure 26. The bucket fill tool

Coloring a strip is lots of work. It usually takes me about two hours; a strip with few details might get done in one, a strip with detailed establishing shots may need three or even four. The example strip here took about two hours.

You may find my final working image before web conversion (XCF, 3.6MB) interesting.

I convert the strip to a web-friendly format

Conversion to a web-friendly format is just a matter of scaling the image down (I usually shoot for the largest image that fits inside 800x580 pixels, but have deviated from this occasionally) and converting. I use PNG, but JPEG is also very commonly used. The biggest issue one is likely to have is file size, which fortunately is not such a large problem nowadays.

Behold, ILIIT #22:

The finished strip
Figure 27. The finished strip

2010-03-28 antti-juhani@kaijanaho.fi