Monthly Archives: January 2018

Switching Between Color & Greyscale in Inkscape

The Art, The Tech, , , ,

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…

Exporting a Final PNG Image of Your Art in Inkscape

The Tech, , , ,

Before we get started, I’ll just note that the following information applies to Inkscape 0.91. I can’t imagine that the basic process would change much in an update as this is such a fundamental feature, but if it does… well… let me know in the comments and I’ll revise it.

Getting Started

Here’s where we’re starting: You’ve drawn your vector art masterpiece in Inkscape. You have:

  • cleaned up your work space of unnecessary elements
  • double-checked your lines and colours
  • saved your working file to your local machine

If you’ve made it this far, you probably already understand that Inkscape draws pictures using math. Vector graphics are collections of lines and shapes that are themselves defined by complex geometries of coordinates that define positions and shapes and other values that define curves and colours and gradients and transparency.

Fun side exercise: open any SVG file in a text editor. You can actually do this, and if you are not overwhelmed by the code, it’s actually human readable (kinda-sorta) and human editable (kinda-sorta-carefully). You can muss around with the numbers there and actually edit your art as code… but maybe do this with something you’re not very attached to first.

This math also allows the image to change size very easily. Need an image the size of a business card? Export it at that resolution. Need an image that covers the Atlantic Ocean? It would use a lot of memory but it’s possible.

This is why your file is saved as an SVG — a Scalable Vector Graphic format — but it’s not a great format for a web page. It would work, and a lot of new web design standards are catching up to use this format more fluently, but it’s still not the best format for sharing. And, let’s assume you want to post your art on social media or print it out. We need another format.

The Versatile PNG

You need your file as something more… more… let’s say rigidly defined. I use PNGs for all my comic art and lucky for us this is both web compatible and a format that Inkscape can spit out with a few simple clicks. Unlike an SVG file, a PNG file is a fixed image. It has a defined resolution (in this example we’re going to output 800 pixels by 550 pixels) and a set color palette. It is small, light, and travels well on the world wide web. Best of all, it uploads easily to most social networks.

But how do you make a PNG out of your SVG?

For starters, you need to find a menu item called Export PNG Image … or, if you like keyboard shortcuts like me, you can just press Shift + Ctrl + E

The result is going to be a complex looking dialog box (either docked on the side of your art window or floating somewhere on your screen depending on your setup).

Picking The Export Options

There’s lots of numbers here, and depending on what your final application is you can twiddle knobs and dials all day and come up with something that might work for you.

But then this is a comic art website and I’m going to assume you want a final image that is something that showcases your toons in:

  • a standard dimenion
  • in a shareable size
  • with a bit of white space

If you’ve drawn your art work without a border then what is going to happen is simple:

If you export the PAGE, you’ll have an image that is essentially the size and shape (with a transparent background) of the virtual black page frame that has been floating behind your art work while you’ve been drawing. This might be good enough and let you open your art in another piece of software to crop it to something more useful… but we can do better.

If you export the DRAWING, you’ll have an image that comes out with EVERYTHING on your canvas. If you’ve dutifully cleaned up your work space (as noted above) then your final product will be just fine and be essentially the same as the SELECTION option. However, if you happened to leave a stray object floating off somewhere, a line or a text box or a white circle off the page, the DRAWING option is going to assume you want that as part of your image and you’ll have the art you wanted jammed into a corner of a huge PNG image with a mostly transparent background.

If you export the SELECTION option, you can pick, outline, click-drag-select the art you want and just export that. You would see a little dotted border defining the shape of your final image:

This would be okay too, but without a little prep work, your art will have no white space and a transparent background, the edges of your art set at the very edges of your image. If you’re making icons or going to incorporate it into something else like a website or another canvas, this might be exactly what you want. If you need a more finished product… we can do better.

Back to the Drawing Board

…literally.

Go back and draw a white rectangle.

For visual demonstration I’ve left the border on mine, but you don’t necessarily need to do that.

Draw a white rectangle (or another colour if you want a different color background) and make it the lowest layer of your art. If you want to get finicky, you can set an exact dimension here. (And you’re an artist, so I already know you’re finicky!) For example, I made my white rectangle 800 pixels wide by 550 pixels tall (as noted above). Check out the top toolbar to see where those numbers are.

To be clear about the next few steps THIS new white rectangle you’ve just added will:

  • act as the background of the final image
  • encompass ALL and ONLY the art we want to export
  • be the SELECTION in the export step

Which brings us back to the Export PNG Image dialog window:

All that is left is to set your image dimensions.

Where Are You Posting This?

The Inkscape defaults are going to make you a 90 dpi (dots per inch) image which is an old standard for web images that is not super important to know about unless you start thinking about anything besides posting your art online. Maybe printing it. Maybe displaying on something HUGE. Maybe doing an eBook.

I post images on my website as 1200 pixels wide, but all of my art is exported initially as a 4500 pixel wide high resolution image. Ideally, someday, this means I could print a pretty good 15 inch-wide print. Or, I could do a book with a high resolution print of about 7.5 inches wide. Where am I getting these numbers?

The simple math is this:

If you are going to print it, decide how big you need it (in inches… because we’ll never escape this antiquated system!) and multiply that number by 300 for a standard print resolution or 600 hundred for a high quality print. So, for example, 8 inches wide means 8 x 300 = 2400 pixels for a pretty-good-quality print.

If you are going to post it online, decide how big you need it by looking at the resolution of where you are posting it. In 2018, this means usually about 1200 to 1600 pixels wide for a full width screen on a website, 800 pixels wide for a social media post, 128 pixels wide for an icon… etc… there are loads of applications, so look up the details of what your final image should be (or if you’re working with a template figure out what it requires.)

Select that white box you just drew.

Set your image width to the number you just calculated (or researched) above.

Click the Export As... button to define a file name for your PNG.

…aaaaaand FINALLY press Export

Inkscape may prompt you to overwrite the file (if you’ve got an old version in there) but otherwise the little status bar will churn for a few seconds to a minute and a beautiful PNG image will be stored on your hard drive.

Your math-based SVG art work space is now a final edition piece of art, ready to be shared with the world.

Why not comment below and let me know what you’re making… or just point out the glaring omissions and errors I made in this tutorial.

Scripting Your Comics

The Story, ,

This is Pi Day is my third attempt at publishing a web comic and I can state with unfiltered certainty that what killed, dead, full-stop, my first two attempts was overlooking the importance of writing.

Comics are visual storytelling.

Story.

Because without story, your comics are just doodles. Which is fine… if you want to make doodles. If you are passionate about doodling. If what is important to you is compelling visuals or realistic sketches or amazing colours filling the spaces between cleverly placed lines, then go ahead and ignore the story.

But they won’t be comics… or not likely very good ones.

Comics are a way of using images, sketches, shapes, colour, form, and pictures to tell a story. That story might be one sentence long. That story might fill up a whole page. That story might be longer than a Tolstoy epic. It doesn’t really matter how long your story is. Story plus art usually equals a comic.

So for me, putting story as a priority looks something like this…

A Seed of an Idea (Stage 1)

I tried using paper to keep track of this but in the end I’ve gone fully digital. I have a Google Doc called “Pi Day Ideas” that I can open from my computer or phone to jot down plot seeds.

The seed of a new comic might look something like this:

IDEA
Kid wants to play something "dumb"
Can't I'm busy.
Mom (off frame) - Can you take out the garbage?
Yells back: Can't I'm playing ____

In fact, while this looks a little loose and doesn’t make a bunch of sense, this is one of my more fleshed out IDEAs. For example, I have an entry in my document right now that just reads “shoveling snow” and another one that reads “lost in toy store” …either of which may become comics in the future, but haven’t hit that critical creative sweet spot quite yet.

The point of this stage is simple: that creativity strikes anytime, anywhere and while it takes an hour or two at a computer (with some coffee and the tunes cranked) to sketch out the first draft of an actual comic, it takes ten seconds (on my phone on the train) to jot down an IDEA for something that pops into my head wherever.

A Refined Script (Stage 2)

Of course, the IDEA only takes a comic so far.

Early on I would often skip stage 2 and transcribe an IDEA directly into a comic, but I’ve found (and if you’ve been following my comic from the beginning) that I’ve had to go back and create version 1.1 or version 1.2 of an early strip to make the joke more clear or less wordy or a little more funny.

Now I usually have a dedicated step that takes place at least a week (minimum… usually much longer) before any actual drawing where I will turn a seed into a SCRIPT.

This step involves a little more careful thought. Usually I’ve set aside a bit of time, I’ll read over my seed IDEA a few more times. I’ll poke it with a stick to see if it holds together. Drink some coffee. Check my email. Drink more coffee. And eventually things get tweaked, expanded, and turned into what in my mind would make a three-or-four-panel comic.

This is when it gets numbered and then starts to look something like this:

SCRIPT for 028
K: dad wanna have a tea party?
D: I'm busy right now. Later?
M: (of out frame) Can one of you come downstairs and empty the dishwasher?
D: (shouting & now having a tea party) We can't right now. We're busy!

….and even that might go through a number of revisions over weeks or a month, and if I was really meticulous I’d keep track of all my changes. But in reality, I’m not so I usually type over top of my IDEA turning it into a SCRIPT and then revise the SCRIPT over and over five, six or a dozen times… until I actually draw it into…

A Published Comic (Stage 3)

As I draw, and having outlined a bit of the visual language in the SCRIPT, the art starts to exert its opinion upon the final result. The flow of words. The cohesiveness of the joke. The actual white-space in the frame that I’ve left to type in the words themselves. So a SCRIPT like the one above gets a few more tweaks and comes out of the wash looking like this:

[ Comic: The Party Line from www.piday.ca ]

And how long did this take? Two months (not counting my November-long break).

I looked back and (like I wrote above I don’t keep meticulous historical records) but this particular comic came out in mid-December, it was drawn in early October, and the idea first shows up in my SCRIPT document sometime in September.

Two months. And I probably actually drew the thing, did the art part, on a lazy Saturday morning over an hour… so to be clear on the importance of script:

Time spent on art = 1 – 2 hours
Time spent on script = 2 months

Comics are visual STORYtelling.