Thursday, January 1, 2009

The Second-Best Advice I Ever Gave

In 2006, I took part in a panel discussion at the Alternative Press Expo in San Francisco. I forget the overall topic, but somebody asked our advice for up-and-coming comics creators. As I recall, the other panelists said things like: stay true to your vision, never give up, be creative finding outlets for your work, etc. Good stuff and true, but vague.

When my turn came, I decided to offer the most hard-headed, practical advice I could: understand the graphic requirements of whatever medium your art is destined for. Think ahead to any possible future uses for your art. Then work at the highest resolution and quality you can.

You are welcome to conclude that I learned this lesson the hard way.

Let's say you want to draw a webcomic. You know that the standard resolution for graphics on the Web is 72 dots per inch (dpi). So you figure, "all right, I'll do all my scanning and image processing at 72 dpi." Big mistake.

First, 72 dpi looks awful. Your black lines will be jagged and fuzzy (due to anti-aliasing), and the colors won't fill all the way to the lines, leaving gaps and halos. Second, if any non-Web opportunities come up, 72-dpi artwork isn't good enough. Better to scan and work at some higher resolution and create a good, clean master image. Then, just before posting it to the Web, reduce it to 72 dpi. But how good is good enough?

When I started Mom's Cancer, I thought 300 dpi sounded about right. Although it was a webcomic, I was also thinking ahead to print. I'd done a lot of work for newspapers, magazines, and marketing brochures, where 300 dpi is an adequate resolution for photos. So I went with that. Big mistake.

What I didn't realize, and learned painfully later, was the difference between printing a photographic image and line art. A photo is a continuum of tones and colors that blend and look fine at 300 dpi; a comic is pure black lines that, at 300 dpi, can look visibly rough and jagged, especially diagonals. While 300 dpi was more than fine for the Web, and might have been sufficient for low-quality publication on newsprint, it wasn't good enough for printing smooth lines on glossy paper in a book.

So as we prepared Mom's Cancer for press, I discovered my art needed to be at least 600 dpi. Big pain in the neck. Although Photoshop and similar programs allow you to easily increase resolution from 300 to 600 dpi, that process doesn't genuinely enhance detail. It's like looking at a fuzzy photo through a magnifying glass; you can't wring something out of nothing. To do it right, you really ought to rescan the original art at 600 dpi, which is tough if you've subsequently done a lot of digital editing to the 300 dpi scans. Which I had. So to get Mom's Cancer ready for press, I rescanned and re-edited some pages from scratch, while on others I reluctantly cheated and pushed the magic Photoshop button when I thought I could get away with it. As it was, even 600 dpi was barely acceptable. There are still spots in Mom's Cancer where the lines are pixelated and not as smooth or sharp as I'd like. Lesson learned.

Still later, my publisher Abrams wanted to make a banner for its exhibition booth that featured the drawing of my Mom's face from the cover of the book. My problem: the only version of that art I had was 600 dpi (which may have originally been 300 dpi); there was no way we could blow it up to two feet tall without revealing all the jagged pixels. Back to the drawing board to redo it at 1200 dpi, a resolution that would hold up to magnification.

You should also understand the potential uses of color in your work. For example, the default color mode for many (most? all?) scanners and digital art programs is RGB (red, green, blue). This looks great on a computer monitor, where images are composed of red, green, and blue photons of light, and is swell for a webcomic. However, it doesn't work for print. For that you need CMYK (cyan, magenta, yellow, black), the four colors of ink that printers use (ignoring for the moment custom varnishes, specialized Pantone colors, etc.). Again, Photoshop easily converts from RGB to CMYK, but the results can look very different. And bad. There are a lot of hues you can make with RGB light that you can't reproduce with CMYK inks. If you think your work might be printed someday, you might want to work with a CMYK palette (which does reproduce accurately on an RGB monitor) from the start.

So:

Say you're creating a webcomic. You figure you'll work at 150 dpi (you think you're pretty clever; that's twice the resolution you need!) in RGB because that looks best on monitors. Terrific.

Then, amazingly, people read and like your stuff. Maybe a newspaper wants to reprint it, maybe a book publisher wants to collect it. You run a few tests. Your 150 dpi line art looks like crap. Some bozo at the printer converts your RGB colors to CMYK and turns them all to mud.

Now you're remastering and recoloring. You don't want to remaster and recolor. It's an enormous, frustrating waste of time. You vow on the graves of your ancestors to never make this stupid mistake again (thus clearing the way to make entirely different, all-new mistakes in the future). Finally, after days or weeks of redoing work you already did once, everything is 600 dpi CMYK and prints up great.

Then somebody wants to make a banner or poster of your work. You try to blow up a three-inch, 600-dpi drawing into a three-foot print. It looks like crap. Now you're remastering again. Your dead ancestors laugh at you because you made the same stupid mistake again. Idiot.

Understand the graphic requirements of whatever medium your art is destined for. Think ahead to any possible future uses for your art. Then work at the highest resolution and quality you can.

My original art for WHTTWOT was drawn at many different sizes, sometimes dependent on the amount of detail on a page and other times on the paper I happened to have on hand. Regardless, when I put it all together in the computer, every page ended up 6 by 9 inches (roughly the size at which they'll be published) in CMYK color at 800 dpi. I actually work with them at 1200 dpi, which is about the maximum my creaky processor can handle without crashing, but reduce them to 800 dpi before turning them in to conserve file size (an 800 dpi file is less than half as large as a 1200 dpi of the same dimensions).

If we ever need to blow up a bit of art, I've got a 1200 dpi version on file. If we ever want to put it online, I can easily reduce to 72 dpi. Working at the highest resolution my computer can reasonably handle, I maximize the quality, potential uses, and markets for my work.
.

13 comments:

Mike Lynch said...

Wonderful advice that I learned from. Thanks for this, a practical, "polished but not varnished" look at what you do. Of course, I HAVE TO post this on my blog now.

ronnie said...

Interesting and, for aspiring webtoonists, incredibly helpful.

But... but... why is it only the second-best advice you ever gave?

I feel a bit like Mojo must feel most days. Like, the answer is probably there, but I missed it. That's educational, too.

ronnie

Benita said...

That is very generous advice. I'm printing that out and hope I remember where I put it.

Thanks, Brian

Sandra said...

Very good, practical advice. I started keeping a 1200 dpi archive about 4 years ago...reduce to 600 dpi for my syndicate...and down to 72 dpi for anything I put on the web.

Tyler Garn said...

Great advice. I think printers around the world should send you a muffin basket or something.

MK Czerwiec, RN said...

Wouldn't having an original in Illustrator (vector based rather than pixel based) save you this worry?

Brian Fies said...

Thanks for the responses! It's especially nice feedback to get from pros like Mike, Benita, Sandra, and Tyler.

Ronnie, You didn't miss anything, I'm playing my best advice close to the vest. Besides, if my second-best advice had stunk, I needed to leave myself a fallback position.

MK, I'm not adept with Illustrator but bet you're right. Digital art done entirely in Illustrator would be a different kettle of fish, and it's good to be reminded that my little window on the art world isn't the whole landscape. Still, if you drew the original art on paper and then scanned it, which is the process I use and was thinking about, wouldn't the quality of your final digital product still be limited by the resolution of the scan? And the RGB/CMYK stuff would still apply, I think.

Thanks again, and thanks for the link, Mike.

Barry Corbett said...

Brian's advice is right on the money. I'm a Cartoonist, but also a Graphic Designer and we run into those limitations all the time when preparing files for press. Illustrator files will enlarge indefinitely, but only if you worked in Illustrator for the original file. You can convert them in Photoshop, but it's still a rasterized image, so make sure you convert it at 1200dpi. The result is the same as a 1200dpi scan of line art.

Matt said...

Nice advice. My finals are all digital (Photoshop), just at 300dpi, which works fine for our printing purposes (and doesn't crush my computers).

When I need super-fine-detail standalone art, I just export the black ink as a PNG, trace it in Inkscape (it has a great bitmap tracing function--better than Illustrator's), then open THAT .eps in Illustrator and fine-tune if necessary. That art can be blown up to infinity and beyond, and I don't have to bash my head against the wall trying to create the art in Illustrator itself, which, frankly, is not as friendly a program for freehand illustrators as Photoshop is.

B Moore said...

Great, practical advice. Thanks! I'm definitely going to crank up the dpi on my next project.

Anonymous said...

MK is right. Illustrator would solve the problem, because it's vector based instead of pixel based. Scan your line work into Photoshop, then import it into Illustrator, trace it, and voila, you can enlarge the artwork to any size you want with no degradation or pixelation. Of course, you need to learn the bare bones of Illustrator to do this, but it's well worth it.

Also and but, vectorizing the art in Illustrator smooths linework in a way that some feels impedes the artist's style.

Jeff P.

MK Czerwiec, RN said...

This is a VERY helpful discussion - thanks everyone!

bryant said...

Another technique for "upscaling" an image is to convert it to a vector in Photoshop. (Or if you have Streamline, using that.)

This doesn't work particularly well for images with lots of tiny details (hand lettering, for example), but for a large bold graphic, it works pretty well.

In Photoshop, select your black and white artwork with the wand tool (no tolerance). In the "paths" palette, select "make work path." This will create a vectored work path from your selection (I usually use a tolerance of about 2 or 3). From there, you can scale the path, without loss of resolution and fill it with black.

It won't be an exact copy of your art (since it interpolates detail in the conversion to vector), but with a bit of tweaking with the pen tools it can look pretty good.

(Great practical advise, by the way! I was fortunate enough to have a good friend who was a graphic designer help me when I was starting to do webcomics. Now the internet can be everyone's graphic designer friend!)