Spriteattack's Art tutorials

SpriteAttack

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.

UtopianGames

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:)



Darren.

DimensionGames

Wow is all I can say....! This has encouraged me to try and learn some basics of programs like inkscape 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

That's a superb tutorial. Many thanks for taking your time to help us graphics n00bs out.

FloridaGames

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.

JadarStudios

OH YEAH MAN!! I JUST STARTED USING INKSCAPE!! THANKS SOOOO MUCH!!!

eXtraTurnGames

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!

ShineyGames

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

BlackbirdStudios

Wow! Thanks for this. I will definitely use this technique in future projects! Thanks again!

-Matt

SpriteAttack

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_clyro

Nice mate, look forward to seeing some more Thanks for taking the time to do this, i've found the majority of your art posts and tips very useful and interesting.

SpriteAttack

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].

Benjamin_m5

Here's one I made this morning.



--
Ben

SpriteAttack

@Darren & @Benjamin: Nice one

UtopianGames

Loving these tutorials!

Darren.

Rob2

fantastic tutorials, love the layout

Benjamin_m5

Yes man...very nice tutorials!!! More of this!!!

SpriteAttack

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

JakeMor

this is so cool. was this all done in gimp?

JohnPapiomitis

shmuley95 said:
this is so cool. was this all done in gimp?

No these are vector tutorials. I think he said hes using inkscape.

JakeMor

oh my fault, you did it in inkscape, sorry

lildragn

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

SpriteAttack

@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...

Rob2

They really are very elegant, using the coloured squares to indicate which tools to use is a great idea.

BlackbirdStudios

These are really great! Thanks so much SpriteAttack! Its great to see that we can make great art with simple shapes.

SpriteAttack

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_012

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:

Benjamin_m5

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

MagoNicolas

Loving this Tutorial! Amazing!

SpriteAttack

@artonskyblue & @benjamin - great work, guys... I am glad you are having fun with these tutorials... It makes it all worthwhile...

Rumi

bookmarked this page!
this is awesome!
Sous chief please make this page a sticky!