Pixel Art For Beginners
Lessons learned from my first time creating pixel art for a game
“Do a lot of work. Finish a lot of work. Share a lot of work.”
I participated in my third game jam last month, this time working with a team (shout out to Zackavelli and Draekdude). It was my first time working with a team in a jam and my first crack at doing pixel art — or any kind of art — for a game (outside of the occasional sprite modification here or there).
I learned a few lessons that I think other beginners may find helpful:
- Pick an Editor
- Maintain a Consistent Concept & Style
- Gather Inspiration & Reference Art
- Create Low-Res Sprites
- Follow a Set of Steps
- Basic Coloring Tips
- Animation is Hard
Pick an Editor
You’ll need an editor for creating your sprites and tilesets.
Before this game jam, I used Piskel for tweaking sprites and experimenting with pixel art. It’s free and in-browser (no installation necessary), which makes it nice as a dabbler. It’s a minimal tool, so it doesn’t feel overwhelming as a beginner.
However, I found Piskel a bit sparse (e.g. lacks the ability to flip a selection), which led me to Aseprite.
As a beginner, I wasn’t certain exactly what features I wanted, but I think most pixel art tools have similar feature sets. I chose Aseprite because of its popularity within the pixel art community. It’s one of the most commonly used pixel art tools out there, if not the most. I base this statement on the number of tutorials and blogs that use or teach Aseprite. This wealth of teaching material was the main selling point for me.
Aseprite isn’t free, but it’s worth its $20 price tag. I love that it isn’t a subscription — just an upfront cost. Considering the 30+ hours I’ve already spent using it for a single game, I figure it’s worth the price tag. Note: there is an option to compile it for free from source if you really want to.
Aseprite, as far as I can tell, has the full set of features you might expect from a pixel art tool. Except for one glaring hole: tilesetting. For many games, you’ll want to create tilesets for levels and maps. The current version of Aseprite (v1.2) doesn’t offer features to assist with tileset creation (e.g. you can’t create and use tile palettes). However, the upcoming Aseprite v1.3 promises tilesetting features, and you can try it out now in their open beta. I downloaded v1.3 through Steam and found that these new features fulfilled everything I needed for creating a tileset for a game (besides exporting and importing a tilsets, please add this feature!). With v1.3, I was able to create ALL of the pixel art assets for my game exclusively with Aseprite.
If you want to do your own research on what pixel art editor is right for you, I recommend this video.
Maintain a Consistent Concept & Style
When setting out to create art for your game, one of the first things you’ll want to do is decide on a concept. What is the world you’re creating? What is the vibe? How should your player feel? Is it a go-lucky, lighthearted game? Cool, action, comic-book style game? Or a dark, melancholy environment, maybe with a twisted sense of humor? As you’re creating each sprite, you’ll want to think about how it fits into the world and contributes to the aesthetic.
In a similar vein, make sure every sprite in the environment sticks to a consistent style. By “style”, I mean components of the sprites follow the same conventions. For instance, you’ll want the body parts of characters (head, eyes, torso, etc.) to all be of a similar size. It helps the art look uniform and cohesive. If you use a lot of different sizes, your art will look like it was copy-pasted from different sources. I use size as the main example here, but there are other attributes you’ll want to keep consistent (such as color —which I’ll touch on later).
I found it helpful to maintain a “reference scene” which was, essentially, a screenshot from the game. I kept adding new sprites to the scene as I created them, ensuring that they fit the concept and style and tweaking them if they didn’t.
Gather Inspiration & Reference Art
Go out there and look for images that inspire you or have vibes that you’re looking to create. Save these images to one place. Later, you can revisit them and borrow components that you want to include in your game, whether it’s an object to incorporate into your setting, a coloring scheme, or maybe a character design.
In particular, you’ll want to find pixel art that accomplishes what you’re trying to do. Don’t copy the sprite exactly, but study pieces that you like and see how it represents the head/body/arms on a character, walking animation, etc. Pick out the parts you want to replicate and incorporate them into your art (from a developer perspective, I compare this to copying snippets of code). I don’t think I did a single sprite for our game without referencing other images.
Pinterest is a great tool for gathering images into collections. Here’s an example of the Pinterest board that resulted from me gathering inspirational and referential pieces for my game.
Create Low-Res Sprites
Create16x16 pixel sprites when you’re first starting. 16x16 is a classic size (think NES Mario or GB Pokemon) and I found it to be a happy medium between having enough pixels to express something, but not overwhelming.
I found 32x32 pixel sprites to be a bit unmanageable as a beginner. There are 4x as many pixels to place, and thus 4x as many decisions to make and 4x as many places you can get it wrong. With smaller resolution sprites, I think it’s easier to stumble into something that looks good until you’ve developed the skills and intuition for larger sprites.
16x16 and 32x32 are standard resolutions that I’m using as examples, but you can create sprites at any resolution. Here’s a video I really liked that discusses considerations to make when deciding on sprite sizing.
Follow a Set of Steps
Figure out what works for you, but these were my steps (based on this video):
- Pick 2 or 3 details you want to emphasize. With pixel art, especially at low resolutions, it’s better to cartoonishly emphasize a couple of features rather than end up with an amorphous blob.
- Open a larger-than-necessary canvas so you can do multiple iterations of your sprite in a single sheet. I tended to open 160x160 canvases for my initial work on each sprite. Seeing past iterations is helpful so you can revert back to an old iteration if you find you dislike new details you’ve added in the latest iterations.
- Start with a stick figure (the skeleton of your character /object). Don’t spend too much time on this — it’s just a starting point and is definitely going to change.
- From there, outline the sprite with the basic silhouette of the character/object. Simply use a black brush (or any single color).
- Fill in the silhouette with color.
Basic Coloring Tips
Use a palette! Admittedly, I forgot to during my first attempt. There’s a whole science behind color selection and there are a ton of palettes out there that make picking colors simple. There are a ton of resources out there (here’s one) and many editors come with preloaded color palettes.
When coloring your sprites, keep in mind shading. For shading, imagine where the light source would be coming from. Use lighter shades where there’s direct exposure to light and darker shades where there’s the least. Here’s a video that taught me the basics of shading (I still have a lot to learn here!)
One more tip: the harder the contrast between pixels, the sharper the edge. For example, the adjoining sides of a cube should have starkly different shades, where as the gradual gradients on a sphere should only have only a slight variance between their different shades (also learned from this video).
Animation is Hard
Warning: animation is hard! This is where I struggled the most.
Each frame needs to have the same base, but move just the right parts just the right way and just the right amount so that you perceive motion. I found it difficult to find this calibration.
In particular, I found it difficult to translate a frontal view of a character/object to a side or rear view. It’s a completely different sprite, but it needs to look like the same person/thing!
I don’t have a ton of tips here except that you should allocate plenty of time for animation. Typically a walking sprite in a single direction will be at least 3 different frames (left foot forward, right foot forward, both feet central). If you’re making frames for the 4 cardinal directions, that’s 9-12 different frames for a single character (9 if moving left and right are just mirrors of each other and you flip the frames). Make sure to keep this in mind when budgeting the number of unique sprites you’ll need for your game.
In summary:
- Pick an Editor — Aseprite is worth the cost and has a ton of tutorials and documentation.
- Maintain a Consistent Concept & Style — Ensure each sprite fits the concept/style by maintaining a reference scene.
- Gather Inspiration & Reference Art —Use Pinterest to collect pieces that will help you with your game.
- Create Low-Res Sprites — I recommend starting with 16x16.
- Follow a Set of Steps — Decide details to emphasize, open a large canvas, start with a stick-figure, and add a silhouette and color.
- Basic Coloring Tips — Use a palette and shade based on where the light should be coming from.
- Animation is Hard — Allot time for this and budget accordingly.
All the pixel art for Codename: Pandora is available as a free-to-use asset pack — you can find it here.
If you’re interested in Codename: Pandora, the game I made with Zackavelli and Draekdude, check it out here.
Codename: Pandora was the result of participation in the Game Dev Field Guide Monthly Game Jam. The Game Dev Field Guide is a podcast that has been a great source of learning and community for me — check it out!
