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.