Skip to main content

Tutorial Time with Frodo

So. You want to do a webcomic, you have the drawing skills, you just want to know the magical way to get it from the paper to the screen. It's pretty basic, and I can show you how! Join me on this magical journey of... magicness (thesauruses are for chumps).


Step 1: Drawing the Webcomic.

You already know how to do this? THEN HEY MR. PERSON (or MS. PERSON) SKIP TO STEP 2. If you don't, follow along! For my comics, I like using a kind of paper called "Marker Paper". You should be able to find it at any art store, I've even been able to find it at my local super-mega-mart. It is specifically labeled "MARKER PAPER" and bares a resemblence to tracing paper. It holds unusually crisp marker lines, which will come in handy later. Basically you can use any paper you like. Choose a paper that produces lines that are satisfying to you. Does the paper feel good to draw on? Does the paper pay for your drinks? Some other basic supplies:

  • PENS! (I use Micron brand, in a variety of sizes. Use different pen sizes, shake things up, it makes your art look a lot more defined. Include a basic Sharpie for margins, etc.)
  • AN AWESOME METAL RULER! (Get a nice cork-backed ruler for drawing. Never underestimate the power of a straight line. Plus, it will help you measure out how big you want your comic to be.)
  • PENCILS! ( I use a mechanical pencil with .05 Blue lead. I like the blue because... well, I'll tell you later. You can use normal pencils, but I recommend blue ESPECIALLY with the marker paper.)
  • A NICE, FLAT SURFACE FOR TO BE DRAWING ON! (Art desks rock. A kitchen table rocks slightly less. Carpet is flat out non-rocking.)
  • KNEADED ERASER! ( I like the fun moldy kind of eraser, it doesn't leave any dust, and you can sculpt things out of it when you're bored.)
  • COMPUTER! (Wow. In order to get digital comics, you need a computer. Mindblowing, huh? You should have at the very LEAST 64 MB of RAM. I have 1GB. Photoshop will run soooooo much smoother with more RAM)
  • PHOTOSHOP! (Any version will do. If you do not own this program, and you have anything to do with art, I pity you. I guess something like Paint Shop Pro will work, too. I GUESS.)
  • SCANNER! (I use a basic HP scanner that was about $30. It is USB based, which I prefer for speed. If you don't have a scanner, check out PriceWatch.)

That's it. Let's get started.

As you can see, that's me at my drawing desk, getting a comic ready. For some of my comics, I draw a full-sized comic page which has dimensions of about 7"x9". A normal 3-panel comic runs about 6"x2.5" give or take some. My advice is take a look at a comic format you like already on the web, and download a strip to Photoshop. Clear the image, and you have a perfect size to go by.

The marker paper is great for markers. That's why it's called marker paper. Get it? The reason I like to use blue pencil with the marker paper is because while the paper may hold great marker lines, it smudges pencil REALLY easily, especially when an eraser is run over it. You can just draw over the blue lines with ink and remove them in Photoshop later.


Step 2: Scanning and Starting the Magical Digital Process.

After you are done with your comic masterpiece, scan it in. You usually can scan directly into Photoshop using the File>Import> command. Your scanner should be listed. I usually scan at about 300 DPI, in line art mode. That way the scanner doesn't pick up the blue lines. Clever, no? You can scan normally and remove them later, but that's a little advanced and longwinded for now.

I always work at 300 DPI at least. Working at a higher resolution means that you have more pixels to work with. Your final resolution will be about 72 DPI (which is the normal monitor resolution). When you work at a higher resolution and then shrink it to a lower, I find it makes everything look really crisp. Like a crispy delicious potato chip. MMM, chips.


Step 3: Clean up and Color.

Now that you have your art scanned in, be sure it's in RGB mode by Image>Mode. RGB color mode is the optimal mode for webcomics. If you would like to print the comics later, it would be advisable to look into CMYK mode. Since this is a basic tutorial (and I am REALLY lazy) I am not going over CMYK today. So there. In RGB mode you can create new layers, etc. You know how layers work, right? You'll figure it out, they are called “layers” for a reason, come on.

From here you can work on erasing those blue pencil lines. Go to Image>Adjustments>Replace Color and a box will appear with lots of fancy knobs, dials, bells and whistles. All you have to do is move your mouse over your image where there is some blue, and click. That will register the blue as the color you would like to replace. From there you just have to adjust the “fuzziness” (which dictates what color range should be replaced) and then crank the “lightness” dialey thingy all the way to white. If your blacks look a little washed out after this, check out the Image>Adjust>Layers command and mess with the dialey thingies on there. That will make your blacks blacker and your whites whiter. WITH THE POWER OF ORANGE-CLEAN™.

Clean up your lines. No one likes a messy, spotty comic. Take a pencil brush at about 8 pixels, and clean up your mess. For a quick fix for spots, use the Filters>Noise>Dust and Scratches command. Fiddle with the settings until you get a nice, smooth image.

Super awesome cool trick: Press the "Tab" key to show/hide the toolbars, and roam your canvas freely without having to move tools around!

After you have cleaned up your lines, it's always good to name your layers. Double click on the Background layer, and name it "Lines" or "Dookie". I don't care. Labeling your layers helps you remember what the heck you are doing later.
If you don't want to color your strip, fine. Skip to the "Saving and Compression" step. If you do, GREAT. Create a new layer, and grab your paintcan! It's time to fill! Fill in the areas with color like a paint-by-number painting. I find that if you fill twice, you will avoid white lines between the black art and the color fill. After you have filled in all the colors, set the color layer to Multiply mode. That makes all the black lines show through, and the color turns out crisp and neat and nice.

Cleaning lines. Precise brushes work best. Add some word bubbles and text anyway you want, and go to the next step.


Step 4: Saving for the Web

Saving for web. Around 150k would be the highest you should save at. After that, it's just a pain to download. This part's easy.

First you need to flatten your image. Go to Layer>Flatten Image. Makes a lot of sense when the command is named after what you want to do, huh? If you worked at 300DPI, now is the time to change it to 72 DPI with the Image> Image Size command. Photoshop versions 5.5 and above have this next step built in: File>Save For Web. Select a good level, I usually save art that has a lot of color variation as a .jpg, around 60 quality. That leaves the little "artifacts" out (the wierd little distortions around lines), and keeps it a relatively small size. If you are doing a black and white only comic, I highly recommend a .gif format. Line art always saves crisper and smaller as a .gif. After that, you are ready to go out into this crazy world of webcomicking! Now you are ready to directly compete with Penny Arcade*.

*Probably won’t ever happen. Not a guarantee.

Chris Furniss (AKA Frodo. I know, I'm a sad Lord Of The Rings) has been drawing since he was first given a pencil instead of a stuffed animal in his crib and stabbed himself in the eye. Since around the year 2000, he has been doing this thing called "webcomicking" first with a little comic called The Necronomicon and then a slightly bigger comic called Intelligent Life.

Re: Tutorial Time with Frodo

bobweiner's picture

Nice tutorial, Chris. To that I would add the option of digital inking. For The PC Weenies,I take my rough sketches in, via the scanner, and then keep them on a separate layer in Photoshop. On a layer above the sketch layer, I use a Wacom tablet and a customized Photoshop brush to digitally ink the sketch. I find it much easier than having to go back and clean traditional inks later on - but it's purely a matter of personal preference.
I then duplicate the inked layer (to create another layer of inks), and color the image using the lower level inked layer - this helps preserve the ink lines from getting washed out. Hard to explain without images - maybe I should write a tutorial? :)

-K

Krishna M. Sadasivam Cartoonist, "The PC Weenies" http://www.pcweenies.net