Spriteattack's Art tutorials

SpriteAttackSpriteAttack Posts: 524
edited August 2012 in Community Tutorials
Hi guys...

I had to take some time off today and get some rest... well... resting is no fun for a workaholic like me so I took out the ipad and fired up dragon dictation for a bit of a tutorial booklet on game art for programmers...

Here's the 1st sample of the vector tool step-by-steps done in inkscape (the same technique will work in illustrator or corel). I will add a similar tutorial for pixelbased programs like gimp (which should work in PhotoShop, PaintShopPro, PhotoPaint, etc.).



Let me know what you think, what should be changed, covered in future tutorials or simplified.


  • UtopianGamesUtopianGames Posts: 5,670
    Fantastic tutorial a lot of people will find this valuable I'm sure.

    Here's one i did using line form and looking in the mirror 1st thing in the morning:)



  • Wow is all I can say....! This has encouraged me to try and learn some basics of programs like inkscape :D I really like the simple step by step feel makes it simple and not daunting like other tutorials and the bottom images makes me want to work at it even more!
  • _Belial_Belial Posts: 19
    That's a superb tutorial. Many thanks for taking your time to help us graphics n00bs out.
  • This is an AMAZING tutorial. I am very eagerly awaiting your future tutorials, hopefully showing us how to make those advanced dudes, and backgrounds would be great too. I also going to redo my crappy logo now that I have this new artistic knowledge.
  • This makes me want to try inkscape :P

    I'm looking forward to your pixel art tutorial since I'm a fan of pixel art!
  • Wow
    Thanks for doing this
    Are you going to put the tutorials in one place or the one thread
    Just asking so i dont miss any
  • Wow! Thanks for this. I will definitely use this technique in future projects! Thanks again!

  • Thanks, guys... Looks like I will continue with the tutorials and cover various aspects of game art [incl. pixel art maybe even some 3D stuff]...

    @ShineyGames - I am not sure where these will end up as the thread might not be the ideal place... I will have a think about it...
  • beefy_clyrobeefy_clyro Posts: 5,388
    Nice mate, look forward to seeing some more :D Thanks for taking the time to do this, i've found the majority of your art posts and tips very useful and interesting.
  • Here's an version of the first example done in gimp. It gets to a similar result. With some tweaking and more elaborate work with paths and pen tools you can get a near identical result to the vector version.
    I tried to keep this one really simple - just keep in mind to work with layers to allow you easy editing and manipulation of your images [e.g. colours, positions, rotation] and work larger than the ingame size to make up for loss in quality when rotating [it's always better to scale down than try to enlarge bitmap art].

  • Here's one I made this morning.


  • @Darren & @Benjamin: Nice one ;)
  • UtopianGamesUtopianGames Posts: 5,670
    Loving these tutorials!

  • Rob2Rob2 Posts: 2,402
    fantastic tutorials, love the layout :)
  • Yes man...very nice tutorials!!! More of this!!!
  • The same approach we used for the circles works with squares as well. Let's try and create a simple platform tile (one of those common game design elements).

    Main objective: Keeping it simple
    It’s all about reducing the design to simple and easy to create shapes. Most shapes can be reduced to a combination of simpler elements. We will try to see and use these in the following chapters. Once we put down the basics we can play with positioning, detail and variations.


    and by further variating the simple box shape

  • JakeMorJakeMor Posts: 136
    this is so cool. was this all done in gimp?
  • shmuley95 said:
    this is so cool. was this all done in gimp?

    No these are vector tutorials. I think he said hes using inkscape.
  • JakeMorJakeMor Posts: 136
    oh my fault, you did it in inkscape, sorry
  • lildragnlildragn Posts: 105
    Very nice SpriteAttack... when you compile a few more I would like to post it up on my blog for resource reference.... Do you have these off on their own page somewhere? Or planning to? Alot of indie communities will benefit from these.

    Keep going!

  • @shmuley95 - I added the logos and tool bars on the left side of the tutorials... so far 1 gimp and 4 pages of inkscape tutorials...

    @lildragn - not sure yet where these will end up... I might turn them into a proper pdf ebook...
  • Rob2Rob2 Posts: 2,402
    They really are very elegant, using the coloured squares to indicate which tools to use is a great idea.
  • These are really great! Thanks so much SpriteAttack! Its great to see that we can make great art with simple shapes.
  • Here's an example of a quick (25min) scene based on nothing but squares.


    I created the background and the castle in a level setup before rotating the lot. The lineart still looks a little messy - I have to admit - I should have used different line colours ;).
  • expired_012expired_012 Posts: 1,802
    This is awesome! Thanks for doing this on your free time, so many people will benefit from this.

    lol heres my attempt in creating something from your tutorial:
  • Here´s my second try with glossy lights....

    It makes fun to try your things out and I think will need it for my next game :)
  • MagoNicolasMagoNicolas Posts: 2,090
    Loving this Tutorial! Amazing!
  • @artonskyblue & @benjamin - great work, guys... I am glad you are having fun with these tutorials... It makes it all worthwhile...
  • RumiRumi Posts: 343
    bookmarked this page!
    this is awesome!
    Sous chief please make this page a sticky!
Sign In or Register to comment.