Notes on Pixel Art

Before I get into Photoshop & drawing details, I'd like to share a few general tips & thoughts on making pixel art, with a few examples here & there.

Play, experiment, have fun! What strange shapes you will make. Choose greater and lesser numbers of pixels and colors to work with. Try some very limited color palettes. Some old Atari games (like Combat and Space Invaders) for example had only 4 colors total on the screen at once, and still we got the idea of what we were looking at.

As you can see, illustrating with pixels at this minimal level is a lot like a doing a puzzle. Put pixels down, move them around, erase them, duplicate them, see what works and what doesn't.

You don't have to be a great or even good illustrator to make great pixel art. It can help, but what's most helpful is to practice & experiment on your own. It's fun to get in there and just start putting pixels on the screen.

Sometimes I'll Zoom in and start putting pixels down without any idea what I want to make. Shapes start to happen, ideas start to form from seeing those, blocky messes begin to look like something and you can follow that. It's also fine to have an idea of what you want to make, but simply exploring and seeing what happens is a great way to get started.

When I work on something, I usually do a lot of zooming in and out of what I'm drawing or animating. I usually draw zoomed in anywhere from 300% to 1600%. For example, I would probably work on the large flower above at about the level it appears here, and zoom out often to make sure what I'm doing is actually looking good at the size it's intended to be seen at.

It's helpful to accept in advance that it's going to be somewhat abstract. Maybe downright ugly or ridiculous looking, depending on what you're trying to draw. It's okay and it's part of big blocky pixel graphics charm. The beautiful thing is that even as bad as something looks, our brains and eyes can usually interpret correctly what it is supposed to be. Our job here is to mostly suggest a form as best we can, and if it's just not looking like you had hoped, it's okay to simply enjoy the nonsensical & ugly. It's also fun to see pixel art that doesn't really look like what it was intended to.

Context will help brains make sense of what we're looking at. A single pixel can be interpreted as so many different things, depending on what it's in relation to. A single pixel coming from a gun-like shape will appear as a bullet, from a cloud shape, snow or a raindrop.

Don't be hesitant to abandon what you started if you feel like you're not getting anywhere. Start fresh. I often leave a trail of abandoned files that I never go back to, but they were all necessary steps in the process of eventually arriving at something I am pleased with.

With practice & and experimenting your sense of how the eye & brain interpret these blocky shapes as this or that will naturally improve. I've been really amazed by how some of the objects I've made actually look like what I'm trying to create with so few pixels. Human eyes/brains resolve shapes on their own. All you have to do is loosely suggest a form, and remove all possible distractions.

It's helpful to see pixels at work up close in other image files too. Here's an exercise you should try at some point. Zoom into & out of a bunch of photos and other images in Photoshop. Zoom as far in as you can. Move the image in the window around, see different parts of it at different zoom levels. Do this with many different styles of graphics and images, other people's pixel art, video game screenshots, etc.

If you set out to make a particular thing, make a few versions of it, using more or less numbers of pixels, colors, etc. As an example, for our Bee game (still in development) it took me a few days of drawing pixel bees to arrive at the bee style I really liked for the game (#5). Below is a series of concepts in chronological order.

For the above designs, I started drawing freehand on the big bee #1, with ideas of what a bee is in my head, but felt it was too large, too detailed. It took me some trial and error to even arrive at this bee, but okay, I'll leave it behind and move on. I tried going much more basic and made #2, which I liked but still wanted to go even simpler, and made #3. I like this one very much, she's totally cute and I am glad to have her to use if I want in the future, but it presented problems for the gameplay mechanics, particularly how the bee will sting in front of herself while flying. Should she have to spin around every time? No, bees don't do that. I needed a bee that would have an abdomen that I could animate that would look more true to how a bee would sting forward. So at this point, I sought out some photos of bees online, and found a bunch including this one:

I shrank the original size of this photo way down to what you see above and used it as a guide for drawing bee #4. I like #4, but in my original idea for this game, the bee had a black head and I wanted to stick with that. With some creative license, I swapped colors around and spent some time streamlining the bee into #5, the bee design we're using for our Bee game. #4 can be used as a yellow jacket though. Lots of times what I leave behind are also useable as something else that I didn't expect.

As in the above example, when you want to make something specific, do some research and find photos and other image resources of what you're trying to create. You can grab and use these as reference or even to shrink down to the actual pixel size you want your piece to be at, and then do your best to trace! I do this often to save time and get some results I've been very happy with. With minimal pixel style, most things you are tracing will look quite different so there is no worry of copyright infringement. I have also taken digital photos of objects myself to use as a guide to trace, and have sketched on paper, scanned & traced shapes too. Whatever works. I'll show an example of this in the next section on drawing in Photoshop.

Choosing colors is key. If it’s possible to know what color the background of the objects you're drawing will be, draw on top of that so you know your color choices will work. There are no outlines to be used in this minimal pixel style to separate shapes. The shapes themselves have to stand on their own, and so the colors & values you choose will be very relevant to the color they are next to or are on top of. The same colors & values will look a lot different depending on what they are against. Notice the same is true for lighter pixels against darker backgrounds & darker pixels against lighter backgrounds. You may have to change your object color if you change what it is seen against.

Here is a sample of the same color orange used against different backgrounds. Notice how the orange square appears lighter, darker, more or less saturated.

The file below shows a variety of fruits and vegetables and stuff I designed for our first game, which we will never finish. These fruits & veggies will have a place in our future games though. Anyway, as you see I just got started and designed a whole family of these things. I didn't have a background color in particular in mind for them, but I figured it would be darker than the objects so I chose black to work on. I set up an animation of this file that cycles through background colors so you can see how some of these things would require their color and/or values adjusted in order to look right against different colored backgrounds. Click on the image below to see that animation.

And in reference to the above file, it never ceases to amaze me how so few pixels can actually suggest a shape enough for our brains to see it. Like I mentioned earlier, context is very helpful for this. The Green Beans and those loose Grapes and Blueberries would probably be meaningless without the surrounding veggies to get your brain into the "I'm looking at fruits & vegetables" mode.

Alright, that's all I can think of right now to mention before moving on. Once you've gone through this entire tutorial, come back and read this section again as it will have increased relevance once you try making some things on your own.

Using Adobe Photoshop to Make Pixel Art