PDA

View Full Version : making pixel art avatars.


muzz
04-12-2006, 05:36 AM
im doing this tutorial for those people who want an old game sprite themed avatar. its a fairly easy method of creating a good looking and "SELF MADE" avatar, its also suited to those poor individuals without a tablet.

the program i used is a small freeware program called graphics gale, but its just like paint in most ways as it has been made specifically for pixel art.
http://www.humanbalance.net/gale/us/index.html

but if your only doing one pic just use paint or another program, although photoshop is a bit too powerful and is really just a huge pain in the arse when it comes to pixel art.

ok lets get it going

first ill just mention two vital "rules" with pixel art.

when you draw your lines they will tend to turn out like this

http://i42.photobucket.com/albums/e305/muzzoid/demobad.gif

whilst this may look perfectly fine to you the circle doesn't look very circley and the line isnt a nice smooth curve, these are okay for the quick sketch but you will have to smooth it out like this

http://i42.photobucket.com/albums/e305/muzzoid/demogood.gif

in this example the curve looks smother and the circle looks like a diamond but its either that or a beveled square, small circles tend to not be shown particulary well.

the next tip is to use "DITHERING" whitch is a term meaning "A method of simulating many colours or shades of grey with only a few"

it basicaly looks like this
http://i42.photobucket.com/albums/e305/muzzoid/ditheringlg.gif
using just the two shades of grey you can produce a third shade by using dithering, and this also adds texture to the surface and makes more shades without resorting to twenty million colours.



now we have gone over those boring bits sketch out your idea in oc or another program then save it and inport it into you pixel art program.

here is my sketch.
http://i42.photobucket.com/albums/e305/muzzoid/1.jpg


after inporting it i then resized it to 50x50 pixels and traced over it.

this is my trace after it has been cleaned up.
http://i42.photobucket.com/albums/e305/muzzoid/8lg.gif


i then block in the colours being careful not to go over my linework.

http://i42.photobucket.com/albums/e305/muzzoid/2lg.gif

here is the fully shaded peice, this has been fully done with dithering and a coloured outline. it looks a bit dirty this close but at its normal size it looks better.

http://i42.photobucket.com/albums/e305/muzzoid/finallg.gif

and here is my finished avatar with a transparent background.

http://i42.photobucket.com/albums/e305/muzzoid/4.gif

now you can go onto animating it if you wish.

NOTE: only ever save as png, gif or the default file type of graphics gale/photoshop/ect. otherwise quality will be lost.

hope this helped somebody.

if you want to look into pixel art more, have a look at
www.spriteart.com (http://www.spriteart.com)
or
http://www.natomic.com/hosted/marks/mpat/