Welcome to the Wolfire Blog! This is where we keep everyone up to date on our progress on Overgrowth and other new stuff. Be sure to subscribe to get the latest news! Also, be sure to check out the forums for even more up to date news - or get on IRC for up to the second updates.

How to make pixel art in Photoshop

Add Comment! By Aubrey Serr on January 22nd, 2010

Although Overgrowth is my top priority, I really love pixel art too. As an artist it is important to keep practicing all of my skills because you never know when they will be useful. For example, I ended up making a lot of pixel art icons and buttons for the iPhone version of Black Shades, and I also helped David out with the art in this blog post.


I have gotten some requests on how exactly I go about my pixel art, so here I will cover the basics. First, there are a few things that are a little buried in Photoshop (CS2) that make working with pixel art a lot easier.


You will want to go to "edit > preferences > general" and set the image interpolation to "nearest neighbor". With that set, whenever you transform part of your image it will stay in the form of discrete pixels. This is very useful if you want to make an animation.

I like to choose a fairly small image size for anything that is going to be pixel art. A good size for a nicely detailed, but still chunky character is 128^2 px.

I start blocking in the shapes for the character using the pencil tool. You also probably want to set your eraser to use the block or pencil style.


Gradually I clean up the shapes until I have an outline I like, and then on a lower layers, I fill in the shape and then have a couple layers for shading. This can produce a nice consistent result.


Once I have the character designed, sometimes it is fun to animate it. To do this in Photoshop, you can go to "window > animation". Now with the animation palette open, it is easy to set up your animations using different layers, and play them. Once the animation is done, you can save it as a .gif under "file > save for web" and selecting "gif" from the first drop-down box on the right. Then you can show off your animation in any web browser, like this:


I have heard there are better programs for making pixel art and animation than Photoshop. Does anyone else have any experience with these programs?