| Introduction 2: Introduction to Inkscape | Index | Tutorial 2 (yet to be completed) |
In this first tutorial I will cover the process I go through to create a character as well as the basics of how to use Inkscape to draw that character in vector format. I find the best way to learn is by doing, so I will explain with an example by making a basic character. Let's start with one of my favourite RPG monsters; the slime!
Otherwise known as the jelly or mould, the slime is simple enough to be a great introduction to the character construction process. Plus there's something about those little blobs that makes them strangely endearing. For this tutorial, I will simply run through what I would do to make my own slime drawing, documentating the process as I go. I will assume by now you know some the basics of using Inkscape (such as vaguely where everything is in the window, and how to move objects around; basically what you can learn from the Inkscape tutorials in the Help menu). But I will also try to explain some of the more useful features that are probably not covered in the standard Inkscape tutorial as I use them. By the end of the tutorial I hope to briefly touch on the majority of all the steps that I use to create my own cartoon styled Inkscape art.
So without further delay let's go get our hands slimy!
When trying to figure out a new art piece, it helps to have something base it around. That's why, for me, my usual first step is to find some good reference material. This is more important if the thing you are trying to draw is complicated or is based in reality - such as if you wanted to draw a particular uniform or vehicle. For something as simple as a slime this step might not be as critical, but it still helps to look at other people's art to take the elements that you think works well.
When it comes to finding research pictures, Google's image search is your best friend. If I've ever needed to know what something - anything - looks like, Google hasn't failed me yet. Just fire it up, choose "search for images", put in your keywords and save the reference pictures you like to disk for later viewing. Of course, you don't have to rely on Google; any source will do. For game graphics, taking screenshots from games you own is a good source of ideas (although try not to copy them exactly; you are looking for inspiration not trying to swipe someone else's art!). And there's nothing better than to model from real life. If you are feeling especially hungry you could make yourself up some jelly as the basis for your slime. Remember not to eat it before studying it for ideas!
Here are a few examples of blob shapes to study from. The left image is from Breath of Fire, a SNES game by SquareSoft. The center image is from Lufia 2, a SNES game by Taico. I think the right image is from Magic Blast, a Flash game currently being made by Day Dream (the artist) and Battagline (this image was posted in Battagline's GameDev Journal; I'm unsure exactly what the title of the game is). While I'm fairly sure everyone knows how to draw a blob shape, you can see in these three blobs there are different ways of doing the shading and lighting effects.
Once we have some sample art to look at, we are ready to start creating our character! My usual method is to gradually evolve a character by making many, many pencil sketches; gradually refining every detail until I get something that I like. Even if I am drawing an already defined character, I'll experiment with poses and gestures with a few test pictures in pencil first. If you're good with a Wacom tablet you might want to try doing this stage on the computer, but personally I seem to express more creativity at the early draft stage with pencil on paper than on the computer. For something as simple as a slime, doing pencil sketches is overkill, so I'll leave this stage until such time as I do a more complicated character in a tutorial.
Now we finally get to play with Inkscape! Open up Inkscape with a nice new blank document, and save it as something like "slime.svg" in the working directory of your choice.
To begin with, I always like to get a draft sketch of what I'm working with done first, as it's much easier to work with a guide. There are two ways I approach this. Sometimes I take one of my pencil sketches that I think looks particularly nice, scan it in, do some quick edits in The Gimp to turn my scanned draft from a black-on-white to a blue-on-transparent picture, then import it into Inkscape ("Import" is under the File menu, or Ctrl+I). Or sometimes I sketch the image directly into Inkscape using the calligraphy tool and my Wacom tablet, most often using my pencil sketches as a visual aid.
Before starting any draft work, I like to create a special layer to keep all the temporary work separate from the final image. Since the image starts with one layer called "Layer 1", I usually use that layer for the drafts. To give the layer a better name, go into the Layer menu and select "Rename Layer" to give it a name like "draft" or "sketches" (I usually call this layer "scribbles" due to my habit of just drawing all over this layer).
If you don't have a scanner or a graphics tablet, you may want to try using the calligraphic tool with the mouse (which I personally find a bit disconcerting), or making some draft sketches with basic shapes. Otherwise you could just refer to a pencil sketch as make the image and ignore the rest of this section (although the drafts really do help!) For the rest of this tutorial I'll stick to the mouse only, but as a sample here's a rough sketch I made with the caligraphic tool for what I think my slime will look like:
I'm imagining this is for some kind of RPG game, where the view is slightly from above. With draft sketches it helps to to sketch all the important features, so I've drawn in an oval footprint representing the slime's contact with the ground. However given slimes are usually slightly see-through the footprint will make it into the final version.
Remember that this is just a draft: there's no need to stick to this sketch exactly as you work on the proper version. You also don't need to worry about mistakes and imperfections, and feel free to put in lots of guide lines and comments. As long as the general details on the image are in there it should work fine. However that being said, do put in some effort in the draft stage with the tricky details, such as fingers on humanoid characters, as those elements are some of the harder ones to get right.
Once I have a draft image done to my satisfaction, I like to transform the layer into a form that works well as a guide. For the Inkscape scribbled image above, I like to select the entire contents of the layer (select all, Ctrl+A), turn the colour blue by clicking on the blue in the palette. The blue colouring is to make the draft stand out slightly from the colouring I will use in the slime. If you are wanting to make a blue slime, then pick some other colour such as red, green or purple for your draft sketch.
Then I open the Layers dialog (either select Layers... in the Layers menu, or use the shortcut Shift+Ctrl+L).
The Layers dialog is where you can manipulate all the layers within your image. For those of you unfamiliar with layers, think of them as parts of your image sketched onto clear sheets of plastic. Changing the order of your layers is like changing the ordering of those sheets of plastic, and so you can easily modify whole chunks of your image at once. The choice of exactly what you want to put in each separate layer is partly up to you. I find that with Inkscape vector art layers are not nearly as vital as they are with raster editors, where it is much harder to shift around parts of an image.
At present, you should only have one layer (in my case "scribbles") selected by default. Select the opacity slider and shift it down to about 0.400. This will make your draft sketch go transparent. Now your draft layer is a nice overlay that will work well as you work on your slime.
See those two little icons of an eye and a lock next to your draft layer in the Layer dialog, as well as in the bottom left hand corner of the main screen next to the layer drop box? These two icons affect the visibility and editability of the layer. Clicking the eye will toggle whether your layer can be seen or not; useful for when we have finished with the draft layer and want to hide it. Clicking the lock will change whether the layer can be modified. For now, lock the draft layer as we are about to begin working on the proper slime.
Before starting on the slime itself, you will need another layer to work with. Since we have the Layer dialog open, click on the big plus button to create a new layer (another way is to select "New Layer" in the Layer menu). Call your new layer something sensible like "slime", and create it below the current layer (the draft "scribbles" layer). That way you can see the sketch as you add more shapes.
Your image should look a bit like the image above. Make sure you have the "slime" layer selected that you just created by checking the layer selection drop down box in the lower left hand corner of the screen, and that your draft layer is locked. You can see which layers are locked by clicking on that drop down box and checking if your draft layer in enclosed in square brackets (i.e. "[scribbles]").
Now we have our draft slime sketches, we can start work on the final product!
In this stage, we need to figure out which of Inkscape's versatile tools is best to fully flesh out our art concept. There is no one correct approach for this creation process; there's just whatever works best for you at the time. I still am experimenting with different methodologies to find what gives me the best and most efficient results. However, a common theme that works well is to start with the big building blocks and work your way down to the fine details. The trick is to break down your art piece into a set of small shape components that you combine together to make your final art piece.
That being said, there are a number of different building techniques that form the basic set of options that I use to construct my art:
For our little slime friend here, I would break down the figure into the following components:
See how the footprint of the slime is basically an oval? That suggests that the shape construct method is probably the best one to use in this case. Select the oval/circle tool and drag out an oval to make a footprint. If you have been playing with the oval tool it make draw a partial oval with a piece missing; if that's the case then use the mode tool to move the handles defining the partial oval together. Hold down Control when doing so to snap the handles together, otherwise you may end up with the handles being almost but not quite in the same place, which may complicate things later on.
Chances are your footprint isn't quite the right colour for your slime. If so, you can easily change the colour of the fill (that's the interior colour) by clicking on a colour in the palette at the bottom the screen. The stroke (that's the outline around the shape) colour can be changed by holding Shift and clicking on a palette colour. However, if you want some more fine detail in exactly what colours you are using, or if you want to change the size of the stroke, it's best to use the Fill and Stroke dialog. To open this dialog, either use the shortcut key (Shift+Ctrl+F), go to the Object menu and select "Fill and Stroke" from the top, or (possibly easiest) click on the fill and stroke colours shown in the bottom left hand corner of the screen. This opens up the Fill and Stroke dialog box shown below:
From this nifty little dialog box you can select colours for the fill and the stroke, as well as select what size and style you want the stroke to be. You can also select different types of gradients for your colours if you wish, or switch the fill and stroke off. If you haven't played around with this dialog box yet I encourage you to spend some time seeing what you can do; this is a really useful tool that you will be using a lot if you keep using Inkscape.
Once you are familiar with the Fill and Stroke dialog, it's time to pick your favourite slime colour. I like green slimes the best, so I chose the RGBA colour shown in the example above: 170 Green, 200 Alpha (slimes are slightly see-through).
For the stroke, you can choose a number of different styles depending on what look you want. Solid black lines are a classic for a cartoony look. Or you may want to go with no outline at all. For now, I will go with a dark green outline of the same hue as the fill. A neat trick to get this effect is to use the colour picker tool. Have your footprint selected, then hold Shift and use the colour picker tool to select the fill of your shape (holding Shift changes the stroke rather than the fill). Then go into the Fill and Stroke dialog and use either HSL colour space and change the lightness, or use CMYK and change the black. This should give you an outline the same hue as the interior fill, but still acts like a separator. I wouldn't give the stroke any transparency; to me it looks best completely opaque, so I set my stroke alpha to full.
Once you have a stroke colour you like, select the stroke style tab and pick a stroke width you think looks nice with your slime. I'm going with a thick outline for my slime, so I've increased the width to a reasonable amount. You might want to play around with this in more detail later, so for now just pick something you think looks okay.
Here's what my slime looks like after making the footprint:
One final thing before we finish with the footprint. At the moment, the footprint is an oval object, defined as a special shape format in its internal SVG format. In this form, when you use the node tool on the object you have a bunch of special handles you can manipulate your oval. However I like to keep all my components as paths, defined as a connection of nodes, as some of the more advanced operations only work on connection of paths. To convert an object to a path, have it selected and go to the Path menu and select "Object to Path", or just use the keyboard short cut (Shift+Ctrl+C). Note that once you have converted your oval to a path there's no reversing it (well, other than using Undo immediately afterwards), so it's worthwhile waiting to do this step after you are happy with the position of your shape. If you now use the node tool you will see that your oval is now constructed out of a path of four nodes. I find it easier to fine tune components in path format than with bulk shapes. While I think the oval shaped footprint is fine for this slime, I would usually convert the shape to a path anyway just for the convienience of having everything defined as paths. I'd usually end up having to convert everything to a path anyway at a later stage as some of the finishing or polishing methods require paths.
Go ahead and convert your slime footprint into a path, and then we will get started on the next component, the slime body!
We aren't going to get away with just using an oval for the body, so for this component we are going to have to get deep into the guts of node manipulation. You'll notice that my slime is deliberately slightly "bumpy" to make this part a bit more interesting. But even if you are going for a more smooth slime look like in some of the examples you will need to move a few nodes to get the slime looking right.
First we need to construct the general body shape. Since the bottom of the body needs to be identical to the bottom of the footprint, my preferred approach to making this component would be to modify a copy of the oval we already have. Simply select the oval, make a copy (Ctrl+C, also in Edit menu) and then paste in place (Ctrl+Alt+V, also in Edit menu). Now there's two ovals in exactly the same position; if you made your footprint slightly transparent you should have seen it darken slightly.
It's now time to go node tweaking! Select one of the ovals (preferrably the top one, which should be the first selected, but it doesn't really matter) and then choose the node tool. You should see the nodes the make up the oval as a series of grey squares or diamonds. If instead you see white squares and circles then your oval is not a path (you skipped the last paragraph of the previous section!) so press Shift+Ctrl+C to convert the oval object to a path.
First thing: look at the sentence description at the bottom of the window. If it says "0 out of 4 nodes selected", then everything is fine and you can skim over the rest of this paragraph. However for me, it says "0 out of 5 nodes selected". Wait a minute, five nodes? I can only see four! Well actually, there are five. In my case, three of the nodes are represented with squares; this means they are "smooth" nodes and in this case they are in the middle of the path. But in the right of the oval is a small diamond. A small diamond represents the end of the path, and in this case there are actually two ends on top of each other. This might be fine, but often I like my paths to be enclosed paths. To do this, we need to select those two end nodes (just drag the mouse to create a selection box over the two nodes). Then we need to join those two nodes; there's an icon to join two end nodes in the tool specific icon bar at the top of the screen (it's the fourth icon from the left, or just scroll the mouse over them all to read the tool tips). Or use the keyboard shortcut - Shift+J (check the Inkscape key listing HTML or SVG file for all the node keyboard shortcuts, they really help save time). Inkscape will turn the two end nodes into one cusp node, otherwise known as a corner node (more on these node types a little later). It should also change the small diamond to a larger diamond (the larger diamons represent cusps), although this present version of Inkscape is sometimes a bit sluggish in updating the node representations; it may still remain a small diamond for a while.
Remember: you can zoom to your selection by simply pressing 3. Learning how to quickly zoom in and out makes moving around Inkscape a lot easier. Use the plus and minus keys for zooming in and out, and the number keys for various types of zooms. 1 is for 100% zoom, 2 is for 50% zoom, 3 zooms on your current zoom, 4 zooms to fit your entire drawing to screen (handy as a generic zoom out), 5 zooms to fit the entire page to screen, and 6 zooms to fit the page width to the width of the screen.
Now we have four nodes in our oval, we have to make sure they are the right node types. There are four different node types in a path:
Additionally, the connection between two nodes can be defined to be a line or a curve. A line is just a curve that is straight; Inkscape modifies its defining vectors to purely have a direction but no length.
Before we start moving nodes in our slime body, we need the nodes to be the right type. We will leave the bottom node alone, but we will need to move the top one. This however will automatically adjust the vectors on the two side nodes, so we need these two nodes to be corner nodes, not smooth. For me, the right node is already a corner (as I just converted it from two end nodes), but the left node is smooth. In case both of your nodes are smooth, you can select both nodes at once by either dragging a selection box with the node tool over both nodes or holding Shift and clicking on each node separately. Then make both nodes corners by either clicking on the "make selected nodes corner" icon in the tool specific menu icon bar (seventh from the left, looks like a diamond node), or use the keyboard shortcut Shift+C.
Since I want to have a nice even shaped slime to begin with, we also want to make that top node symmetric. Just select that top node and click the "make selected nodes symmetric" icon (two to the right of the make nodes corner icon), or use the keyboard shortcut Shift+Y. And just for reference, the keyboard shortcut for smooth nodes is Shift+S. We'll probably be needing that one soon.
Now it's finally time to move that node! Zoom to a decent position (either use the plus and minus keys or just press 4 to zoom to the entire drawing if you have a rough sketch already drawn). Click the top node in the oval and drag it up to where you want it to go. If you just want to move the node vertically (which you probably do; it'll make the slime look nice and even) then hold Ctrl as you are dragging; it will fix the node to either the horizontal or vertical axis depending on where you drag the mouse. You should end up with a slime looking a bit like the picture below:
He's starting to look like the real thing now! If you made the fill slightly transparent you should be able to see the slime footprint through the body. But nice as the slime looks, he's a little bit pointy for my tastes. This easily fixed. While that top node is still selected, you can see the two vectors represented as handles. Select the circle at the end of one of those handles and drag away to make it longer. You might want to hold down Ctrl while doing this: that will force the angle to snap to fixed increments so it will be easier to keep the handles horizontal. Since we made this node symmetric both vector handles should stay at the length (even if Inkscape doesn't update the other handle you should see the curve of the slime body changing). Fatten the little guy up as much as you want. Here's what my slime looks like now:
Now he's looking like a nice, fat happy slime! If you want a nice symmetric slime you might want to leave the body at this stage; adjust the height and fatness to what degree you think is best and move on to the eyes. However to show you the next stage of node manipulation I'm going to make my slime slightly uneven and bumpy.
To make a bumpy slime, we will need more nodes in our slime body. The best place to put the nodes is on the peaks of the curve, so for our slime that would correspond to the tops of the bumps, and maybe the valleys between the bumps as well (depending how accurately we want to position those). The easiest way to create these new nodes is, while the node tool is selected, hold down Control and Alt and click on the path where we want the new nodes to go. I'll create two new nodes roughly over the top of where the bumps are in my sketch:
Note that the new nodes are defined as smooth, and their creation does not change the direction of the path at all. The slime body looks exactly the same as it did with only four nodes.
We don't need the top node anymore, so we can delete it. Just select that node and press Delete (make sure you have only that node selected! Otherwise Undo (Ctrl+Z) and try again!). When you delete a node Inkscape will by default adjust the length of the vector handles in the neighbouring nodes to match the position of the path. This can cause some changes to the shape if the nodes are not corners. In this case it does not matter so much that the neighbouring nodes are smooth as we will be moving them shortly, but it is something to consider when deleting nodes; you may need to make the neighbours corners at (least temporarily) before deleting. An interesting sidenote to keep in mind is that if you hold Control when deleting Inkscape will not adjust the neighbouring nodes vectors; this usually straightness out the curve which may be what you want.
Now with only two nodes on top, let's get the shape of his slime head correct by shifting those nodes into position. Just drag the nodes into about the right place and play around with the handles until you get the little guy looking the way you want. If you need to create some more bumps or have more control on the curves go ahead and create more nodes.
Here's my slime now. I added a third extra node on the right hand side to give it a more flowing look:
Now there's two components finished, you might want to play around with their ordering. You can change the ordering of the objects by selection them (with the selection tool that looks like an arrow) and using the raise and lower commands under the Object menu, or better yet using the PageUp amd PageDown buttons (raise objects up or down a level). Home and End move objects to the top or bottom of the ordering respectively. If you want to select an object that's behind another object, then hold the Alt button as you click; you will cycle through all the objects at that position.
You might want to see which ordering looks the best with the slime footprint. The main difference will be the colouring given to the stroke; if the stroke is opaque it should look the same colour if the footprint is above the body, otherwise it will be affected by the body fill. You might also want to see if turning off the footprint stroke looks better to you (use the Fill and Stroke dialog, select the stroke paint, and click the X for no paint). I'll leave my slime as it is for now, but it doesn't hurt to experiment while you are still learning the ropes!
Now the bulk of the slime is finished try toggling off the rough draft sketch to see what the slime looks like. The easiest way to do this is to click on the layer selection drop box at the bottom of the Inkscape window, select the draft layer (for me it's called "scribbles") and click on the eye icon to toggle the visibility of that layer (alternatively you can do all this in the Layers dialog window, Shift+Ctrl+L).
It's nice to see how the art is coming along as you add in each bit. You may want to keep toggling the draft layer on and off while working on the fine details: it helps when placing things down for the first time and to get the general position right but sometimes it gets in the way when doing fine adjustments.
Okay, we now have the blubbery body of a mighty fine looking slime! It's now time to start work on the little details. First off: the slime eyes!
There are a huge variety of ways you can use to draw cartoon styled eyes. It's one of the ways you can add a bit of individual personality or flavour to your characters.
Given the simple nature of our slime, it would suggest that we want something clean and simple for the eyes as well. You could go with the old plain staple of big black ovals. Simply use the oval tool to draw the eyes roughly in the right place, click on the black colour in the palette to change the fill to the right colour, open up the Fill and Stroke window (Shift+Ctrl+F) and turn off the stroke, and adjust their position until they're just right:
Fairly simple but works quite nicely with this slime.
Another popular adjustment to ol' "basic eyes" is to add some white oval "shines" using much the same approach as the black oval eyes:
We'll continue from this with a neat trick to make a different eye type by using some of the path operations for combining multiple shapes in a variety of different ways.. You can see a list of these operations under the "Path" menu.
This particular approach will use the Difference operation (Ctrl+-). I'm going to make the white shine ovals a bit bigger so the slime looks a bit like this:
Then select each eye and shine and do the Diffrerence operation (either select it in the Path menu or use the shortcut Ctrl+-). Difference only works when exactly two paths are selected, so you will need to do each eye seperately. This will cut out the position of the shines leaving a circlet for the eye.
Then select the eyes, use the colour picker tool and select the same colour as the stroke of the slime body (this is optional, but I think it looks better like this).
You will end up with a slime that looks a bit like this:
Now not only is Slimey looking like a slime, but he can look right back at you!
Now we have our slime almost done. The final stage is all the little touches that make it seem a bit more lively, such as shadows and highlights. Given that this is a tutorial I won't go overboard on the the fine details. Plus in this particular case, the character is drawn in a simple style that would be spoiled with too much glitz. However the basic tecniques for adding extra details are fairly similar to that of creating the main features. The trick is to know exactly what little things you need to add. I recommend looking at some of your favourite artists for some inspiration on how to make an artwork shine.
That being said, our slime does need a little something extra. I think some sort of glistening shiny effect would go well. I'll adapt a simple method for adding 3D shadowing effects and show you how to turn that into a shine.
We need to create a slither of the main body in order to create our effect. An easy way to do that with our slime is to make a copy of the body component and paste in place (Ctrl+Alt+V). Then choose the node tool and select our newly created body copy:
First, lets open up the Fill and Stroke window (Shift+Chtrl+F) and make this an appropriate colour. I think white with a significant alpha (maybe a third of fullly opaque) with no stroke will work well (if this were a shadow, we would be using black instead of white). Notice how the white shape covers some of the stroke of the slime body; that won't be a problem in the final version, but it's something to consider if you are doing shadows (although if you are using a black stroke border shadows will not affect that so much!)
We don't want the shine to cover the entire body, so we'll need to cut this shape into the subsection we want. We need to choose or create extra nodes on the perimeter of the shape we want. For my slime, the topmost node is already in a good position. I'll create another node a fair way along the left hand side of the slime (remember: hold Control and Alt and click on the perimeter with the node tool to make new nodes). Turn these nodes into corners (Shift+C):
Now delete those extra nodes on the right that we don't need anymore. Then select the vector handles of our new corner nodes and swing them up to make a nice curved shape for our shine like so:
We need to make a slight tweak to deal with the bump in the slime's "head". I'll create an extra node near where that bend on the left side of the slime's body is, then tweak it around a little to make the shine look like it's following the contour of the slime's body:
Not too bad. If our slime were a rock, we could turn that into a good shadow effect.
We've got the basic shape right. But the shine is a bit too big. But there's a neat way to adjust this. Under the path menu there are two commands called "Inset" and "Outset". Inset (Ctrl+() will lop off a virtual strip around the outside of a shape, whereas outset (Ctrl+)) will expand it by tacking a strip on.
To shrink the shine select it and then Inset and Outset it a number of times until you get it to a level you like. You might want to save the image or make a copy of the shine before peforming multiple insets and outsets, as the transformation process is not reversible (i.e. performing 5 insets and then 5 outsets may not give you the same path shape that you started with). You may also want to move the shine around slightly to move it away from the stroke border, although a few Insets will also have the same effect. Notice if you repeatedly Inset and Outset you will end up with a smoother shape that looks really nice as a shine.
For my slime, I've used Inset and Outset several times, then moved the shine into the right a little and resized it a bit, giving me this final effect:
Now that's a nice looking slime! If this were for a game I might want to experiment a bit with some of the node positions, but frankly I don't think we really need to do much more for this little guy; he's ready to be set loose in a forest or dungeon somewhere to try an avoid being set upon by marauding adventurers.
This slime might ba extremely simple; just a couple of shapes put together; but the process of constructing a more complicated character follows the same path. First research what you want to draw, then practice it, sketch a draft, block out the basic shapes of the figure, adjust them to fit, then do the fine details. The steps may take longer but the principle is the same.
I've tried to cover many of the basic techniques that I use for my cartoon style figures with this slime. Hopefully there's enough there to get you started on your own brilliant artwork. Remember that most of the fun comes from trying new things. If you've got a great effect you want to try out, go for it!
| Introduction 2: Introduction to Inkscape | Index | Tutorial 2 (yet to be completed) |
| Back to top | Last updated: 22nd September, 2006 by David Shaw |