Category Archives: The Tech

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?

WordPress: Your Cartoon Content Management System

Personally, I’ve been a user of the WordPress platform since the versions started with a 1-point-something. I don’t write that to brag or to make myself seem older than I really am or come across too abruptly as the unpaid endorsement fanboy that I might just be, but instead to give a bit of gravitas to the next sentence.

WordPress is not perfect, but it’s an awesome, virtually free, highly-flexible piece of software that has helped me build multiple-dozens of websites and post literally millions of words to the web.

I’ve built blogs, portals, forums, more blogs, retail front ends, business tools, serious sites, weird sites, and more than one online comic book. If you’ve decided that you want or need a website to do something like this — to post your comic online, say, like I have — WordPress is a tool that should definitely be on your shortlist.

…even though you do have many options.

For example, in my real life (the professional one, where people pay me money to do this kind of stuff) I am in charge of the website for my local municipal government which serves millions of visitors every month and communicates important government information and alerts to those visitors. I manage a team of amazing web folks who work in a system related-to, but very, very different from WordPress. That system is what is called an “enterprise CMS”, and is to WordPress what an industrial-scale factory is to a tradesman with a van and a toolbox.

Sometimes all you need is a tradesman with a van and a toolbox.

What the Heck is a C-M-S?

The term CMS stands for Content Management System.

Simply, it is a piece of software that takes your content — words, links, documents, and images — and helps you to organize them in a way that results in files that are useful to a web browser.

I’m writing these words in the WordPress CMS. I’m typing them into a text editor window inside, the same window that would let me add formatting, links, images, and even little customized widgets that might be useful inside the text.

WordPress, at it’s very basic, is a tool that mashes together the design of a website (the template) with your words and links (the content) and uploads a set of files to anyone who visits your web address (the website).

And to overcome the (purposeful) simplicity of WordPress (which really is a robust piece of software all on it’s own) people around the world in the WordPress development community have programmed hundreds or thousands of “plugins” which can be activated inside WordPress to give it new features, from simple tweaks to what you see managing content to complex new applications that help you build websites with amazing interactivity.

Some of those plugin are free, some cost money. Some of the templates you can use to change what your site looks like are free. And some cost money. If you have the time and the skill, you can climb inside the guts of those plugins or templates tweak them… or even make your own.

And going back to my original claim, I’ve been a user of the WordPress platform since the versions started with a 1-point-something… and I’m still finding digital dials to turn and clever little customizations that can be made if you’re willing to roll up your sleeves and give your keyboard some exercise.

The Limitations of a Passive Website

On the flip side, here in the year 2018, passive websites (like this one) seem to be trending passé.

It’s a Dead End

While part of me feels a definite need to build and maintain a digital monument to my comic, a “home” to my artwork, I do so acknowledging that there is little actually going on here to justify any real costs that I might put into it. A few dozen visits per day feed my analytics bubble. A few minor engagements that come sidelong through vaguely related search hits. A curious passer-by who thinks there might be something of consequence hiding between the comic panels.

It’s All Me

Most of my audience lives on Instagram or Facebook.

The people who like and share and comment and enjoy my work are not coming to my website… and even if they did, I’m not sure I’m offering anything extra of value besides a fire-hose of my work. It’s the difference between going for coffee with a big group of friends where you might show someone a few pics of your latest trip overseas… and having just one person, randomly, to your house to watch hours of your vacation videos.

The Payoff is Low

I host this website on a personal home server. About a year ago I bought a Raspberry Pi 3 (no relation) and installed a little LAMP server and a firewall and plugged it into the DMZ of my home internet router. I paid all of sixty bucks for this setup, and I pay about twenty bucks a year for a domain name and the DNS routing service. Factor in a dime worth of electricity per day, I spend about a hundred bucks per year keeping this site alive, or about as much as I’d pay for some really budget shared hosting.

I make zero in return. Maybe I just suck at business. Maybe I’m just building my brand and investing in myself — see below — but either way the payoff doesn’t even cover my very basic expenses.

I’ve recorded about 1,600 unique (non-me) visitors in the first 9 months of 2018… or a little less than 6 people per day see my comic. My that math, in 2018 I should expect to see about 2,200 readers. Not terrible, but it means I’m PAYING 5 cents per visitor to my site. I don’t want to shill for Facebook, but I ran an advert on social media via Facebook and Instagram and got a little over 1,000 impressions for ten bucks… or less an a penny per reader.

The Advantages of a Passive Website

I’m in Control

Barring the possibility of catastrophic disaster through a server meltdown or a successful hack or whatever, by posting on my own website I retain control of my art. I get to decide how people read it, consume it, link to it, share it.

I’m Investing in a Brand

This is a long game. I’m drawing comics for fun, not profit, but everything I draw and everything I post is part of one big cohesive effort to create a bit of a name for myself. A website is part of that package.

It is What You Make It, For Better or Worse

And ultimately, the simplest advantage comes down to payoff for the effort. I COULD put a lot more work into making my site better and more interactive. I don’t. I dump comics here, write a few words to please the SEO gods, and go back to Instagram to like other people’s work. The opportunity is vast, and it will be what you make of it, how much work you put in and what you can do with the little bit of space you’ve carved out with an (ultimately) inexpensive little home-brewed website.