Minggu, 27 November 2011

Tank Tutorial

Here's a quick tutorial on a cute and cartoony tank requested by one of the members on a game development forum.

Note:
When you scale in Inkscape holding SHIFT+CTRL down allows for the ratio of height to width to stay intact - which is rather helpful at times...

Remember to keep moving and overlapping parts separate when exporting to bitmaps - eg. keep the barrel in a separate image file from the body in order to manipulate it via code later on.

Note:

Animate the tank by rotating the wheels and move the tracks along by modifying the nodes of the track shape. Four or five different images of the wheels and tracks should be enough for an animation.

One of the key elements to speedy art creation is reusing elements you have build earlier (e.g. the tanks headlines might look really good on a vintage car as well or the cogs can be part of some clockwork).

Enjoy and keep those vectors bend.

Get the source art (svg file) (includes the cartoony and more realistic tank) of this tutorial for

USD 5.00

Add Comment

templates-office.com

Jumat, 18 November 2011

Lightning strikes

I had a request for an electricity effect/ lightning strike and think I found a rather quick and simple way to do it in Inkscape.

With a some additions it turns into a night lightning strike.

If you want to animate these I suggest doing the lines first and altering a copy of the line shape in a new layer [see the animation tutorial for this]. Animate the shape roughly and not too similar. After creating a few variations of the lightning strike start with the conversion to paths.

It's a lot easier to adjust a few nodes on a line than twice that many or more in a shape.

I hope this quick tutorial is helpful to some.

Get the source art (svg file) of this tutorial for

USD 3.00

Add Comment

templates-office.com

Senin, 14 November 2011

Character Animation...

I should state that this is just one way of doing animations. It's very similar to old school cut out animations. It's not as fluid as hand drawn animations or 3D work but it's a straight forward and somewhat easy to follow approach. It works quite well with small size sprites.

Creating the [soon to be animated] caveman

It's pretty much the same process used in the tutorial's 3rd part with some added complexity in the facial features.

Note:

I mirrored the limbs in the image above just to show the 'exploded' body setup. There is no need for that when you use the elements in a side on view [both feet should point in the same direction].

Note:
Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.

Animating:

If you start out animating it's helpful to go with some more basic animations first - there is nothing wrong with the 'mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move' but it might be a little frustrating to start with.

Think simple and create something you can use in your game. This way you keep motivated and focused.

Note:

It's always helpful to check out references, poses, animations and other tutorials. A lot of the reference will show you a simplyfied setup that makes it a little easier than working off memory and your own experiences.

First steps (quite literally)

This is a scaled down version of what the walk cycle looks like:

Note:
This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

Get the source art (svg file) of this tutorial for

USD 5.00

Add Comment

templates-office.com

Minggu, 13 November 2011

Creating more characters...

I am still working on the animation tutorial but thought I post some characters that happened on the side while creating the tutorial...

Add Comment

templates-office.com

Jumat, 04 November 2011

Cracking up

Here's a quick post on how to create the crack in the office window tutorial. It's basically a quick use of the straight line and bezier curve tool and some moving around of nodes.

Note:

Combining the spiky shapes (Path/ Union) cleans it up a little bit more - as you won't see the overlaps. Keep in mind to combine two objects at a time in inkscape.

I hope this quick tutorial explains the creation of the crack well enough.

Get the source art (svg file) of this tutorial for

USD 1.00

Add Comment

templates-office.com

Kamis, 03 November 2011

Creating a basic face

Taking the last post a little further this tutorial will feature a basic face by using mainly circles (again), some more advanced straight line tool and the node modifier.

With the inital setup done it's time to play with the shapes and try out some variations.

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

Get the source art (svg file) (does not include the facial variations) of this tutorial for

USD 5.00

Add Comment

templates-office.com

Selasa, 01 November 2011

More fun with circles

I just played around with more circles and a different approach to the eyes from the first tutorial... as well as using the bezier curves and straight line tool for some simple shapes.

Variation is the key. You can use the elements to form all sorts of critters.

As always - I hope you enjoy this tutorial and I hope you have more fun with vectors...

Get the source art (svg file) of this tutorial for

USD 3.00

Add Comment

templates-office.com

Kamis, 27 Oktober 2011

Creating a game character

Let's get started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation - most of which written by and for artists and animators. I will try and break in down to simple elements and easy to follow steps.

Note:
Some of the techniques used in this tutorial have been covered in earlier post. They should help you working your way through this a little bit more complex tutorial.

It's time to start getting creative. Building a character from scratch we start with the head and create the body and limbs before assembling the elements into the final figure.

Note:

When working from a sketch, scribble or concept drawing it's helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/ Add Layer or SHIFT+CTRL+N). Bring up the Layers (SHIFT+CTRL+N), select the sketch layer and import the bitmap. Lock the layer and select the work layer (e.g. Layer 1).

In order to make it easier to animate the character later grouping elements and assigning better pivot points is really helpful. Rather than turn an object like an arm at it's centre it makes more sense to turn it at the shoulder. In order to do that, select objects that 'belong' together and move the pivot points.

This concludes the creation process. Now it's time to go in and play with the shapes, create some variations and make the most of the objects we have created so far.

I hope you enjoyed the tutorial so far. Have fun with vectors and stay tuned for the next post 'Taking on animation in inkscape'.

Get the source art (svg file) of this tutorial for

USD 5.00(only includes the main character created in the tutorial plus the 'king scene')

Add Comment

templates-office.com

Sabtu, 22 Oktober 2011

Quick tutorial on the stamp shape

During the beach tutorial I created stamp border for the illustration. Here is the step-by-step on how to get there.

Note:

The reason for ungrouping and combining the circles first lies in the restriction in Inkscape to only do a Union, Difference, Intersection, Exclusion or Division between two objects.

Tools like CorelDraw can do these with a group or even just several selected objects. Try around around a little see how your vector application handles these very handy commands.

Add Comment

templates-office.com

Kamis, 20 Oktober 2011