I was sad to read this morning that the software I’ve been using for a number of years to maintain my photo gallery over at gallery.8r4d.com is going into “hibernation.” I suppose that means that all active development and support will cease on a terrific product. I can understand… maintaining a full software suite is a full time job, and the folks who have been running it have done some amazing things with just the sweat off their brows. But it’s still sad. I’ll continue to use it for as long as I can support my own install, keeping it safe from hackers or whatever, but I image that this marks the long road towards migrating all those photos to some other system. *sigh*
For those who continue to be curious about the design aspects of this blog, you may have noticed a subtle change in font that accompanied the week-and-a-bit ago switchover to a responsive template. I took the opportunity of fussing with the look-and-feel to swap out the prevailing use of “Arial” throughout this blog and replaced it with the new open source font from Intel Clear Sans. “Clear Sans is a versatile OpenType font for screen, print, and Web. It strikes a balance between contemporary, professional, and stylish expression and thoroughly functional purpose.” I like the look, and it gives a slightly more modern feel to the blog (I think) particularly since it offers a slightly broader range of legibility, particularly at reduced sizes and on mobile devices. I know fonts and typography are not exactly everyone’s cup-o-tea, but I’m finding the deeper I get into design and usability work, the more meaningful font-knowledge and awareness is becoming for me. I’m a font-nerd, I know.
I hereby declare myself a super-fan of the open source graphics editor, Inkscape. You should be, too. “I, Inkscapist” is a (new) series of articles I’m planning to write about getting your feet wet as an artist considering dabbling with this sweet vector design package. I’ve got no formal association with Inkscape, but contributing to open source doesn’t always mean writing code: someone needs to evangelize and educate, too. Share & enjoy…
Three Curves You Should Know
I wanted to start simple. I am assuming that you, my art-minded and uber-creative audience, has never really considered what a vector art suite can do for you. You should. Where many folks tend to think learning Photoshop is the ultimate art-creation skill — and it is powerful, make no mistake — pure vector design is that ace in your art tool-kit that once you master you’ll find yourself gravitating to more and more. Inkscape is one of many such software… with the added advantage that it’s awesome and it’s free.
Now here’s the thing… some part of me vaguely recalls the art courses I took waaaaay back and how one of the first things you learn is the fundamental shapes of things. You learn to combine circles and square and other foundational forms into move complex images. I recall standing at an easel with a big blank sheet of paper and some charcoal and literally drawing swirls and swirls and more freely-flowing swirls.
Nodes and curves are one of those foundational objects in vector art. Nearly everything you will eventually draw in Inkscape is a set of various nodes (points) on a canvas that connect to each other via the various curves (arcs and lines.) These have big, fancy names, but to the noob it really just needs to be understood that the three major types you’ll work with are corner, smooth and symmetric.
Corner is probably the easiest to explain. A corner node acts as a kind of sharp edge on the curve where it resides. Think of it as making a kink in the curve that can be manipulated by the handles. The corner node is represented by a diamond shape, and the handles by the highlighted lines and circles that appear when you select it. The curve on each side of the corner node basically ignores what is happening on the other side resulting in just what you might expect: a sharp or not-so-sharp corner at the location of the node which is useful for the various pieces of hard, angled shapes.
Smooth (and auto-smoothed)
Smooth nodes are represented by square-shaped nodes, and can be manipulated in a nearly identical way… with the exception that the curve on either side of the node reacts and changes based on the it’s opposite side counterpart. The computer attempts to avoid a kinked corner here, and instead generates a rounded, uninterrupted arc whose shape is determined by the length and angle of the associated handles. You’ll might notice that the handles always form a straight line that runs tangential to the curve and the shape of the node is determined by where on this line the node lives. This node is very useful for creating freely flowing, rounded segments and shapes.
Symmetric nodes seem to me to be a kind of off-shoot of the smooth node. Symmetric nodes not only pay attention to what the arc on the other side of the node is doing, but it mimics-slash-mirrors it so that the resulting curve is a smooth arc with the mid-point being the node. You’ll also notice that (like the smooth curve) the handles form a straight line that runs tangential to the curve but who’s exact mid-point is the node… but maybe that’s too much math-ish stuff for this post. (To be honest, I rarely deliberately employ this one, but I’m sure if you are looking to make precise art or design it would be very useful.)
Once you’ve downloaded and installed Inkscape, and then familiarized yourself with the basic controls (maybe I’ll cover that in a future post)… give it a try. Your homework is to make a simple drawing that uses all of these three types of curves and nodes. My own quick-and-dirty example is attached. Can you spot them all?
Have something you’d like explained about vector art? I’ll try my best: leave a comment. Screens, art, and information is all based on my own personal use and experience with Inkscape, the open source vector graphics editor.
While I haven’t been writing a novel this month for the infamous NaNoWrimo, I have been working on a different and still very interesting (at least, to me) creative project.
Astute readers may recall that I dabbled in the creating of a web comic about a year and a half ago. It was an exercise in many ideas, not the least of which was — simply — my interest in creating a web comic. But the effort itself was also very useful in allowing me the chance to burn some serious practice hours on a real project inside of a great little piece of vector graphic software, Inkscape.
For those less techie folks who read this blog, I should explain: there are pretty much two categories of image editing. In category one, Photoshop is the industry standard in basic and advanced photo-slash-image-slash-raster editing. This is essentially taking a defined set of pixels and changing each pixel’s colors in a controlled way. There are lots of nifty tools and filters inside the software to change anything from individual pixels to large sets of pixels, either independently or relatively (to each other or the tool itself) all of it giving the effects of drawing, painting, smudging, blurring, twirling, posterizing, or whatever… but it all comes down to changing a pixel of one colour to a pixel of another colour, and it all resulting in a rectangular image with lots of pixels that look like something as defined by the artist.
In the second category there are vector editors like Inkscape. Vector editors don’t concern themselves too much with individual pixels (at least not until you export the final image) and instead act like really complex mathematical drawing tools — but without showing you much of the math (unless you so choose.) The vector artist will define shapes, lines, curves, fills, and spend his time twisting the tiny arc handles and shaping the curves between a very finite number of plotted points to generate a desired shape. In essence, you use tell software to (in the simplest form) draw a circle of radius X, paint it colour C with a transparency of T and outline with a line of S thickness — but with a much nicer interface — then you nudge parts of that circle until it isn’t a circle, but instead it’s the shape of a nose or a finger or a light bulb. And then you export it as crisp image of a nose or a finger or a light bulb in either full 1080p HD resolution or as an icon just big enough to sit in your task bar — or whatever size and shape you want, really.
Both types of editors have their strengths, weaknesses — and roles — in design, and I could write a book on the advantages versus the disadvantage of each. But instead I’ll just say that cartooning in vector graphics (if you learn how) is definitely the way to go… with one caveat…
Unfortunately there is one little gap — at least from my personal workload perspective — Inkscape exports just fine, drops a clean image of whatever size neatly into a PNG or JPG file, or whatever I happen to be working with. But putting the pieces together — that post-production part — is way easier in pixel image editor like Photoshop. And this puts me in a bind. Why? Because, buying a seven hundred dollar copy of Photoshop (not gonna pirate one, so don’t offer that as a solution) for a bit of cartoon post-production is not sensible. And doing ten times as much work in Inkscape to do the same post production fudging of the work is boring and a bit of a fun-killer.
So, last night I spent a couple hours revisiting the world of open source image editors. And I also decided on a bit of a professional-slash-creative goal: I’m going to be publishing another web comic in the coming months. This isn’t a vague goal: A bunch of the art is already done, about ten pages worth of story are in the bag, and I just need to piece it all together… somehow. But, seeing as all the work I’ve done so far has leaned upon the free software world, I’m going to see if I can maintain that status for the whole project. I know perfectly well it’s possible, but here’s the thing: I want to deliver a completed web comic in the clear and open. I want to write a full comic designed and complete with free and/or open source software.
I’ll explain more in future posts… stay tuned.
The diminishing post-rate here is partly (though only partly) blamed on the crumbling dependency of movabletype. I like moveabletype. Really. It’s served me well for a couple of years. Hundreds and hundreds of entries were encoded in it’s mellow scripts. But there are flaws. Build errors, memory issues, and timeouts plus that whole fundamental lack of compatability with mozilla. Well, you know how it goes. And, updates while (technically) freely available, are limiting. The good updates cost money. So, rather than allowing this space to blossom as it should, movabletype seems as though it might lock it into a cycle of ever diminishing returns. That, or I’d need to spend more money. Either way, open source called, and I finally decided to listen to her pitch.
As of this evening, this space is run on WordPress. What does that mean for you?
Tighter security and few more new little features. Otherwise, yeah, not much. You can register if you want to post a comment. Just make sure I know it’s you or I’ll delete you account. (That whole comment-spam thing — you would not believe the pain!)
We now return you to our regularly scheduled programming…