inkscape – pixelazy-ish

Web Comics: Notes on a Production Lifecycle

As of this writing, I’ve drawn (maybe not yet published, but definitely drawn) one hundred and fifty unique comic strips for This is Pi Day. The exact style and structure of those strips vary from single-panel dad-gags through a handful of strips that have been six panels long and built on a more complex parental musing.

Getting from concept to a live strip may seem simple when a new one pops up in your feed on a Saturday morning, but the actual effort behind that finished product are much more convoluted.

Inspiration

This is the idea phase. A good idea can come from focused effort, shutting out the world and wandering around through your memory… or as a blinding flash while out for a run. I can’t teach inspiration, but I can suggest that it’s a skill to keep your mind open to recognizing it… and then figuring out how to recall it later.

Time Required: Sometimes the whisper of a moment, sometimes hours of thinking
Tools Used: A solid pair of shoes, a pen and notepad, the voice recorder app on my phone, word processor, or whatever is handy for jotting down notes
End Result: A phrase, a bit of text, a title, a reminder of something said or done, or a bit of a gag or a “wasn’t it funny when…” trigger.

First Draft

That notion needs to become a comic strip, and my focus has always been story first. It’s waaaaaay harder to draw something then try and make that something be funny. Words first, art second. So I write out a rough draft of a script. They are usually cumbersome and wordy, but I tweak them all along the way from here. Rarely — RARELY — are first draft scripts ready for prime time.

Time Required: approximately 20 minutes of focus… any longer and I let it simmer
Tools Used: a quiet space and a word processor. coffee, obviously.
End Result: some words that usually resemble a noted script

Roughing

A friend and I were reflecting on “The Flintstones” cartoon the other day. “Wasn’t it funny how they used the same backgrounds over and over and over?” He asked. “I recycle loads of stuff in my comic.” I argued. I have a huge library of models, and I dig through that to see what I can re-use before I start drawing anything new.

Time Required: 15 minutes
Tools Used: Inkscape and a mouse
End Result: A screen full of duplicate art and props, heads, bodies, limbs, improperly sized objects, and often five or six copies of each model deconstructed to their component vector objects.

New Art

Previous step aside, I have a personal rule: I always put new art into every strip. It may be something big like a prop or a background… or it could just be a hand gesture.

Time Required: 10 minutes to hours, depending on what’s required
Tools Used: Inkscape and a drawing stylus.
End Result: A new bit of vector art, like a prop, a new character, a background, a piece of furniture… and then added to one of my multiple “collection” files where I store all the little pieces.

Compositing

The old and new come together to form some scenes in this step. It really begins to look like something besides Morpheus in the Matrix bootloader now… not much more, but this is where things start to truly come together.

Time Required: 15 minutes
Tools Used: Inkscape, a mouse, sometimes my stylus, but a mouse is best for dragging bits around and lining them up nicely.
End Result: Scenes, floating in a white void

Framing

Like the rest of my art, I keep a library of frames of different shapes and panel count. The script usually dictates the panel count, and I have some rules about what kinds of strips and post when. Four panel strips are my Saturday strips, three panel for black and white series or one off bonus comics, etc. This often is where the composited scenes are rescaled to fit into those frames. I also add backgrounds here… white or other colours and patterns.

Time Required: 15 minutes
Tools Used: Inkscape and a mouse
End Result: The first draft of a comic, but wordless and characters just staring at each other with their mouths agape.

Lettering

Words meet art. Check out my article on FONTS for how I designed and use my own font, but simply this is just copy-pasting the text from the word processor into a rough cut in the drawing software.

Time Required: 20-30 minutes
Tools Used: Inkscape and a mouse… and whatever version of the script is ready.
End Result: A second draft of the comic, with the words roughed in, plain and usually a bit cramped for the space.

Adjustments

This is a tweaking phase. I may choose to rescale the scene, do a final cut of the text by removing (or even adding) words to fix the flow or spacing, bold and rescale fonts, and speech lines or other emphasis marks, and essentially play with everything until I’m happy with the result. The time really varies here because sometimes I nail in the first go… sometime I go back to this stage multiple times until I’m happy with the product.

Time Required: 5 minutes to hours across multiple days.
Tools Used: Inkscape and a mouse.
End Result: Ideally, the final draft of the comic in it’s vector file format, named and archived safely (I’ll write a whole article on that part someday)

Export

I publish a medium quality PNG file, but I export it and archive it in super-high definition… essentially the resolution of a 20 megapixel photo. This is just a step in the go-live.

Time Required: About a minute.
Tools Used: Inkscape and a mouse. Dropbox for my archive.
End Result: A web-ready file, ready for upload.

Publishing

Here the effort is essentially getting the comic online, and that can be quick or slow, detailed or lazy. At the bare minimum I write a WordPress post in a standard format (Image, date, category, tags, title, and maybe some text) and an Instagram post when the WordPress post launches (comic, explanation, hashtags).

Time Required: 5 – 30 minutes, depending on how lazy I am about writing something in the post.
Tools Used: WordPress & Instagram
End Result: What you see online.

Promoting

If I could sum this up in a short paragraph, I’d be a millionaire artist. Getting yourself noticed, read, shared, enjoyed… that’s the holy grail of it all right?

Time Required: Forever.
Tools Used: Grit, determination, a hearty dose of swallowed pride, and whatever means I can get the word out.
End Result: One more fan, one more like, one more happy reader.

Creating Cartooning Frames as Vector Objects in Inkscape

Depending on your art style, one of the defining features of a cartoon panel is the frame. If you’ve read my comic, This is Pi Day, you will no doubt have noticed that I have a fairly strict frame style that contains my strips, no matter if they are one panel, three panel, four panel, six panel, or more.

That style is consistent largely because I’ve set myself some rules and built a small library of pre-drawn frame objects that I re-use. But the style of them is simple enough that I can (and sometimes do) create new or adapt old ones.

The style is also simple enough that following the basic construction of frame object in Inkscape, it could be adapted for many other artists.

So… imagine that you’ve drawn the art for a single-panel comic that you wanted to enclose in a frame.

In this style, your first step will be to draw two overlapping rectangles.

In my screenshot examples, I was not particular about making these uniform but at this stage you could very easily adapt:

shape and dimensions (rectangular, square, irregular, etc)
size and bleed (how much of your art is inside/overlapping with the frame)
color (I choose white)
stroke width (I use 6 pixels, but different styles could use thicker or thinner lines)
frame width (the offset difference in size/dimension between the two shapes you draw)

The key step in creating a frame object once the shape, colour, stroke, etc have been established (even though these things are infinitely changeable afterwards) is using the Path > Exclusion tool.

Selecting both rectangles (shapes) and applying the exclusion, you will effectively merge the two shapes into one, with the larger object becoming the outside edge, and the smaller object becoming an inside edge.

The two shapes are now a single shape, and can be manipulated as one.

More importantly, you’ve effectively created a box (you could even call it a kind of outlining “mask”) in the shape of your comic panel with a transparent centre that encloses your art.

I tend to make sure that this is a simple path object as well, by clicking the paths tool and then (with the new frame selected) using the Convert selected object to path button.

As a path, I can apply my own styles now. I usually add some curve to the inside edge using the path manipulation tools.

At this stage I am free to resize, export, or duplicate the panel.

Advanced Steps (other tips and tricks I use)

Try selecting the frame object and exporting it using the “Selection” option (pictured). You should result in an exported PNG file with just your comic panel. Make sure you use an appropriate image size (1200 pixels for web, 3000 pixels or larger for print).

Try creating a wider rectangle and placing three smaller squares (side-by-side with a bit of space between them) inside of the larger frame and using the Path > Exclusion tool. This should create a three panel strip object that you can use to build a three panel comic.

Try drawing a rectangle with a border that falls between the inside and outside edge of your frame object. Select it and send it to the bottom of your objects (Lower selection to bottom button). Keeping it selected, export that. You should result in an exported PNG file with just your comic panel but with the inside frame line only.

Using the Calligraphic Brush for Cartooning in Inkscape

Personal style is going to be the biggest factor in deciding what tools you use to draw your comic, and my personal style is no exception. As you set out to start a new comic, figuring out what that style is, and thus what tools you are going to use is extremely important because:

it needs to be a tool you can use effectively, efficiently, and consistently (because you’re going to be using it a lot)
it should be simple (because you don’t want something that requires more than a few steps) but versatile (because it’s easy to get trapped by a style that doesn’t give you enough room to express yourself)

I use the Calligraphic Brush as the core tool in my cartooning tool belt.

The Calligraphic Brush

Pros

is as close to a real pen/pencil as you can get in Inkscape
works with a pressure-sensitive stylus or a mouse
creates smooth, hand-drawn look

Cons

it is extremely touchy which, adds to artistic inconsistencies
uses lots of hardware memory
takes a lot of (almost too many) steps

Step 1

First, I use the Calligraphic Brush to rough out a shape.

My personal style is to use a fine brush tip… almost as fine as it can go. This makes it easy to stretch or adjust lines a little bit because at this point I’m not worried about like thickness or other small artifacts. Just like drawing on paper, I might draw many more pieces than I keep… but instead of erasing them, I just delete the lines I don’t like. This is as close to true sketching as I get drawing my comic.

Step 2

When I get to the rough shape I think I want, and I need to start fine-tuning and adjusting details, I use the Edit Paths by Node tool to select all my points. I can do this by single object (which is usually a better practice to getting cleaner results) or select everything in a new object (for efficiency or consistent results.)

Step 3

Next, I smooth and simplify (Path > Simplify) everything. Once. Twice. It’s more of an art than a science. This has two purposes:

First, I feel like it reduces some of the jittery, uneven look that I get from drawing using a mouse or a stylus via a screen. This is particularly noticeable on curves and straight lines… so mostly everything I guess.

Second, my drawings tend to get fairly complex with hundreds of small objects. Simplifying the hand-drawn pieces from the Calligraphic Brush can remove about 50% of the complexity of an object while (barely) affecting what it looks like. This uses a parallel amount of less memory in your computer and let’s you add more complexity down the line.

You should note, like I alluded to above, figuring out your steps is important early on. I’ve got a substantially more powerful computer since starting this comic strip, so that simplify step is much less important… but it’s now part of my style and process, so it will be for the long haul. Choose your tools well!

Step 4

Finally, I rough in a few more details while adding a black (#000000ff) stroke to all my hand-drawn lines. I’ve long-since memorized what all the pixel-widths are for the various magnifications and details are, particularly at this step, because getting your “inking weight” (which this is effectively) right and consistent is a big part of defining your style.

This is, of course, sets me up for the many more steps involved in colouring, framing, lettering and publishing. But that’s for another post.

What techniques define your style? What tool would crush your ability to draw your comic tomorrow as it looks today if it was removed? Is style even important to you? Or are you re-inventing yourself with every piece you make?

Switching Between Color & Greyscale in Inkscape

Making comics is making art, and art often (if not always) involves a number of aesthetic choices.

Comics, going back to the era of traditional print media, have frequently been printed in black & white or shades of grey. As an artist you may never consider taking beautifully coloured comics and posting them in greyscale… or, just perhaps, you’ll make a creative decision (as I have) to call back to traditional three-panel strips and use a desaturated palette.

In that case you may someday need an easy way to flip back and forth between colour and greyscale art, objects, and models and it’s not entirely obvious the best way to do this in Inkscape 0.91.

Getting Started

Let’s say, for sake of example, you have a bit of art that you’ve created in Inkscape (in color) that you want to turn into a black and white image for use in a non-color strip.

While there are plenty of ways you can do this (hand colouring objects, using extensions, exporting in color and desaturating in another piece of software) there is a simple way inside Inkscape that (a) is quick and consistent and (b) allows you to re-colourize your art at a later date.

Filters > Color > Greyscale

Of course, you’re going to want to select the object(s) that you want to convert to greyscale before reaching into the filter menu. In this case, using a filter is powerful choice because as you’ll see in a later step, you’re not actually changing or removing the colours, but on a per-object basis masking it into a different mode.

In fact, if you were to open up your SVG file in a text editor and look at the objects that make up your art (and you can actually do this) you’d see that after applying a filter, the colours are all still there but there is an added property attached: a filter code. This filter code essentially tells the software to turn that colour into a shades of grey based on the settings you see in the next dialog box.

Choosing Filters > Color > Greyscale is going to present you with some knobs to twiddle.

Feel free to adjust to your personal aesthetic, but for my purposes I’ve generally found the defaults to work pretty good.

Then, press Apply.

The result is that the object to which you’ve applied your filter is now on screen (and if you’re exporting it later) in black and white (or specifically, in greyscale… which is 256 shades of black or white).

Here you can tweak colors, adjust colors (all in greyscale of course) and continue working on your art … which is the important part.

You’re not branching your art into two different sets of models.

If you’re the type of artist that works from a library of reference art, you want models that you can re-use, edit later, anywhere and everywhere. In this case, permanently creating a set of art that uses a different colour palette is a waste of time and leads to the chance of character inconsistencies…. but most importantly wastes time. Did I already mention that? Oh well, it’s so important that it’s worth mentioning twice. Stop wasting time.

In this example, my magpie is a character that appears frequently in some comics. In fact, there are three magpie characters that I use (it’s subtle, but it’s my thing!) and each are differentiated by the slightly different palette used for their wing feather highlight.

If I do some work on this guy now and decide I want to convert him back to a full colour model, maybe because I decide I want to use this model later on in a full-colour comic, then I don’t want to muss around with trying to go through my art object by object and color-matching everything. I just want him back in beautiful full colour so I can get back to drawing.

So, how do I convert it back to a full colour model?

If you’ve used the filter, it’s actually quite fast and simple:

Filters > Remove Filters

After all (and as I will repeat so often in these articles you’re going to be sick of reading it) as a piece of vector art your drawing is just math. By adding the filter you never actually removed the color, changed the color, or altered the palette. (You may have done that in tweaking afterwards, but that’s a whole different article.) As written above, you’ve just added more math: a bit of extra code to that makes up that calculation that is your art objects. This command reaches into each selected object and punts that bit of added math (ie the filter code) to the curb. No more filter, no more greyscale.

So… simply remove the greyscale filter:

The result is that you’re back to where you started (as far as colours at least).

Draw on my little magpies, draw on…