Basic Instructions: Behind the Scenes

Wow, I can’t believe it’s been over three years since I drew a guest comic for Basic Instructions. My first was the aptly titled “How to Have a Guest Artist Draw Your Comic Strip.” Now I have an additional strip under my belt (which you should go read first, if you haven’t already), and since I had to re-learn how to draw and assemble a strip in the Scott Meyer way, I figured I’d give a little behind-the-scenes peek at how Basic Instructions gets made.

First off, there’s the idea. I try not to say the following words to Scott often: “You should do a strip about how to ______!” Believe me, he hears that all the time from everyone. But our conversations sometimes lead to an idea popping out. If he doesn’t already make a note of it on his own (and most of the time he does), I might say something like, “Huh, there might be something in that.” For this strip, we were indeed coming up with drinking game rules at the grocery store, and I thought not only that there was potential, but that I could help Scott with his workload by doing a guest strip.

The idea percolated for a while, until one day when I was trying to take a nap. Which wasn’t working, because of the cat giving himself a bath while pressed against my leg, and the other cat giving herself a bath while pressed against my head. But while I was lying there, I came up with my four punchlines.

I got up, wrote them down, and figured out rough narration for those four panels. Scott doesn’t always write the same way — sometimes he comes up with the “how to” concept first, sometimes he comes up with a couple of punchlines and figures out what kind of “how to” framework they’ll fit in. And some rare times, an almost-complete strip will pop out from his head like some kind of comedic Athena.

I worried about a strip about drinking games, and considered some sort of “please drink responsibly” fine print at the bottom. Finally, I decided to start the narration in the very first panel with “alcoholic or not,” and I went with coffee cups and soft drinks for two of the art panels. Hopefully that will satisfy everyone but the most sticklerific out there.

With the writing done, it was time for the art. The software involved is Adobe Illustrator and Adobe Photoshop. I’m sure you could use other drawing programs, but these are the ones that are (a) in my house, and (b) I know how to use. As for the hardware, we both swear by Wacom tablets:

BI-1

I use the small Wacom Bamboo tablet. Scott has another model. I’ve used a tablet instead of a mouse for 10 years or so, and love it. I used to have a larger off-brand tablet, but when that one conked out, I got a smaller but higher quality model. Diet Coke is also an essential piece of hardware. Or would that be wetware? Anyhoo.

Photography comes next. In my first guest strip I called Scott’s drawing process “photocartooning.” Its more technical term is “rotoscoping,” and it mainly consists of drawing over the top of a photograph. Shots are taken in the appropriate poses and costumes (Yes, costumes — what would Scott be without a black t-shirt and chinos? Or Mullet Boss without his suit jacket and unbuttoned shirt?) and put on the computer.

Tracing over the pictures isn’t as easy as you’d think. I think the hardest part, and the part that Scott really rocks at, is figuring out what parts to trace, and what to leave behind. You can’t trace every single line on someone’s face, for example — it’d look like a line-filled, wrinkly mess. Likewise, you don’t want to capture every wrinkle of clothing, and you don’t want to define every single tooth. It just looks creepy. Plus, these drawings are going to shrink down to a tiny size, so you’d lose a lot of the fine details anyway. Pick the bold stuff and ignore the rest.

BI-2

Here’s a sample of one of my tracings, and you can see some of the subtle changes and things left out. I made sure to remove my double-chin, which makes an appearance every single time I make a hammy face. What can I say, I’m blessed with chins. I also didn’t draw any of the lines around my chin or mouth; those details would be lost upon shrinkage. I did have fun with my hair, however. (I’m also fascinated by how the curve of my face follows the curve of my guitar on the wall. Also, please enjoy our messy desk and bookshelves. And I moved my wedding ring to the proper finger, since it’s too big and I’m too lazy to have it resized.)

The tracing is done in Photoshop, saved as a JPG file, and then placed in Illustrator. Why, you may ask? Well, the Photoshop paintbrush is easier to draw with (Illustrator’s pen and brush can both be a little weird) but Illustrator is needed to turn the drawing into a vector format. A process called Live Trace is run on the JPG, and Illustrator finds all of the lines and turns them into points on curves. That way, you can resize the art as small or large as you want, and as long as the software knows how the points and curves relate to each other, it’ll always look the same. Illustrator’s fill-in paint bucket is really nice, as well.

BI-3

Here’s our image, first in the Photoshop drawing, then in the colored Illustrator vector drawing. You can see some subtle differences in the smoothness of the lines. The Live Trace process is very forgiving for shaky hands and small errors — for the most part, it smooths them out in a stylish way.

Once all the drawings are traced and colored, it’s time to assemble the strip. I had to draw eight figures and some furniture all from scratch for my strip, which made my poor hand tired. Scott has a huge stockpile of drawings of his characters, and almost always has a drawing he can use again for most common poses (thus the title of book 2: Made with 90% Recycled Art). I did not, however, build my own framework. I used Scott’s, because I wasn’t about to measure everything and start from scratch when he had a perfectly usable template ready for the borrowing.

Although the template appears simple, it’s a 15-layer Illustrator document. Each panel’s art gets its own layer, as well as layers for the outer frame, the shaded background, narration, dialog, word balloons, and more.

The first part of assembly is a mad festival of copying, pasting, resizing, typing, and nudging things around until they fit right. A little scootch here and there really makes a difference.

BI-4

Here you can see my strip before I’ve clipped the unused parts of the artwork away, and before I’ve put balloons around the words. It took a lot of nudging and wiggling to get everything to fit. I worry that I might be even wordier than Scott, which is saying something. You can see that I didn’t draw Scott’s feet, because I didn’t think I’d use them. I actually wish I’d been more complete with a couple of the drawings, because I had to really finesse them to get them to fit right. Like Scott’s shopping cart (and he is, indeed, the one who pushes the cart), which is as high as it can go without showing that the side comes to an abrupt end.

BI-5

The superfluous art is hidden away with a clipping mask, and word balloons are placed around the text. For voices coming from out-of-frame, I wanted a different look than just the rounded rectangles. Scott’s template had a soft, rounded thought-balloon brush, but nothing as jagged as I wanted. So I had to make a pattern, then make a brush out of it. You can see my original jagged line on the side, and how it repeats its way around the dialog. The directional tail of the balloon is made with a > shape, made with the pen tool and lined up with the jagged balloon edges. The curved tails from the regular dialog are also made with the pen, then the pen shape and the rounded rectangle balloon are merged into one shape. (I also had to learn how to adjust the corners of my rounded rectangles. I learned a ton about Illustrator in general.)

A few more nudges and adjustments, and the strip was ready to send to Scott. I sent it to him as an Illustrator file, and he rendered it as a 600×600 GIF for the Basic Instructions site. For his strips, there are a couple of additonal steps — there’s a larger vector-based copy that gets sent to newspapers, so it’ll print clearly at any size. He also has to keep everything scheduled tightly, due to newspapers and the Cracked.com site running strips certain lengths of time before they show up on the BI site.

So there it is, how a Basic Instructions gets made!

Bookmark the permalink.

34 Comments

  1. thats really interesting, i knew you used vector drawings, but had no idea you traced photos. it is an unbelievably hard thing to do, i have tried myself many times.
    for your second guest strip – it was great. i love both your work. now to read your first guest strip…

    [Reply]

  2. Missy, in real life you look alarmingly like a younger version of my sister!

    [Reply]

  3. Hey… For some reason strange things are hapenning with your site layout. The borders of the text are overlapping. I didn’t do this the other day. I don’t know if it’s on my end or if you’ve made a change… Just thought you might want to look at it. Thanks! Reginia Munro

    [Reply]

    missy Reply:

    I did change WordPress themes recently, but it looks fine on IE, Firefox, and Chrome.

    [Reply]

  4. so are there actual costumes of Scott’s super villains? You’ve got to share those photos!

    [Reply]

    missy Reply:

    Most of the really exotically-clothed characters (Omnipresent Man! Rocket Hat! Emperor of the Moon Men!) have costumes hand-drawn over the top of normal pictures. Though he does have a dress jacket for Mullet Boss and a silky smoking jacket. And a collection of Mexican wrestling masks, but I don’t think those have made it into a strip yet.

    [Reply]

  5. Who models Mullet Boss?

    [Reply]

    missy Reply:

    Scott is Mullet Boss. He wears the jacket and unbuttoned shirt, then draws himself the mullet, moustache, and a big jutting dimpled chin.

    [Reply]

  6. Wow, those tips about tracing photos are sure to come in handy for me. I didn’t even know for sure that’s how BI comics were made.

    [Reply]

  7. this was really cool, thanks so much for sharing.

    your strip was great.

    BTW- I LOVE the banner pic!

    [Reply]

  8. Missy, I only truly discovered the BI strip a few months ago. It’s already my [i]numero uno[/i]. I would like to hereby award you and Scott each one hundred internets. I can see there’s lots of blood, sweat and tears that go into each strip, and for every funny line that makes it into “print”, theres dozens more punchline corpses littering the … oh, hell. I don’t know where this metaphor is going. Anyhow, keep it up! I’ve loved both your strips, and look forward to more!

    [Reply]

  9. This makes my head hurt. In a totally rad way.

    [Reply]

  10. Fascinating. I’d always wondered how these strips were done. Thanks for the insight.

    [Reply]

  11. Cool! I’ve traced over photographs before, but didn’t know it was called “rotoscaping.” Now if someone comments, I can say all casual like, “Oh, I rotoscaped that.” That sounds so much more impressive than saying, “I traced it.”

    [Reply]

    sMac Reply:

    I’d try calling it rotoscOping though. Nothing worse than being all supercilious and actually pronouncing/spelling the word wrong 😀

    [Reply]

    SChambers Reply:

    Thanks! I Googled it and found it spelled both ways, didn’t know which was right.

    [Reply]

  12. Next time just single-trace your lips, doing top and bottom makes you look like you’re wearing hooker makeup. And the large pupils make you look like you’re on acid. And while I’m certain Scott wouldn’t mind a hooker on acid, you shouldn’t draw that in the strip.

    [Reply]

  13. Even though you put the ring on the right finger, I believe it wound up on the wrong hand.

    Sorry if that comes across as a bit too nit-picky.

    [Reply]

    missy Reply:

    HA! You’re right, only because I had to flip the image to get me on the right side of the frame. Nice catch!

    [Reply]

  14. Really interesting post. Never realised just how much effort went into each strip.
    Discovered BI via Cracked, but it’s now one of my favorites and I even purchased the books!
    Keep up the good work.

    [Reply]

  15. I always imagined you being a redhead in the strips, for some reason.

    [Reply]

    missy Reply:

    I’ve actually been a redhead for probably 75% of my adult life. But right now I’m letting the natural dark brown grow out. How else can I take an inventory of all the white hairs?

    [Reply]

  16. Did you line the shot up especially so that the curve of your cheek follows the curve of the guitar that is hangng behind you?

    [Reply]

    missy Reply:

    Nope — that happened out of plain ol’ luck.

    [Reply]

  17. Do you have any suggestions for how to handle noses in straight-on photos? Mine keeps coming out looking like a pig’s nose… here is my attempt: http://ink.imnotpete.com/2010/10/15/rotoscoping-attempt/

    [Reply]

    missy Reply:

    Yeah, head-on is tough. The only time I can think of that Scott’s done it is in How to Fake a Smile, and he looks creepy as hell in all of those frames.

    It’s probably easier if your head is tilted downward, so it’s not so nostrilicious. And then you can do the outline of the bottom of the nose; kind of like a } shape.

    Using a tablet helps immensely, in that you can get varying levels of sensitivity — finer lines for some features, heavy for others.

    [Reply]

    Sam Reply:

    Yeah, I see what you mean. Perhaps I’ll just call it a lost cause for now and stick to other angles. Thanks!

    [Reply]

  18. Pingback: How To convert Photo in To Cartoon Effect in Photoshop | Learn Web, Designing and Other Tutorials across the Web | PhotoshopDaily.info

  19. I tried loading this page with chrome, and it seems loads faster!

    [Reply]

  20. Is the need to turn the drawing into vector only so that it can be resized without losing resolution? Otherwise, could it stay as raster, in photoshop?

    [Reply]

    missy Reply:

    Exactly right — they’re vector so Scott can use them in close-up and in far-away without them getting all janky.

    [Reply]

  21. i thought you were peggy hill

    [Reply]

  22. Hey…I have a brilliant hypothesis…as? muscles involved in laughing and crying are almost the same…what we are witnessing here might be a terrified and defenseless baby scared to death by his cruel daddy!!…Someone call the police inmediately PLEASE. uuh…ah….my pills…has anybody seen my pills?…

    [Reply]

  23. Read your “Drinking Games” one for the first time… how did I not see that? I thought I re-read every single BI comic ever published! Anyway, I completely lost it at Panel Three (I caught Scott’s first punchline in my peripheral) after almost losing it at Panel 2, and then you had to finish me off with Panel 4. You’re pretty awesome there, Missy. I shall subscribe to your blog now. Anyway, back to the meat of this page… what I really came for. Tips on how to totally rip off BI! :rubs hands evilly:

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *