Laying out a story

  • On April 22, 2010 ·
  • By ·

2071 started out here on the home page as a text story. I decided at some point to work on it as a comic project. The story evolved considerably over a short time. The characters came pretty quickly, then the story, then a whole lot more as their world opened up. I started thinking of ways their society differed from ours – both in their future and in their history. I also started thinking about bits and pieces of things I’d always been fascinated with. I love early 20th century newspaper comics, scifi/adventure serials, anything archival. Something about peering into a piece of film from another age is like having a time machine. And when you watch speculative fiction where people from the past try to guess at the future, it adds a weird layer to that. Thumbnailing I decided to start with a prologue to set up the story and to introduce the main characters, both to the readers and to myself. In the past I rarely scripted any of my comics ahead of time. I might’ve outlined a few story arcs but dialogue and actual panels got worked out as they came to my drawing table. It just felt redundant to me since I was the one working on it on every stage. Since the Prologue had to function over-all I thumbnailed it on 24 Hour Comics Day.

Thumbnails for the Prologue to 2071

I’d learned before when animating a scene to lay it out and break things down into manageable tasks. Here I gave myself page layouts to work with every day so I didn’t go crazy having to come up with them. Instead I could focus on filling up the page with interesting art. I still changed a few designs on a couple of pages where some shots didn’t work, but it was a load off my mind to have it done beforehand. I found if I had to straighten something out in the story while I was working on the page art I would have trouble switching gears mentally. One problem I ran into with these thumbnails is they’re way too small. I did that intentionally to keep myself from detailing them and wasting time. (You can see the first page where I still tried to go over it with a mechanical pencil before I convinced myself it wasn’t worth it) However being able to read them later was a real issue. I’m sure in my work stride that day they made perfect sense. But the further away from that day I got the harder it became to make sense of my lines. Sub-chapter 1.1 is going to rely on a different thumbnailing system, I’m just not sure how it’s going to work yet.

Thumbnailing Ideas

When I set about telling a larger story than what I was used to doing, I looked to the flickr gallery of Bryan Lee O’Malley who does Scott Pilgrim. Over the years he’s shared scripts, thumbnails, pencils, inks, and various scraps from working on his books. Originally I was trying something like a looser version of thumbnailing as he did here. I agree a multi-value thumbnail like this would be a bit too involved for something nobody would ever see aside from a “behind the scenes” kind of thing. Thumbnails need to be clear enough to get the point across but they also have to be simple enough to not eat time away that would better be spent working on the actual pages. Something closer to this technique might work if I can keep myself from detailing too much. Maybe if I limit myself to working in pen or marker, which would keep me from doing too many passes. (I hear Cathy Guisewite only draws in pen)

Scripting

As I fleshed out the differences between the world of 2071 and our own I would dump them into a text file. There’s an assortment of different text editors that offer branched and threaded file structures. For bulk brain dumping I likedĀ Journler on my Mac (Which has since ceased development) while I’m also a fan of Keynote on the PC. (Which has also ceased development by the original creator. It’s since been picked up under the name Keynote NF) Eventually I wanted a system that made smaller chunks easier to manage. Lately I’ve been using JustNotes for it’s simple menu bar interface. I know folks like Merlin Mann are big fans of Notational Velocity, which is equally pretty awesome. I just like being able to click an icon, drop in an idea, and click out. I took classes on mass media in college so I’ve had some experience with scripts. My own are pretty slim as I don’t see much need for exhaustive descriptions or formatting for syntax sake. Here’s an example of a script for Sub-chapter 1.0

Page 3 Panel 1 Rocket rollerskating waitress approaches the Blitz

WAITRESS: What can I get ya, hon?

MAX: I’ll have one jumbo cajun crawfish burger, seasoned steak fries, and the large chocolate supernova milkshake.

Panel 2

WAITRESS: Coming right up. And for you, sugar?

VIRGIL: I’ll have the Nigirizushi #3 and a small iced tea, please.

WAITRESS: Sure thing, darlin’.

Panel 3 Max watches the waitress rocket away as Virgil continues typing

Panel 4

MAX: Our last meal on the planet and you order Nigirizushi #3!

VIRGIL: I like Nigirizushi #3.

MAX: That’s beside the point!

Panel 5

MAX: We should be going all out! You should’ve ordered a steak or something BIG! There’s no Buckaroo Bayou Ted’s out in space, you know!

VIRGIL: Not true. They just opened one up on Lunar Colony.

Panel 6

WAITRESS: He’s right – been open ’bout 2 weeks now.

MAX: No foolin’? Lunar Colony, eh? *sips his drink*

The final version came out a bit different due to space restrictions but is pretty faithful to the script. I also like to write at least a week’s worth at a time. I like to do the same with pencils and inks as well, though coloring and rendering needs to be done on a page by page basis because steps get missed if I try to work on more than one at a time. Plus it’s a mental block to have a bunch of half-finished pages waiting to be colored/shaded/lettered. Penciling and inking a batch at a time is it’s own process. Working out all the layers per page is another.

Drawing Backgrounds

  • On April 16, 2010 ·
  • By ·

The bane of many a cartoonist’s existence is drawing backgrounds. Some don’t draw them at all. They can add hours to working on a page and usually take about 2 seconds for the reader to glance at before moving on. So why include them? Because when they’re done right it’s the difference between having a comic in a featureless void and building it a world. It’s the stuff that makes a reader’s eye go back over the panels once they’ve already read it just to admire the details. So how do you handle backgrounds? Here’s some of my thoughts on the process.

Research

This is an important step many people gloss over. Consider what sort of world your characters live in. Does your comic take place indoors or out? If they live in a specific city during a specific point in time then you can narrow down your search. Of course then you invite people who know that area to pick apart any inaccuracies they find. Even if you decide to make your world it’s own unique place, I still recommend doing research to find places that look similar to your location. It’ll give you ideas for the final layout of your setting and it’s good to have something to go back to.

Google Image Search

This is my weapon of choice when it comes to finding reference. It’s not perfect since it feeds on what’s out there based on the parameters of your search, but it’s a very useful tool. I like to search for certain styles of buildings, certain locations, then use a number of images to put together a scene. Like the sky scrapers of one city and the concert halls of another? You can combine them to form the city in your mind.

Freehand sketch of some buildings

You might recognize this scene as I cropped it and used it in the first page of the prologue to 2071. I found some buildings I liked and started drawing them. Notice the entire image didn’t make it into the final panel. I narrowed down the things that worked about the sketch and focused on them. Architecture isn’t my strongest skill or my deepest love, but I tried to keep my attention on things I liked. The more you can connect the ideas in your head with objects in the real world, the more your readers will feel like they’re part of the story.

Floor Plans

A real challenge of drawing the same space over and over again is consistency. It’s easy to throw a room together once for the purpose of a panel. It’s entirely something else to draw it again from multiple angles. Doing simple floor plans can help when staging a scene and figuring shots out. How much of the furniture is hidden behind other furniture? How does the lighting change depending on what’s in the room?

Quick floor plan of Max & Virgil’s workshop and Commander Kane’s study

Floor plans are simple diagrams which lay out where everything is in the room. Windows, doors, furniture, what have you. I sketched these a few pages into the prologue when I realized I had no real idea where everything was. When I have the time I’d like to try doing them inĀ Google Sketchup to make visualizing different angles easier.

Background Studies

Sketching is something I encourage everybody to do as often as possible. I know when you’re on a production schedule you lose the time to let your mind and pencil wander. I like to look through reference images and doodle designs for props and settings.

Studies for the interior of the Poplicola

It’s usually a good idea to drop some people in your studies to keep scale in mind. The drawing on the left was influenced by some photos of art deco factories with wide open ceilings and arched railings along the walkways. The other drawing, a closeup of one of the passage ways, is a nod to classic scifi corridors.

Simple Techniques

I spent some time working in black and white trying to shore up my drawing skills and my use of light and shadow. Even if your backgrounds don’t contain much detail you can still use them to move the comic along. One technique I stumbled upon was spotlighting. I’d fill the entire background of a panel with black and then white out a circle behind whoever was speaking. Sometimes I’d get more elaborate and cut out lines to hint at walls or use two spotlights if both characters were talking in one panel. I use it a bit more subtly now in my shading. It’s a narrational device for focusing attention on the important object in the frame and occasionally conflicts with the light source in the image so it can cause problems if you’re trying to work in a more realistic style. If you’re going for simplicity, however, it’s a useful technique.

Example of spotlighting in conjunction with a simple background

In this example I was really attempting to limit my palette to something manageable. There’s only a handful of grays actually used here and their opacity is lowered so the characters stand out. I was going for an aesthetic similar to Seth’s work on the Complete Peanuts. There was a lot of copy and paste going on here and the layering sort of got out of control eventually with different objects taking up different layers of different blending modes. Of course I was also doing like 3-5 comics in one file at a time and that’s a lot to keep track of even for a style this simple.

10+ Tips to speed up/improve your digital art production

1. Start with print resolution files first

Yes I know web res is smaller and easier to work with. But if you want to use something again for print you’ll thank yourself later if you have a print-ready version. Having to recreate art you’ve done before eats time and sometimes you can’t remember what you did to make the magic happen that first time.

2. Work larger than the final piece

This is an old artists’ trick for tightening up your work. When art is shrunk down for reproduction it looks slicker. Also drawing things at actual size is a pain because smaller details can require a smaller brush that’s difficult to work with. If you’re working traditionally before scanning in there’s only so small you can draw.

3. Don’t over-saturate your color choices

The first time you select colors you may be a bit unsure of the palette. Don’t use the most saturated colors because those won’t translate well into print later if you have to convert to CMYK from RGB and they can look really amateurish. One way to avoid this in Photoshop is to make a saturation layer, fill it with black, and adjust the transparency.

4. Use layers

Photoshop and most image manipulation programs today offer layers. This lets you focus on detailing one element without changing another. So you can color a file on a lower layer without running over the inks on an upper layer.

4.1 Use different layer types

When you render something play around with the type of layer and it’s opacity to give a more subtle effect.

4.2. Use layer styles

Creating effects like a uniform glow or stroke around an object can be tedious. Use layer styles to do this for you. They can recreate the same effect again and again and be easily changed/archived for later use.

4.3 Use layer groups

If you’re using a lot of layers after awhile even labeling them doesn’t help much in keeping organized. Use layer groups, folders of common layers, to organize your art structure

5. Flatten before you resize

If you’re using layer styles or text it’s really a good idea to flatten files before resizing them. That way dynamic effects won’t change with the different versions you save. It’ll also take less time than resizing multiple layers at once.

6. Use actions for repetitive tasks

Actions are little recorded tasks you play back on a file. They can be as simple as flattening an image or adding a watermark to automating a majority of your workflow with batch files. Just be careful because actions don’t think. It’s always a good idea to save your starting point in one place and the result of an action in another.

7. Make and use template files

If you know you’re going to need a lot of something, make a template. This can hold preset layer styles, fonts, guides for ruling things out, and anything else to make your life easier.

8. Use keyboard shortcuts

In Photoshop you switch between tools with certain keys. The ones I use most often are “B” for the brush/pencil, “E” for the eraser, ( with “[” and “]” resizing either one up or down) “G” for the paint bucket/gradient fill, “I” for the eyedropper, and “W” for the magic wand. When using the lasso or marquee tool you can hold down Shift to add to a selection or Alt/Option to remove from it. There’s plenty of other shortcuts that can easily be found online.

9. Use photos for reference and creating palettes

If there’s an image with a specific color scheme you like, use the eyedropper to pull colors from it. One trick in Photoshop is to run the Stained Glass filter to make blocks of the most prominent colors. I’ll bookmark images I find online all the time. I keep them organized in folders and use XMarks to synch them across my browsers and over the web.

10. Use the proper filetype for the kind of art you’re doing

Making something with a lot of blurs in it? That’s a .jpeg. Using limited colors in flat fills on black line art? That’s a .png or .gif. (.png gives you more colors – both will give you a transparency layer using an alpha channel – .gif is popular for animations though .png has some abilities there as well) Saving print-quality black and white line work? Then .tiff is your friend. It’ll even handle layers.

Webcomic Archive Scripts

If you’re running a webcomic you’ll need some sort of script or system to manage displaying and archiving your comics. (Some people do it all by hand but that can become a problem when you want to make site changes and suddenly you have to edit a bunch of HTML files.) I’ve contributed this list to various forums and sites over the years. It’s always changing as some scripts get antiquated and disappear or new ones get developed. It’s a handy list to have if you’re setting out to build a site and it’s one to keep an eye on if there’s some feature your current system doesn’t have and a new one starts offering it. I’ll try to keep it updated but lets remember that this list is by no means perfect or complete. I’ve broken it down into several types of archive systems available and my thoughts/opinions/experiences with each.

Hosting Solutions

These are sites that will host your comic for you and handle maintaining your archive. There are free and pay versions depending on the service you use and how much control you want over the design/advertising on your site. There’s the benefit of belonging to a community but there’s also the concern of getting lost in a sea of similar sites.

Comic Genesis – Formerly known as Keenspace, one of the longest running free hosts available. You edit template HTML pages with specific tags and FTP your files to their server. Fairly large forum community of fellow creators. I used them a long time ago until I deleted some file and broke my site.

Drunk Duck – Similar to Comic Genesis with a community of fellow creators. Major difference is everything is browser-based which makes it easier to start/edit multiple projects though this probably limits design flexibility.

Webcomics Nation – Built by Joey Manley, the fellow behind Modern Tales and it’s family of sites. Also mostly browser-based in design.

PanelFlow

Comic Dish

Smack Jeeves

Stand-Alone Scripts

These are scripts you can upload to your site to dynamically cycle through your comics. Some have interfaces to manage certain things depending on the system.

Walrus – One of the first archive scripts I ever used and learned to edit with. If you’re looking for something simple to build from, especially if you’d like to pick up some rudimentary PHP skills, give this one a shot.

ATP Autosite – I used this one for awhile after I got comfortable with Walrus. It can handle dropdown menus and since Walrus only supported one image filetype at a time it was a nice upgrade. Don’t think it’s under development anymore though some sites still use it.

Web Comic

iStrip

XComic

Comikaze

ComicCMS

SomeryC

Netsaha

Comic Update Script for PHP (CUSP)

Autokeen Lite – Free archive script from Keenspot. It’s CGI, which is good for hosts that don’t offer PHP. I tried it a long time ago but there was a loop that caused trouble on a Windows server or something.

Comic Gallery

Schlabo’s Comic of the Week (COW) – Sort of built around a Pic of the Day system but I never got it to work too well when I was using stand-alone scripts.

Integrated Systems

These are updating systems that are part of something bigger. They’re basically themes/plugins for existing blogging software to give them comic managing abilities.

Comicpress and Comicpress Manager – As far as I know this was the first real plug and play system for using WordPress to power a comic site. (Which makes an incredibly robust system for handling blog posts/searching and managing an archive) There were sites which offered guides/hacks for doing it before but Comicpress was the first prebuilt theme for doing it. Comicpress Manager is a handy plugin for getting the most out of the Comicpress theme. I used this system early on but over time it became harder to edit as design elements got spread over various files. You can find various tutorials online and even videos.

Webcomic & Inkblot – Similar to Comicpress and Comicpress Manager except here the plugin (Webcomic) handles the archive management while the theme (Inkblot) deals with how it displays. It also supports converting existing WordPress themes to work with it. This is the current system I use because of it’s flexibility in editing and ease of use. Also has a series of tutorial videos.

stripShow – Another WordPress webcomics solution that started around the same time Comicpress did.

WPComic – WordPress theme for webcomics

Manga+Press – Yet another webcomics solution for WordPress