Exporting a Final PNG Image of Your Art in Inkscape

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

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.

looking for comics?

This is Pi Day publishes strips on Saturday mornings. Minor strips show up whenever I have time to make a new one.

Check back often or sign up for one of my social feeds to have comics directly in your favorite app!

last tweeted

  • Strip: This is Flying (Part 2) https://t.co/lkytgsJLgG #adventure #airplane #toys #travel
    about 8 hours ago

3.1415926… ?

Looking for more pi?

We regularly celebrate at the great circle of math, science and technology culture. This is Pi Day has been calculated as the product of one geeky dad, one curious kid, and an irrational volume of corny dad jokes.