|Since I launched the Cartoonists Corner two years ago, I've received frequent comments about my coloring with Photoshop feature. Most of that feedback has come from either fellow graphics professional who had tricks of their own to contribute or from fellow cartoonists who were, relatively speaking, digital fledglings and who were excited to have some Photoshop coloring techniques spelled out in a simple, step-by-step format.
A common request cropped up often: please take it farther. My first "tutorial" showed one way (specifically, my way, which is decidedly not every cartoonist's way) to accomplish the most basic level of comics-coloring. A number of readers want similarly straightforward description of the more sophisticated coloring effects that can be accomplished with Adobe Photoshop. Two new "case history" features Creating One Play's Logo Art and Patching Digital Artwork are my attempts to answer those requests.
As with my earlier demo. your comments, complaints, and typographical-error alerts are welcome. With your permission, email falling in the first two categories may be added in time to this letters column. And if I am as conscientious as I would like to be, typo alerts will result in swift corrections of whatever goofs you tell me about.
Now for some representative letters of comment. Most of the comments and questions below were composed before I launched my site's August 2003 update, but I plan to add new ones occasionally as they come in. So don't hesitate to write me with thoughts of your own about things you see here in the Cartoonists Corner. My apolgies to those of you who wrote interesting letters that aren't included; a bunch of stockpiled mail was lost in an unfortunate computer mishap many months ago. Howard
Some Back-and-Forth Emailing
SARAH: When you do your initial scan, just out of curiousity, do you scan at print size & 600 dpi? Or original size and 600 dpi? (Of course, I have no idea if you work larger than print size or not. Personally, I do both depending on what the piece is).
HOWARD: I'm like you; I don't have a hard and fast rule. In most cases 600dpi at reproduction size is all that's needed. However, if there's some chance that at a later point I may want to reproduce the same art at a considerably larger size (for example, if I think the art would be good as a stand-alone poster), I may archive it at the same size as the original. I am also likely to digitally archive art at a larger size if it's especially valuable to me and especially detailed. This is the case with pages from Stuck Rubber Baby, which I am gradually trying to scan when opportunities arise.
SARAH: Yes, a big thumbs up to very high-res digital archiving. We've been burned already by not having some early pages (who knew?) so now I'm slowly scanning things in here and there. Not at fast as I should, but who has the time?
Your duplicate layer - a question -- how do you end up with gray pixels if you scan in bitmap mode? Is there a step you're doing that I'm missing? (I resize the bitmap images but I don't have gray pixels.)
HOWARD: In my experience, as soon as I convert from bitmap to grayscale an extremely fine band of almost imperceptible transitional gray (a pixel or two wide at most) is spontaneously created between black and white areas. My guess is that this might not happen if I switched off anti-aliasing, but I prefer the smooth anti-aliased look in general so I just use LAYER>MATTING>DEFRINGE to get rid of the residue when I need it gone.
SARAH: I think I have figured out your gray pixel thing -- when you resize, do you do it in bicubic or nearest neighbor mode? Bicubic mode anti-aliases all the edges when you resize, nearest neighbor doesn't. (And it makes sense that selecting white pixels doesn't work when the line art's anti-aliased!!)
Also, here are two alternate methods.
Alt Method 1. Instead of deleting white pixels you can just change the layer's blend mode from "normal" to "multiply", which makes all white areas invisible.
Alt Method 2: to select all white pixels quickly, pick the wand tool, uncheck contiguous, click any white area.
HOWARD: I've never played with blend modes; just another example of how visitors to my web site like you often know more Photoshop tricks than I do. With regard to your second alternative: in my experience, when I select and delete all the white pixels more residual gray pixels seem to be retained around the black lines than when I select black pixels first and then delete the rest and defringe as described in my feature. But who knows? The difference may be entirely in my imagination.
SARAH: Do you use the snapshot feature in the history menu? I find it is sometimes more useful than multiple saves. I forget to use it a lot, though.
HOWARD: The snapshot feature is yet another of the MANY recent features in Photoshop that I haven't gotten around to learning yet. I confess that in many ways I'm still using Photoshop 7 as if it were Photoshop 5. Who has time to keep up with all those Adobe software developers when there are cartoons to be drawn?
SARAH: Snapshot feature is good, but really only if you tend to go back and forth while trying things out -- since the history can only save so many steps, you can hit snapshot a couple times instead of saving multiple versions (you will lose the snapshots when you close the file though). Worth learning.
HOWARD: Maybe your suggestion will spur me to action. You're a good influence on me, Sarah.
SARAH: Have you created actions that perform some of your main procedures? if you haven't, you should -- actions are wonderful. I couldn't live without mine.
HOWARD: When I'm smart enough to think ahead I create actions and am glad I did so. More typical of my doofus way of doing things is to realize only afterward a long task is completed, "Gee, I could have saved myself a lot of trouble if I had used an action for that!" Hopefully readers of this column will follow your lead and make their lives easier.
SARAH: It would be interesting to hear what actions you DO use.
HOWARD: Thanks to you, I did think to use Actions recently to help resize a couple of hundred 300dpi PSD files and convert them into 72dpi JPEGs that I could use in a PowerPoint cartoon slideshow I presented in Florida. That saved me a lot of repetition and tedium and got the job done much faster.
SARAH: Of course I do a lot differently, but the only really major thing I do that you don't (at least in this tutorial) is work in channels more -- I use channels a lot, but the most important thing I do is save a copy of the black lineart as a channel before I do anything, which I never delete off the file (except in the copy I send out). An extra channel adds much less size to a file than an extra layer so it makes it easier when archiving everything -- every cmyk file has its own clean lineart stored within it.
HOWARD: Manipulating channels is another Photoshop tool that I've never gotten around to mastering. Of course, if I select the line art and save that selection, what I'm doing is creating the extra channel you describe. I prefer to have the black lines in view as an extra level at all times (except when I choose to temporarily to make the layer invisible), but others may not feel the same way. And keeping that channel on hand is indeed a safety measure against accidentally deleting or altering something you really don't want to lose on the line art layer. As you point out, of course, the version of finished art sent to a publication or printer should, for the sake of a reasonable file size, be flattened with all extra channels removed. The form in which a file is archived permanently probably will depend on the taste of the artist and the storage space available.
Talking shop is fun, isn't it?
July 14, 2002
While I was doing the coloring for my latest HIV strip, I thought I'd experiment a bit with the "outlines" layer before flattening. The strip I just did, many of the panels I drew larger then reduced them down, dropping them into their panel. I scan the black outlines first (created in Ready Set Go, which is Pantone's version of Quark or InDesign), then draw the scene twice as large beneath the panels borders layer, then paste the scanned imagine in (wanding the white area on the borders layer, then hitting the inverse-delete on the layer with the illustration.
But the trick I have found once I have everything done, unflattened, is adjusting that outlines layer by selecting "darker" (maybe bringing the opacity down a tad) depending how intricate the line art is.
Chris's July 15 Addendum
...The reason I started fiddling with the defaults for layers was more for those papers that run my strip in grayscale (which is, frankly, most of them). By darkening the Outlines layer, or sometimes duplicating it and then darkening that outline, I found that the lines were just coming out better. I used to think the strips only would appear in color on my web site and the occasional feature article about the strip, but a few ASO publications apparently have the money to print a majority of their newsletters or whatever in color (or at least sections of it). I had gone to my support group one night and was greeted by friends who were so excited with "They're now running your strip in color!" I didn't realize the publication out of Cheyenne were sending copies of their newsletter to the Wellness Center.
Ken [Gale, host of the radio show 'Nuff Said on New York's WBAI-FM] had told me that Marvel (and probably DC) now do all their coloring in Photoshop, and the "old school" colorists had to learn a whole new technique. I wish I had known that while I was shooting footage for the TV special I just completed on comics (for cable access here), I would've asked about that, but I don't think I wound up talking to any colorists anyway. (Of course as a kid I thought that's what the inker did.)
Two things have become crystal clear to me during my years of using Photoshop. (1) There aren't enough years in my remaining lifetime to learn all of its tricks; and (2) There are often half-a-dozen different ways to accomplish the same task. Your variations on my themes are interesting, Chris. If any of the others who are reading this want to try Chris's tricks (or other suggestions offered further down in this column) and report back on your findings, I'll inject your input here as soon as time permits. Howard
Who Drew That Picture?
January 13, 2004
While looking through your website (I'm a very long term fan) I saw your question about the drawing from The Old Curiosity Shop. I can tell you for sure it's NOT by H.K. Browne (Phiz), G. Cattermole, D. Maclise, or Charles Green, all of whom illustrated the book at various times. I know this for sure because I've just flipped through my 1871 edition and Scenes and Characters from the Works of Charles Dickens (1908). As you noted, the style is certainly not that of Phiz. I hope this negative answer is of some help! The drawing looks Edwardian in style to me.
Also I wanted to thank you for your clear explanations of how you do your work; I'm always fascinated by how cartoonists make their magic.
Thanks for the sleuthing, Andrew. Anybody else got ideas about who the creator of my Penny reference may be? Howard
An Alternate Path to Clean Black Outlines
From Vladimir Fiks
I just came across your page and found very interesting and entertaining. I especially enjoyed the Cartoonists Corner. I am a working computer designer and have been working with Photoshop for about twelve years. I found your comments quite insightful. Over the years I have found a number of approaches in PS and wanted to share one with you. I find this method of a bit cleaner than using the magic wand when trying to get clean black outlines. Especially if the art is already grayscale and is anti-aliased.
1. Open your scanned file, make sure you are in Grayscale Mode.
2. Go to the Channels pallette and make a copy of the Gray channel by dragging it to the create new channel icon at the bottom.
3. Go back to the layers and convert your 'background layer' to a regular layer by double clicking on it.
4. Select all and delete.
6. From the Select menu choose Load Selection, and from channel drop down menu choose Gray copy. (check invert)
7. Fill the selection with black. And you have a clean black outline.
Hopefully you will find this tip useful.
Although I usually find that using the LAYER>MATTING>DEFRINGE command when the outline layer is created and ending up with the IMAGE>TRAP command after final flattening takes care of stubbornly clinging pixels to my satisfaction, your alternative method using channels merits a try. What do others of you think about Vladimir's suggestion? Howard
Can you please tell me what "patching" Photoshop images is. Thanks!!
When you have a drawing in which everything is satisfactory except for one small area (or several, but let's talk about one for now), you can redraw that single area, scan it in, position and size the redrawn section carefully which it's on a separate, semi-transparent layer until it matches perfectly the surrounding area of the drawing, then make the layer opaque and flatten the drawing so that the new section becomes part of the whole.
Of course, the trick is in making the patch fit into place exactly so that a reader will be unable to detect that the correction was ever needed. To see a step-by-step example of how I typically accomplish that, click here.
Thanks for teaching the basics with such clarity. would you also share some coloring embellishment samples indicating the tool used for each? that would save us hours of frustrating trial and error with the pc not to mention lots of falling hair.
Friendly prodding by readers like you can sometimes get results, fella. Take a look at Creating a Play's Logo Art and see if it includes and tricks that are new to you. Howard
A New Zealand Challenger?
I am trying to do some research on how to colour comics using a Mac. We are in the newspaper business, and require a way to colour the daily comics. I am going to show everyone your technique and hoping that it solves the situation.
But they speak of another software called "Colourize" (sp?) from New Zealand do you know of such a product, do you know of any other software? Or is Photoshop standard?
I've never heard of "Colourize" so I can't speak of its comparative merits. Photoshop is the most program most frequently used used by professionals here in the U.S., I believe, and Photoshop is so full of tricks and so wildly versatile that I've yet to feel the need to look elsewhere, excxept perhaps to Painter. The latter program has in the past bettered Photoshop as a digital mimic of "natural" media (oil paints; watercolors; pastels; etc.), but the Photoshop 7.0 upgrade makes it clear that ever fancier brushes are on Adobe's agenda. Is Photoshop showing signs of catching up with Painter in that department yet? I don't have Painter yet, so you folks will have to tell me. Howard
Will Photoshop Elements Suffice?
Ok, if i want to color comic with Photoshop, do i need the way expensive Photoshop? Or can it be Photoshop Elements 2.0? Thanks.
At the time that I started using the system I describe in How I Color My Comics Using Adobe Photoshop, Photoshop 4.0 was the version in my Mac. That was the first version of the program to include layers, a key tool for coloring comics my way. I now use Photoshop 7.0, but none of the capabilities that have been added in recent upgrades make that much difference, although the History Palette, which was introduced in 5.0, has saved my skin too many times to count when I've needed to correct goofs.
Unfortunately, I don't know Photoshop Elements so I can't answer your question from experience. Since a quick inspection of my boyfriend's PC version confirms that it includes a Layers Palette, my best guess is that it can probably do what's necessary for my basic system. Others who read this may want to chime in about whether PE is clever enough for the more advanced techniques I describe in my new Creating One Play's Logo Art feature. Howard
Creating Screens With Photoshop
From Greg Fox
I'm not surprised you've gotten such a large response about that Photoshop tutorial on your website; it's really brilliant. I just hope I don't lose touch with the hand-coloring I used to do whenever I colored my stuff. The Photoshop is just so tempting with all it's little effects and mistake fixers and smooth color fills, etc.
Yes. My ideal studio would be roomy enough to house (and I would be affluent enough to afford) a full state-of-the-art digital-graphics set-up with enough space left over to do old-fashioned painted stuff, too. And it is awfully easy to overstuff art with fancy Photoshop tricks; almost everyone over-indulges for a while before deciding which effects actually serve best to communicate with readers. Digital graphics have expanded my capabilities dramatically, though, and for now I've pretty much cast my lot with them. Recently, though, I had to do an old-fashioned, heavily crosshatched pen-and-ink drawing for a European client and I have to admit that it felt really good to be engaged to that degree in the kind of intimate interaction with crawing paper that made drawing Stuck Rubber Baby both hard work and great fun. Howard
More from Greg:
A reader writes: Too bad [Photoshop doesn't] seem to have a Zip-a-tone type fill function; that I still do the old-fashioned way, x-acto knife in hand. Was getting hard to find a place to purchase the shading films, but I found a place online. (I don't know that you use shading film/zip-a-tone at all...you seem to create your own tone effects so brilliantly & elaborately by hand. But if you ever need the website address to get shading film from, just let me know and I'll send it to you).
After working with Photoshop for years and voicing frustration that I couldn't create good screens with it, I discovered belatedly that I had simply failed to notice an easily-overlook menu item that makes all things possible.
I don't know if you own or have access to my last book, Wendel All Together, but if you do, take a look at the screened grays in that. All of them were created in Photoshop, and I think you'll agree that they look pretty damned good.
There was much labor involved in that instance, but that's not Photoshop's fault. I used Zip-a-tone sporadically when I was drawing Wendel during the 1980s, only to discover when preparing digital files for Wendel All Together that scanners HATE Zip-a-tone screens. (I'm speaking only of the "Ben Day" patterns made up of very regular rows of dots; sheets using irregularly textured tones scan just fine.) Even with very high resolution scans this is true.
That unhappy reality forced me to laboriously delete (using Photoshop, natch) all of the screens in my Wendel scans that I had originally placed there with Zip-a-tone. But the good news is: I discovered that Photoshop did after all provide me with a way to replace those Zip-a-toned "grays" I had just deleted with fresh, perfect, digitally generated ones that looked as smooth as silk when printed. (Check my book if you doubt it.)
I have no doubt that scanning technology will continue to improve and ultimately make such jumping-through-hoops unnecessary when one is reprinting Zip-a-toned gems from the pre-digital age. Until such time, howver, here's a quick description of how to make great line art that incorporates smooth screens where you want them.
(1) First scan your drawing in grayscale at a high resolution (600dpi is fine). Use the curve capacity to heighten the contrast as much as possible so that residual mid-tones are bleached out.
(2) Duplicate the background and use the procedure I describe in my coloring demo to create a layer composed only of black outlines, with all white pixels deleted.
(3) On the background layer insert whatever gray tones you wish. They can be flat grays or gradients. It's as if you were coloring a drawing, except you're only applying gray tones, not colors.
(4) When you're satisfied, save this version unflattened (in case you want to revise something later) and make a copy for the next step. Flatten that copy.
(5) Now convert your image from Grayscale to Bitmap (IMAGE>MODE>BITMAP). But slow down while you do it, because when the next menu pops up you're not going to use the specifications you're most likely accustomed to.
|Look under "Method." The default seeting in that menu is 50% Threshold. That's appropriate for straightforward line art that only includes pure black lines and shapes and pure white areas, but it's wrong when you want screened "gray" areas as well.|
This time you'll want to click-and-hold on the 50% Threshold line until some other options are revealed. Among those will be Halftone Screen. Click that.
(6) A new window will open up giving you some choices about the screen you'll be creating. To get a traditional Ben Day screen, choose round dots and pick an lpi (lines per inch) resolution.
(7) Hit OK. You're done.
It's easy to get confused about these two resolution designations: lines per inch (lpi) and dots (meaning pixels) per inch (dpi). I hope the example above, showing the transformation of a one-square-inch Grayscale image to its Bitmap conterpart, will be clarifying. At left above is the image I started with. In the center you'll see what has happened when I've changed image modes to Bitmap using the Halftone Screen option. In this instance I specified 85 lines per inch while retaining the drawing's original 600dpi resolution. Because what you see above is a one-inch square, when printed in a magazine this art will be composed of 85 lines of solid black dots. Some dots will be smaller than others. The smaller black dots will leave more room for the paper's white surface to show between them than will the larger dots. Seen from a distance, the black dots mixed with white space will blend into an apparent gray field.
The digital image itself, however, meaning the field of tiny pixels out of which those 85 lines of dots are built, has a high resolution of 600dpi. This means that each stack of 85 halftone dots will be contructed from a stack of 600 far tinier pixels. One will have to look very, very closely at a very magnified digital representation of the artwork to spot those individual pixels. A sharp-eyed magazine reader, however (or one armed with a magnifying glass), may be able to discern the individual printed dots that make up an 85 lpi screen.
Now for a few final words about Photoshop's conversion-to-screens process. If your drawing is going to be reproduced on high-quality slick paper, you can go for broke with a very high lpi setting. 120 lpi art is common in the glossies, as is 133 lpi. But for most uses 85 lpi or 100 lpi will produce a screen that looks very smooth to the average eye. If you actually want the reader you be conscious of the dots, you can lower the resolution as much as you like. Hell, you could even generate 6-lines-per-inch art, I suppose. But remember, the dpi resolution will remain at 600 dpi unless you specify otherwise.
I learned all of the above by accident. I wish someone had clued me in a couple of years earlier, or that I had pored through my Photoshop User Guides more assiduously. I also wish I could get in a time machine and visit my younger self in 1974. I would say, "Ditch the Ben Day Zip-a-tone kid, and make do with either irregiular patterns or hand shading. You'll thank me for this advice a couple of decades from now!" Howard
What About a Printout-able Version?
June 1, 2003
Wow! What a great tutorial! I'm sure you get this a lot but is there any chance you have the coloring tutorial in a doc or pdf format? Thanks!
And thank you for the compliment. I've a little hesitant to extend my Photoshop pedagoguery beyond the comfort zone of my own web site because, well, to do so would make me seem more like a "how-to" author and a real "how-to" author should be more of an expert than I am. My tips are more a description of the work habits I've accumulated by trial and error, and I'm well aware that other artists more knowledgable than I undoubtedly have developed procedures that make better use of what Photoshop has to offer than I do.
But I'm flattered that you'd like to have a take-home version of my tutorials, Rex, and I'll give some thought to providing such a document eventually if I encounter a stretch of free time to do so. Howard