"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

buy

16 comments:

  1. very good ones :) medivel theme next ? :)

    ReplyDelete
  2. greeeeat, beautiful island graphics!

    mirex

    ReplyDelete
  3. 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

    ReplyDelete
    Replies
    1. 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. 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
  4. 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!

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

    ReplyDelete
    Replies
    1. 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. Chris,
      thank you for your comprehensive answer.

      Delete
  6. I'm unclear on how to clip the rays (keep them inside the background rect). I duplicated the background rect, then have it positioned above the rest. How can I then select the newly duplicated rectangle and the rays (the rays will be obstructed by the rectangle as it sits on top of the rays)?

    ReplyDelete
    Replies
    1. The rays would overlap the rectangle - otherwise there is no use in clipping them. Click on the overlapping parts - even if they don't show (white on white) - and while holding shift click the rectangle. With both elements selected set the clip.

      Delete
  7. Hey man, awesome work with tutorials! greatly appreciated. As I'm obviously little slow :) I can't figure out the first steps how you do the gradients. Duplicating base Orange/yellow rectangle and then edit gradient :( Would you be so kind to explain please?
    thanks
    Uros

    ReplyDelete
    Replies
    1. Hi Uros. To create the orange to blue gradient (rather than create a new rectangle that would need to be aligned to match the base shape) I just duplictated the first rectangle and scaled the height down to half the first one. That way it is placed correctly and all you need to do now is edit the gradient to go from orange to blue to make the water.

      I hope this explains it well enough!

      Delete
    2. Yes it does. Thank you very much! Keep up the good work

      Delete