Why live in a black-and-white world forever? It helps to spice up the occasional webcomics installment with color. There’s an art to coloring webcomics, and it’s far different from the pencil and ink process.

We asked Ian Sokoliwski, professional comics illustrator and colorist (www.ianthecomicartist.com) for some tips for new webcomics colorists.

Webcomics 2.0: What are some basic coloring tips for a new webcomics creator?

Ian Sokoliwski: Most coloring tips that would apply for print comics apply equally well to webcomics—make either the foregrounds or the backgrounds saturated but not both, allowing the characters/places to separate being a big one. Treat the webcomic as any other piece of art, paying attention to consistent light sources.

By saturated, I mean dark, intense, or both. A light shade of blue is much less saturated than a very dark shade of blue, for example.

WC20: What are some basic things to avoid?

IS: If you are coloring the lineart of another artist, don’t fight that lineart. If the original lineart indicates the lighting is coming from a particular direction, then let the coloring do the same. Remember that your job is to help and enhance the storytelling, not to fight it.

Generally, the lineart itself should indicate where the light is coming from. The easiest way to determine this is by looking at the nose on most characters. If the shadow under the nose falls to the left, that means the light is coming from the right. So the coloring will be lighter on the right side of the face than on the left side, as more light is hitting that side.

Also—and this is really, really important—try and stay away from making your colors too muddy and too similar to each other. One thing about webcomics is that no two computer monitors will display color the same way, and what looks clear and separate on your monitor might not separate on the monitors of your audience.

WC20: Tell me about the software and tablets you use. Are the tools important?

IS: I use Photoshop, which is pretty much the industry standard, and a Wacom tablet and stylus. While it is possible to color with a mouse, it is needlessly difficult. A small tablet will run you about $100 and is much, much more useful than even a high-end mouse for coloring. Really, there is no comparison.

WC20: Coloring a webcomic is usually done in RGB rather than CMYK. What’s the difference, and how does it affect your coloring?

IS: Well, RGB is used for Web-based illustrations due to the larger range of colors you can get than with CMYK. In fact, RGB uses more colors than can be printed, which is why print comics are usually colored in CMYK—with CMYK, you know what the final result will look like.

There is a certain range of colors you can use in RGB that you wouldn’t want to use in CMYK, provided that the webcomic was never intended for print—basically, colors so dark that they would put too much ink on a printed page and would risk running and smearing.

If the goal is indeed to eventually have the webcomic in print, then it is probably best to simply paint in CMYK, creating a separate RGB file afterward for the webcomic page that will be put up on the Web. There is much less of a change of colors converting from CMYK to RGB than from RGB to CMYK.

WC20: When converting from webcomic color to print color, is there more to it than just changing the color space?

IS: The biggest thing you will notice quite often when converting RGB files to CMYK is that the colors will seem more muted and muddy. This is due to the fact that many of the colors that you can use in RGB will convert to their nearest print equivalent in CMYK. This is another good reason to be Spartan in your use of muddy and muted tones, if you are thinking ahead to a print collection.

Brighter, lighter colors won’t change too much from RGB to CMYK as compared to the darker colors.

Guest-written by Johnny Lowe

Since we’re talking about comics on the computer, it’s only natural we talk about lettering on the computer as well. Most letterers swear by Adobe Illustrator, though there’s also CorelDraw, Inkscape, and Manga Studio; some even use Photoshop. It depends on what you’re familiar with—and of course, your budget.

Fonts

What about fonts? Well, you want to utilize fonts specifically designed for comics—fonts with a “hand-lettered” look. Yes, most comics today are lettered on the computer, but they don’t look “typeset,” like the text in this paragraph (Figure 9.6). These fonts are designed for comic books and generally are all caps (though many cool upper/lowercase fonts are available), and many include alternate characters.

Figure 9.6. A contrast between typeset lettering and webcomics lettering.

For instance, say you want to type the word “commander” (Figure 9.7). As you type out the letters of the word, type the first “m.” Then, while simultaneously pressing the Shift key, type the second “m.” Look close and you’ll see the second “m” is just slightly different from the first. It’s subtle, but it contributes to the hand-lettered look.

Figure 9.7. An example of alternate characters contributing to that hand-lettered look.

Comicbookfonts.com (Comicraft) and Blambot.com are two excellent sites for comics fonts. Many Blambot fonts are free, but Comicraft frequently features special offers on its selections. And both sites include numerous how-to tips on most any lettering question that might turn up.

One last thing—despite the fact the name of the font includes the word “Comic,” never, ever even consider Comic Sans for lettering your comic book—or even someone else’s comic. Because if you do—bad, very bad things will happen to you and your dog.

The Basics

No matter what software you choose for lettering, there are certain basics. First, decide what font is most appropriate for your comic— sometimes different styles are used for different characters (remember Walt Kelly’s comic strip Pogo?). Don’t go crazy with every character speaking with a different “look,” however. As with most things—moderation.

Decide on the size and leading (vertical space between lines) for your fonts. While a font at 6.25 pt. size and 7.5 pt. leading works for print, you might want to up the size a few points for best viewing on the computer screen—try several examples at different sizes/leading and see what works best for the font you’ve chosen.

Dialogue requires text, word balloons, and their corresponding tails, so you’ll make a text box, type in the dialogue, center it, and then “stack” it so the text is roughly a diamond shape (with the middle lines wider than the top and bottom). But don’t have too much text in a single balloon; break it up into two or perhaps three balloons. This can also be done for pacing, to give the speech a pause, or “beat,” between sentences.

Once you’ve typed the dialogue for the balloon, go back and utilize alternate characters as mentioned above on every other instance of a specific letter—again, for the hand-lettered feel. One thing to remember with the uppercase “I” (which you’ll get generally by typing Shift and “I” together, but it depends on the font)—use the version with the “crossbars” (the horizontal bars at the top and bottom of the letter) only with the word “I” or a contraction such as “I’ll” or “I’ve.” All other instances will be the plain old “I” that more or less looks like a lowercase “L.” Of course you don’t have to do this, but it’s a style thing most letterers abide by.

Create your balloons, make tails to join them to that point close to the mouth of the person speaking, and then you’re getting somewhere. If your artist is on the ball, he will have placed the characters in the panel so that the first person speaking is on the left, the second person speaking to the right, etc. Sometimes, however, they do not do this (or leave a decent amount of space for the lettering), and you will have to juggle things to fit—while at the same time not covering pertinent areas of the art.

If you use sound effects (SFX) in your comic, again, the choice of font is important. If you have an explosion of some sort, you want a big, bad, bold font (e.g., Biff Bam Boom or BadaboomBB) that will communicate the sound and feel of the blast—and not something like Times Bold, which only shows you really didn’t put much thought into it.

The Results

The best lettering is lettering that doesn’t get noticed; that is, the fonts complement the story, the balloons don’t cover up important parts of the art (don’t put word balloons over girls!), and balloon placement always furthers the readability of the story. Whether it’s on paper or online, lettering is an important part of a comic—there is an art to it, after all.

Girl Genius (www.girlgeniusonline.com), a “Gaslamp Fantasy” comic book, jumped from the independent comic scene to the Web in 2005. Instantly, creators Phil and Kaja Foglio became the poster children for the print-to-Web transition. Today, Girl Genius is an extraordinarily popular webcomic that supports multiple graphic novel collections.

The interviewees are Phil and Kaja Foglio, creators of Girl Genius.

Webcomics 2.0:Girl Genius made the leap from print to the Web and has become extraordinarily popular. To what do you attribute its success?

Phil & Kaja Foglio: Let’s start with the fact that Girl Genius was already doing pretty well as a periodical, selling six to eight thousand copies per issue. We had three collections in print by 2005, with a dramatic spike in collection sales every time a new comic was published.

While sales of the individual issues were good, most of the profit from the line came from the trade collections. It had gotten to the point where the quarterly periodicals were more like a self-supporting ad for the trades. By dropping the periodical and posting the comic online, we’re able to reach a larger audience with new content three days a week instead of four times a year.

WC20: What has been the reaction, if any, from traditional comic book shops?

PKF: At the time—mixed. Some shops were very disappointed and saw the move as a lack of faith in their businesses as a method of reaching customers. However, others were quite supportive, reporting that their collection sales had been steadily growing, while their periodical sales of our titles were leveling off. And then of course there are always a number of shops that don’t carry much of the independent titles anyway, and they hardly noticed.

Now that a couple of years have passed, and the collections continue to sell steadily, we hear a lot about how keeping everything in print and available has helped the shops develop new steady customers.

WC20: And now the webcomic is in turn supporting new print collections. How can this be, if readers can still read for free online?

PKF: Reading online is fun, and free, once you’ve covered the “needs a computer and the Internet” part, but there’s something uniquely satisfying about holding a book in your hand. Higher-resolution graphics, control over pacing, and not needing to sit in an office chair are only a few of the bonuses.

The other aspect of being online is numbers. Even if only 10% of your readers choose to buy a book, when your total readership is orders of magnitude larger than it was, it still translates into increased sales.

WC20: How can a struggling print comic creator know that the Web is the right move for them?

PKF: If they’re struggling, then the Web is likely to be just what they need. The costs of providing content on a website are so much less than the printing and distribution required for periodicals, and with no shelf-life worries.

WC20: What other projects are both of you working on?

PKF: We’re getting more of our older work back into print. Myth Adventures, the comic adaptation of Robert Asprin’s novel Another Fine Myth, was published by WaRP Graphics and Donning in the ’80s. We will be bringing it out in October as one single giant color collection.

In March 2008 we have the reprint of Buck Godot: PSmIth in color, as well as a black and white collection of the eight issues of Buck Godot: Gallimaufry.

There are also plans underway to do some more work with the Girl Genius Radio Plays, but that’s not finalized enough to be worth talking about yet.