The Art Barn: The Cool Rules of Spriting

Those of you who know about Dinofarm Games might know about its lead designer and columnist Keith Burgun.  Anyone who knows him in person would also know me, because we’re housemates.  I’m willing to bet, though, that there are a few people(maybe on the internet) who know Keith and don’t know me.  First off, you ought to be ashamed of yourself because I’m pretty darn amazing all-around and am especially good with kids (let me hang out with your dumb idiot kids!) But if you want to get right down to it, my name is Blake Reynolds, and I try to make Keith’s games look pretty.

I’ll be general custodian of The Art Barn, the new art column for Dinofarm Games.   Its primary goal is to share some half-baked know-how about pixel art, animation and art in general.  This will mostly benefit non-artists.  Beginners of all types, people new to pixel art and 2D animation, and especially programmers who can’t afford to hire artists.  Programming’s hard enough, chaps, so I hope I can provide fun little tutorials that may give some indy developers with no art team some quick and easy tips for making their games prettier.

For those of you who are already artists, you’re probably way better than me.  This is good – I prefer learning to teaching anyway, so leave me some comments and let me know where I’ve gone horribly wrong.

This first installment is about spriting or, in scientific terms, “makin’ little mans outa ‘puter squares” (there’ll be a lot of oh-ficial lingo so keep up, jerks!)  Spriting is noble work, and by noble I mean an incredibly dumb and inefficient use of your time and life.  But we all know it’s worth it because  pixel art is really special.  It’s challenging, therapeutic and rewarding.  As a practical matter, it’s ideal for small resolutions like mobile devices and hand-held consoles.  As previously stated in an article by Keith about pixel art, an artist chooses which pixel goes where rather than a computer squashing and approximating pixels from a high res-digitized 3d model.  This process of digitizing 3d models, will always, ALWAYS look awful.  I’m not saying there aren’t terrifically talented 3D modelers out there or great looking 3D art, but crushing and blurring a 3D model into a 64×64 sprite?   Who ever actually thought…



The point is, at small resolutions, every pixel counts, so every pixel should be accounted for.  Behold my logics!

Though I’ve been drawing since I was wee, I’ve only been spriting for a few years now, and got my first experience on Dinofarm’s first game, 100 Rogues.  Remember what I said about “incredibly dumb and inefficient use of time and life?”  Well, nothing quite brings that home like my first spriting experience.  We were all learning on the job, as you do when you’re a start-up team.  As a result of that, and 100 Rogues’ well-over-a-year development time, there is some art for the game that I find ghastly, and some I can still sort of look at.  By the end of the process, I had devised workflows and shortcuts that sliced the time practically in half.  So naturally, I made up for it by making the art more elaborate and detailed, which which in turn re-lengthened my workload…behold my logics!…

Don’t make my mistakes… You have your whole lives ahead of you, and to know that you too slave over a 40px X 40px canvas for 10 hours when you only need to spend…9… well, I’m here.  Come on. 3 steps to recovery. Bring it IN, Hug it OUT, and abide by the following list of principles and guidelines I’d like to call Cool Rules(I’ve also registered the trademarks for Slick Tricks, and to a lesser extent Bland Commands so don’t steal them).

Cool Rule #1. Every pixel counts

In other forms of visual art, being loose is good.  When people paint they tend to value loose strokes that give them impression of, say, some dumb leaf, but computers aren’t people or your friend. Pixel art is a rigid, precise pain in the ass.  We’ve already established that pixel art is mostly for low resolution, so naturally you will see each pixel.  Like any form of visual art, your goal is to create the illusion of depth, light and shade, and objects in space by means of any given medium.  Our medium as spriters are little teeny squares.  It’s a bit like pointillism, an art movement born of impressionism.  Hundreds or thousands of little dots create the illusion of objects in space.  Pointillism is a precise style, but you might say pixel art is even more precise, at least when it comes to articulating tiny things like faces.  In this example, mr. alchemist’s eyes and brow are composed of grays, whites, pinks, oranges and peaches.  Hopefully when you look at it you’ll see “eyeball,” specifically, “crazy eyeball.”  Why is it crazy?  Because of 1 pixel. Adding 1 black pixel makes his iris HUGE and thereby changes his whole facial expression, even identity!


"Goin for a little 'Vigo from Ghostbusters 2 thing here."

"Hello. I am moderately stern."

Cool Rule #2: Roughs

This one applies to all forms of illustration.  Block out your form, and get major shapes down as quickly and easily as possible.  In pixel art, it’s useful for 2 things.  It saves you time that you know is already down the toilet, and it allows you to, instead of making a new sprite from scratch for every new character, take one “humanoid” rough and repainting it for all humanoids of the same size and kind.  Even as a non-visual artist, you might be saying “duh you dumb idiot go back to your dad’s garage,” which is mean, but bear with me.  Though this is a very well-known technique in spriting, most people make their roughs out of pixels.  Don’t do this.  I did it for 100 rogues because I read a tutorial that told me to.  Here is my first humanoid rough and sprite for 100 rogues.


In these examples, I had to essentially do the job twice.  Blocking out shapes and form in pixel art is a pixel-by-pixel process.  Doing the rough in pixel art is just as painstaking as the final.  Sure some of the lines you can just trace over, but if you’ve got to add just as much in the painting stage, and if you’re not careful you’ll have to redo a hand or a leg or worse, like if the character is fat you’ll have to redraw his chin a THIRD time! Hahaha gross!

In short, draw your roughs with tablet brush strokes. If I had done this practice during 100 Rogues I really would have gotten it done in half the time.  This approach solves many problems and enhances the final product.  First, it’s so tremendously faster you have no more excuses for putting off hanging out with Greg.  Seriously he’s been through a lot so give the guy a call.  Second, the loose strokes facilitate circles, arcs and other shapes hard to articulate with a mouse, and more organic and pleasing to look at than a circle tool.  Third, using a brush creates many shades of the color you’re using.  This will respond to your pressure, allowing you to hint at areas of depth, where you’re going to shade things or blend them, etc.

The varied line thickness around the eyes will inform me how i'm going to shade him. The head, which was done in a quick brush stroke will be easy to trace with a mouse, eliminating a lot of trial and error.

I mean…he still took hours. But he would have looked significantly poopier if I didn't brush the rough.


But I saved the best reason for this for last.  You can make a stroke, check it against other frames and erase and redraw with oodles of efficiency.  This will allow you to reach a higher potential of framerate vs. labor.  I hope to steal ALL your girlfriends with the result of this technique when they see it in Dinofarm’s upcoming title, “Prince Auro.”  

Would have taken eons if I had roughed it by mouse. Incidentally it only took centuries.


Cool Rule #3: Onion skins.

This is obvious dumb idiot stuff I know.  But photoshop has a great animation window now, and you can use layer opacity for a lot of onion skin options.  Those of you still spiriting in MS paint, finish losing to your grandma at Big Boggle and haul it on over to photoshop cs3 or higher.  At least for the roughs.


Cool Rule #4: Modular pieces

This is another no-brainer for anyone with the least bit of experience in spriting, but usually it’s only seen for purposes of making a sprite sheet smaller or articulating only certain parts of a large sprite.  You’ll see boss characters’ hands as their own sprites so the whole guy doesn’t have to be redrawn.  What I’m talking about, if you’ll listen, is animating pieces bit by bit for the sake of efficiency.  In the floaty skeleton ghost you just saw, I animated the cape flowing as its own animation, and once I got that looking ‘aight I made the head and hands move in their own respective animation.  Then I combined the two.  Another example is in the shiny crown of Auro.  Tracking all those pixels as they shine across the crown while his head was moving down would have been a nightmare.  So i animated the crown’s shine on its own without the moving up and down.  Once I got it good, I slapped it on the unshiny rough of Auro’s head.


 There are a few other things I’ll mention before I finish that I won’t qualify as Cool rules because you’ll all just call me a dumb idiot again.  But a couple other quick time savers involve:

Copy/paste – don’t redraw the head if it doesn’t move, buttcrack!

Go back and forth; tweak and check – don’t be sloppy.  Try, if you can, to track the movement of every pixel.  Refer to Cool Rule #1.  For larger sprites and high framerates, it’s a fool’s errand to try to get it perfect. As you can see, mine are far from perfect.  But too many anomalies and rogue pixels, the eye will cease to be convinced and everyone will call you a “guy who looks at the toilet before he flushes it.”  So just don’t blame me if that happens.

That’s it for Cool Rules.  What have we learned?  Something about grandmas and being thorough.  Oh yeah.  Be thorough,  and change your grandma’s youtube password to “M.C.Buts-feast” and that’ll teach her cheatin’ ass.  She has SO much time to practice Big Boggle. UGHH.

Happy spriting from all of us at Dinofarm!


Leap attack for joy!

blakereynolds • 10/06/2011

Previous Post

Next Post


  1. Daniel 10/06/2011 - 9:23 am Reply

    Haha, this is great and informative! Lots of jokes about how much time it takes, and very true of course! Thanks for the tips!

    I am not sure if I would agree that making roughs in another medium always. Right now you are having 2 completely different stages: 1 rough, one pixel art.
    When I draw, my rough is made out of pixels and instead of tracing it and starting over it slowly evolves into the final piece. There is never need of doing the same thing twice! Also, with bigger (but still non-aa) brushes you can get down your ideas quite quickly, and still edit them pixel by pixel.
    I think it is just about preference :)

    Ill subscribe to the blog, hoping for more cool articles in the future!

    • keithburgun 10/06/2011 - 4:11 pm Reply

      Well, Daniel, we did a whole entire game in the way you suggest, and Blake says that it’s tremendously faster and easier to do it the way that he’s now suggesting.

  2. Colm 10/06/2011 - 11:11 am Reply

    Spiriting != Spriting

    What’s next, 100 Rouges?

    Seriously though, cool article :)

    • keithburgun 10/06/2011 - 4:12 pm Reply

      Fixed, thanks :D

  3. Emory 10/06/2011 - 11:46 am Reply

    If I was looking for someone to do work with voxel-frame-based animation, do you think I should be looking for a spriter or a modeler?

    • keithburgun 10/06/2011 - 4:13 pm Reply

      Probably a modeler. It’s funny how many people are asking us about voxel stuff – probably because of that crazy voxel video that came out a few months back.

  4. DarkFalzX 10/06/2011 - 3:07 pm Reply

    I have a different rough animation technique. I call it “blobbing out” – using a large round brush of a single color per part of the sprite (beige for skin, blue for clothe, red for hair etc), place blobs where all major joints and motion points will be. It is basically like drawing a stick figure, but with additional colors to map out the motion of fabric and hair and whatnot. Move the blobs around until the motion looks smooth and pleasing to the eye: )

    then go back, and detail the crap out of it. Maybe do individual portions of the figure on different passes, like – face, then hair, them clothe, then skin shading etc.

    Oh, and I know that animation isn’t a great example, but it’s all I could come up with at the moment: )

    • DarkFalzX 10/06/2011 - 3:09 pm Reply

      Crap – the animations didn’t show up in my comment – here are the links again.
      Blobbed out:

      • keithburgun 10/06/2011 - 4:25 pm Reply

        Cool – you know what, that’s actually how I like to do pixel art myself. I sorta suck too much to ever tell anyone any tips, but it’s good to know that you, a bad-dude, use the same technique!

  5. Anthony Sullivan 10/06/2011 - 6:05 pm Reply

    Great article! I’ve not done much spriting but with the project I’m working on there will be a great deal of spriting in my future. Very entertaining and I look forward to many more Art barn posts.

  6. Anthony Sullivan 10/06/2011 - 6:07 pm Reply

    Oh, forgot to ask. What tool do you use for spriting? Is there a good workflow for Adobe Photoshop CS4 or perhaps another tool?

    • keithburgun 10/06/2011 - 6:09 pm Reply

      We do everything in Photoshop, yeah. Nothing fancy, just a 1-px-diameter pencil tool.

  7. DarkFalzX 10/06/2011 - 8:07 pm Reply

    I would wholeheartedly recommend Pro Motion by Cosmigo. It has a great animation, tile, and palette editing capabilities all geared to pixelart, and it’s cheap – only about $80, as compared to almost 10 times that for Photoshop. There are other people who swear by GraphicsGale – a $20 pixel art/animation tool that is probably closer to Photoshop in its functionality.

    • Carl Douglas (Argyle) 10/10/2011 - 6:35 am Reply

      Damnit, didn’t see this reply box down here before the Facebook login reply section that is above it, so I guess I will comment down for this reply!

      I will back DarkFalzX’s recommendation. As somebody who uses both Adobe Photoshop and Flash for other mediums of animation, I always do my pixel animation work with Cosmigo ProMotion. It is very different in workflow to how one would work with Photoshop and takes a strain of persistence to keep at it instead of going back to what you are used to, but I am full-out better and faster at working in ProMotion when it comes to doing things that are pixel art specific now that I’ve gotten the tools down and established a workflow. You can set up custom onion skins and faux layering structures because the layer system is based upon frames.

      Here’s an example of how I might set up an animation file in ProMotion: 20% transparent layer that will always display frame 1 at the bottom of your stack, then a layer that shows a defined solid color silhouette at 34% opacity of whatever is 2 frames before the frame you are currently editing above that and yet another solid color silhouette at 17% opacity of whatever is 1 frame ahead of your current frame above that; top it off by displaying, hypothetically, frame 1 of a completely DIFFERENT workfile that you have open that you have set to have all of your pencil and paper positioning sketches as well as some floor and height guide lines that you drew . Then a layer set to show whatever the current frame is, so you can draw on the damn thing. Whenever I want to hide all the extra bullcrap all over my screen, all I have to do is swap out of layering mode or hit L and all I see is the current frame, then can swap back just as easily from there.

      Sounds complex or even downright weird at first, but you will learn to love it, along with a drop and go brush container for storing custom shaped brushes, body parts that you will want to recall later, predrawn elements that you made so you can manually assemble an animation from modular parts, and even store things you have selected that retain animation data and frames that you can cycle and place on your canvas.

      My wife calls me the foot thief because I always have a brush container filled with boots I lassoed from old animations or characters that I reuse and tweak to fit whatever I’m doing at the time.

  8. Dinofarm Games » The Art Barn: Hue Variation and Reflected Light
  9. Dinofarm Games » THE ART BARN: What’s Involved in Spriting for Auro
  10. PlayStation News 02/15/2012 - 9:00 am Reply

    Excellent site. Plenty of useful info here. I’m sending it to several friends ans also sharing in delicious. And obviously, thank you on your effort!

  11. About pixel | Averyentp
  12. cool stuff- Gastronomy - Trends - Travel - Fun - How to - Useful | Pearltrees
  13. buy phen375 05/31/2012 - 1:29 pm Reply

    Using more tablets will never produce additionally weight-loss and you may put your wellness in danger. To get rid of extra vitality whenever you educate, try fatty acids getting rid of products consist of inexperienced green tea removes, caffeine intake, or various all-natural inciters, like ginkgo biloba. The items are created to spice up your metabolic process, which will help you burn added strength extra swiftly. Even so, for powerful outcomes, you will need to teach recurrently and try to eat very good ingredients. If you can not like the very idea of consuming slimming capsules and supplements, you may need to run a fiber content accentuate or growing your intake of fiber abundant meals, like total grains. Before you begin taking any body fat burners, like appetite controllers, it is best to check with your doctor if they are guarded for you. People who have particular health points or acquire selected prescription drugs and health products will not be good prospects for weight-reduction program capsules. Our recommendation using Phen375 fat burning supplement, why? For the reason that Phen375 is the best fat burner which is that you can purchase today, you’ll be able to reduce 3-6lbs each week by employing Phen375. There won’t be any other supplements, and this can be so powerful as Phen375.

  14. Homepage
  15. fat burner weight loss 07/21/2012 - 11:18 pm Reply

    Hi my family member! I want to say that this article is awesome, great written
    and come with approximately all significant infos.
    I’d like to look extra posts like this .

  16. email marketing 12/14/2012 - 4:00 am Reply

    It is not my first time to pay a visit this web site, i am browsing this website dailly and obtain nice facts from here everyday.

Leave a Reply

Your email address will not be published / Required fields are marked *