Dan and Pete – Creating a webcomic

This is a comprehensive rundown on how I create my strip, Dan and Pete, every week. This is my personal process and other cartoonists work in completely different ways – none of them are right or wrong. Go with whatever works best for you.

About Dan and Pete
Dan and Pete is a superhero parody comedy about two best friends – Dan, the world’s greatest superhero and his fragile loser roommate, Pete. It has been running in The Sunday Times newspaper in Perth every week for over 2 years, and is also a weekly webcomic at www.danandpete.com

Story
All my strips can be separated into two different catergories: story-based or picture-based. Story-based means the strip revolves a plot or situation dominated by words or dialogue. This is where the visual takes a backseat to the dialogue between the characters. Most webcomics or comic strips are dialogue dominated where each panel consists of two talking heads and not much dynamic figure drawing.

A picture-based strip obviously focuses more on the visual, with words and dialogue emphasising or adding to the pictures.

This particular strip is picture-based. After a few weeks of dialogue-heavy strips I really wanted to do an episode that was visually exciting and also fun to draw. For me, this almost always means drawing the superhero character, Dan, doing dynamic superhero stuff like flying or fighting someone.

So first I start doodling some rough sketches of Dan just on note paper. After a few tries, I managed to get one I liked of Dan flying in a pretty cool pose (fig 1).

In the sketch Dan is looking back behind him. I don’t know why he’s doing that – it just looked the coolest. Ok, so now I work my story around this sketch. Why is he flying? Why is he looking behind him? Mmmmmm I know! He’s being chased! By who? Is he racing someone??

I can feel an idea being generated now. I do know that I want that original sketch of Dan to fill a big panel. That means I only have space for two more panels, making it a 3-panel gag (duh!). Once I have my parameters it’s a bit easier to work out a gag. So what I end up with is …. Dan is flying – he’s being chased by a villain (I don’t know what he looks like yet), Dan slams on the brakes and the villain flies right up behind him where Dan traps him into his super-stinking armpit! (Pulitzer prize, here I come!)

Layout
Next I start sketching what goes in the other panels (fig 2 and 3).

As you can see, I also start coming up with possible dialogue. Once I finalise the dialogue I’m ready to start penciling the final strip.

I pencil on a type of paper called linen board. My dad’s a printer and I got it off him and continue to order it through his stockist. I’ve never used Bristol board that all the pros use. Anyway, the paper I use is about as thick as 3-ply Bristol, but it’s not as smooth and has more tooth. I sketch with a Staedtler Mars micro 0.5mm mechanical pencil with a 2H lead. I draw the original at 142mm x 490mm. I use A3 paper, so for a regular 4-panel strip, I have them stacked 2 panels on top of each other.

Next I layout the strip, sketching in the rough shapes of the figures (fig 4).

Equally important at this stage is placing the word balloons. This stage is probably the most difficult because you can’t just slap figures and word balloons anywhere you please. Each panel must be balanced and all the elements should be read in the right order. It’s much easier laying out a comic strip over a comic book page because it’s just one horizontal strip that’s read left to right, but it still takes practise, especially when it’s a picture-based strip like this one.

Lettering and Pencils
Next I move onto roughing in the lettering. Now I know what you’re thinking – “This guy still does his lettering by hand?! What in the hell?!” Yeah, I know most comic lettering is done digitally these days, and it would probably be quicker if done on the computer, but I dunno, I guess I like the old-school way better. I’m pretty lucky as I have a naturally cartoonish type of handwriting. I can see myself moving onto digital lettering in the near future though, as it is much less time-consuming. I do, however, draw most of my word balloons in the computer cos I have a really unsteady hand.

Ok, so for my hand lettering, I rule 6mm lines with a 1mm space in-between as my guides. Then I rough in the script with pencil.

Now I go back to the figures and tighten up the drawings (fig 5).

This is the fun part. I worked out a design for the flying villain, who I named Jockrocket. He has a Rocketeer-type helmet and jet-pack. I had Dan sticking his tongue out and taunting his opponent, which is exactly the type of thing he would do. I also sketch in a background in the first panel. I go through the rest of the strip and pencil in all the detail, keeping it pretty tight, not leaving much room for leeway when I start inking.

Inks
I do all my inking with a pen. I use Sakura Pigma Microns (fig 6).

These are pretty popular with cartoonists these days. I know they’re all Frank Cho (Liberty Meadows) uses for his work including his comic book stuff. They’re great because they don’t smudge at all and aren’t too expensive. I can’t find any here in Melbourne though and bought a stack when I was back in Perth.

First I do the lettering. I use a 0.5mm pen for this. If I screw something up or a word is positioned wrongly I can always fix it in Photoshop.

For the main inks, I use mostly a 0.3mm pen, changing to a 0.1mm for the fine details such as Dan’s face on panel two. For the long smooth lines of Dan in the first panel, I use French curves, as I am physically unable to draw a long curved line without it looking like it’s been done by a Parkinson’s sufferer. Once all the inks are done, I let it dry for a bit just in case, then erase all the pencils.

Scanning
Now it’s ready for scanning. My computer setup is pretty basic. I use a Dell 9300 laptop, which has a nice 17-inch widescreen. It’s got 1GB of ram. I hope to upgrade soon and also get a wacom tablet, but I manage to get by with a mouse. For the scanning, I use just a basic HP flatbed scanner. I scan the art in two parts and then join them back together in Photoshop. I scan it as a black and white bitmap at 600dpi.

Colouring
Ok, for the colouring I use Photoshop CS, but an older version should work fine. (For this tutorial I’m assuming you have a pretty good grasp of Photoshop).

Once the scan is in Photoshop I convert it to grayscale, then CMYK and finally change the resolution to 300dpi.
I have a template for my panel borders, which I made in Illustrator that I open and just dump on top of the scan. In Illustrator I drew the panel borders and put a solid white box behind them. Then I use the pathfinder tool to ‘punch out’ the shape of the panels. This way, when I open it up in Photoshop (fig 7)

I just drag it onto my artwork and place it on top of my drawing. Once that’s done I flatten the layers.

Basically, I colour using two layers. The top layer is just the black line work and the bottom has all the colour on it. First, I want to isolate the black line and get rid of all the white (I know you can just set the top layer to a ‘multiply’ blending mode, but I prefer doing it this other way). Right now, I just have the one layer. I go to the Channels palette, and Ctrl+click on the CMYK channel. This should select all the white area. I then go back to the Layers palette, make a new layer, inverse the selection (Ctrl+Shift+I) and finally fill the selection with black. Now delete the background layer. Make a new bottom layer and fill it with white. You should have 2 layers now, the top (which is named ‘Layer 1’) with the black line work and a bottom layer (which I name ‘paint’) filled with white (fig 8).

I go through the strip and delete all the specks of crap that was picked up in the scan and clean up any lines that I’m not happy with. It’s now finally ready to be coloured (fig 9).

To make the colouring process a bit easier I assign action shortcuts to commands I use frequently. ACTIONS are a cool Photoshop tool that remembers complex commands, which you can make into keyboard shortcuts. Creating actions is easy. For instance, the first action I want is to select ‘Layer 1’ without having to use the mouse. Make sure you have the ‘paint’ layer selected. Now go to the actions palette and make a new action. A dialog box will pop up. Make the function key F2 and press record. Now select ‘Layer 1’ and press the little square icon on the Actions palette, which stops the recording. Do the same thing, this time selecting the ‘paint’ layer from ‘Layer 1’, and make the function key F3.

You should now be able to switch between ‘Layer 1’ and ‘paint’ by hitting the F2 and F3 keys. The last action I use is a shortcut to expand a selection. Normally when you select an area of space to fill using the wand tool and then fill it with colour, there’s a tendency for a little bit of white to still be seen between the black line and colour. To prevent this from happening I expand my selection by 3 pixels (fig 10a, 10b)

 

 

and then fill it with colour on the layer below. To do this select an area you want to colour, then go SELECT – MODIFY – EXPAND, and expand by 3 pixels. I also make this sequence into an action and assign it to the F4 key. Ok, now we’re all set to go!

Next I go through the strip and fill each area with a flat colour (fig 11).

After awhile this becomes really quick to do by hitting F2 to make sure you’re on ‘Layer 1’, selecting a colour, then quickly hitting F4, which expands the selection, then F3, making sure you’re on the ‘paint’ layer, then hitting fill (Alt + Backspace).

A quick way to colour is to fill lots of areas with the same colour (fig 12)

and then going into a specific area, selecting it, and using the HUE/SATURATION (Ctrl + H) command to change the colour (fig 13).

Once all the basic colours are done, I go back over the strip and add some highlights. I do this by using the PEN tool to draw a PATH in the shape of the area I want to highlight (fig 14),

turning the path into a selection (Ctrl + Enter), then using the HUE/SATURATION command to either darken or lighten the colour (fig 15).

And that’s pretty much the basic process I use to colour the strip. I add some effects (which I always do on separate layers), like the varying lines of pink in the second panel, and a bit of textured brushwork on the background in the first panel. And it’s finally done! (fig 16)

Saving for Print and Web
I save two versions, well three actually. There’s the original PSD file. For the newspaper that Dan and Pete runs in, I flatten the file and save it as a 300dpi CMYK Jpeg. For my website, I flatten the PSD file, then use the SAVE FOR WEB command in Photoshop. I save it as a 128 colour GIF at 900 pixels wide.

Well there it is - my process of making a comic strip every week. I hope it’s clear to understand because it’s been pretty tough putting my process into words. To repeat, this is certainly not the only way to go about it, but after a few years of trial and error it’s the best way that works for me. If you have any questions or even tips for how I could do certain things better, drop me an email at gavthan@gmail.com

Thanks!