Spriteattack's Art tutorials

SpriteAttackSpriteAttack Member 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.).

image

image

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

Comments

  • UtopianGamesUtopianGames Member Posts: 5,692
    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:)

    image

    Darren.

    image
  • DimensionGamesDimensionGames PRO Posts: 993
    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 Member Posts: 19
    That's a superb tutorial. Many thanks for taking your time to help us graphics n00bs out.
  • FloridaGamesFloridaGames Member Posts: 328
    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.
  • JadarStudiosJadarStudios Member Posts: 264
    OH YEAH MAN!! I JUST STARTED USING INKSCAPE!! THANKS SOOOO MUCH!!!
  • eXtraTurnGameseXtraTurnGames Member Posts: 70
    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!
  • ShineyGamesShineyGames Member Posts: 157
    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
  • BlackbirdStudiosBlackbirdStudios Member Posts: 493
    Wow! Thanks for this. I will definitely use this technique in future projects! Thanks again!

    -Matt
  • SpriteAttackSpriteAttack Member Posts: 524
    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 Member Posts: 5,394
    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.
  • SpriteAttackSpriteAttack Member Posts: 524
    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].

    image
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    Here's one I made this morning.

    image

    --
    Ben
  • SpriteAttackSpriteAttack Member Posts: 524
    @Darren & @Benjamin: Nice one ;)
  • UtopianGamesUtopianGames Member Posts: 5,692
    Loving these tutorials!

    Darren.
  • Rob2Rob2 Member Posts: 2,402
    fantastic tutorials, love the layout :)
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    Yes man...very nice tutorials!!! More of this!!!
  • SpriteAttackSpriteAttack Member Posts: 524
    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.

    image

    and by further variating the simple box shape

    image
  • JakeMorJakeMor Member, PRO Posts: 136
    this is so cool. was this all done in gimp?
  • JohnPapiomitisJohnPapiomitis Member Posts: 6,256
    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 Member, PRO Posts: 136
    oh my fault, you did it in inkscape, sorry
  • lildragnlildragn Member 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!

    ~t
  • SpriteAttackSpriteAttack Member Posts: 524
    @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 Member Posts: 2,402
    They really are very elegant, using the coloured squares to indicate which tools to use is a great idea.
  • BlackbirdStudiosBlackbirdStudios Member Posts: 493
    These are really great! Thanks so much SpriteAttack! Its great to see that we can make great art with simple shapes.
  • SpriteAttackSpriteAttack Member Posts: 524
    Here's an example of a quick (25min) scene based on nothing but squares.

    image

    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 Member 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:
    Photobucket
  • Benjamin_m5Benjamin_m5 Member Posts: 646
    Here´s my second try with glossy lights....
    Photobucket

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