Pixel Art For Beginners

“Do a lot of work. Finish a lot of work. Share a lot of work.”

Screenshot from our game, “Codename: Pandora”. I created the pixel art! Asset pack available here.

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.

Tileset I made for Codename: Pandora

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).

Reference scene I used for Codename: Pandora

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 board where I kept inspirational/referential art for Codename: Pandora — check it out here

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

16x16 sprite I made for Codename: Pandora

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.

32x32 version of the same character

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

Iterations I went through as I developed the character sprite

Figure out what works for you, but these were my steps (based on this video):

  1. 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.
  2. 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.
  3. 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.
  4. From there, outline the sprite with the basic silhouette of the character/object. Simply use a black brush (or any single color).
  5. 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

Character animation walking in 4 different directions

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!

All 12 unique frames for the walking animation

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!

http://nathanielmorihara.com/

--

--

--

Software Engineer @ Compass. nathanielmorihara.com. nathanielmorihara@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating a cute Character Design with Gravit Designer

Designing for Ecosystems

Weeknotes #20 — hello to 2022!

Accordions for Your LibGuide

Is ‘perceived affordance’ out the door?

A Lesson in Communication | SearchTempest Design Case Study

Pflueger President Spinning Reel Review

Pflueger President Spinning Reel

Design for Subtle Observation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathaniel Morihara

Nathaniel Morihara

Software Engineer @ Compass. nathanielmorihara.com. nathanielmorihara@gmail.com

More from Medium

Where to Source Tech Talent: Job Boards VS Social Media Platforms VS Referrals

Power Apps Portal- Portal Studio preview stopped working

Rating Performances in Competitive Environment

Artificial Intelligence and Web