Pixel Art – Wilson Fisk, The Kingpin of Crime

graphics
Comments

Pixel Art - "Kingpin" by Chris Sanyk -64x64px

Notes

  1. Another large body type, based on the Hulk figure.
  2. I kept everything large and chunky for the most part, but went down to 64×64 resolution to provide some detail to make it more apparent that we’re looking at a man wearing a suit. Kingpin is usually depicted wearing an elegant white double-breasted jacket over darker pants. I kept the color palette reduced by reusing the pants color in the shadows on the jacket.
  3. The buttons on the double breasted suit jacket are were done as single pixels at 32×32 resolution.
  4. I like the way the navy necktie and the orange waistcoat play off each other.

Pixel Art – Wolverine

graphics
Comments

Pixel Art - "Wolverine" by Chris Sanyk 64x64px

Notes:

  1. To accomodate Wolvie’s trademark hair, I had to shorten him a pixel. Fortunately, he’s known for having a compact stature.
  2. Wolverine has worn a number of costumes over the years. This one seemed like the easiest to create at 16×16. The Yellow and Blue one with the abdominal stripes on his back wrapping around to the belly would be trickier and require dropping down to higher resolution.
  3. The flared tops of his boots gave me trouble. I might need to refine these more.
  4. The claws were another tricky spot. I ended up leaving them fairly chunky, and I like the effect.
  5. The hair is super chunky. I refined it a tiny bit when I dropped down to higher detail level, but I could have done more. I felt like leaving it chunky, as a stylistic touch. But making it more finely detailed could have been an equally valid choice.
  6. I made his skin color a little darker, to reflect his nature as a more outdoorsy type.

Pixel Art – Captain America 64×64

graphics
Comments

Pixel Art - "Captain America "by Chris Sanyk 64x64

Notes

  1. Captain America was a challenge! I had to go down to 64×64 resolution to get the level of detail needed.
  2. I haven’t used anti-aliasing techniques so far, but this might be the first time I felt like it might have been necessary. Spider-Man and Hulk presented similar difficulties, but because of the number of colors and intricate detail on Captain America’s uniform, it was harder. Portions of Cap’s uniform are white; I used a light grey solid with a slightly darker outline to add definition to those parts of ihs uniform.
  3. I modified the square from Iron Man’s chest repulsor into a star by dipping down to higher resolution. I’m pretty pleased at the results.
  4. Cap’s boots flare out at the top. Adding this detail put me in a position of needing to add more definition at the toes.

Pixel Art – Iron Man 16×16

graphics
Comments

Pixel Art "Iron Man" by Chris Sanyk 16x16

Notes:

  1. Not much to say on this one. The one notable thing about this image is that, unlike Batman and Superman, I decided I needed to place the chest repulsor more centrally, because the light yellow color adjacent to the white background made it look too much like he had a hole missing from his chest. This effect doesn’t seem to affect Superman — I’m not sure if that’s because his blue uniform works better for keeping him together, or if it’s because the S-shield on Superman’s chest is more than one pixel.

Pixel Art – Juggernaut 16×16

graphics
Comments

Pixel Art "Juggernaut" by Chris Sanyk (16x16)

Notes

  1. Based on The Hulk I just did.
  2. Juggernaut actually ended up being a little bulkier. Not because I wanted him to be — I feel if anything he’s got to be a little smaller than the Hulk. But because I needed extra pixels to allow the detail necessary for his arm bands. His helmet also makes him look bulkier overall.
  3. Again, I’m pretty pleased with the way this one turned out.

Pixel Art – Hulk 16×16

graphics
Comments

Pixel Art "Hulk" by Chris Sanyk (16x16)

Notes

I’m pretty happy with this one!

  1. I started out with the same 16×16 figure that I based Superman off of, but added width to it. I added about 4px of extra girth to the Hulk, and it feels about right.
  2. It took me a while to figure out what to do with the arms. I just kept adding pixels until I felt it conveyed sufficient bulk.
  3. I immediately had a problem with the thicker limbs overlapping and blending together. I ended up spreading the legs out a bit more (and the Hulk is typically drawn with a wide, squatting stance, anyway, so doing this really helped “sell” the suggestion that this mass of pixels really is the Hulk. The arms were more problematic, in that they blended in with the body too much. I ended up using a secondary green color to offset and give the appearance of shadow and dimension. This really works well.
  4. I wish I could tell you the science for how I picked this shadow color, but I just looked at the color picker and guessed. My guess was pretty good — but was it the best one I could have made? I don’t really know.

Pixel Art – Spider-Man 16×16

graphics
Comments

Pixel Art "Spider-man" by Chris Sanyk 16x16

Notes

  1. I’m less happy with this one than I was with Batman or Superman. I think it is recognizable as Spider-man, but only just.
  2. If this figure were doing Spider-Man like things, like web swinging or wall crawling, it would still work. But, just standing there, you might not recognize who he’s supposed to be.
  3. A lot of the details in his costume are not able to be represented at this resolution.
    1. The fine linework needed for the web pattern on the red part of his suit is not possible.
    2. I can’t even do a decent spider emblem for the chest.
    3. And there aren’t enough pixels at 16×16 to allow for proper eyes.
    4. Adding any of these would make the costume instantly more recognizable.

Once enlarged to 512×512, it becomes tempting to put in some of the detail that was impossible at lower resolution. Sometimes, enhancing a pixel art drawing with a little bit of fine detail this way can work, but you have to be extremely careful with how you implement fine details.

You have to pick a small number of details to implement, or else the pixel-art nature of the drawing becomes lost. Remember, pixel art is not about details! It is about suggesting and implying details.

And you have to consistently apply the details you choose to include in a way that doesn’t make it stand out as “breaking the grid” of your 16×16 image. You don’t want to go too fine with the sub-grid pixels. If you can’t achieve what you want at half-grid, you probably are not going to be able to pull it off — better to re-do the whole thing at half-grid. A 32×32 version of this with a little less chunky-ness would be interesting to attempt. As would putting in some half-grid details on this enlargement of the 16×16 drawing.

So… Let’s see it.

Pixel Art - Spider-Man by Chris Sanyk - details experiment

Well, I think I like this a bit better. Here’s the approach I took to getting things looking right.

  1. Start in 16×16 resolution and once you’re at a point where you can go no further at that level of detail, only then do you consider dropping down to a higher resolution level.
  2. Before doing so, identify the details that you feel are missing and essential. That way, you don’t go overboard with detail once you get to a resolution where you can actually do it. Too much detail will ruin the chunky low res base that you started with — if you want to do that, just start over and do the whole thing starting at the higher res point. In this case, I decided that the spider emblem on the chest and the eyes were the critical missing details.
  3. Now you’re ready to put in those details. Resize the image from 16×16 to 32×32, and try to put them in now with the pencil. Again, take the same minimalist approach to implying or hinting at the detail. Don’t try to draw the detail, draw the impression it gives at this resolution.
  4. In this case, the eyes come out nicely as two half-pixels (relative to the size of the 16×16 grid) that overlap each other.
  5. The spider emblem is just a block of darker red with some legs hinted at. Note that it is not symmetrical! I skewed the placement of the legs a bit, which helps avoid it looking like a geometric shape, and allows the mind to fill in the spider.

I also tried going down a further level of detail and put a black outline around the eyes, but I didn’t like it. Knowing when you should stop adding details is key.

Of course, now that I’ve done this, if I wanted to use Spidey next to Batman and Superman, I’ll want to go back and revisit Bats and Supes and make sure that they are given the equivalent attention to details as well. This means probably adding some detail to their chest logos, and maybe adding eyes to the Batman’s cowl. Keeping balance and consistency between different characters is just as important as getting them right individually.

Pixel Art – Batman 16×16

graphics
Comments


Batman pixel art by Chris Sanyk (16x16px)

Process Notes:

  1. Now that I have the basic figure down, it’s possible to crank out variants in very little time at all.
  2. Batman is almost a palette swap of Superman.
  3. I did add boots for Batman. It works here where it didn’t on Superman, I believe because the contrast difference between the boot and leg is not so strong.
  4. I also changed the shape of Batman’s head, just slightly to give the impression of the horned cowl.
  5. At this resolution, you can’t really do the yellow bat logo, just the old school all black one.
  6. Batman normally wears gloves, but if I change the hands from pink to dark grey, we would lose them in the cape and waist.
  7. I also can’t do any details that would indicate the utility belt.

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.