Want to make a comic, but can't seem to find the time? Here's a portable method that can be squeezed into spare moments -- anywhere you can bring a laptop or a sketchbook. It's the method that I use to draw Electric Puppet Theatre -- penciling in restaurants, laundromats, and grocery stores; inking and coloring on the bus to and from work. Maybe it will work for you.
The first steps (thumbnails and layouts) take place in my sketchbook. If you're interested in the software part of the process (scanning, lettering, inking, coloring, and publishing) you may want to skip ahead to the laptop portion. For additional tips and workflows, check out the references that I've drawn on.
(N.B.: Section headings are linkable in case you'd like to bookmark your place and come back later).
All of the initial work is done in small, easily portable sketchbooks. The main constraint on the sketchbooks is that the drawable area be as close as possible to the aspect ratio of the final page (EPT uses the "standard" comic book ratio of 2:3). My current sketchbooks are a Canson 5.5x8.5" 65lb "Universal Sketch" (pictured below) and a Pentalic 5.5x8" 70lb "Sketch Book"; both have perforated pages which makes it easy to tear out the art for scanning. Since I've switched to scanning by camera, I leave the original art in the sketchbooks to make it harder to lose. All sketching is done with #2 pencils and Tombo Mono erasers.
I work top down, from the general to the specific, first choosing the story; then its break down into pages, layouts and panels within each page; and, finally, rendered drawings.
The first step, the factoring of a story into pages and panels, is usually some combination of scripting (e.g., a written "screenplay" for the comic) and thumbnailing (e.g., very zoomed out sketches of the visual flow of the comic). The balance between scripting and thumbnailing often seems to complement a writer's strengths -- I find dialog much easier to keep in my head than images, so I script EPT almost entirely in thumbnails; this forces me to think about the comic visually from an early stage and makes it easier to remember visual decisions.
For the purpose of thumbnailing, the "standard" comic book format of 24 2:3 pages has a very convenient property: arranging the pages in a 6x4 grid gives a perfect square. This suggests an easy method for constructing a thumbnail template with the right proportions:
A good exercise for thinking about layout and pacing is to thumbnail an existing comic that you admire. As a warm-up for writing the first chapter of EPT, I thumbnailed chapter 1 of Neil Gaiman's A Game of You (The Sandman, volume 5), marking each character with a different letter.
I am ready to start thumbnailing when I know how a chapter will advance the plot. For example, in chapter 1 the puppets meet and form a band; in chapter 2, Vlad the vampire sneaks into the lab building and steals Sara's laptop. In the midst of all of this, there will be room for characterization and foreshadowing, but the plot point gives the skeleton on which these other details can be hung.
Given the plot point, I know where the chapter begins and ends, so I can choose a pair of images for the first and last page (which are adjacent in the thumbnails). I try to choose a pair of images that are visually and/or thematically complementary -- chapter 1 starts with Janice alone and ends with her new group of friends; chapter 4 starts with two raccoons looking in on Sara and ends with Sara and Pria looking in on Vlad.
Next, I make a guess at what the 12/13 spread will be and where each scene might start (using 8/9 and 16/17 as initial guesses). Given these anchors, I start filling in page layouts from page two, jumping around the chapter as different scenes occur to me. If you picture the scenes as a series of connected springs, the goal is to string them across the chapter with even tension. If a spring is stretched too thin (a scene covering many pages with not many panels per page), try adding an additional piece of business (drawing on little events from your own life is a useful trick). Where a spring is compressed, try allocating a few pages from an adjacent scene or saving some elements for a later chapter (this is a good way to avoid overly long expository dumps and keep the story moving).
Once I have a sense for what will happen on each page, I am ready to start penciling. I start by drawing four comic pages in each notebook page (i.e., about 3x4.5 inch layouts) and draw full-page second drafts for difficult pages. Starting small serves several purposes: it makes me focus on the important visual elements of each page (rather than getting lost in the details), it gives me a sense for the complementary layout of facing pages, and it is a good match for the information content that can be shown on the web (Scott McCloud's rule of thumb is that a computer can display about half the visual information of a printed page). Surprisingly, working up to a difficult drawing through a series of smaller to larger sketches is much more efficient than starting immediately on a full sized rendering.
Will Eisner was a strong proponent of lettering a page in the early stages of layout. This plays to comics' potential for cooperativity between images and words and emphasizes the importance of lettering in the visual flow of the page -- the reader will attempt to read the words sequentially, so they should be placed along the path that you want the reader's eye to follow; the time spent on the text and intervening images should form a balanced rhythm. For this reason, I add lettering to the pencils as part of blocking in the page. If I can't cram in a particular bit of text with my smallest handwriting, it's a good clue that a few words need to go.
Pencil and paper is a remarkably versatile medium for trying out visual ideas quickly. For this reason, I try to make my pencils "tight" in the sense of resolving all important artistic decisions. The computer is a very powerful tool for rendering a clean final image, but it is much easier to concentrate on the naunces of rendering if the details of what is to be drawn have already been dealt with on paper.
EPT is finished on a Dell Latitude D630 with a core2duo processor (T7300 @ 2.00GHz), 2 GB RAM, and an integrated Intel graphics chip (translation: a cheap, middle-of-the road 5lb laptop -- you should be able match it for about $600-$800 circa 2012). On the rare occasions that I draw at my desk, I connect a second monitor to get simultaneous detail and full-page views. For the more common case of working on the laptop alone, I use virtual desktops to get the same effect.
An advantage to working on Ubuntu is that all of the tools for drawing EPT can be downloaded in one fell swoop via the APT package manager:
apt-get install inkscape gimp comix gpick kcoloredit \ make pdftk ghostscript imagemagick git-core
A common workflow is to use a flatbed scanner for digitizing penciled or inked artwork. Although this has the advantage of capturing linework with uniform intensity across the page, it has the disadvantage of being slow and requiring a relatively large and expensive piece of hardware. If you can tolerate some distortion and non-uniformity in the aquired image (e.g., because you will be doing all of the rendering on the computer), then a digital camera is a cheap and fast alternative to a scanner. I chose a Nikon Coolpix S3000 for its compatability with gphoto2's remote-capture feature, but any digital camera or camera phone should work.
Here's how I "scan" pages with the Nikon:
Having acquired the sketches, the next step is to crop each page and enhance the contrast for easy inking. For this I use The Gimp, the Swiss army knife of bitmap editors.
For each photo:
The next step is to import the scanned page into Inkscape for rendering:
Finally, I add the page to my git version-control repository so that I can easily back-up and track my changes:
git add 001/Page-01.svg && git commit -m 'Adding chapter 1, page 1'
git commit -am 'Started inking page 1'
Video links: Download
I ink Electric Puppet Theatre using Bezier curves -- smooth parametric paths originally invented to describe the space-age curves of 60's-era cars. For this part of the workflow, I need to move rapidly between the brush layer and various inking layers without mixing them up. It's also useful at this stage to work at multiple levels of zoom. A good way to deal with both of these problems, particularly on a laptop with a single 14" screen, is to use virtual desktops:
I split my workspace across six virtual desktops using the system settings in KDE4. Most X11 environments (e.g., Gnome, Xfce, etc.) have a similar feature, and you can get a similar effect using "spaces" on OS X or a third-party tool on Windows. I bind ctrl-alt-arrowkeys for easy desktop switching and set window behavior to "focus follows mouse" for quick switching between windows. In Inkscape, create a second window with View → Duplicate Window.
Bezier curves are defined by a series of nodes (points that the curve passes through) and handles (points that cause the curve to deviate from a straight line). You can think of a node and its handle as an arrow specifying the direction of the curve as it exits the node. The longer the arrow, the longer the curve will follow that direction before turning to match the direction specified by the next node and handle. A pair of adjacent nodes with small arrows will be joined by a gentle, slowly changing curve, while a pair with large arrows will be joined by a sharp zig-zag. In general, for an open curve, you will want one more node than the curve has inflection points. Adding additional nodes will give you more control at the expense of giving the curve a flattened appearance.
Normally, the path described by a Bezier curve is rendered at a fixed width, making it look as if it were inked with a Micron or Rapidograph. We can get a more brush-like effect by using Inkscape's "Pattern along Path" effect to stretch a closed curve (the "brush") along the path. You can use the brushes from my template SVG (they're in the "brushes" layer, to the right of the page) or you can define your own by drawing closed curves with the pen tool.
Here's how to draw brush-like curves:
Video links: Download
As a final step, you may choose to color, tone, or add spot blacks to the page (alternatively, you can use techniques like cross hatching or feathering as part of your inking step). There are a few ways to lay in these "flats", depending on your linework:
Whichever technique you use, remember to work front to back -- this makes it easy to place each new fill with "end" and avoids putting work into background details that will wind up hidden.
To edit colors, use the Fill → HSL tab in the Fill and Stroke dialog (ctrl-shift-f). You can also paste rgb hex codes directly into the RGBA box, which is a good way to copy colors from palette editors such as gpick or kcoloredit. You can also use these editors to create a custom palette with named colors -- just save the palette in gimp/inkscape GPL format and copy the file to your Inkscape configuration folder (e.g., the EPT palette lives in ~/.config/inkscape/palettes/ept.gpl)
If you want to put your comics on the web, you'll need to find a server for them to live on. Here are some options:
For the second two options, you'll also want to register a domain name and point it at your host. I like Gandi ($15/year), but there are many cheaper options.
Finally, you'll want to render your comics in a web-friendly format. While several web browsers (e.g., Firefox and Chrome) can handle Inkscape's native SVG format, feature support is uneven; for the moment, you'll get more consistent results by serving PNG bitmaps at a reasonable resolution. Vertically oriented "full page" web comics tend to be 500 to 1000 pixels across, while horizontal "strips" are a bit wider; you should choose a resolution high enough to make your lettering legible, but low enough to preserve the visual flow of the page. I render at 600x900 for EPT's single page mode which is then scaled to screen height for double page mode (note that this scaling is unreliable on iPads, which have an interesting interpretation of screen height, and older web browsers, which have poor resampling algorithms).
You can generate your PNGs from inside Inkscape via File → Export Bitmap... (ctrl-shift-e), or from the command line like so:
inkscape Page-01.svg --export-png=Page-01.png -w600 -h900 -C -bffffff -y1.0
If you want people to be able to read your comic off-line, you'll need a file format that supports multiple pages (unless you decide to pack everything into one big image). There are lots of choices, of which PDF and CBZ are the most portable.
A CBZ file is simply a ZIP archive of your page PNGs. On the one hand, CBZs are easy to generate and look exactly the same on every platform; on the other hand, they are limited to a fixed resolution and are somewhat obscure.
To generate a CBZ, simply zip up your pages with the proper file extension:
zip Comic.cbz Page-*.png
Unlike CBZ, the PDF format is ubiquitous. As a vector format, PDF has the advantage that it can pack your art into a smaller file size with higher (effectively, infinite) resolution. The disadvantage is that vector PDFs will render differently on different devices, and certain SVG effects (e.g. filters and transparency) are difficult to represent in PDF.
You can generate a single-page pdf like this:
inkscape --export-pdf Page-01.svg Page-01.pdf
To concatenate multiple pages into a single document, use a utility like pdftk:
pdftk Page-*.pdf cat output Comic.pdf
The steps above tend to generate very large PDF files. This can be remedied with a final clean-up step via ghostscript's pstopdf utility:
pstopdf Comic.pdf BetterComic.pdf
Here is a sample python script for automating the process.
If you'd like to sell physical copies of your comic but don't want to pay for printing up front or clutter your home with boxes of unsold comics, you may want to consider print-on-demand (POD). The Webcomics Alliance has a good comparison of the "big three" services. I chose Ka-Blam for their simple TIFF submission format. Because Ka-Blam submissions are raster images (rather than PDF), the rendering process is very similar to rendering for the web, just at a higher resolution (300 dpi) and with some post-processing in ImageMagick to handle page borders and TIFF formatting.
Here's how to render a typical white-bordered page for Ka-Blam:
inkscape Page-02.svg --export-png=Page-02.png -w1900 -h2850 -C -bffffff -y1.0 convert -size 2100x3150 xc:white -fill white -page +100+150 Page-02.png -flatten \ -compress lzw Page-02.tif
And here's the equivalent step for a "full bleed"
inkscape Page-01.svg --export-png=Page-01.png -w2100 -h3150 -C -bffffff -y1.0 convert Page-01.png -flatten -compress lzw Page-01.tif
ImageMagick is also useful for checking your rendered pages against the "trim" region in Ka-Blam's page template:
composite -blend 50 Page-01.tif 2010_comic_template.png Proof-01.png
You can see how my test print turned out here.
Wow, you made it this far? Congratulations for reading the whole article. If you have any questions or comments, please send them to markv [at] eptcomic.com. Now grab a pencil and get comicking!
(Or, if you'd like to procrastinate, see below for some excellent tools and tutorials...)
(See also this list of fonts used to letter EPT)
Videos were captured and post-processed with FFmpeg.
Capturing a 1280x720 screencast from a 1366x768 X11 display at 24 fps:
ffmpeg -f x11grab -s 1280x720 -r 24 -sameq -i :0.0+0,48 screencast.mpg
Trimming to the segment from 2.75 seconds to 110.29 seconds and transcoding to webm (takes about 4 minutes per minute of video):
ffmpeg -i screencast.mpg -ss 2.75 -t 107.54 -sameq -vcodec libvpx screencast.webm