Previous - Blog Archive - Next

Tutorial: Flatting Your Comic

December 16, 2008 - Tuesday

If you digitally color your comic like me, then you know that "flatting" is one of the most boring and time consuming steps. This is the process of filling all your line work with flat colors. Photoshop has a magic wand tool that should in principle make coloring easy since you can select closed areas of your line work to color. The problem is that you want all the colors to be right up against each other underneath the line art with no white showing (this is called trapping). This is essential for making sure your comic prints correctly. You can mess around with the expand selection option to help solve this problem, but this still takes some work and is time consuming.

Fortunately, I've found a free photoshop plug-in that does this all for you. It saves me a ton of time and is one of the main reasons I'm able to update a full-color comic three times a week. Just so you know, I'm not the first person to use this. It was discussed in a tutorial on Questionable Content, which was pointed out to me by Danny Burleson, creator of the webcomic Oy (who ironically enough recently changed to doing more black and white strips).

So how does this magic flatting plug-in work? First, you can download the photoshop plug-in here. Once you have it correctly installed, you should have two new options under your Filter menu option, BPelt->Flatten and BPelt->MultiFill. Next, bring up your line art. You need to make sure a copy of the line art is saved in the background layer. In addition, you need another copy of the line art somewhere else, either as a separate layer, or as one of the channels (I do the latter). You need this separate copy because the background line art will be erased in this process. Your artwork should then look something like this:

flat coloring your comic step 1

Next, go to Filter->BPelt->MultiFill. This will fill all of the line work with colors from a chosen palette.

flat coloring your comic step 2

But we're not done yet. The line work has been filled with color, but the colors don't butt up against one another yet. So go to Filter->BPelt->Flatten. This will expand the colors and erase the line work, so that your comic looks like this:

flat coloring your comic step 3

That's it. We're essentially done. You can use a combination of the paint bucket tool and the lasso tool to fill the flattened colors with your comic's normal color palette. If you have simple line work, this can be done in seconds. Because of the crosshatching I use, it takes me a little longer, but it's still super fast. The result is this:

flat coloring your comic step 4

Your comic is all ready to add shading. Here's the final product:

flat coloring your comic step 5

That was easy, huh? Now you have no excuse but to make comics in full, glorious color, so get at it!

Note added 6/22/09: A lot of people have been emailing me that they had trouble getting the multifill part to work. The problem is usually with the linework. To make lines look smooth, sometimes Photoshop makes it anti-aliased. This means it's slighly blurry when you zoom in. This is no good for the plug-in (it gets confused by the blurry regions). Instead, you need nice, crisp line work. So how do you do this? One way is by using the threshold command to make the line art only black and white (no gray). Another way is if you convert the artwork to bitmap. You can't go straight to bitmap though. You have to go CMYK->grayscale->bitmap. And then go bitmap->grayscale->CMYK. Now you have crisp line work. Copy it into a separate layer or channel and you're ready to go. The only problem is that you need to work at a sufficiently high resolution. Otherwise your UN-anti-aliased line work will look really pixelated (for example, if you're just working at web resolution). This is the whole point of anti-aliasing, it makes lines look smooth, even when the resolution is low. For my artwork, I'm working at print resolution. So a typical strip for me is anywhere from 4000 to 8000 pixels across. I hope this helps!

Previous Blog Posts