Lovecraft is Missing: How to Make a Webcomic- Coloring

(I give up. I’ve spent all day trying to get the pictures to line up with the text, but no matter how I’ve redone it, they go where they want to go. They’re all in the vicinity of the relevant text, but excuse the crazy, sloppy layout. I’ll try to get it fixed over the next week…and I’ll have more to say about this in next week’s concluding post on Publishing.)

Color Theory

I’ve had a color theory class, read some books about it over the years; it’s  a fascinating and complex subject, way beyond the scope of this post. And when all is said and done, it still comes down to taste. Educated taste, yes, but there are lots of folks out there with an intuitive sense of what works and what doesn’t.

If you’re not one of them, I can only recommend some books I’ve found helpful: Interaction of Color by Josef Albers, The Elements of Color by Johannes Itten, Color in Contemporary Painting by Charles LeClair and for more formulaic approaches, the Color Harmony series. If you’re self-motivated, just read lots of comics and analyze them. And remember, you often learn more studying the things you don’t like than studying your favorites. Just a thought.


I use Photoshop CS almost exclusively, though I am starting to experiment with doing some basic coloring in Flash CS4. For our purposes here, I’ll just talk Photoshop. If you don’t know how to use the software, there are plenty of classes at community colleges and lots of tutorials online. Like color, you’re on your own as far as learning the basics.

Also, there is one useful plugin for certain types of coloring that I find handy. Multifill, and it’s free from its maker, BPelt. It’s simple to use and for simpler coloring and selection it is ideal. The website explains how to use it.

Set Up

I like to experiment, so I tend not to do things the same way every time. The examples I am going to give below are just some of the things I do, but they illustrate the power of using blending modes and give you an idea how I think. Both examples deal with light, but the treatments are pretty different.

After I’ve inked and lettered the page, I put all the dialogue and balloons layers  into a folder (marked “dial”) and turn it off.  This keeps the art work clear.  I move my final art layer just beneath the dial folder, set the Blending Mode dropdown to Multiply, then lock the layer. Multiply makes the whites invisible, so I will be able to see the ink line, but the colored layers underneath will  show through. You can also put the art on the bottom, leave the Blending Mode set on Normal, then set your colored layers to Multiply (or other options) but the effects I like have to be achieved through different means. It’s just what works for you.)


Light, and the lack of it, plays an important part in Lovecraft is Missing, but just for variety’s sake, there are some locations that are flat, ordinary daylight. Here’s where I find the Multifill filter handy. By following the directions, you can almost instantly get all your

panels filled with flat color. It won’t be the color you want, but it makes selection a snap.

In the example panel, with the art layer over the top of the Multifill, the sailor suit is easily selected; if the suit appears in multiple panels, you can Shift-Select all of them at once, use the Fill command and you’ve just colored all the sailor suits with one keystroke AND  by-passed the anti-aliasing issues you get if you select the areas of the original art.

FPicture 6 249x400 Lovecraft is Missing: How to Make a Webcomic  Coloring Picture 6alt 249x400 Lovecraft is Missing: How to Make a Webcomic  ColoringPicture 6alt 2 249x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

For a cartoony strip, or even a simpler adventure strip, this is a huge time-saver.

Blending Modes

Blending Modes are a powerful tool in Photoshop and can be applied to brush strokes as well as to layers. I stick pretty much to layers out of habit, but even then I am always experimenting. Some modes give similar effects, others are radical depending on the colors involved. And by using multiple layers, the possibilities increase exponentially. A Hard Mix layer on top of a Multiply layer on top of a Difference layer will give you a completely different effect than those same three layers would if the order were reversed.

A solid but simple explanation of the Blending Modes can be found at Northlite Designs.

I usually start with a base color for an entire sequence or Picture 7 255x400 Lovecraft is Missing: How to Make a Webcomic  Coloringpage. There’s no rhyme or reason for this, I just like to establish a mood in my head. But also, by working out of a base color, my panels already have a bit of color unity built in.

I don’t want to get into color theory, but to simply explain this notion, a color scheme is more unified or harmonious if all the colors contain a little touch of a base color. Pure colors tend to look very childlike. Next time you see a print ad that is largely blue, with, say, a yellow campfire in the distance, take a closer look. You’ll find that the yellow is actually a bit on the green side. The dominant blue sucks the blue out of the green and lets your eye read it as yellow, but a pure yellow would be garish.

Ok, moving on. In this example, I selected the areas of the panel and used the Hue/Saturation control to get the colors I wanted for the base. Then I clean up the anti-alias issues, and adjust the colors a bit more. You’ll notice, I’m sure, that what I ended up with doesn’t look anything like the base color.

Picture 8 251x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

Next come the shadows on the characters. On a new layer above the base color layer, I will paint in the shadow areas, usually with a medium purple color. This stems from my days in animation, where purple was used for double-exposure shadows. Black tends to deaden the shadows; other colors will work depending on your color scheme.

Picture 10 251x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

Picture 12 251x400 Lovecraft is Missing: How to Make a Webcomic  ColoringWhen done, I set the layer to Multiply, which darkens the purple, and I adjust the transparency to the level that works for my eye.

I want to stress that for every panel in a sequence, the trans setting may vary. And I don’t necessarily use the exact same shade of purple, either. For me this is a subtle way to ad visual variety, and it keeps me out of the formula trap.

I paint in shadows on other objects in the same scene, often on a separate layer.Some are painted on the objects, but I also use soft-edged vignettes to focus the scene

Then I set another new layer above what I’ve been working on and paint in the character highlights. Here I go with a color related to the source light. I will often leave the layer at Normal, but I also like to cycle through the Blending Modes to look for odd effects. (You can cycle through by selecting the layer, holding Shift and hitting + or -.)

Picture 13 250x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

Picture 16 255x400 Lovecraft is Missing: How to Make a Webcomic  ColoringMy next steps are in no particular order. I just continue to adjust as I go. Here I’ve added a source light, which consists of three separate layers. I set the Freehand Select lasso to a 20 pixel feather, then select the area I want for my light. I use Fill to fill it with my chosen color, then set the Blending Mode to Lighten. Using slightly different, progressively smaller shapes, I will repeat this step, adjusting the transparency to get the effect I want. often, I will set the middle of these layers to Screen, for a slightly different effect.

Like I said, it’s all about taste.

This last step is something I do on occasion when I feel I’ve strayed a little too far from my original idea. I add another new layer on top, fill it with that original base color, which covers all the work I’ve done/

Then I will determine a Blending Mode/ transparency setting that takes the panel back to what I originally envisioned.

Although this the way I choose to work, you can actually use this step to unify any color scheme.

Picture 19 253x400 Lovecraft is Missing: How to Make a Webcomic  ColoringPicture 20 256x400 Lovecraft is Missing: How to Make a Webcomic  Coloring


For the more dramatic lighting effects, I use a lot of mattes. These effects are among those that I mentioned earlier, the ones you can’t get (at least, not in the same way) if you put your art on the bottom layer instead of the top.

So, I pick my base color, as always, and leave the layer on Normal. I pull out the colors just as I did in the previous example

Picture 22 254x400 Lovecraft is Missing: How to Make a Webcomic  ColoringPicture 23 248x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

On a layer beneath that, I put the color of my light source. I’m not confined to just one patch of color on this layer, as the colors are only going to show through in the places where I remove the matte (a step we haven’t gotten to yet.) In other words, you can have a yellow patch for a warm light source on the left and a blue patch for a cool on the right, both on the same layer, in the same panel. But in the example, I’m only using the one color.

Returning to the base layer, select it and down at the bottom of the Layers palette, click the rectangle with a circle. On your base layer, you will now see and additional icon just to the right of your main icon. This is your matte.

Picture 24 Lovecraft is Missing: How to Make a Webcomic  Coloring

Within the layer, if you click on the image icon, you can paint or draw on your image; if you click on the matte icon, you can only paint on the matte and you are limited to either black or white. These really aren’t colors, they represent the matte density.

If you set the brush tool to 100% with black chose, you will erase the matte with each stroke. The color on the layer underneath will show through the hole created. If you want to cover the hole up, paint over it with ‘white’ and it will cover the hole.

To achieve the lighting effect in the accompanying panel, I used a  custom bristle brush shape, set to 10% black, and continuously stroked over the areas where I wanted the highlight color to show through.  The color comes through most where I stroked the most, and least where I barely touched the matte. By keeping the brush strength low –ok, sometimes I’ll use 20% or 30% if there’s a lot of ground to cover– I can get a nice soft edge to the lights.

Picture 26 250x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

Shadows here are handled in the same way as previously demonstrated, but you can use this technique for soft shadows as well.

Picture 27 252x400 Lovecraft is Missing: How to Make a Webcomic  ColoringPicture 29 254x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

Finally, if an area needs texturing, I will select it, pick a texture from my file or make a new one, and paste it into the base layer. The matte will appear as a layer above the base layer, and is subject to all the same manipulation of Blending Modes and transparency as any other layer.

And as a final touch, I may apply adjustment layers, either to individual panels or the entire page, to even up contrast or desaturate the color…whatever I think makes it better.

And then….I go on to the next page.

Picture 30 251x400 Lovecraft is Missing: How to Make a Webcomic  Coloring

One last thing: keep your master file in layers; you never know when you’ll want to go back and change something, or even see how you accomplished a certain effect. Do a Save as, THEN flatten your image. I work at 11×17, 300 dpi, but for the web I reduce it to 800 pixels wide, 72 dpi. More than once I’ve had to go back and change a misspelled word or tweak a color. With the master file, I can make the change and resave, and thereby not lose any quality on the posted page.


  1. Xaeromancer

    This is really interesting. I’ve been using the unfortunately named GNU Image Manipulation Programme (GIMP) and it seems to have most of the same functionality as Photoshop, so I think I’ll give this a try.


  2. lovecraf

    Never heard of GNU, but I’m sure there are lots of techniques that will be similar, and some that will be new and unique. I haven’t even scratched the surface of what Photoshop is capable of. I tried Painter for awhile, but found it clumsy and buggy. I guess it’s what you get used to. Good luck. Send some examples along one of these days.

  3. Gillsing

    When I use GIMP it has a tendency to freeze at times, forcing me to restart it. I guess that would make it a big no-no for someone who uses the program for creating original art rather than manipulating images like I do. But it’s free, and I’m not paying a fortune just so I can mess around with images.

  4. Martin

    Can’t say I’ve ever had those problems with GIMP. GIMP can do everything suggested in these articles. My daughter uses GIMP for her comics.

  5. lovecraf

    ive used gimp and it’s good, but i do a lot of other thingsin photoshop that gimp doesnt or doesnt do as well. But its not about the software, its about te comic. whatever gets the job done…