"Life is too short to make bad art."

Monday, September 15, 2014

Top down - extras 2 - tank

Here are some requested addition to the top down view tutorial.

A nice big tank with a separated turret. Just make sure you adjust the shadows - as they are created for this view only. 

The objects are also separated into two PNG files. 


download the ZIP

Saturday, September 13, 2014

Rocks - quick and easy

Another quick tutorial while I am still reworking the space tutorial. This one is another request - how to create rocks, that don't look like clouds. 

The common mistake when creating shading is using 'pillow shading', where the shading is same in all directions, same amount of darkness and distance to the edge. It will look smooth but unbelievable for anything harder and more edgy than clouds or pillows. 

In this tutorial I use three different styles of shading:
- shading through interpolation, 
- shading with lighter and darker shapes [cartoon shading] and
- shading using transparent gradients

I forgot to use the easiest of all for the rounded rock, which would be a radial gradient. Gradient shading [linear or radial] can be very effective but tends to look off as soon as the shapes become more complex.

Let's get started with a simple rounded rock, pebble, boulder, whatever you want to call ti. 

For the veins I used the freehand draw tool, with a white stroke that I ended up putting into a clip to match the shape of the pebble.

Another shape commonly used for rocks is a lot more edgy and clear cut. I worked mainly with the straight line tool for this one. You can also start with the square, make it a path and add nodes to it, if you find that approach easier. 

I hope I made enough sense for you to create rocks on your own now and enjoy doing it.

Saturday, September 6, 2014

Treasure - not found but made

Here's a quick tutorial I found unfinished on my hard drive and decided to finally finish and publish - creating a treasure chest.

It's a task most of us, who create game art, face at some stage - the iconic treasure: a chest filled with gold coins. 

Exported to PNG the chest still looks alright in 64x64 pixels or even smaller at 32x32 pixels:


You might want it to look a little less 'square' and what good is a treasure chest when we can't open it.
Let's tackle those issues now. The first one involves the envelope extension and the opening requires some tweaking of nodes. 

The result looks alright at 64x64 pixels but it starting to be cluttered and losing detail in the smaller 32x32 pixel size. I would have to take some elements off to make it cleaner.


I hope you enjoyed this one as much as I did writing it. I actually used similar chests most recently in a puzzle game for a friend. 
Keep playing with the concept, create chests with iron frames, spikes, skulls, holding diamonds and rubies or being plain empty or broken. Enjoy!

Here's the download file:

Wednesday, August 20, 2014

Space Ship - next step: shading

The next step in the creation process is the shading. Let's start giving the silhouette some volume, defining the layers of the ship (which parts are on top of others, which ones cast shadows, which ones get light, etc.).

The interpolate extension is sensitive to the selection of the objects. The first selected images will be below the second image. 

It's a very helpful extension and if you have not used it in the past, this is a good time to start playing with it. 

For the best possible results keep use a duplicate of a shape as your target shape and alter the nodes (without adding new ones or deleting nodes). As long as the two shapes are that similar the interpolate works great. 

If the interpolation starts to go 'round' and 'curves' the lines, make sure you set the interpolation method to 1 in ther interpolate popup.

You can also go wild by interpolating totally different shapes for some rather interesting results. 

The more complex your shapes are the more chaotic the interpolation will turn out. Play with the extension and see what happens. 

Let's head back to our space ship design (before I get off track completely and start writing about something different altogether).

Creating these assets keep in mind that you can reuse elements that look good for other ships later on.

Assembled back into the starting shape it will look something like this but there are lot's of other variations possible with just those 6 shapes.

Now it's up to you to fire up Inkscape, copy, interpolate, shade, break, design and have fun!

Sunday, August 17, 2014

Space Ships - outlook

I couldn't help myself and started playing around with a few of those shapes to see where it can lead when I add some shading, colour and detail. 

Here's one of the ships taken from the tutorial:

It's still vector shapes and you could make it smoother and lose the vector feel by adding softer shading and some dirt and grunge overlay in the bitmap tool - but that's a task for another day.
Once scaled down to a more game friendly size those edges tend to disappear:

Space Ships - starting with the design

Let's get started with the requested tutorial on space and space ships. I have to admit it took me a little longer than expected and half way through writing this tutorial I decided to change the approach as I found myself getting lost in details. 

Rather than putting the focus on the shading, material structure and detailed look of body parts for the space ships, let's start by defining a good shape first. One way to do that is by sticking to the silhouette and just working with black shapes.

This approach is frequently used for all sorts of concept designs from creatures to buildings and even animation poses. A good silhouette makes for a more intersting and recognizable design. 

For the ship design I start out with simple shapes, mainly rectangles that get deformed by moving some of the nodes. 

Usually you would try and build a design that is unique for special group of ships [e.g. a race or fraction] not just a single one. There would be different ships in a fleet which should be identifiable through their design.
Keep certain characteristics e.g. rounded shapes or long wings, extended tails or huge propulsion systems on one side of the ships.

I will take the ship design and add colour, shape and detail in the next tutorial.


I kept the images in a larger size for a change. It might take a little longer to load but you get more detail.

Friday, July 11, 2014

Bubblr - another great use of the BlockBuddies

I know I should be posting a new tutorial but instead I am showing another great sample of using the BlockBuddies Zombie set and the free Dummy. 

Bubblr - Dummy Trouble (FREE) is the work of Heavily Loaded Games from Germany.

The dummy is jumping around the platforms and has a soap bubble-cannon and can 'bubble shoot' zombies. He can also use other weapons to shoot fireballs or fire cannons.
Get extra items by neutralizing multiple zombies in a short time.

bubblr is an addictive 2D arcade bubble shooter, jump and run platformer and will put your reaction skills to the test!

Follow bubblr on facebook.

I hope you enjoy this game as much as I liked working with Andre to make this game shine!

Bubblr - the jumping Dummy in Trouble (FREE)


in app purchasing for dual-play-mode

Sunday, May 25, 2014

SpaceShip - ideas

I have been working on the requested tutorial about space, spaceships and sci-fi and thought I will post a quick status. It's just the first bits and pieces. The idea is similar to the guns and rifles tutorial - breaking up the spaceships into smaller, easier to create elements to build a 'spaceship construction kit'. 

I put together the first ships from a limited set of 'element'.

Let me know what you think.

Monday, May 12, 2014

Creating diamonds - in a quick and easy way

While still busy with a lot of other projects at the moment and a little bit stuck with the special tutorial on space / spaceships / galaxy backgrounds and the likes - here's a quick requested tutorial. 
I tried to make it as simple as possible, yet look somewhat convincing. 

One very helpful functionality for this tutorial is the snapping of nodes [%]. It allows you to snap nodes to other shapes [their nodes as well as their lines]. This makes it a lot easier to adjust the shapes we will create to stay inside with the facets of the diamond. 

This is the quick and dirty way. The lights and shadows of a diamond are somewhat more complex. 
If you want to go more realistic, check out reference images, look at the way the light breaks and adjust the white gradient shapes. Some might need to darken the stone rather than lighten it.  

I hope you have fun with this and maybe try out some other stone cutting shapes. Remember google images is your best friend when it comes to finding reference images or just to check if your idea of how it should look resembles the real thing. 

I hope you enjoyed this one as much as I did finally writing something useful again.

Here is a quick test with a little bitmap magic, added layers for shine, a bit of star-burst and smaller sparkles.

Here's the download file:

Tuesday, May 6, 2014

Yarrr! - BlockBuddies in Action


Philippe Simons from Volcano Mobile used the Pirate and the Zombies from the BlockBuddies for his game 'Yarrrr!'.
I added some matching UI and background elements to the game). 

It's a nice example of what can be done with the characters in a mobile game. 
Here are some screens:

and some video footage:

I hope you get to enjoy it as much as I did doing the art!

Don't ask me about my score - it's so bad that I don't dare telling. I wonder if I am now not just a 'bad player' but also an 'bad, old player with reflexes that show my age'... :)

Tuesday, April 1, 2014

Google hangouts...

I just saw a google hangout chat request for what I think is the very first time... I usually check my mail via Gmail and use hangout on my work PC. Tonight I was checking on my iPad and out of the blue all these pending hangout requests popped up. 

I profoundly apologize to all those whose questions and comments have been left unanswered... It looks like I will have to sit down tomorrow and write a lot of well overdue replies... :/

Monday, March 24, 2014

Creating depth through layers

This is a tutorial answering a question I received after the trees post. It's about creating depth in your background using blur and transparency. It's a joined Inkscape and Gimp tutorial. 

We start out with a simple 4 layer background scene. A gradient sky and three planes of rolling hills with a few trees. The Inkscape file to this tutorial can be found here. When creating your own scene make sure you change the colours slightly to make the planes stand out and be distinguishable. 
You can create the blur right in Inkscape by using 'Filters/ blur' and then e.g. a motion blur. In the filter properties you can set the effect parameters. Setting them both to the same value turns the motion blur into a even blur. 

I personally prefer the 'cleaner' approach and keep the vectors non-blurred and do the effects in a bitmap program for better control. 

Open Gimp or the bitmap editor of your choice (as long as it allows layers) to stack up the bitmap layers.  

When using more layers like in the purple example the furthest layers in the background will have the highest blur values and the lightest colours (you can even work with transparency here and make the blend into the sky/ background). 

This workflow does work for all sorts of layered/ stacked backgrounds - not just trees and hills. You might want to try it with skyline, houses or an industrial complex with lots of pipes. It should make for a cool effect. 

Monday, March 10, 2014

Thank you!

I just wanted to say 'Thank you!' for all the positive feedback I have received over the years. It makes my day to see that the tutorials, ramblings and images are helpful to you and is better than my much needed morning coffee to start the day.  

Tuesday, March 4, 2014

Details and variations - trees

One of the common problems when I am asked for feedback on art is the lack of variation. There is one stone tile, one grass tile, one tree and they are repeated again and again in a level.
The big advantage of doing vector art is the ease to create variations by rearranging the shapes that make up new object.

For this tutorial I picked a tree as an example of what you can do with detail and how to create some simple but effective variations. One can go from very simplistic / minimal to very complex and detailed and both have their uses. 

In general more detail and variation makes for a realistic look and feel.

In the sample images I set the colours of the ground first and use the colour picker to assign the same colour to the trees.

The more detail and variation you add to the tree to more interesting and realistic it will turn out. 

I like to create 'clusters' of objects - eg. take a few leaf objects  and group the in a bunch - pointing different directions. Duplicate the group to place a lot of leaves a lot quicker. By mirroring, rotating, scaling and overlapping the groups they will look less like the same object. 

I hope you enjoyed this. It's a great subject to play with and create unique trees and variations of trees and other vegetation quickly and easily. 

Here are some free trees from the tutorial above.
download the zip archive 
(containing 5 trees as png images and a svg file) 

I continued to play with the trees and made some more detailed objects and variations as well as some odd shapes to make trees off. It's in the special tutorial No2. pdf. 

This tutorial is a 16 pages long PDF step-by-step creation of the more trees. It focuses on variations to make your scenes more interesting. 

The PDF can be opened in Inscape (or other vector tools) and the shapes are fully editable. 

You can use the art in your personal and commercial projects as long as you don't sell the art as is or in a bundle. 

get the PDF for 0.99 US$

Saturday, March 1, 2014

BlockyBird - take some blocks, add a few more and then some more still

Sometimes you have projects that are challenging in a unique and unexpected way that's pushing the limits of what you do - and that's a GOOD thing. 

Last week I came across one of those when a good mate of mine at Utopian Games showed me his concept for a quick game to be made for iOS and Android.

He needed some art asap to flesh it out and it did look like a fun Saturday morning project.  

The parrot he had made consisted purely of rectangles, plain and simple but with it's own unique charm.
'We should make the whole game look like this.'

I should have known right than that it wouldn't be as simple as it looked. I have done a lot of pixel art games in the past but the thought of pixeling for retina displays was just not feasable - not for a quick weekend project. 

So it would be 'somewhat of a pixely look' but with rotations of the rectangles and some added transparency. 

The bird itself was the easy part. I did rebuild it in no time and animating a blocky parrot was not much different than any other vector shaped object. A bit of scaling, skewing and rotating and it did look like it somewhat of a wing flapping flight. 

... but making a whole game using just the rectangle tool was a different challenge. There are so many other nice tools to work with that make things like palm trees and vines for the jungle a lot easier and faster to create. What about the logo/ title and the text elements like 'game over' - I usually rely on a nice font for those. 
No - it had to be rectangles all the way.

Starting with the background and a nice sunset gradient and adding some clouds and mountain shapes. 45 degree rotations even made the trees look somewhat like trees. The palms and ferns are a different story and ended up looking like this: 

A few minor variations [scaling and rotation and some colour changes to make the objects lighter the further they are away] and it looked like an 'odd' jungle. 

Some ingame objects later (mainly the snake - done once, animated and recoloured afterwards) the background looked like a proper game mock:

Staying true to the style I even redid the facebook, twitter and a game centre button to be added to the game over screen: 

The larger texts for the title and the game over where created by changing the numbers I had created before (e.g. the A is the 8 minus the bottom horizontal line). As you might have guessed - at the end of the day I was seeing things in blocks, ended up dreaming of blocks and was more than happy to use the circle tool the next day. :)

We (Darren of Utopian Games, Ben - the musician - and myself) got it done though (in a little over a weekend) and it's out for free:

I have to confess - I totally suck at this game. My 'all time highscore' of a meager 15 makes me realize that I am a game artist with a passion for games - but not a gamer. I hope you enjoy it!

[Note: Apple usually takes a little longer to approve the games for the itunes store - I will add the link as soon as the game got approved]