16×16 Pixel Art Tutorial

Apparently pixel art is cool once again, and if you are reading this blog, chances are, you like pixel art. As my first actual article on the site, I thought I’d make a little tutorial on how to pixel your own 16*16 sprite, that you can use as a favicon for your website or game. There are many ways to go about pushing pixels, and this is just one of them. Sadly, this tutorial will not teach you how to draw or come up with nice ideas, sorry. Also I will not go into program-specific details, you need to have some basic familiarity with the software you want to use.

Fire up your app of choice (mine is GraFX2, but you may be more comfortable with Photoshop, GIMP or what-have-you), and make a new 16*16 pixel document. ¬†Done? OK, now take my hand and I’ll walk you through the steps of pixeling a frog.

Step 1 – OUTLINES

What to do:
Using black colour, make a little drawing inside the bounds. Now, 16×16 pixels can seem like a very small space, and it is, but it will teach you the first lesson of pixel art, to make each pixel count.
Important: 
Make sure your drawing is fully articulated and readable at this stage. If you start with a bad drawing, no amount of polish will be able to save you.

Step 2 – BASE COLOURS

What to do:
Colour inside your drawing, just set the basic colours and avoid any shading
Important:
Make sure your base colors work well together and are also bright and vivid enough, at this stage the drawing should be even more readable than the last stage, not less.

Step 3 – SHADOWS

What to do:
For each of the base colours from the previous step, make one darker color and use it to add shadows where needed. For simplicity’s sake, imagine your light is coming directly from above.
Important:
Always review what you’ve done. Don’t be afraid to change your base colours if, after adding shadows, you find them too dark.

Step 4 – OUTLINE COLOUR

What to do:
Add some colour to your black outlines. Add as many new colours as you need. Generally, you’ll want your outline colours to be a darker version of the fill colour.
Important:
One neat trick is to use outline colour to imply shading as well. Observe the outlines of the frog’s eyes, notice how upper parts are fairly bright, while lower lines are black.

Step 5 – ENJOY (and potentially boast)

Hopefully your little sprite will end up looking like a tiny toy. If it looks terrible try to figure out where you went wrong. Perhaps you were too ambitious and wanted to put too much detail into such small space? Keep in mind that it is always good to simplify the shapes and focus on giving them volume. Perhaps you are just hopeless and the more you work on it, the worse it looks? In that case there is only one thing to do: take a break and feast your eyes on some good pixel art until you regain your vigor. Once you have tackled the challenges of pixeling, you will be able to better analyze other people’s work and identify what makes it good. Conveniently enough, here are some more sprites (one of which is the new favicon for this site) all made using the delicious recipe described above.

 

Happy artings and see you soon!

i

Posted on September 27th 2011 at 11:16 pm by .
View more posts in Tutorials. Follow responses via the RSS 2.0 feed.


69 Responses

Leave a comment
  • George Wilson
    September 28th 2011 at 12:31 am

    This is exactly what I need right now. Thanks for all that you do.

  • September 28th 2011 at 2:30 am

    This is so useful, thanks!

  • September 28th 2011 at 5:28 am

    Thanks!
    Thanks alot, that’s really cool. Wish to see more beginner tutorials, I always appreciated your work.

    -test84

  • Nshen
    September 28th 2011 at 7:59 am

    very cool ! but I dont know where to draw the shadow. is there some formulas ?

  • September 28th 2011 at 10:51 am

    Nice one – thanks :)

  • September 28th 2011 at 6:44 pm

    great one! Got any hints about making seamless tiles btw? (Besides keeping the making a one colored border).

  • bruno
    October 3rd 2011 at 12:36 am

    can I use the parrot and the duck in my web?

  • October 3rd 2011 at 12:48 am

    Helpful! Thanks a lot! :D

  • October 3rd 2011 at 8:25 am

    Great lesson, thank you! It would be great to see the lesson about the animation of sprites!

  • October 8th 2011 at 7:15 pm

    Haha, I love the owl and the fish icon you made!

  • October 11th 2011 at 6:38 pm

    Very good tutorial!

  • October 29th 2011 at 6:29 pm

    Thanks so much for this! I LOVE pixel art and I’m pretty artistic using non-digital mediums (painting, sketching, etc), so I’ve always wanted to try doing some pixel art. This is a great little tutorial you’ve got, very simple and approachable. :)

  • December 7th 2011 at 11:58 am

    Thank you for your tutorial, it is quite helpful because you have explained the basics of drawing in 16×16 pixels clearly. Maybe you would be willing to make one on drawing and animating characters in the same format too?

  • Beautiful Smoke
    April 12th 2012 at 3:13 pm

    helpful thanks! nice sprites too !

  • April 17th 2012 at 2:14 pm

    Thanks, but now tell me how to do shadows and outline color using only 16 colors.

  • Gikdew
    July 14th 2012 at 9:53 pm

    You really help me guys!!!
    Thank you!

  • Salahkun
    November 17th 2012 at 6:49 pm

    Awesome tut :D
    i wich you made more :)

  • Insidious Blank
    January 18th 2013 at 7:47 am

    For shadows, more than one shade is used in the example. Also, highlights are used in the eyes. The tutorial is good, and simple, but not that simple. Take a close look and see that the artists work is beyond that of their advice.

  • January 25th 2013 at 12:40 pm

    Bumping this to people who are doing #PixelChallengeOfTheDay to read.

    We do 20×20 images (for now anyway, heh), so this is still pretty applicable to them.

  • February 4th 2013 at 10:06 pm

    Wow thanks this is great I have been trying to create an original favicon for my website and this helps a lot. Thanks!

  • February 13th 2013 at 6:59 pm

    Always glad to see people talk more about pixel art. In this era of 3D gaming pixeling is becoming a lost art. We have to keep it alive. Thanks for passing on the knowledge!

    Since you enjoy working with GraFX2, you may wish to check out Moai as well. It’s a pixel editor designed to imitate many of the features of Autodesk Animator.

  • February 13th 2013 at 9:22 pm

    The yellow fish in the glass bowl is very cute. Yellow fishes are the best! :D

  • February 14th 2013 at 6:38 am

    very, very cool!

  • February 14th 2013 at 11:37 pm

    For a b&w 16×16 editor, try: http://pxlshp.com

    works on smartphones and tablets, android/ios and desktop!

    (disclosure, i made it)

    also: http://unterbahn.com/search/pxlshp

  • George Wilson
    February 15th 2013 at 12:47 pm

    Congrats Photon!
    This post was included in the “Code Project Daily News” email today.

  • Fabio
    February 16th 2013 at 4:02 am

    You lost me on step 3. The technique used to draw the shadows on the lower half of the frog is completely obfuscated to me.

    Maybe it is just me that have very bad drawing skills.

  • UbuntuMan
    February 18th 2013 at 6:21 pm

    Great post. I get how to do the outlines and coloring (steps 1 & 2) but the shades, I could never do. A tutorial on shading would be great.

  • Alice
    May 31st 2013 at 10:16 pm

    Awesome! I had so much fun with this :D

  • Alice
    May 31st 2013 at 10:38 pm
  • June 20th 2013 at 12:41 pm

    I made a little tool you can use to draw tiny pixel art pieces of 16×16 pixels, you can try it at http://drawbang.com, feedbacks are welcome!

  • July 1st 2013 at 2:04 pm

    Awesome Tutorial, love it! :)

  • Lovro
    September 21st 2013 at 10:41 pm

    Thank you a lot for this, mate!

  • Tough pixarzario
    November 23rd 2013 at 4:39 pm

    nice it really helps

  • LePixel
    November 23rd 2013 at 8:47 pm

    Would you mind linking a Grafx2 download page? On their ‘new’ website there are no clickable links :(

  • January 1st 2014 at 9:05 pm

    Thanks for this! I’ve been wondering how to create pixel art, but I thought for sure it couldn’t be as simple as using such a small pixel document. Guess I was wrong! Would love to see a tutorial on scaling.

  • January 3rd 2014 at 7:24 am

    Oh yeah! I agree with the idea that there is a coincidence.

  • Pixel1234
    February 15th 2014 at 7:22 am

    THX this helped me tonnes!

    :)

Make yourself heard