Pixel Workshop: The Basics

[Perihelion]

Above all else, pixel art is about precision. A single pixel can completely change a piece, so each one has to be placed with thought for how it interacts with the entire work. But bear in mind that pixels are just another medium, and in order to be a good pixel artist, you must first be a good artist. Form and lighting and composition and anatomy and color theory and all of those things are just as essential in pixel art as they are with any other medium. You can do basic game graphics without strong knowledge of fundamentals, but it'll hamstring your development sooner or later, as I can attest from personal experience.

That said, there are a lot of issues specific to pixel art, and I'll be discussing them here. I'm leaving color for a later workshop since it's a big topic.

Where to Start?

I have three main tips for beginners.

Start simple.

Probably the most common problem I see with inexperienced pixel artists is that they way overcomplicate their work and get lost. So in my opinion, the first thing you need to do is learn how to make attractive art using a small number of colors. Focus on conveying form correctly before you do anything else. If your art doesn't look right with three colors, it won't look right with thirty. I also recommend doing small sprites and tiles to start out with, as well as stealing other people's palettes. Bad color choice will make your work a lot more difficult, and besides, it's easier to focus on learning one thing at a time.

Study references.

You can learn a ton from other people's art. Find some art similar to what you want to do and zoom in on it. Study how they textured things and try to identify the underlying shapes beneath the shading. Look at lighting and color and form. Don't blatantly copy other people's work, but it's okay to imitate their style until you develop your own, or better yet combine several different styles. Look on Pixel Joint or Pixelation, or old SNES games like Chrono Trigger or Seiken Densetsu 3.

Solicit critique.

Get better artists to look at your work and give you feedback. Get them to do edits for you if you can. Also, develop the ability to look critically at your own work. That ability is essential in just about any endeavor, and art is no exception. Study your own work and identify flaws, then look at the work of better artists and see how they avoided those flaws, or look up real photo references.



Finally, I want to link two fantastic art tutorials.

Pixelation Knowledge Repository: I drew a lot of the ideas in this tutorial from here, and I definitely recommend it as further reading. The guys who wrote this know a lot more about pixel art than me.

PSG Art Tutorial: This has a lot of tips on shading and color and general art in a handy pictoral format.

 

[Perihelion]

Lighting

Lighting is very important to consider. Brightness indicates either proximity to light or proximity to the foreground. Consider the following three balls:

The first ball has light coming directly from the front. The highlight is directly in the center, and the shadow forms an even rim all the way around. There are very few situations where you'll want to do this. We call it pillow-shading in pixel art, and it's one of the more common beginner mistakes. Here's an example of a pillow-shaded sprite:


Notice how the bright parts are exactly in the middle and how dark the edges are comparatively. Here it is next to some better hairstyles:


You see how the purple hair has a pillow-like quality, but the other hairs look more fully dimensional? The top of the head is light because it's close to the light source, which is directly overhead, and then the bottom of the hair is bright because it's falling on the shoulders and coming out from the neck. It's closer to the camera than the dark hair directly above it.

This segues into my discussion about overhead highlighting. This is the most common light position for sprites and tiles because it allows them to be mirrored and still look good.


Notice how the highlight on top of her head is directly in the center. When the sprite is mirrored, it still looks fine next to the other sprites.

Here's an even more dramatic example of overhead lighting:

Notice how dark the body is compared to the shoulders. The dramatic difference makes the shoulders look closer to the camera in addition to being consistent with the lighting.

Notice how for both of these, the brightest area of the head is not the edge.

Doing this isn't EVIL or anything, but be aware that it makes the object look flatter and usually isn't suitable for round things like heads.

Finally, putting the light source in the top left is most common in art where mirroring and whatnot doesn't matter. The third ball is the most interesting of the three. Symmetry is visually kind of boring, so making the light asymmetrical makes adds more energy and excitement.

Also note that there's a lighter highlight around the edge of the balls on the bottom. That's bounce light. Light bounces off of objects onto other objects even for non-mirrored surfaces, with light objects reflecting more light.

 

[Perihelion]

Clusters, Lines, and Curves

A pixel cluster is simply a group of pixels that represents a shape or shading on an object--the shape of a face, a highlight on a cheek, whatever. So what makes a good cluster?

Take a look at this excellent piece by ptoing:

8 Color Club Faces by ptoing

Just glancing at this, it looks very tight, clean, and refined. Why? Zoom in and study the edges of his pixel clusters. Tons of them are horizontal, vertical, or 45-degree lines.

This isn't a coincidence. Those three lines have the highest apparent resolution of any line you can draw on the computer, which is just a fancy way of saying that they're crisp and don't look like they're made out of pixels. They look very similar to how the same line would look if you drew it with a pencil and a ruler. That isn't to say you have to use them extensively, but it's good to keep in mind. The other way to create high apparent resolution is to use anti-aliasing, which I'll explain below.

Notice that anywhere there isn't a straight line, there's a smooth curve. How do you make a smooth curve? Look at this:

Here I drew a curve and labeled every segment with the number of pixels. Notice that each segment increases and decreases smoothly. They don't all go 1 2 3 4, but there's no 1 3 2 5. This smooth increase and decrease is almost always the correct way to draw a curve unless you're deliberately trying to make it look rough and jagged.

Here are some more great pieces. Zoom in on them and examine their curves and lines.


Go Blastoise! by Delicious


Mighty Chieftain by llshadow


blonde china dress girl by Shawn

 

[Perihelion]

Pixeling Techniques

Basically anti-aliasing is placing transition colors next to lines to make them look smoother. Here's an example:

Basically the idea is that the darkness of several adjacent pixels kind of averages out and looks like one smooth shape to the eye. In addition to transitions, anti-aliasing can be used to adjust shapes by partial pixels, which is one way it can be used to increase the apparent resolution of a piece of art. For example, because I put dark colors next to a solid line, it looks thicker than one pixel, maybe 1.5. If I wanted to keep it at one pixel, I would do something more like this:

Notice how the 2x2 boxes of lighter grays kind of average together to make a 1px-looking "bridge" when fully zoomed out. The light gray and the dark gray pixels next to each other kind of "add" to one black pixel.

Here's another example of anti-aliasing used to imply a less than one pixel change:

The base line is a straight 1:1 line, but with anti-aliasing, I gave it a subtle curve.

Subpixeling is an advanced technique that makes use of this idea

to make shapes that bridge pixels. (The subpixel rendering article on Wikipedia is about something different that, while interesting, isn't usually super useful in pixel art.) Generally subpixeling is used in animations for subtle changes like breathing or movement in small sprites. I'm not going to go into it in great depth, but here are a couple examples:


(made by ptoing)


New Orion by Xion Night (look at the face in particular)

One last note about anti-aliasing! Don't do this:

This isn't anti-aliasing, it's banding. Instead of increasing the apparent resolution of your work, it decreases it because it emphasizes the blockiness of the pixels. Don't have the edges of multiple colors line up like that; stagger them instead.

Finally, dithering is adding "noise" to your art to transition between two colors. It looks like this:

There are many different dithering patterns, but the most common one is the checkerboard. Now, one of the most common beginner mistakes I see is overusing dithering. This is an important point. If you're just starting out, I encourage you to avoid it until you can make nice pixel clusters. There are only two reasons to ever use dithering, and those are texture and blending colors in a really limited palette.

Here's an example of dithering used with a very limited palette:

The Spartan by Helm (cropped for size, but definitely look at the original, it kicks ass)

Here he blended his four (4!) colors together to create many more colors. He also picked an interesting dithering pattern.

Here's an example of dithering used for texture:

One More Time by iLKke
Notice how the dithering is carefully applied to the mushroom stem and cap. This gives them a nice rough texture appropriate to the material.
Compare it to this:

Emerging from the Cocoon by MashPotato

Now, this is a pretty cool piece, but it has unnecessary dithering. The dithering in the background is unnecessary; there's no object that wants texture, and it looks like it was just there to add detail or visual interest rather than a legitimate need to transition between the colors. Also, the noise on the face makes the skin look much rougher than skin should look. Areas of flat color can look very attractive, so don't be afraid to have them! Just make sure they're shaped well and you'll be good.

 

[Perihelion]

Well, I think that's about it for the basics. You can post any pixel art you're working on here. If you're not sure where to start, I recommend going here, studying the screens, borrowing the palettes, and trying to make some 16x16 tiles and sprites in a similar style. Again, I recommend starting small and using few colors.

Here are a few nice screens from that thread to get you started:

And here are some palettes drawn from the above screens:

Sprites are on top, tiles are on bottom. Take one of the three tile palettes and try to draw a few tiles. Make floor, furniture, vegetation, rocks, whatever you want, plus a little sprite or two. The tiles should be 16x16 and the sprites sized to match. I'll be here to crit whatever you make.

 

[bacon]

man peri I am learning so much technique and stuff just from reading it
and you bring up some great points/ideas and this is super helpful

Ive always have had a hard time with lighting so hopefully this will help me get better :c

 

[Perihelion]

I'm glad you found it helpful! Feel free to take a crack at some sprites and/or tiles, and I'll be happy to give you feedback on them.

 

[regi]

Very useful workshop Peri! Inspired me to churn out some sprites again for my own game.

Here's a thing I made quite awhile back, but I'm probably going to start over now that I've read your workshop. It's supposed to be a turtle-like enemy (RTP based), but I feel like I've got the angle wrong and the colors don't fit the RTP (haven't started shading yet). Any suggestions?

 

[Dr. Funk]

made this thing. it's a portrait/fanart of the rapper MF DOOM. 12 colors including transparency. I feel like it could be improved mainly with smoothness and lighting.

 

[Perihelion]

Oh sorry, been a busy few days! I'll watch this thread more carefully. Let's see here.

Regi, the perspective actually looks fine to me. As far as working with the RTP goes, you have to remember that the RTP is really desaturated. I would actually recommend increasing the RTP's contrast and saturation rather than decreasing your sprite's, though, because the RTP looks like shit with how washed out it is.

Dr_Funk, the overall shape looks fine to me, but you have serious banding problems. The hood is the main offender, but there's a little around the cheeks too. I can do an edit if you're still not sure what I'm talking about.

 

[Echo Magnum]

After seeing those screens from star ocean blue sphere I'm inspired to start small as you said ( I was truly amazed and inspired at how they used limited shading and multiple perspectives to create some really sweet maps and sprites, :shock: Wish their was an English translation, the game looks super plus I've never really been into star ocean since now ).

I'll try post something here for your guidance and criticism since I'm a relatively novice spriter. I've been doing Frankenstein-Sprites and templates for a few months getting the hang of it all, recently I've gained some skills from tutorials here and their but this summed it up really well.
I've been neglecting color and shading though as most of my stuffs pillow shaded, I'll finally get into shading again since I now see what I was doing wrong, your topic on dithering and anti-aliasing really helped ( especially the anti-aliasing ). Plus your right about the sub pixeling Wikipedia article lol.

Thanks again for the tutorial, :rock:

 

[Perihelion]

Hey, I'm glad it was helpful! Feel free to post what you pixel here and I'll be glad to crit it. Yeah, the artists in SO:BS really did a ton with a little. I feel like it's important to learn how to do that before you start getting wrapped up in elaborate shading. Build a strong foundation before adding detail, as it were.

 

[Echo Magnum]

Thats true, I realized I actually have a lot to learn even with small simple sprites and maps mostly with animation, you said anti-alising would help with small movements especially for small sprites. could you help me with the attack animation and possibly critique the rest if needed. here's a link to the topic in the spoiler.

Spoiler

http://www.arpgmaker.com/viewtopic.php?f=6&t=75368

Basically how do you animate complex movement on small sprites like slashing a sword? Or do I just need larger sprites to do this. I was amazed by blue spheres battle animations, they are soo smooth unyet the sprites are relatively small. When zooming in on one of their sprites it looked confusing :crazy: .

 

[Perihelion]

Animation is actually one of my weak points, but a big part of making things look like they're moving authentically is stretching and compressing. For a sword slash in particular, consider this:

The sword moves so fast here that it becomes a blur.

Regardless, I can't help you unless you actually try something and post it!

 

[Petros]

This article is great Peri, but it's proven one thing to me. I am NEVER trying Pixel Art... but for those that have the talent but not the method, this is great.