Pages

Continue the fun with squares

The second tutorial works the same way - this time using squares:






The outline version still looks somewhat messy but it shows that the whole scene is made up of nothing but squares and deformed rectangles.



This concludes the second post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with inkscape, gimp & co.

...and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.



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

buy

Chris Hildenbrand

2D game artist, pixelpusher, vector bender, face turner for over thirty years. I worked on more games than I can remember... The most recent release is "Super Crossbar Challenge" for iOS (Android coming soon) with Shattered Box, Fredbear Games and PlayPlayFun.

26 comments:

  1. Hey, in the final image of the ground the pieces of rock have some kind of shadows how did you did it?

    Thanks! great articles btw keep em coming!

    ReplyDelete
  2. I made a duplicate of the shapes, moved them down just a little and behind the actual rock shape and colour filled them with a slightly darker dirt shade.
    As for the highlights, they are also a duplicate, scaled down just a little, filled with a very light yellow and set to ~opacity% alpha. Then I mode the nodes in the bottom right of the shape upwards to create a highlight that's just narrow shape on the top of the rock shape.

    ReplyDelete
    Replies
    1. how many times? two times duplicate? for highlight and for shadow?

      Delete
    2. Yes. I created two duplicates, one for the shadows (placed below the rock shapes and offset a little to be bottom) and another version that I tinted a little lighter and deformed by moving the bottom nodes upwards to create a highlight on the top edge of the rock shapes.

      Delete
  3. Great tutorials! Thank you so much.

    I'm struggling w/ the highlights part - a simple step by step to create highlights would be amazing.

    Thanks so much and keep them coming.

    ReplyDelete
  4. Hi :), first let me tell you that I love your tutorials, they're really easy to follow, especially for me that I just started in this.
    I tried to make the wooden boxes that you teach us here but I'm having trouble making the little silver balls in each corner, no matter what I try they just don't look as good as yours :/.
    Could you make a tutorial explaining how to get that silver effect? See you soon and I'll be waiting for more tutorials!

    ReplyDelete
  5. hey your tutorials are amazing i am currently working with these love from Latvia

    ReplyDelete
  6. Hi,
    I just wanted to that you for the tutorials. My and art has never been friends until now. Very easy to make pretty good looking things. Thank you!

    ReplyDelete
    Replies
    1. such english, much wow

      Delete
  7. you my friend are a genius!!

    ReplyDelete
  8. Amazing tutorials !! Thanks a bunch !

    ReplyDelete
  9. Hi Chris, Is there a way to determine the lighter color for the highlight? What color format are you using to determine the highlight color?(RGB,HSV or maybe something else). Sorry for the bad english and I,m completely new with this so sorry if this is a stupid question.

    ReplyDelete
    Replies
    1. I use RGB most of the time and there is an easy way to create shadow and highlight colours if you are not sure what to pick.
      Create a shape in your base colour and then add smaller shapes overlapping this base shape with changing opacity levels.

      Delete
    2. I had to try this one out and made a quick tutorial about it... :)

      Delete
  10. I just want to tell you that you are awesome! Love this site!

    ReplyDelete
  11. You are amazing. Please keep it up!

    ReplyDelete
  12. Hi

    Just to share that I published 2 new HTML5 games using techniques that I learn from your tutorial. Thank you very much. I still need a lot of practicing though. When will your new tutorial is going to be published ? :)

    http://tumira.byethost7.com/MunchieBob/
    http://gila2games.com/mobile/timmysgems/



    ReplyDelete
    Replies
    1. Nice work... I am glad my ramblings help... and I apologize for the delay... I have been sidelined with health issues last year and have been flooded with work since... but I will write the next tutorial soon.

      Delete
    2. Hey, Ahmad! I really enjoyed MunchieBob! But the controls for timmysgems was a little troublesome. The up and down didn't seem easily controlled. Still really cute and fun. It's more than I can do right now, but I am learning! Good luck and keep up the good work!

      Delete
  13. Hi!
    Your tutorials are really great! I've just got one big question: I'm completely new to Inkscape. And my colors look aweful! Yours look much more cartoon-like. How do you do this?

    ReplyDelete
  14. So grateful for this, thank you

    ReplyDelete
  15. one of my Favs . I enjoy going back to your initial posts!

    I’m wondering how to turn the square 45 degrees? other than turning the thing with my mouse is their a better more accurate way? thanks when someone replies

    ReplyDelete
    Replies
    1. try holding control, it kinda snaps it to certain degrees. Not sure if there is a way to manually enter the degree amount though. Beginner here as well

      Delete
  16. Your tutorials look good and are useful. I will implement them for my games. Thanks something like this is needed

    ReplyDelete