Log in

No account? Create an account

Previous Entry | Next Entry

Digital Comix Tutorial

I've had a few people ask me how I go about creating my comics. In fact, next week, I'm going to give a presentation to a group of teenagers on that very topic. To prepare for my presentation, I created a comic using my usual method and saved it at various stages over the course of its production.

In a nutshell, I draw images on bristol board using brush pens, scan the image(s), and then import them into photoshop where I clean them up, color them, and assemble the finished strip with dialog. The process usually takes between 3 - 5 hours (provided baby Logan has gone to sleep for the night). The strip below exemplifies the "no frills" approach. Sometimes I complicate things by incorporating digital photography into the comic, but a discussion of the "bells and whistles" approach will have to wait for another day.

First, the finished product:

Pretty clever, eh? If you linger over the images as well as reading the text, this strip will provide you with about 20 seconds worth of entertainment.

The strip starts out as a thumbnail sketch in a notebook along with a rough draft of the dialog. The basic layout and thumbnail sketch come before I write any words. One writer friend of mine expressed amazement upon learning the the layout comes first. To him, it seemed obvious and natural that the strip would start out as a written script and that the images would come later.

The thumbnail and rough draft look like this:

Once I've got the dialog down on paper, I open Microsoft Word and type it out, editing and paring down the script as I type it. To keep the dialog legible at 72 dpi (screen resolution), I limit myself to 50 - 85 words per strip. Were I doing comics for publication in a magazine or newspaper, I could easily go as high as 200 words in an 8 X 4.5 inch space. Once I've got the dialog typed and spell checked, I open a file in Adobe Photoshop.

Using the type tool and cutting and pasting from the Word file, I put the dialog on the page roughly where I think it will appear in the final strip. I use a font called Wild and Crazy which I purchased from Comicraft.com for $25.00. Many digital cartoonists use the MS Comic font which comes preinstalled on most PCs. Each time I add new text to the Photoshop file, Photoshop creates a new layer for that text. This allows me to move each block of text individually without first selecting it with the marquee or lasso tools. Very handy.

Notice that I have center-justified each piece of dialog and that the text fits into a pretty regular and confined space. Sometimes I have to change my original dialog to get the words to fit neatly into balloon-friendly shapes. When the dialog looks good, I print it out on regular multi-purpose printer paper and cut out the contents of each word balloon with scissors.

Once that's done, I feed a sheet of Wausau Exact Bristol semi-smooth medium card stock into my printer and print out the outside boarder for the strip. The final strip appears on screen at 8 X 4.5 inches, but I print the border at 10.25 X 6.086 inches so I don't have to strain my eyes squinting at the page to get the details right. Most illustrators draw larger than the size the image will appear in print or on screen.

I then arrange the dialog balloons on the bristol board page so that they read clearly. Nothing ruins a comic like placing the dialog balloons such that people read them in the wrong order. Clarity is job one. When I've got the dialog fragments where I want them, I tape them down and draw the balloons around them. At this point, I'm using a light colored brush pen, and I do not include the "tail" on the balloon that points to the character who is speaking. That comes later.

Then, with a straight edge and the fine tip of one of the light-colored brush pens, I draw in the interior panel borders. I'll re-draw them later with the line tool in Photoshop. Once I've got the dialog balloons and the interior panel borders down, I do rough sketches of the characters using the fat end of a light-colored brush pen. Then I can indicate the tails on the dialog balloons, so the page looks like this:

At this point, I use darker pens to build up the images. I got the idea to build up the images using progressively darker pens from Art Spiegelman, who developed the technique while working on his Pulitzer Prize-winning graphic novel, Maus: A Survivor's Tale. Once I scan the drawings, I use the threshold function in Photoshop to eliminate the lighter inks, leaving just a black and white line drawing.

I used to draw my comics in pencil, and then ink over the pencil drawings with technical pens. Finally, I would erase the original pencil lines. This took much longer than my current method and produced a cleaner and more precise drawing. That's fine for print publication, but on screen, all those fussy little details get lost, and with my current method I come out way ahead on the speed/detail trade off. Here's a detail from a comic I created using the slower pencil and technical pen method:

I use a variety of pens on the final pass, but rarely do I break out my set of technical pens. I like to work fast, and I find that I get a spontaneity using familiar and comfortable writing implements like the Pilot Precise Rolling Ball V5 Extra Fine and the Paper Mate Flexgrip Ultra Fine that I don't get with the Rotring technical pens I used to use. I also use a black brush pen called Splash!! (you can tell it's made in Japan by the two exclamation points) to get lines that vary in thickness. I used the Splash!! brush pen on the bottom two panels.

Here's what the final drawing looked like when I scanned it:

Now that I've scanned the drawing, I have two files open in Photoshop. One contains the dialog, and the other contains the scanned image. From this point until nearly the end of the process, I'll be working with image file. Once I've got the image looking the way I want it to, I will incorporate it into the file that already contains the dialog.

To convert the multi-colored drawing to black and white line art, I used the Threshold function in Photoshop. To find it, pull down the Image menu, then select Adjust, and then Threshold*. You'll get a window asking you to enter a value for the threshold. The higher the number, the more black you get in the resulting image. Use a high number for meaty lines and a low number for that ultra-clean look. The higher the number, the more cleaning up the image will require. Remember your good friend the Undo command (Ctrl-z), and try several settings. I selected a threshold value of 137. I generally prefer the "meatier" look of heavy lines, but I opted for the relatively low value of 137 to minimize on clean up. Even so, some rough spots remained that I smoothed over using the pencil tool and the color white.

* I use Photoshop 5. If you know that Threshold is located elsewhere in version 6, please post a comment and let everyone know.

After smoothing out the rough spots, I had this image:

Now, to add color. For a long time, I found myself frustrated because I tried to color drawings just by dropping color into them with the paint bucket tool. If I had the tolerance on the paint bucket set low, I was left with lots of white halos that I had to fill in by hand. If I set it too high, the resulting field of color ate into my linework. Either way, the quality of the linework suffered. I knew that there must be a way to color "behind" the inks, and I finally found out how.

Make sure your foreground color is set to black and the background to white (this is the default mode), and then select all (Ctrl-a). Once you have the image selected, cut it (Ctrl-x). Next, you'll want to create a new channel. Under the Window menu, select Show Channel. You'll get a box that lists your various color channels. Along the bottom of the box, you'll find a set of icons. Just to the left of the garbage can icon, you'll find an icon that looks like a sheet of paper that has had a corner folded over. If you place your cursor on it and let it linger for a moment, Photoshop will identify this as the Create new channel icon. Click it to create a new channel. Photoshop will name this channel "Alpha 1." You may find it useful to change this name to "Inks" the first few times you follow this procedure.

After you have created the Inks channel, paste (Ctrl-v) your image into it. At this point, all of your channels will go blank except the Inks/Alpha 1 channel. Click on the RGB chanel. This will cause the image to go blank. Now click on the blank box to the left of the Inks/Alpha 1 channel in the Channel box, and you should get your linework back. It may display as red rather than black. This is good.

Now, make liberal and creative use of the paint brush and pencil tools along with the color palette. At this point, you can't affect the linework, so just use it as a guide. For me, this "painting" stage usually eats up more time than any other phase of the production process. Paint, paint, paint. When I finished with the painting and made the Inks/Alpha 1 channel invisible, I had this:

As you can see, I used mainly flat colors, but on the first panel, I did use Filters>Blur>Guassian Blur to smooth out my color transitions. On the final panel, I selected just the background which I had filled in blue like the backgrounds in the other panels and then adjusted it with filters. First I used Filter/Render/Lighting effects to create the spotlight effect, then Filter/Texture/Grain, and finally I blurred it slightly with Guassian Blur.

After I had finished painting behind the inks, I selected Image/Apply image. This brings up a box which allows me to select the channel I want to apply. I selected the Inks/Alpha 1 channel. This re-applied the ink outlines to my drawing, but they did not show up black. At this point, I dragged the Inks/Alpha 1 channel in the channels menu to the trash can at the lower right-hand corner of the channels box. Once the Inks/Alpha 1 channel was gone, the outlines showed black again. At this point, I had the final product minus the dialog.

From here, I selected Image/Image size and set the dimensions and resolution of the image to match the Photoshop file which contains the dialog, which is to say I set the dimensions to 8 X 4.5 inches and set the resolution to 72 dpi. Next, I selected the entire image (Ctrl-a) and moved over to the Photoshop file which contains the dialog and pasted in the image (Ctrl-v). Next, I made all of the dialog layers invisible by clicking on the little eyeball in the box to the left of the layer in the Layers box, and selected Merge Visible from the action menu found at the upper right-hand corner of the Layers box. This merges the new image layer with the background layer.

Next, I made the individual dialog layers visible again and moved and resized them to fit into the dialog balloons. Finally, I selected Flatten image from the Layers box action menu. Then I saved the file as a jpeg file and uploaded it to C-Realm.com. Viola. Done.

Believe it or not, this has become a very streamlined process for me. It has taken me far longer to describe it than it does to execute it. I realize that much of what I have written here will not interest anyone who is not familiar with Adobe Photoshop. Those just learning the program may take an interest but not fully understand what I've written here. If you fall into this second camp, please feel free to contact me and seek clarification.


( 12 comments — Leave a comment )
Jul. 11th, 2001 06:57 am (UTC)
easier done than said :-)

I never imagined how much work was required to put together a comic strip. Have fun inspiring and subverting your audience!

Jul. 12th, 2001 01:07 am (UTC)
Re: easier done than said :-)
Hey Michael,

It was great seeing you in NYC. When are you coming out to Port Ludlow for a visit?

Jul. 12th, 2001 08:15 am (UTC)
Re: Port Ludlow Visit
Would love to visit, perhaps in August!

Jul. 11th, 2001 12:04 pm (UTC)
very cool entry! i have nothing but respect for your willingness to expose your techniques! Many artists would call this process "proprietary" and would rather die before revealing their "secrets," (for fear of seeing a "z-realm," a "b-realm" etc etc ad nauseum.) But what they don't realize is that protection of proprietary practices discourages innovation and development.

Anyhow, you mention using Photoshop 5, a program which i used for a while before upgrading recently to 6. 5.5 and 6 have the "History Palette," (which saves all the past states of your project, allowing one to go back a number of steps and revert to any point along the way) and some advanced Type Tool features that would probably eliminate the need for the intermediate MSWord steps altogether. Normally an upgrade in Software isn't really worth the price, but the 5 to 5.5 or 5 to 6 step up would be worth your while I think.
Jul. 12th, 2001 01:10 am (UTC)
Re: awesome!
Hey Steffan,

Thanks for the compliment. As for Z-Realm and B-Realm, bring 'em on. If anyone actually takes the time to follow this formula for creating digital comics, I'd love to see what they come up with. I'm pretty sure their finished product would differ significantly from the stuff that bubbles up out of my brain.

As for a Photoshop upgrade, I upgraded from 3 to 5. I figure I'll upgrade again when they release version 7.
Jul. 11th, 2001 01:12 pm (UTC)

I abandon paper, not because I'm conserving wood (a side benifit) but because I mess up far more often than you. I think if we ever drew our comics at the same time while at the Maneater, you probably noticed that while yours are more highly detailed, it took us about the same time to finish after all my starts and stops.

I still mess up as often, but use the history pallette to remove my mistakes.

I just recently figured out that blowing up my images even larger before I draw them takes out the whole shakey hand problem that I was running into with my drawing pad.

Your informative entry makes me admire your attention to detail.

Now you need to do an entry about how you made the entry in the first place. Then do an entry on that entry.

That oughta keep you out of trouble for a while.
Jul. 12th, 2001 01:14 am (UTC)
Infinitely Recursive Self-Commentaries?
Yeah, that would keep me out of trouble. It would also insure that I never drew another comic.

As for drawing at the Maneater, I rarely did that. I found that a task that took 2 hours at my apartment would take about 5 hours if I tried to do it at the Maneater on a production night.
Jul. 13th, 2001 12:09 pm (UTC)
Wow, thanks!
That's incredible! Thanks for the tutorial. I'm a Photoshop junkie who loves hearing of others experiences.

I love the fact that everything is wide open in the digital arena. I love that no one can say with their nose upturned, "you're not doing it right" or "that's not a valid technique" (things I heard from a very anal painting instructor).

Sky's the limit, baby!
Jul. 16th, 2001 10:32 am (UTC)
Re: Wow, thanks!
Hey, Cheekylilmonkey,

Thanks for the comment, and a belated Happy Birthday to you.

Yeah, I love the fact that there seems to be a nearly limitless number of implemtation pathes that lead from a blank file to the image I want to create.
Jul. 15th, 2001 01:54 pm (UTC)
Hey There:

This is the third time I've looked at this, with serious little eyes and a lot of respect. I really need to take a class to learn how to deal with all the fancy software I've conned my husband into buying for me and figure out what I need to do to seduce him into buying me Adobe since I already have Corel and PSP.

I've also got my eye on a sweet little graphics tablet and I have wondered if it is easier to use one (thereby skipping one step) than doing them in pencil/ink and scanning. *sigh*

Too much to learn, makes my brain hurt. I'm mightily impressed with your output.

Jul. 16th, 2001 10:24 am (UTC)
Drawing Digital and the magic of Photoshop
Hi Crow,

Eventually, I expect I will give up the pens and paper for something digital, but it won't be a graphics tablet of the variety that requires I draw on the tablet to produce an image on screen. When the technology adapts itself to aid and augment my existing drawing skill, I'll use it. At this point, I do not intend to make the effort required to re-wire my reflexes so that I can look one place and draw in another.

Someone gave me a rather nice graphics tablet a while back. I experimented with it, came to the conclusion I described in the above paragraph and gave it to Paul Gude. Paul proceeded to use it to make some mighty cool comics. Scott McCloud, author of Understanding Comics, has also ditched physical media and creates his comix using digital tools from the word go.

A make a motto of making use of what I have at hand rather than putting off my creative projects until I have acquired and mastered more sophisticated tools. That said, Adobe Photoshop remains the most versatile and useful piece of software I've ever used. A while back I had to live without for a few days. Here's what comix looked like during that period.
Jul. 16th, 2001 11:16 am (UTC)
Re: Drawing Digital and the magic of Photoshop
I have a Cross Pad. I bought it on a whim with my tax money about three years ago. I have not used it nearly enough to consider myself handy with it, and would like some different ink points (it came with the ubiquitous blue, and yellow legal pads, both of which could be discarded for black and white...)

I just called their tech support folks (nice folks, at Cross Pen tech support, don't have much to do, I guess) and he tells me I am all set until I upgrade to Windows Me or 2000, an unlikely possibility because I'd rather set my hair on fire than do that.

So I am going to play with my Cross Pad, and I will let you know if it is a joyous experience or a cursed pain in the neck to draw on it and uploade the results via USB.

You're probably right about trying to draw and look at the screen... that's one reason I have never gotten very fond of paint program drawing; everything I do looks like a kindergardener's fridge offerings.

( 12 comments — Leave a comment )

Latest Month

August 2017


Powered by LiveJournal.com
Designed by Ideacodes