Tag: pixel art

Pixel Art – Superman 16×16

graphics
Comments

Superman pixel art by Chris Sanyk, 16x16px enlarged to 512x512px

Process notes:

  1. I did this in about 15 minutes worth of work.
  2. Tools: Paint.NET, and a 16×16 canvas, displayed at max zoom (3200%). Pixels were input using the Pencil, using the trackpad of my laptop. Nothing fancy at all!
  3. After I felt satisfied with my work, I created an enlarged version at 512x512px, to make it a little easier to see.
  4. I used a total of five colors: Yellow, blue, red, pink, black.
  5. I started out just drawing a stick man in black. Once I had a basic figure, I started coloring in pants, picked blue for blue jeans, but then decided that the blue looked like a good Superman blue, so I decided to turn it into Superman.
  6. Originally the drawing was more symmetrical, and seemed to be facing you. I shifted the neck over to the left one pixel, and (later, when I got to it) drew the S-shield off-center. Because the body is only 3px wide, I found it was especially important to allow myself to not be constrained by symmetry. Right-facing Superman hints at a three-dimensional appearance, as though we’re viewing him in 3/4 profile. It’s a tiny, but crucial detail, and shows just how little is needed to suggest dimension.
  7. After deciding to turn the figure into Superman, I picked a red for the waist.
  8. I drew the cape last. Since it uses the same red as the waist, I had a little bit of a problem where the cape touched the waist, causing them to blend together and the shapes became lost. To fix this, I added hands at the end of the arms — the left hand provides separation between the cape and the waist. Originally I was just going to leave the arms all blue, and not worry about hands, but having them proved very, er, handy, and enabled me to solve this problem.
  9. Superman normally has red boots. I didn’t think they were necessary, and so didn’t bother to draw them. Just to test my guess, I tried making the bottom two pixels of each leg the same red as the cape and waist. I didn’t like it. I think keeping the legs a solid unit is more important than adding in the “detail” of the red boots.

Next steps:

  1. Use this basic figure as the basis of other superheroes and see how many I can pull off in the 16×16 format.
  2. Create animations for this figure, using as few frames as possible, to convey actions like: jumping, running, flight, fighting.

Inspiration

You might think that is as minimal as you can get and still have a recognizable superman, but in fact you’d be wrong. One of my favorite Atari 2600 games was an inspiration to the drawing above. Here’s a sprite of Superman in flight (enlarged) that I swiped from Google image search. This is also just 16x10px… but…

Superman Sprite (Atari 2600)

Just three colors: Pink, blue, red. No hair, no S-shield, yet still you can tell who it is. A masterpiece of minimalism.

Pixel Art

games, graphics
2 Comments

Over the last two years, my primary focus in becoming a game developer has been on programming. I’ve made a lot of progress with my programming in the last two years, and I’m very happy with that, but I’m starting to feel like it’s time to balance that out by leveling up in other areas.

As a “game developer” I have to be proficient in a lot of different skill sets. My greatest strength, and how I see myself primarily, is as a designer. I am a designer who can program, draw, and to a very limited extend, do audio. No matter what I do, the more time I spend on doing it, the better I get.

Lately, I’ve been feeling like getting back into graphics. I find that when it comes to 2d video games, the stuff I have always loved the best has been low-res bitmap graphics, what has come to be known as “pixel art”. Pixel art is deceptively simple. It’s not easy to do well, and it requires a deep understanding of how shape and color work when the constraints are turned up almost as high as they can go.

I’ve been reading a lot of tutorials on how to do pixel art better, and I’m starting to try my hand at it. Now that I have a better understanding of what goes into good pixel art, I’m starting to feel less frustrated while working and enjoying the results more.

I’m at a point now where I feel like I won’t be embarrassing myself by sharing my work, and I really am interested in getting feedback from people who appreciate this kind of stuff, so I’ll be posting completed works and maybe some works-in-progress, along with my comments about it all.