Color Me Surprised

Hello! As you may or may not know, in addition to drawing comics here I also color another excellent online comic, The Adventures of Dr. McNinja. I have had that job for a few months now and have gradually developed a certain routine, so I thought I would share it. This way, anyone who is interested can copy my style exactly and pretend to be me. Read on to learn my secrets!

(NOTE: Of course, there are dozens of different ways to color, and several different ways to accomplish any one goal . I’ll be showing you my technique, but it is by no means the best or only way.)

First things first: we start with lineart. As far as McNinja goes, Chris Hastings (writer, artist) will pencil the page and send it to Kent Archer (inker, kickboxer), who inks it, scans it, and sends the files back to Chris (hockey champ). Chris (terror of the deep) will then clean up the linework, letter it, and send the file to Anthony (television enthusiast, me). Chris will helpfully include notes for special effects or lighting, such as “this torch is on fire,” or “make sure the lighting captures Doc’s memories of lost love.”

For the purposes of this demonstration, I will not be using a Dr. McNinja page, as I don’t want to spoil the upcoming “he was dead the whole time” twist. Instead, I will be using a page from my own critically-acclaimed and largely inaccurate comic biography of Owen Wilson.

So, here is the lineart we will be starting with:

Now, when I say Chris “cleans up” the linework, what I mean is that he adjusts the levels until it is pure black and white; no grays. It is important to have pure black-and-white, high-resolution linework for clean printing. Here is a close-up to illustrate my point:

I actually drew this page digitally, but if I hadn’t, the lineart would be on the background layer. But I want it on its own separate layer! This is easy enough to do, though. If your lineart is pure black-and-white, you can simply use the Magic Wand tool, make sure “continguous” is not checked, and select a black area. This will make a selection of all the black lineart. Then just create a new layer, choose black as your color, and Alt + Backspace to fill.

I fill the area outside the panels with white and put that layer above the rest, so I can color with reckless abandon and it won’t show up outside the panel borders. I make a new layer under the lineart and fill it with a color so I’m not working against pure white. In this case I use a low-saturation, mid-brightness blue, which will also be a predominant color in the image as the page takes place in the Cave of Trials.

Now, the first step to coloring is doing the flats. This means filling every significant area with a flat, solid color. This is an important step but it is also the most tedious.

There are several ways to go about this, and if your linework is mostly simple with lots of closed lines there are plugins that can help a lot, but for this tutorial I will be using the Lasso tool. Simply drag the lasso around what you want to flat and then fill it with Alt + Backspace.

NOTE: when using the Lasso, uncheck the Anti-Aliasing option. This will ensure that you get clean edges and make selecting areas later a breeze.

I tend to make a separate layer for each character to make lighting easier, but it’s not always necessary. You can use your judgment on this. Anyway, as you can see, I have filled the entire shape of Owen’s silhouette and then locked the transparency of the layer. Now I can go back in and select individual elements (hair, shirt, winning smile) without worrying about the outer contours again.

I have continued in this fashion to flat Owen in the third panel, wearing his speed-pants.

…and I have done the same for Killzang the Terrible and Fearsome, and for the lava light in the background.

Now we’re done with flats! That wasn’t so bad. If the page is complicated this can take a long time but don’t give up. Believe in yourself and you will persevere.

Next! I create a layer above the background layer, fill it with my shadow color (in this case, a similar blue to that used in the cave wall), set it to Multiply and drop the opacity to around 60%. Then I make a copy of this layer above my Owen layer, and another copy above the Killzang layer. Now, I hold Alt and click on the line between the Owen layer and the Multiply layer above him. This sets the Multiply layer as a clipping mask to the layer below it. What this means is that the Multiply layer will only be visible in areas where the layer below it is visible (in this case, only on Owen, not on the background). Do the same for the layer above Killzang. I also do this for the layer above the Background layer, but it is not necessary because the Background takes up the entire screen.

Now the fun starts. Make another layer above the Owen Multiply layer. Set it to Screen, opacity around 50%, and make it into a clipping mask for the Owen layer.

Decide where your light is coming from and what color it will be. In this panel it is coming from the lava below and is a warm orange. Use the Lasso tool to select the area where the light will fall:

Then select a large, soft-edged airbrush, set the Flow pretty low (maybe 20% or so) and softly brush in the light, getting a little stronger the closer you are to the light. It’s okay if this layer is pretty subtle; we’ll be adding more next.

Now make another Screen layer, with a higher opacity (around 70%), and use the same technique to add some stronger highlights. Try to make shapes that bring out the form of the object you are coloring.

That’s pretty much all there is to it. The beauty of the clipping masks is that you make broad shapes around the outsides of your characters and it won’t matter:

So: each character has a few layers. One layer for flats (the main layer), a layer for shadows, a layer for light, and a layer for stronger highlights (all set as clipping masks to the flats layer). You can add more highlight layers if necessary, but be careful not to over-render.

Here’s what the page looks like now:

Now let’s do some effects. Obviously, because Killzang has consumed the Fire of Inestimable Wrath, we need to make his little lights light up. I create a new layer and set it to Linear Dodge. This layer is above the lineart layer so that the color will “glow” over the lines. Now, using the same soft airbrush used for highlights, I choose a bright yellow and softly brush over the terrible robot lord’s eyes, hand lights, and chest-mounted particle smasher.

We also need to make Owen’s Blade of Triumphant Victory glow in harmony with its wielder’s luminous spirit. Lock the transparency of the Lineart layer and color over the blade with a bright blue.

Then add some glow on a Linear Dodge layer (you can use the same layer you used for Killzang’s eyes and junk).

So, everything’s looking good, right? At this point, if this were Dr. McNinja, I’d save a copy of the page and send it to Chris for approval. He would reply with whatever needs to be changed; something like, “you forgot that the temple guard needs to be rusty and corroded,” or, “I have told you several times, Dr. McNinja is not African-American.” In this case I sent the page to myself and then told me that I forgot Ghosty the Spectral Dog, Owen’s amicable spirit guide.

I pop in a new layer and draw Ghosty in an eerie light blue.

Then I make a layer below that one and fill Ghosty with an ethereal blue, then drop the opacity so he is see-through, which is scary:

Then I copy the lines layer and apply a Gaussican Blur to make it “glow,” and merge all thee dog layers together.

That’s it! Those are most of the tricks I use. Here’s what I ended up with:

I hope this was pretty clear. If you have any questions about anything I did here, feel free to ask in the livejournal entry comments. Have fun and happy coloring!

Some information on cleaning up linework and putting it on its own layer

Some people much more knowledgable than me discuss layer blending modes