Category Archives: The Tech

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.

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…

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.