Open Source Fun With Inkscape and SVG
Okay, this is just going to be a quickie picture-tutorial, because I've got a very long text-based one coming out "any day now." Meanwhile, I just want to share the joy that is working with Inkscape.
For those that don't know, Inkscape is a free and open source vector image editor, much like Corel Draw or Adobe Illustrator. Vector editors differ from photo editors in that your drawings always remain a bunch of parts that get rendered, rather than being saved as pixels. For example, if you draw a circle, the file will contain information about the position and radius of the circle, as well as its color and outline rather than thousands of little dots representing the image.
SVG is the free, open standard for describing vector graphics and Inkscape is the best tool there is for creating and editing them. The fact that Inkscape is open source means that you're free to download it and share it with friends. If you have 45 minutes, download it and play along with this article.First, get the program here. I don't normally recommend getting nightly builds intended for the developers, but the 0.41 build for windows is borked and the latest nightly appears to fix whatever problems it had. Just unzip it in a directory and run the inkscape.exe file.
Once you're up and running, download furboa3.svg. It's the final frame from my bit of fan art at my friend Colleen's web comic, Fluff In Brooklyn. (Take a look! It's stuffed-animals-meets-three's-company hilarity).
Now that you've got Inkscape and a bit of art to work with, lets look at what we've got. (Or at least pretend if you're not playing along...)
There are quite a few elements of this image, so lets break it down a bit and look at what makes up the final product. Draw a selection box just around furboa's head + ears, copy, and paste it in a blank section of the image.
This is just Furboa's head. It's still made up of quite a few pieces, but it's manageable. Let's delete some of the upper bits, which you can do just by clicking on them and hitting delete.
Okay, this is just the base of his head. It's made up of a simple oval, and two "ears" which are just curves which have been filled in. Click the ears and move them away a bit.
You can already see the power of SVG in the fact that I'm able to pull
this image apart right down to the very basic building blocks of my
artwork. Understanding Bezier curves makes
it all the more powerful. If i select the "Node edit" tool, which is the
wedge shaped mouse icon 
, I can
directly manipulate the path a curved line travels between one node and another.
This tool is best learned by playing with it, so go ahead and muck around with the shape of the head and ears a bit. You can drag the nodes to adjust the places where the curve must pass through and the little round control points to tell the line where it should travel on the way to the next node. I've created the "mouth" portion of furboa's head by adding an additional node to a standard oval and setting it to be a corner node (as opposed to a smooth or symmetrical node). By setting it to a corner node, 
I've allowed the curve to travel in and out of the node in different directions, and that's exactly what I direct it to do with the control nodes, creating a V where his mouth will be, and then sort of bulging outwards from each side to represent his lips.
Okay. now that we've seen the building blocks, let's put Furboa back together again. Move his ears back to his head with the arrow tool, and create an eye with the oval tool. I've stretched my eye and rotated it a bit to give it the same slant his head has.
Right click and select "Fill and Stroke" to remove the outline of the oval and change it to a nice solid black. Be sure to set the Alpha level, or transparency, up to full. I'm also going to draw a bit of a "highlight" on the eye using the freehand drawing tool. It may "disappear" on you when you first draw it, being that it's black on black. Just be careful not to click anything else after you draw it, and again set the color and outline in the fill and stroke window. You can also select the eye and drag it away for a moment while you set the color of your highlight.
The original Furboa's eye was a bit more sinister looking due to the fur poking in above and below it, so let's make ours a bit less happy-go-lucky. To do this, I'm going to employ a trick which I learned in 3D rendering, which is making a complex shape by adding and subtracting simple ones.
To shear off the bottom of the eye, I'm going to make a simple rectangle, move it over the eye, and apply the "Difference" operation from the path menu.
You can see the rectangle I use here, rotated to give me the cut I want. Now I select them both, apply difference, and voila.
I can also achieve the same effect by editing the nodes of the eye, and for the top, I simply move some of the nodes down to create a squished, rounded look. Other details follow the same pattern, and are added in quickly. I use the pen tool to rough in the white mouth area and then make it look just how I want with the node edit tool. A quick black curve makes the actual mouth and "nose line".
The nose is drawn with the freehand tool and given its color and a finally a white highlight is drawn on top. The "whisker ports" are just 4 little rotated ovals. The whiskers themselves are just 2 simple curves.
By now, Furboa should be starting to look quite familiar, and finishing him up is just a matter of adding in the rest of the pieces, like the pink inner ear, and his little "seam" down the cheek.
Before I close this article, I'd like to touch on some of the simple things I do to take a vector image from simple to stylish.
Once I'm done with the basic shape, I go back and add shadows. There are many ways this can be done, but the most simple is to create a closed curve where the shadow would naturally occur (be sure to choose a direction where the light is coming from and shadow accordingly.)
Here again is furboa's head from the original drawing, minus the shadows.
First, I add a bit of shadow to his mouth. This is just a closed curve object which I've set to have no border and a color of black, and then turned the opacity (also know the as alpha level) down almost to nothing. (RGBA value 00000022).
Using the same method, I create the shadow for his whole head and ears.
The remainder of the character is created through these same means, so skipping a few bits, lets take a look again at the finished drawing.
Notice the shadow of Furboa on the ground? I create this accurate cast shadow with a quick little trick. When you're done with your character, select the whole thing and make a copy. Be sure to delete any items outside your character which you may have selected inadvertently, as they will mess up this next bit.
Once you've got the whole character copied, select it, and click Path -> Union (if your image disappears, there was something selected outside the main body. Be sure to only union parts which are touching)
You'll notice inkscape chose one color for all of the objects. This is because it is now all one big object joined together (which is different from grouping - this item is now really just once piece, and cannot be broken back apart. This lets us easily change the properties of the whole thing at once) Now squish it and skew it to make it look like a shadow, and give it that same shadow coloring, black with just a little opacity.
Finally, plop it back behind your character and you've got a shadow. (Place it over your image and then hit page down to move it to the back.)
We can use this same trick to create the thing black outline that I use in my drawings, paying homage to Jhonen Vasquez, Anime, and 3D cell shading techniques that employ this same look.
We could, of course, simply set a thick outline to each of our objects, but since my drawings are made up of so many pieces, they would look a bit stitched together if the head, arms and body all had separate thick outlines. I'm going to for a big thick outline that traces the outside edge of my whole character.
Just like we did for the shadow, copy your character and union. Instead of squishing it, we're going to use Path -> outset tool (twice) to make our unioned drawing a bit bigger than the original character. Now set it to solid black, and once again move it over your drawing and page down until it's in the back.
Here's the finished image once more for reference:
Well, that's it, thanks for sticking with me, and I hope you enjoyed the little tutorial and had a bit of fun. If you use what you've learned here to create any art, let me know by sending mail to "svgart" at glitchnyc d0t com.
Oh, and before you go, be sure to take a look at FluffInBrooklyn.com to see what all the fluff is about. Many thanks to Colleen for letting me use her character for this tutorial!
