Starting with the Basics: Workflow
You’ve got your programs set up, you’re in the pixeling mood, and you’ve got an hour or two of uninterrupted time to blow. You’re ready to start, and you want to keep that arty mood going as long as you can without little things like crippling eye strain wearing you down. Here’s a few guildelines to help you spend hours working with tiny dots while preserving your eyes and getting the best results.
Guide 1: work low-resolution
If you own a laptop, you have the ideal monitor for working with pixel art. Why? If you set the screen resolution to 800×600 on a 12″ to 15″ monitor, you give yourself the biggest possible pixels to work with. This seemingly slight increase may not seem like a lot at first, but after a few hours of spriting, going back to high-definition settings becomes quite a jump.
If you’re stuck on a desktop with a large monitor, you can still decrease your resolution, but there are limits – if you’re on a 24″ high-definition monitor, setting it to 800×600 is going to look like a mess. Do some trial-and-error to get the biggest image you can while staying moderately sharp.
Why does this help you get good end results? Keep in mind that pixels are just specs of light. If you aim a red and yellow flashlight onto a wall and put their spotlights next to each other, they’ll blend together a little. And when two pixels are set next to each other, they slightly blend together on the screen. (When games are played on TVs, the blending is pretty obvious, but it still exists a little on high definition screens.)
This light-blending is a subtle part of all pixel art. Once you develop an eye for it, you’ll see how it amplifies the effects of anti-aliasing, how it can guide your use of outlines, and how it helps you pick the best possible colors and shade intensities. Master it, and even on a smeared TV screen, your pixels will look good.
Master the art of how pixels naturally blend together, and your art becomes smear-proof
When you magnify pixels, the effect is lost of course since now you’re displaying each magnified pixel by a bunch of screen pixels. So if you want to build a sprite and control all the light-blending at the same time, you need to see your sprite at 100% magnification while you’re working. And this brings us to….
Guide 2: always work with a magnified and unmagnified view

Always work with a magnified view for pixeling and an unmagnified view for monitoring the effects of your pixels
When you’re drawing on paper, you don’t just look at the one line you’re working on all the time. You’ll make a few lines, stop and take in the whole image to see if that line looks right in relation to everything else or if you need to adjust it.
In the same way, working up close with pixels is important in the micro area, but in the macro area (seeing if the pixels you added to the eyebrows blend into the top of the eye softly enough, etc), you need to constantly go back and forth to check if the pixels you added actually had the effect that you anticipated they would. You can be surprised what a pixel that’s one shade too dark can mess up.
Some artists might not have an eye for that level of subtlety, but it comes when you have both experience and the interest in not settling for “okay enough”. (A side note: pixeling is one area in life where it doesn’t hurt to be a perfectionist. That’s the nice thing about pixel art: if you finish a sprite and then a month later you’re not satisfied with it anymore, you can just pick up where you left off and refine it again and again.)
In Photoshop and Gimp, you can have a sprite open in one window and magnified to 500% while also having the same document open in a second window at 100% size. The changes you make in one window instantly show up in the other. This lets you glance back and forth while you pixel instead of stopping, zooming out to check your pic and its blending, then zooming back in again. In Photoshop CS, you do this by Window > Arrange > New Window For __[your current document]__
Finally, on the subjects of your eyes, we come to..
Guide 3: always work on a darkly colored background
Many painters and other artists begin their work on neutral color backgrounds to help get a good sense for the colors and shades they use. Pixel artists can do something similar to help them get a good sense for the light-blending of screen pixels.
Pixels are made of light. When you’re working with colors made of light, you shouldn’t be working on a white background. The light intensity of the white competes with the brightness of the pixels, plus over time, it becomes like working in front of a giant flashlight. Keep the background dark, to let the light of pixels stand out, and keep the background a neutral color to let the color of pixels stand out.
So that means just work on black, right? Not exactly. Especially not if your sprite uses outlines. Remember, you want to let your pixels naturally blend their light, and that includes the edges of your outlines. On a black background, you get an odd effect where the light of your outlines is diminished and the high contrast between a no-light background and a light-emitting sprite can throw your eye for a loop. For building a sprite, the ideal background is darker than your darkest outline, but bright enough that some light is produced to soften the outline edges.
The end result of building a sprite on a good background is a sprite that will look good on any background — including a moving one (if you’re working on an animated sprite for a game). I myself usually work on a dark grayish-green background to simulate some color contrast, kept dark enough that the light source on my figures stand out as much as possible so I can focus on it as much as possible.
NICE TIPS!
=)
About those work backgrounds…
I find myself working with both- a dark and a bright one. Some outline shapes look diffirent, based on how bright or dark the background is.
Sometimes, when I break an outline, the inside bright color that pushes out is a lot more intense on a dark background.
And if the inside color is dark, it pushes out a lot more on a bright background.
When polishing outlines I just keep hiding/showing the background layers.
I make a shape…check how it looks on a bright background, then check if it looks ok on a dark background as well.
Would be great if I could have that 100% side view opened on a dark background and another one opened on a bright background.
Maybe get some layers visible on one view only or something like that.
Haven’t found a way to do that in GIMP yet…
When it comes to displaying your sprites online, it can be helpful to check how your outlines look with a bright background to make sure you don’t have any unpleasant surprises when posting on various sites (unless you intend to only post on one site, like deviantart, in which case you can use their greenish background as your only reference).
However — and this is something I’ve noticed more and more — if you’re making sprites for videogames, you should keep to dark backgrounds because that simulates how your sprite’s outlines will look while in motion over a moving background. As the colors of a background move past your sprite, to your eye, the sprite’s outline will slightly blend in with it all in a way similar to how it blends in to a generally dark background. You’ll also find that a lot of backgrounds for games (as a general art rule, and depending on style) are darker than your sprite in order to recede more and to focus more attention to the sprite. Your outlines can take advantage of that and make the transition from sprite to background more smooth.
Muito bom, eu tenho ainda sérios problemas para desenhar meus próprios sprites usando pixel art, mas vou melhorando a cada dia e sem dúvida suas dicas me ajudaram muito! Thanks a lot!
Thanks for the tips… Much appreciated
I wouldn’t have commented if you hadn’t questioned my badness. there are are lot of good tips in here thank you
Thanks a lot for the tutorials.
Is there any chance you can assist me with the issue of the gray-ish outline that results on some my finished sprites? I am editing a base sprite in Photoshop—drawing new pixels to create a different version of a character, but after trying alpha channel tricks, scouring online sprite forums, rebuilding the sprite all over again, I still get the same result—That annoying gray outline!
I’m sorry if this is a topic you hate explaining or if it’s noobish. Any advice would be incredibly helpful.
Gray outlines? That’s a new one to me. Send it over and I’ll see if I can find what the problem is.