How I Drew the OA Online Comic

posted on August 4th 2011 in How I Did It & Tech Newz with 0 Comments

This is the step-by-step technique of how I drew my previously completed online comic, Opposite Again. I thought it might be helpful to some other artists out there who are searching for a niche in webcomic art. Remember every technique is different and every style varies. Try not to attempt and/or sustain anything that’s beyond your technical abilities, or you’ll quickly get discouraged. But if you’ve got your style under control, and a strong work ethic, all you need is a sequential rhythm to work by, and you’ll be posting consistently. Enjoy!


By now, I guess most people have already read dozens of “how-to” pages by a webcomic artist. Well, so have I, and I’m amazed at how different all of our techniques are. Some illustrators, whose comics are drawn with a No. 2 pencil, post their work as is, not even bothering to adjust the contrast. What’s ironic is that their sites get more traffic than you can imagine. Then there are the others, who are enabled with vast Photoshop skills, applying color vitality to their comics in the grandest of detail. They’re stack layer upon layer until the file is so huge, that if you placed it in the physical world, it would be taller than a skyscraper.

Don’t get me wrong. I love that level of design. I’m really more jealous of it than hating on it. But the time it takes to produce a product of that caliber has taken down many a great artist. I’ve watched them fall, one by one, devastated by the unforgiving posting schedules of their own insatiable demands. I figured there’s gotta be a happy medium, and I think I’ve found the spot that works for me.

To begin with, I’ve already finished writing the entire story. I’m merely illustrating it for the webcomic. It’s hard to tell how long it will run, because when I feel the need to tell a certain segment in detail, I expand the storyline to accommodate it. But enough about that. On to the technique!

Step 1

I try to view the storyline in weekly blocks or three-day segments. So, I always draw a minimum of 3 pages at a time. I draw with a non-repro blue pencil, usually Staedtler Mars or Prismacolor Verithin. I go through these quickly, so I tend to buy them 12 at a time. I rough out the positions of each panel, then I fill them with characters and objects relative to the scene. If I make any changes, none of the marks will show in the final.

Step 2

I’m still a bit Old School when it comes to inking, so I mix traditional tracing with the digital. I trace my bluelines with about four different pens and nib sizes. I enjoy the rough look they create, making the drawings appear casual and loose. After doing the basics, I scan the drawings as grayscale. Using a Wacom Pen Tablet, I complete the finished outline work in Photoshop.

Step 3

Once the line art is cleaned up, I open the PSD grayscale file in Adobe Illustrator.

Step 4

At this stage, I drop the opacity of the drawing to about 64%, and add 2 new layers: one for text, the other for the balloons. I chose Comicraft’s Wild Words for my font. It was a bit pricey, but it’s extremely ledgible, and fits the style of my work. I don’t use pre-designed word balloons, because I tend to bounce a lot of dialog around in each panel. I decided to use Illustrator’s Pen Tool and draw custom bubbles for each statement. I also drop their opacity also so I can see what each balloon will be covering. I move them if the artwork is getting crowded out, but if the elements behind them are non essential, I’m okay with it. The trick is to stay focused on the flow of the story, no matter what. When I’m done, I save the page as an Illustrator file.

Step 5

I return to Photoshop, opening the original Photoshop file, and quickly convert it to RGB. To alleviate a lot of repetitive clicking, I’ve created about nine Actions to handle complex tasks, such as duplicating the layer and setting it to Multiply. Next, I begin to color using a multitude of custom brushes I’ve saved specifically for the comic. I also learned a cool coloring tip from another web comic artist, which was to create a file of swatches separated and organized by character, saving me from keeping multiple files open while constantly sampling from them. This current layer will contain only the flat colors.

Step 6

On a new layer, I add all the shadows and highlights giving each illustrator depth and a bit of pop. The white highlight technique is from from my early airbrushing days. It’s sort of a trademark now. I toned it down to keep my characters from looking plastic.

Step 7

I use additional layers to manipulate other regions of the panels, such as clothing, wall textures, landscaping, etc. This technique varies from page to page. I don’t like overdoing the same effect. That gets boring, and I want to grow creatively with each page I draw. It sort of like being in Art School again.

Step 8

When the color art is complete, I return to Illustrator, and “re-link” it with the COLOR Photoshop file. The color version comes in and replaces the grayscale version. I return the opacity back to 100%, convert the text to paths, and Export the whole file back to Photoshop again. Once there, I run another Action script which applies about 7 transformational steps, then places a JPEG version of the file in the folder ready to post online.

That’s my routine. It seems time-consuming, but I’ve got a pretty good schedule worked out now, that keeps me 4 to 5 weeks ahead of the posting. Like I said, the trick is to work in threes: 3 bluelines, 3 inkings, 3 scans, 3 lettered pages, 3 colorings, etc. If you don’t have enough time to do this many steps, remember this is just my way. You should discover what works for you, and apply it. Never bite off more than you can chew, or you’ll burn out before you know it. Pick a steady pace, commit to it, and work it into your daily activities. Before you know it, drawing your comic will a part of your normal routine. Peace.


Web/Graphic instructor & designer, illustrator & recovering fontaholic.

We would love to hear your comments