The Bullet Animation – Vector Graphics

In my previous post, I showed you how I sketched up my characters to bring them into a digital format.

The problem is that they were still unsuited for animation in Synfig. I had to convert them from raster images into vectors. But how? Enter Inkscape stage left (inkscape.org). I had downloaded this on a previous occasion, toyed around with it and put it away because I had more pressing, important issues to attend to. Work is like that. Anyway, I’m happy I revisited it because it’s the bee’s knees. It can convert bitmap images into regions for you, it can apply paths in layers, it can fill with gradients and stroke with different styles, and you can even muck about with opacity and geometric shapes and…

Awesome, so…

So, I inserted the image into Inkscape as a layer, with the result as shown. Yeah, it looks scrappy, but it does get better. Working over the lines into paths, I traced over the top of the lines. Then I noticed that Inkscape has a layering facility. A bright idea struck me (I still have the mark) and I worked at breaking up the image into logical parts.

AssassinVector1After a couple of faces, I got into a pattern of figuring out all the different layers and regions of the eventual picture and added each of these as a separate layer. So, in the example of the Assassin here, there’s the hat, the glasses and his coat, along with the scarf. Furthermore, he has skin and hair and, on the skin, he will have skin in shadow and skin in light (Think old school, silver salt photography).AssassinVector2

The skin will appear underneath the hair and the hair underneath the hat. Get the idea?

With each of these as layers, it was then only a matter of sketching out the relevant outlines over the top of the picture to create paths. These can then be drawn and/or filled however you wish. To make life easier, I set the opacity of each layer as 50% so I could still continue to use to the underlying sketch as a guide.

I recently discovered that I could achieve the same thing if I locked the sketch layer, placed it at the top, and set the opacity of that layer to 30%. Eh, Pot-ay-to, Pot-ah-to. Got there in the end.

I chose not to have an outline on the regions, preferring instead to let the colours do the work of definition. I like line art, but after a bit of experimentation having lines on and off and with different thicknesses, I opted to go for fill only.

Darn it, now that I look at that partially coloured sketch, I kind of like the scruffy black-lines and washed up colours. Kind of like water colours. Storing that one in the back of my head for next time.

AssassinVector3Continuing on, filling in layer by layer, I ended up with the images that I could then use within Synfig. I reckon I could’ve spent longer but I had time limits imposed on my venture. After all, I’m supposed to be writing Hampton Court Ghost.

These images can be exported as .svg files, and can be used as scalable vectors in a bunch of programs. InkScape has a bundle of really cool features that I haven’t had a chance to play with yet. I was going to get all fancy with some of the plugins I did get to play with (there are some really cool plugins!) only when I tried to import the resulting svg file into Synfig, there were some issues. For example, importing regions that had bits knocked out them, like doughnuts, came in as filled.

I’m not overly sure, yet I think there’s a slight disparity in Synfig when importing SVG files in the current iteration, but it’s not a show stopper. I’ll get onto the topic of importing into Synfig in a later post.

Neat, huh?

ForemanVector1There you have it. I repeated the process for my various characters,  even for the Tester (who didn’t make it into the reel) and ended up with the pieces that I needed, ready to go. This really was a neat way to get my faces ready for animation:

Oh, whoops! I made the Foreman’s hair too dark. That’s OK, just select the hair and change the fill, adjust the hue, the lightness, the saturation.

Drat! I made him too small! Not a problem, being a vector, it’ll scale up or down without any loss in quality.

Blast! I needed a larger chin, the hat’s too short, the eyes are all wrong, I want scruffier hair. All good, just grab the path tool and add, remove or tweak the points until you’ve got it the way you want it.

That’s one of the beautiful things about this: You can add more layers to add more detail, add more points to define a better edge or, conversely, remove points and layers to simplify and posterise. I got into a rhythm of defining small paths, using the union option to join the regions together, then simplifying the path to get to a more cartoon-like style.

Creating the slug and the shell of the Bullet was the easiest of the lot. Being geometric in nature, Inkscape’s path tools made short work of it. I added another layer for the casing, and created a couple of ‘shines’ but left the gradients to be added after I imported it into Synfig Studio.

In my next few posts I’ll go through how I approached animating the scenes, you know, the ones I did way back then, and some of the problems I came across.

The Bullet Animation – Artwork

In my previous post I spoke about how I was making an animation as a promotional video for The Bullet and I got as far as laying out the scenes and getting the timing right.

For each scene I needed to get something to animate. Pictures, right? Right. Back in the old days (did I just say that?) I used to use some software that came with the Genius Mouse that allowed one to draw, fill, cut, etc. With this I could sketch an outline on the screen using a bunch of connected lines, then apply a fill and, presto! Art! I could save them in PCX format and, well, that was about it.

Enough Reminiscing!

My first thought, when approaching the task of drawing, was to open up Paint and do pretty much the same thing. Paint has come a long way from its 3.1 days (unlike Notepad, but then Notepad++ fills that glaring void) so I wasn’t too worried that I’d be able to get something knocked up. After a couple of strokes, though, I realised that it wasn’t quite suitable for my purposes.

Why not? Because drawing a picture as a bunch of pixels doesn’t lend itself to scaling or rotating or shearing without a lot of pixelation or tearing. Not only that, I freestyle draw a whole lot better with a pen or a pencil than I do with a mouse. So I made a plan that I would draw my characters freehand, take a picture of them with my phone then convert them into some appropriate format. Which format?

Well it turns out that the format I chose influenced the style of drawing. After reading up on Synfig’s tutorials, vector graphics (as opposed to raster) is ideal for 2D animation since the images are a bunch of instructions rather than a bunch of pixels. Without getting all techo, the image can be rotated or scaled or pinched or whatever and it won’t suffer the same fate as a bitmap image. The other really cool thing about vector graphics is that they behave a lot like the old painting program I used to use: The image can be built up from a set of outlines or shapes (paths, I think the lingo is), give it a stroke and a fill and away you go.

So I put the mouse down and picked up my pencil, sat down at the kitchen table and drew the characters I was after.

Sketching

I had to search through a few books and online to find the right kind of face for the job. Then is was a matter of sketching it onto some paper, rubbing and scrawling and positioning the eyes until I got what I was after.ForemanRawSmall

I started with the Foreman, the dude with the cap and moustache, then went onto the Tester, the Courier (neither of which ended up in the final feature) and the Boss.

Before getting too far into it, I took a copy with my phone’s camera, transferred it over to the computer and opened it up in GIMP (www.gimp.org) to make it suitable. I desaturated it, increased the contrast and fiddled with the levels to get it into the form you see here.

So that meant I had a rough, digital sketch on my box. Yippee. Doesn’t look much, does it? It needs colour, of course, and refinement, and a solid tidying up. The chin isn’t a strong as I would like, the cap bulge isn’t in the right spot.

MerchantRawSmallThis is where the whole business of turning the image into a vector affects the drawing style. Why? Because I’m not sketching to perfection, I’m sketching to get an outline. I didn’t need to colour in the picture. I could have left the moustache unshaded, even though it helped visually, since, when I make the moustache as a region, I can colour it any way I want. As you can see from the sketch, the hat has some rough shading, the chin is darkened, the hair is filled, all unnecessary.AssassinRawSmall

So when I got back to making the others, I concentrated more upon the outlines of the elements within the image, and the region of shades.

The Merchant, the bald guy with the awesome chops, has his features marked out like the Foreman does, but there’s a line running from his chin, weaving up past his nose and around the left side of his head, marking a region of shadow or darker skin. I shaded his chops to help out with the visuals for later, but, again, this was unnecessary.

ClientRawSmallThis is even more pronounced in the Assassin, with the glasses and stovepipe hat. You can see his hat just has a rectangle marked out for the ‘shine’, and his scarf and collar are outlines only.

By the time we get to the Client, it’s all outlines and regions. No facial hair for him. Just a warm cloak and a decent hat. That’s the kind of guy he is.

So, to wrap up, I sketched out the characters that I wanted on paper, photographed them, downloaded to my machine, stripped the colour and increased the contrast to get a set of outlines that I could use for the next step.

Stick with me. In my next post I’ll go over how I converted these images into vector graphics that I could then use in the animator.