Monday, December 24, 2012

Basic Pixel art tutorial

Alright,

I keep saying I'll make some tutorials, so here you go. These are more or less the first things I tell people when they ask me about getting better at pixel art. The basics.


Color


One of the most important aspects of art is color, and unfortunately it's one of the things that people struggle with the most. Even the most basic concepts are all but neglected in art classes, and so pixel artists sometimes go years without learning about them at all.


As an example, I make games with rape, but generally I try to avoid raping the player's eyes with a color palette like say, this, 


That's what happens when you use nothing but 100% saturation. Fill an entire screen with colors like that and you'll give your players a headache pretty fast.

To avoid choosing poor colors, there are three general rules of thumb you can follow when it comes to hue and saturation,

1. The darker the color, the lower the saturation.
2. The brighter the color, the higher the saturation.
3. Shift the hue between shades. (For instance, yellow can be used as a highlight for green)

Here is what it looks like with more neutral colors, with the hue and saturation shifting between each shade.


In addition to being much easier on the eyes, shifting the hue and saturation also gives you more freedom when it comes to shading, and how you choose colors will distinguish you from other artists.

Shading


Next on the list of beginner mistakes is shading. Specifically, what is referred to as "pillow" shading. This is when an object is shaded with no regard for it's shape. Like so,


Now, shading is a little more unique to each artist, but here are some general tips.

1. Avoid simply shading the center of an object. (Pillow shading).
2. Choose a light source.
3. Choose the color of your outlines based on the shades of your pallet.
4. Try to limit yourself to 3 or 4 shades per color (The base color, a highlight, a shadow, and a color for your darkest outline). Only use more when necessary.

Here is an example of how you can shade an object using 4 colors, based on a chosen light source.


Keep it simple. Too many colors will add more work when it comes time to edit or animate your sprites.



Soft edges


Last but not least, for today, is softening edges. if you make three shades run parallel to each other, it will appear square and boxy. Getting rid of some of the "outline" will make the edge appear softer, and give the illusion of a curve, like so.







Anyhow, that's all for now. I'll do a tutorial based around creating actual sprites, tomorrow.


4 comments:

  1. This is very interesting. I've never taken an art class myself, but I have tried to create some graphics for mini games that I've made in the past, so I will be able to use this info.

    Is this your holiday gift to those that watch your blog Kyrieru?

    ReplyDelete
  2. I have tried many times to make pixel art yet I always get stuck with the color/shading problem, and now you gave us a simple guide on how to do it! Wether or not this was intentionally posted on christmas it's an awesome gift for all of us who follow you.

    I have a question: Do you use a graphics tablet or a mouse to make pixel sprites?

    ReplyDelete
    Replies
    1. thanks very much for your lesson

      Delete
  3. requesting walk cycle, cause none of the other tutorials i had on google really helped with that

    ReplyDelete