Easy Sprite Creation

Posted by Scott_AW on April 13, 2007, 11:11 p.m.

I had previously sent the following tutorial to another of the community to help them make sprites easy and good. Since he seemed to benefit from it and its "Good" Friday and all(where I'm at) I decide to share this to community in hopes that the artisticly impared can make better looking games.

Message as follows:

In order for this to work you need a decent paint program. I personally use photoshop, but any program that can shrink a selection by one pixel will work. If you have a burn and dodge tool(darkens and lightens an area) then you can finish it off.

You start with a solid black image on a white background that is the shape of the item/object/ect. you want. Then you select only the black, reduce the selection by one pixel and remove the inside. Draw any seperating lines, like between hilt and handle and blade, then fill with a neutral color.

The shading is fairly simple, just use a color thats at least 30% darker then the neutral color and fill in sections where you want your shadows. Do the opposite for your highlights (30% brighter), but you want alot less highlight area then shadow.

Once you have the shadows and highlights how you want scale down the image to at least 1/4 of its original size. So if you want a 64x64 sized sprite, make a 256x256 image. Prior to scaling the image down you may want to rotate it about 45 degrees so you can fit more image into less space.

After you've scaled it down use a burn tool with a radius of 1/4 of the images total size(feel free to play with the size if you want) to darken one side of the image. If its at an angle then you want to darken the bottom right area, and sparingly use the dodge tool to lighten the top left to create the illusion of a light source.

To finish it off you will want to fill background with a solid color that you will never use on the actual item.

Hope this is understandable, but I will try and clarify if you need.

This can also be used to create characters, tiles and other such things. The idea is that if you do a large light detailed image and shrink it down it creates a 'high' quality look. All graphics for my Rick Jason project were made this way.

That project isn't dead, its just asleep…

Comments

Tasm 17 years, 7 months ago

Thanks again! If you don't mind, would you elaborate a bit more on how much the burn and dodge tools should be used? My image came out pretty good I think, but I was just wondering if you had any suggestions on how far to go with them.

Scott_AW 17 years, 7 months ago

if you have control of the 'exposure' or amount I would recommend using about 40% and put the range on midtones. Play around with range and exposure until you get the right control for your use. Also it never hurts to use unsharpen, but use it sparingly, like below 100%, maybe even 75% or lower, but the radius can go up to about 3 pixels. This will make the sprite 'pop'.

Rob 17 years, 7 months ago

"That project isn't dead, its just asleep… "

Riiight, *pokes project with stick*

Its dead..

Tasm 17 years, 7 months ago

Well, here's what I got with my first try:

Scott_AW 17 years, 7 months ago

Not bad, you got the right idea. Just add more detail to its basic shape and use dodge on handle's top left area and a thin strip in the middle of the blade's lighter side but do not use dodge on the edges of the sprite.

bendodge 17 years, 7 months ago

Cool. I never have been able to sprite, but that's pretty neat.

Master_Kakashi 17 years, 7 months ago

It appears to work nicely, but i have one issue. and that is the Anti-Aliasing you get on it. When you go to put it in action the AA won't be transparent which depending on it's context cause problems, not that this is hard to fix, but it's something you should at least address in your tutorial. see. take zipper head's sword for example, copy it and paste it into paint or another SIMPLE paint program.(becuase GM's transparency is simple) and pick a color other than white or black, like a maroon or something. and then fill(with the fill tool obviously) the picture with that color from the Bottom left corner pixel. that's what the transparent will be. leaving a jagged edge and the odd little handle outline at the bottom, possibly from moving the image.

ANYWAY. It's a nice tutorial otherwise.

P.S. if you're offended you shouldn't be, this is meant to be constructive criticism, something the real world doesn't seem to get.

Scott_AW 17 years, 7 months ago

If you have use of layers then your going to want to make a transparent layer in which you draw your sprite, not background color. And when you shrink it remove the background layer(if it exists) and then convert the image to index colors. This will solve the anti aliasing problem. But you'll need to manually fix the jaggedness yourself or enable sprite smoothing in GM.