GM JUNK BOX - Basic Pixel Spriting

- BASIC PIXEL SPRITING - Tutorial

Basic techniques ("Thumbnails are clickable for full view")
tools:MS paint
skill level:Simple
Written by ,Agustin J R

We will use the MSpiant program through out this tutorial and learn the basics of spriting.We will start with the outline.The outline is the foundation of the sprite.There are differnt techniques in making an outline.We will learn some of these techniques and find there differnt values.

First techniqe is simple ,we'll use the pencil and the line tool.First you'll need to open MSpaint,then go to image attributes and change the width and height to 51x51 pixels
(Thumbnail: :51x51 will be the size we will work with thourghout this tutorial).
Now we use the magnifier tool to zoom in alittle,making it easy to Identify each pixel
(Thumbnail: zoomx8).
Now were ready to draw a outline :). We will make an outline of a space ship.
For this first technique our outline will only be 1 pixel thick so use the line tool and pick the smallest linewidth,
(Thumbnail: ).
A one pixel outline will give the sprite an absolute perspective view to the eye(giving a hint as to what it is we are trying to portray).Draw a ruler line centered vertically and horizontally
( 25,0 & 0,25).
This will help us determine exact pixel positions.Lets start with the nose of our ship.From the very top center pixel draw a line to the vertical leftcenter pixel
().
Now lets draw the wing
()
make sure to get the same angle as nose.bring the wing line to the center.
().
Ok now do the exact same thing to the other side
().
ok now we have a basic shape of our ship.Now Our ship needs an exhaust for it to thrust through space.So draw a simple exhuast with both side exactly identical
().
Ok Now we need a cockpit.Lets use the pencil tool to draw a cockpit with both sides identical like before(Example).Make sure to have your second mouse button color as the back ground color,making it easy to erase mistakes
().
ok Now there's our basic space ship outline.Now we take out our ruler lines.We'll use ether the pencil or line tool to color over the ruler lines
(:make sure to use the background color).
Now make sure every pixel is one pixel width,We dont want to see this,
( ).
I know it's a tedious task especially when your deling with alot of detial,But it's worth the outcome quality in the end.
Now we can put in detials of whatever we like
().
Ok we are done with our outline.And know you know how to use the one pixel technique.
There are other techniques like toon outline wich is a thicker out line without the pixel having to be a specific size .there is also another outline technique were you draw around the outside of the outline and you don't draw within the out line.

Now lets color our ship.Giving our ship color is easy but might be hard for some.First lets think of how we would like it to appear,I would think that the ship should have a sort of metal texture so it would be grey and the cockpit cover would be sort of glass so blue.So what we do next is pick the colors we will use
().
Then pick the fill tool(),
now fill the appropriate area's
( ).
Now we have givin our ship basic colors.Next thing to do is shading...

Shading with the imagination.Basically it's imagining a light source around your object and the shawdows it would create around your object. There are differnt ways of shading.Pillow shading for example alot of people don't like this type of shading(),becuase there is only a light between you and the object.Wich gives the image a false sence of light.In my opion pillow shading is ok for a few things that would shade in that effect but not many.Lets explore differnt shades of light and shadows for our ship.

Lets learn some basics, a simple 3 light setup
(Thumbnail:)
One light behind the object,one dim light in front of the object and one light above the object.Simple 3 light effect.
()
Ofcourse you can imagine were your lights will be positioned in your game.For example if its a platform and its an outside level with a sunny day then the light would becoming from above were the sun would be,light also bounces off ambient objects.Just like the suns light bouncing off the ground and walls.
If its a fantasy level and lights come from the ground then illuminate your object from the ground.If it's a character and you don't want to create differnt shading for each level(to fit the lighting) then using a technique like the 3 light effect should work just fine for all levels.Now lets use the 3 lights effect on our space ship.

First thing We will do is learn how to change the shade of colors.First pick the ships color then go to the 'Colors' menu then edit colors,
()
the edit colors window will aprear.Now click on the 'Define custom colors' button.It should open the window more with a color chooser.Now to the very right is a gradient bar(Thumbnail:),You can make the color brighter or darker by picking a shade in the gradient bar.This is what we will use to shade our ship.Make the color brighter.
(Thumbnail:)
Now lets use the the line tool to draw on the right side of the nose inside the outline.
(Thumbnail: )
Now pick the ship color again and ajust the shade just alittle brighter(not to bright),now draw around the rest of the inside outline.(Thumbnail:)Now make the color just alittle bit darker then the ships color,and fill in the left wing area with the darker shade.(Thumbnail:)Now lets make some shadows.Create a dark shade of the space ship color make sure its darker than the left wing.Now draw by line's were there would be shawdows.(Thumbnail:)This give's the shadow a fade into the space ships color.Now lets put in a few more shadow detial around the wings and nose areas,by choosing color from the ship with the pick tool(Thumbnail:) and changing the shade and so on as before.(Thumbnail:)Now lets move on to the windshield.Grab the windshield color with the color picker,then make the shade alittle brighter color around the inside of the windshield outline,make the right side brighter to match the shading.(Thumbnail:).Now do the same process until you get to the center then put a brighter reflection line on the right side.It should look something like this(Thumbnail:).Ok our ship is pretty much finished so now we can put in some final detail with shading ect.if any.(Thumbnail:).Here is a before and after with the 3 light scheme on our ship(Thumbnail:)
And here is our final result =)

I hope you had fun and learned some basics,the basics can be used in almost any graphics program.If your image didn't turn out like you wanted, it's ok you can go through this tutorial again and again and just keep practicing on your own.Well go start making some good sprites and games. =)

·Agustin J R·

If you would like to contact me go through the contact button (in the menu to the left) and put SIN in the Subject line.This way it can be sent to me.Do not send spam.Thank you.

We hope you enjoy your experiance here at the GmJunkBox.All content is copyrighted by its origonal creator.