How to Pixel: The Basics
I’ve noticed a lot of people on the forums asking for a pixel art tutorial.
Well, I’ve been on the job for a while, and this is the first step in hopefully a line of tutorials.
I'm hoping to help even the worst artist become acquainted with the fundamentals of pixel art, as fast as humanly possible.
(Disclaimer: not actually all that fast. Practice makes perfect!)
Why Learning the Basics is Important
Nobody ever truly masters anything. They can always become better.
Because of that, you should always try to learn and improve on your knowledge of pixel art, even on the basics.
All art is based on the same fundamental skills, and it is important to understand these fundamentals in order to become skilled at art.
Also, because of this, you might want to practice your art skills in another format other than pixel art.
It's easier to learn the basics while, say, sketching, and the same skills still apply.
Starting Off
The first step is to become intimately familiar with the program you use to make art.
Make sure you know your program inside-out, adn that you know of any helpful features.
You’ll need to be able to use these tools: pencil, color picker, bucket, selection tool, and zoom.
They are standard in most art programs.
You might want to find a thumbnail option in your art program.
This is so you don’t have to zoom out to see if that one pixel you just changed made it look better or worse.
(I personally find it VERY helpful.)
You may also might want to find a grid option- to make it easier to discern separate pixels.
When making pixel art, make sure to do it on a nice, even toned background.
You want to do this because doing it on a color that is too dark or bright will distort your view of your colors and end up lowering your contrast. (Proper contrast is a must!)
In Cortex Command you do it on a pink, or fuchsia, background, but in some cases you may want to work on a nice grey.
Before you start on any art piece, try to visualize where the light source is.
This is very important.
Having consistent light sources throughout your art piece is absolutely ESSENTIAL.
I will now continue to list the basics of pixel art.
I’ll have some example pictures and links for extra help. Make sure to check them out.
Also be sure to download any example pictures and inspect with the zoom tool!
It's very difficult to learn from pixel art when you can't see the individual pixels!
Shading
shading, v., a : to represent the effect of shade or shadow on, b : to add shading to, c : to color so that the shades pass gradually from one to another
Shading is an important part of all art.
It's all about imitating the effect of light and shadow.
It's brighter where more light is hitting and darker where it is not.
Shading shows the shape of objects.
Without shading... a circle is, well, a circle.
Now, WITH shading, it looks like a sphere, with volume and form.
Here's how to shade.
Make it brighter whre there's light shining on object. I'm simplifying this, but that's the general idea.
Cast shadows. It's shading after all. The shadows objects cast should affect not only themselves, making some areas brighter, but affect nearby objects in the object's shadow.
If you want to imitate real objects, you really need shading.
But, in some cases, you just want something to look cartoony or surreal.
You should decide if what you’re spriting needs heavy, light, or no shading at all.
Something that isn’t covered in my example is shading with colors!
Usually you want to change the hue when you shade with colors.
Its usually a subtle change, but it makes a big difference.
Usually as colors get darker you want the colors to become warmer (closer to red, orange, yellow, etc) and when they’re brighter you want the colors to be cooler (closer to purple, blue, green, etc.).
This can also be important when shading in cortex command, because not every color you’ll pick has a good gradient from black to white.
Another thing to remember with colors is to increase the saturation of the color as it gets closer to the mid tone of the color.
Why, you might ask? Well, let me explain:
Say I have a dark blue.
If I shade that, the light shining on it is mixing with the blue and causing it to be less saturated, sort of like diluting salt water.
The same thing goes for shadows.
Helpful Links:
http://www.itchy-animation.co.uk/light.htm
http://www.wayofthepixel.net/pixelation ... pic=7923.0
http://forums.toribash.com/showthread.php?t=119235
http://itchstudios.com/psg/art_tut.htm
Anti-Aliasing
Anti Aliasing, or AA, is a technique to artificially increase the resolution of your image.
"Huh?"
Well, basically, you're letting colors share pixels to make it seem like you have a righer resolution.
"... That made even less sense."
FINE! To put it simply and incorrectly: You're making things blurry.
As I was saying, AA is used to hide the fact that you have a limited resolution.
Meaning, it uses multiple shades and colors to give the illusion of a straight, continuous line or shape.
With AA colors don’t matter as much as the value, AKA how bright the color is.
Sometimes when dealing with small sprites you wont have room for AA.
That's okay, and it's better to convey detail than to have AA anyway!
Simply put, this cleans up jaggies, and makes it harder to spot individual pixels.
You may wish to not do this in order to give it a retro look.
Helpful Links:
http://www.wayofthepixel.net/pixelation ... #msg106193
http://www.wayofthepixel.net/pixelation ... 1#msg92041
http://www.wayofthepixel.net/pixelation ... 3#msg92043
http://www.wayofthepixel.net/pixelation ... 6#msg92106
http://forums.toribash.com/showthread.php?t=119235
Highlights/Reflectivity
Last, but definitely NOT least.
This is a big part of pixel art especially. Basically, you make things really shiny.
Cool, huh?
Well, on sharp corners, or parts of the image pointing directly into the light source you’ve visualized in your head, you make it brighter.
You can try to understand this by thinking about how light would reflect off of your image. More, or less, light will make its way to your eyes depending on angles, and various other factors.
I can't give you some holy grail as to how to make it work, you just have to practice and get it right.
Sometimes you might have outlines inside of your art, like the cube I’ve shown in previous examples.
Now, think about it. If you have a metal cube, are those corners going to be black?
No! Of course not!
So, what do you do?
If you just make them grey, the corners wont stand out as much and it wont look as much like a cube...
SOLUTION: MAKE THEM BRIGHT AND SHINY!!!
Basically, just like how dark colors can act as outlines, so can bright colors!
Like so:
Helpful Links:
http://www.wayofthepixel.net/pixelation ... 2#msg12272
http://www.wayofthepixel.net/pixelation ... 8#msg92058
http://www.wayofthepixel.net/pixelation ... 7#msg92207
http://forums.toribash.com/showpost.php ... stcount=50
http://itchstudios.com/psg/art_tut.htm
Putting It All Together
After you’ve learned this all, you need to put it all together.
You need to harmonize it all, balance it out. You need to be able to compromise, and decide what works and what doesn’t.
This step usually takes a lot of trial and error, practice, and experience.
In Closing
I hope this has helped you all out. If there are any comments, I’m glad to receive them.
I plan to add more to this tutorial, including links to other tutorials, helpful images, or anything else.
I'm also hoping to make tutorial videos, so look forward to that!
