Shop Mobile More Submit  Join Login
About Digital Art / Student Alain GalvanMale/United States Groups :iconpixel-creations: Pixel-Creations
Because Every Pixel Matters.
Recent Activity
Deviant for 5 Years
Needs Core Membership
Statistics 20 Deviations 476 Comments 11,295 Pageviews

Newest Deviations

Random Favourites

Cover Image

As a kid, you’ve most likely grew up with games that featured pixel art, from Pokemon to Sonic, Ragnarok Online (3D and Pixel Art?!), Megaman. I know that these guys inspired me to persue pixel art, and now I can say that I know how to do pixel art:

I’ve been front paged on Newgrounds, Codepen, PixelJoint. Not that awards are important (maybe you’re more impressive lol), but I want you to know I at least know what I’m talking about.

This post will serve as a guide, telling you everything you need to know to begin making pixel art.

Steps to making pixel art:


  1.       Choose a Pallete

  3.       Make a Silhoette

  5.       Add Shading and Detail

  7.       Post Processing

Limitations & Guidelines

Colors have 4 channels, R, G, B, and Alpha (transparency), and most modern devices use an 8 bit per channel (for a maximum of 256 possible brightness levels per channel) for image files and displays. On old game consoles like the Gameboy, Super Nintendo, Genesis, and even the GBA, developers had to deal with tighter color requirements. The Gameboy only had 4 shades to choose from, the Gameboy Color had a 5-bit (for a max of 32 possible brightness levels) per channel display, and could display a maximum of 56 colors, though normally it was far less. Pixel art was born from these limitations.

In addition, older devices had limited amounts of ram. The Commodoore 64’s resolution was 320 by 200 pixels, and so if you wanted a 4 bit display, you would need 4 bits for every pixel (64,000) on the screen, for a grand total of ((64000 * 4)/8)/1000 = 32kb of ram, which was often times more than the amount of ram in the entire computer!

In addition, on the Nes, sprites were very small images, so often times you would be limited by the size a sprite could be, constrained to a 8x8 grid. You could only have 64 of these sprites on a screen at any given time.

We’re now free to use all 256^3 colors if we want, make pixel art at any size, but bear in mind restrictions are what makes pixel art distinct from other forms of art. Even to this day we have places like PixelJoint keeping these restrictions alive.

Pixel Art Vs. Digital Paintings

Pixel Art is an image that was designed pixel by pixel.

It’s different from other forms of art like digital painting or line art in that every pixel is important, whereas those forms of art avoid that level of percision.


Palettes and Sprites


Source: Palettes by JinnDEvil

A palette is a color ramp, from low to high, and should be characterized by complex, hue shifting tones. You shouldn’t have a pallete that’s linear but rather, have one that mixes colors together.

Most artists start with an average color for the piece that they’re doing, then add highlights and shadows to that.

Chaos Zero Timelapse by Alain Galvan

A good idea is to use complementary colors to help blend colors together. Purple or Teal work well for shadows, whereas yellows and whites work for specular highlights.

It’s best to have a maximum of 15 colors per sprite (with transparancy being the 16th color).



The lead cartoonist for Spongebob Squarepants, Sherm Cohen, suggested that silhouettes should communicate the idea of a character’s action. This applies not only to animation, but also to all forms of art, including pixel art, the silhouette is what makes or breaks a piece.

You want your silhouette to be solid, with no jagged lines, and would paint on top of that silhouette.

Layer Masking In Photoshop

One technique to make this easier is to use Layer masks, in Photoshop, this is done by Layer > Layer Mask > From Transparency. This will make painting easier by letting you draw strokes without worrying about the silhouette you worked so hard on.

Anti-Aliasing and Readability

Since pixel art is normally small, it can become difficult to communicate intricate details within a small space, so an artist is fighting between anti-aliasing and readability.

Anti-Aliasing is the process of making edges smoother by blending them with their surrounding pixels.

Readability is how easily you can distinguish details in an image. Generally, The more anti-aliased an image, the less readable it is.

Outlined Sprites by Neoriceisgood


Source: One Piece Sprites by Neorice

One way to improve readability is to add outlines to your sprite. That’s not always a good idea, such as for environments, but for characters and objects, outlines are a great stylistic choice.



Dithering is to gradate colors together via a pattern. Generally you want to avoid mechanical dithering and op for a pattern based effect instead.

In this sprite of Perfect Chaos from Sonic Adventure DX, I dithered the image by trying to follow the flow of water around the shape of Chaos. Proper anti-aliasing and careful shapes and edges made the water look almost photorealistic.


Often times your original choice of colors wasn’t the best one, so post-processing could serve as a way to correct your colors and make them stand out.

Curves in Photoshop

Curves - The curve tool is a method of adjusting the ratio of colors on an image. On Photoshop this can be found at Image > Adjustments > Curves, and on Gimp at Colors > Curves.

Levels in Photoshop

Levels - The levels tool is a simple method of adjusting the brightness of colors. The middle handle adjust the mid color balance, the left handle adjusts the darks, the right handle adjusts the highlights. Curves and levels are interchangable so use whichever you perfer.

Color Balance in Photoshop

Color Balance - A method of changing the general tonalities of an image. Movie makers often adjust the color balance to have cyan shadows and red orange highlights. Look at any movie and notice just how blue it is!

Color Replacement in Gimp

Color Replacement - Sometimes what you really need is to manually replace colors. You can do this by using the color selection tool in Gimp (There’s no equivalent functionality in photoshop), just click the icon with a hand and a blue, red, and green square, set your threshold to 0, and select the colors you want to replace. Then use the fill tool and fill the whole selection.

Color Count in Gimp

To measure the number of colors on your sprite, you can use a tool like Gimp’s Colorcube Analysis.


Gorz (2010) “Spriting Dictionary” Retrived 2015-08-15

Cohen, Sherm (2009) “SpongeBob Tute 01 Silhouette” Retrieved 2015-08-17

iBookGuy (2015) “How “oldschool” graphics worked.” Retrieved 2015-08-18

Cure (2010) “The Pixel Art tutorial”


AlainGalvan's Profile Picture
Alain Galvan
Artist | Student | Digital Art
United States
Graphics Researcher for FIU, Game Maker, Artist, Musician.


AdCast - Ads from the Community


Add a Comment:
wakaflockaflame1 Featured By Owner Sep 10, 2015  Hobbyist General Artist
Game Maker? Well hello fellow game designer~
AlainGalvan Featured By Owner Sep 12, 2015  Student Digital Artist
What's up! Currently working on an open source Dark Souls fangame myself, care to share any game projects you're working on/have worked on?
wakaflockaflame1 Featured By Owner Sep 12, 2015  Hobbyist General Artist
Sweet,Well I don't have much on my game,especially since I've been working on it since 2006,but....…
KokoaMinto Featured By Owner Aug 2, 2015  Hobbyist General Artist
Thank you kindly for the Watch~ ♥
AlainGalvan Featured By Owner Aug 24, 2015  Student Digital Artist
S3rb4n Featured By Owner Jul 12, 2015  Hobbyist Digital Artist
Happy birthday!
AlainGalvan Featured By Owner Jul 15, 2015  Student Digital Artist
Thanks dude! I really appreciate it!
S3rb4n Featured By Owner Jul 15, 2015  Hobbyist Digital Artist
You're welcome!
LNBAKAKiller7 Featured By Owner Dec 25, 2014   General Artist
Merry Christmas!
AlainGalvan Featured By Owner Dec 25, 2014  Student Digital Artist
You too dude! Thanks! :D
Add a Comment: