2D Game Art for Programmers: Staying in shape... the Clip Tool...

"Life is too short to make bad art."

## Thursday, October 20, 2011

### Staying in shape... the Clip Tool...

In line with the water theme let's go ashore and look at a sunset on the beach to introduce some more helpful tools and techniques.
This is our basic 'pop style' sunset with some modified circles and gradient alpha fills added to represent some rocks in the water.
It's time to add some palm trees for the tropical feel.
One of the 'wonderful' things about working with vectors ist the scalability. Objects can be scaled up and down without loss, allowing for easy editing and adjusting of the illustration.
In this case the scale of the palm trees will define the viewer's perception of distance. Smaller palm trees will put the island further in to the distance while large trees will 'bring' it up close.
Btw. the clouds are the same shape as the island just squashed and coloured in a colour matching the sky gradient. Try reusing shapes even just slightly modified, recoloured, squashed, rotated or flipped to speed things up, add variation and make your scene more interesting.
Note:
A lot of the objects I am covering in my tutorials (like the palm trees above) working from predefined shapes (circle, square, star, etc.) is only one option. The freehand or straight line tool will create identical shapes but require a little more artistic skill.
For our detailed palm we need two 'more advanced' features of inkscape: Interpolation and Path Effects.
Varying the fronds, adding to the interpolation and checking some reference images can improve the look of the palms even further.
Recycling objects
If you have similar screens to design for your game it makes sense to spend some time on the initial elements and then 'recycle' objects. This way you safe time and create a more consistent look and feel.
I hope even these slightly more advanced features don't pose too much of a problem. Enjoy and stay tuned for more!

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

#### 11 comments:

1. Kamalesh November 24, 2011 at 4:41 PM

   very good ones :) medivel theme next ? :)

   Reply Delete
2. Anonymous December 18, 2011 at 4:46 AM

   greeeeat, beautiful island graphics!
   mirex

   Reply Delete
3. Vidmar Fernandes January 14, 2012 at 9:13 AM

   Simple and awesome!

   Reply Delete
4. Matt April 1, 2012 at 12:58 PM

   Chris, I'm really impressed by your tutorials, they have helped me figure out how to use inkscape to create some really great graphics, thanks so much! I'm trying to follow this tutorial and I'm a bit stuck on the part when creating and duplicating the rays where you say: "Narrow the base and set the pivot point to the bottom center", I can't figure out how I set the pivot point of the rectangle, greatly appreciate your help and your tutorials.
   thanks,
   -Matt

   Reply Delete
   Replies
   1. Chris Hildenbrand April 7, 2012 at 8:54 AM

      Hi Matt.... It's just another click on the object (the handles turn from scaling to the rotation) - in it's centre you will see a little cross (this is the marker of the pivot point). You can move it by clicking and holding the button pressed.

      Delete
   2. mpalmerlee April 10, 2012 at 2:59 AM

      Thanks so much Chris! Now that you explain that it seems so obvious, but I couldn't find any tools or anything online explaining how to do it.
      Now I can finish off my landscape, thanks again!
      -Matt

      Delete
   Reply
5. Blitzy May 14, 2013 at 5:02 AM

   thanks for the great tutorial Chris! Will you have time to make more tutorials about drawing game backgrounds? Like backgrounds with houses, locations within the city :)
   thanks man!

   Reply Delete
6. Anonymous February 27, 2014 at 7:13 PM

   Thank you

   Reply Delete
7. :D June 26, 2014 at 7:10 AM

   Could anybody tell what post-effect was used in last post stamp?

   Reply Delete
   Replies
   1. Chris Hildenbrand June 26, 2014 at 4:52 PM

      I used a grunge bitmap image to 'dirty up' the clean vector illustration. It's added afterwards in gimp with the shape of the stamp functioning as a mask for the grunge layer.

      Delete
   2. :D June 27, 2014 at 12:57 AM

      Chris,
      thank you for your comprehensive answer.

      Delete
   Reply

Add comment
Load more...

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)