Minggu, 11 Desember 2011

Back with a BANG!

I was asked to write a tutorial on explosions, which didn't seem that hard until I started... It's become common practice to use particle effect for most ingame explosions, so doing an explosion by hand was a bit of a challenge.

I stared out with a simple very generic explosion and took it from there, added to it and added some more. Let's start with the first simple explosion.

It's a fairly generic, cartoon style explosion - quick and easy to create [and animate - by scaling the elements and fading to either light or dark as the explosion progresses].

Usually blowing things up leaves more than just a flash of light. Dust and smoke clouds and debris are part of a good explosion. Let's add some of that.

This is still a very cartoony look. Let's try something a little less 'flat' and add some volume to the explosions.

This explosion is a bit more work to animate. You would start with a smaller light centre that would grow and add more circles to it that go darker as they reach the outside. The flash in the centre is just that - a flash - don't keep it on for too long or it will look more like a light source than an explosion. As this explosion dies down the dark circles would go grey and black, shrink and fall apart [either by imploding or falling to the ground].

As this is way too much fun - let's try another one. Similar to the last one but a little more compact, detailed and with some shading.

I hope you enjoy this one as much as I do... It's just too much fun to blow things up in style and I have to stop myself now and try and catch up with work (before writing the next tutorial that's already playing havoc with my imagination).

Have fun and as always let me know how you go with the tutorial.

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

USD 5.00

Add Comment

templates-office.com

Minggu, 04 Desember 2011

Time out...

Just a quick update to the blog - the next couple of tutorials are in the pipeline but won't be up for another few days.

In the midth of house cleaning, gardening, pondering about writing a book and trying to get some work done, my body decided to take a time out and I spent the better part of the weekend in bed totally depleted of energy, reading books, playing with the ipad and just taking it easy... and I have to tell you - I could get used to that... ;)

Add Comment

templates-office.com

Rabu, 30 November 2011

The Clip Tool - revisited

I had a few questions about the clip tool - as it's a little bit of a pain in inkscape and not the easiest to handle in Adobe Illustrator either.

I use clipping masks a lot as you can create shading and patterns inside objects qucikly and still keep the shapes - while a path intersection destroys the base shapes.

I made this set of tutorials for Inkscape, Adobe Illustrator and CorelDraw. I prefer the ease of CorelDraw over the other two - with Inkscape lacking some key features to make working with an essential tool like clip masks easy on the user.

Let's take if from the simple shaded ball to something more complex (e.g. a cartoony plane I just did for another tutorial). In order to do the shading on the body (the darker blue part at the bottom of the plane) or the white stripes, you have to create intersecting shapes to cut the white stripes or the lighter body to match the base shape.

It's a lot quicker and easier to create the clip mask and 'throw' a shape in there - even more so when the shapes get more complex (e.g. a floral pattern on wallpaper) - and it allows you to 'undo' the action and release the clip again.

Note:

Doing clips inside clips is not possible in inkscape as far as I know [but I might be wrong]. In order to work around that problem try and use the Path/ Intersection tool to create a shape matching inside a base object.

Note:

Once you have created a clipart you can work with the objects inside the clip art just like any other object in Illustrator (e.g. arrange to bring them to the front or send them back inside the stack of objects in your clipping mask).

Even though things might be a little easier to achieve in the other programs Inkscape allows you to achieve the same results with a little bit of patience and trial and error.

Good luck and enjoy your vector bending.

Note:

The toolbar of CorelDraw and Illustrator might have changed slightly as I am not up to date on either program. I am still using CorelDraw14 and Illustrator CS.

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

USD 3.00

Add Comment

templates-office.com

Senin, 28 November 2011

Making materials: wood

Another quick request tutorial [and there will be more incl. animals, weapons and explosions]. This time it's on wood grain and the colours to chose for you wood material.

To get a semi-realistic colourscheme to start with I searched on the world wide web for some reference image and decided on a light wood image that I liked.

Here is a sample of a game I am working on that uses this sort of technique.

Enjoy!

Get the source art (svg file) (not including the art files of the pirate sample) of this tutorial for

USD 3.00

Add Comment

templates-office.com

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.