"Life is too short to make bad art."

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]