Saturday, October 6, 2012

[Design] How to make sprites (pixel art)

Design:
  So I have had a few questions about how I made the Kha'Zix sprite from the large image.  I'll show a few of the steps here in this blog and do a little tutorial on how YOU can make your own sprites.

First you want to have a picture for the way we are gonna make sprites.   You can draw a picture and scan it in, or pull one off the web or take a picture of someone and upload it.  Whatever you want to make a sprite of, take a picture.  Now the detail of the picture is going to be important too because if you want to make an 8 bit sprite, having a detailed picture is simple not going to work.

So we'll start with a picture, and since I just made the Kha'Zix sprite, we'll look at that:

1. Picture
Rendered KhaZ
(I just found this on Google Images, credit to whoever uploaded)

2.  Decide on a sprite size (in this case 80x80 pixels) and size the image down to that in a program like Paint.NET (free) or Photoshop.  

Mini KhaZ:
(This looks nice, but it's not a custom made sprite since it's just a small version of the big one)

3.  Begin a black outline of the sprite to get the shape of all the limbs, wings, etc.  Put this in a new layer so you can click back and forth and see both of them individually.  

Outlined KhaZ:


4.  Choose your color palette to begin with.  In this case I chose browns and purples, and some reds and greens for the wings.  I usually draw my palette on the side of the image for simplicity and ease of use.  You can also customize your color palette on the tool menu (in Paint.NET at the very least).  In this image I also started coloring in his head.  You are going to want to determine a light source and use lighter outlines and darker outlines for the light.  Generally you don't want to use too much black in your outlines except in the darkest areas.  

Palette and Head KhaZ:

5.  Spend lots of time coloring your guy in and you are done!  I generally fill in the areas with my main color and then add shading and outlines to the guy.  Here you can see me about halfway done coloring the sprite and then the finished sprite.  As you will see if you magnify the sprites, my color palette evolves as I go and feel the need to mix and add intermediary shades.  I may have added too many shades but it came out looking alright.

Halfway Colored KhaZ:

Complete KhaZ:

And also I just updated some colors on the sprite to make his spikes a little more grey and added a few pixels to represent his teeth a bit better:

Updated Kha'Zix:


So that's how I made the Kha'Zix sprite, it took a few hours and plenty of zooming in to color and draw him pixel by pixel.  I also got rid of pixels here and there that seemed out of place and used a little artistic license when drawing him (which is always necessary when shrinking an image down and making a sprite out of it).

Hope you liked the sprite and reading about how to make your own!

Cheers,
~WakeskaterX~








1 comment: