Pixel Art Tutorials

[RoconzaArt]

Part 1: Pixel Basics

I thought since a lot of people use pixel art for there sites I may as well help out. Before we start you can have all the fancy tools photoshop, graphics gale or tablet and that will not make your a good pixel artist. It takes practice, let me run that by you again PRACTICE!

Before why start I have to give you with important information. Don't blame me if you skipped it and some thing went wrong.

Tools:

MS Paint
(any program that has a pencil tool will work but I highly recommend paint)

Why MS Paint:

You may have seen it...you know MS paint that program that sits there collecting dust. I know what your thinking "MS that lame paint program!?" Let me explain a few things, first it's a very easy to use with every thing you need for pixel art save transparency support and is a free paint program that that comes build in to your computer already. I like MS paint because it does not take up a lot of memory or CPU on your computer. This is great if like to do other things while spriting. Lastly you can in fact make very amazing work if you know how to use it to it's full potential.

Transparency:

Now as you may know MS does not have transparency support but this is not a problem. Open program with transparency support. There are other options if for some reason you can't get such a program. Try free online image editors likes http://pixlr.com. It's like photoshop and it's free. The last option is to use a web site that will make your image transparent but I've never tried them so I can't explain how to use them.


Pixels: A pixel is just a square and pixel art is lining up pixels to form a picture. Really every thing is is made of of pixels you just can't tell. That is the job of the pixel artist, to take squares and transform them so you forget there just a bunch of squares. Think of your self a magician, a person uses techniques to make the impossible seem real. There some things that are imposable for pixel art to so your job is to give the illusion that it is possible. Like a magic trick it's not what it appears to be. Zoom in on pixel art and you will notice it's true nature is more noticeable.

Zoomed in :http://www.mysidiaadoptables.com/for...4&pictureid=23 Zoomed out http://www.mysidiaadoptables.com/for...4&pictureid=24
Zoomed in it looks like mess of squares but if you look at the bigger picture it can be amazing!
Note I did not do this picture.


Tool:



Knowing to pixel art is knowing your tools and how to use them to there fullest. I'll show you them even you if have use them already.

Pencil Tool:

This tool is you very best friend and maybe the most important next the the eraser. In truth it and the pencil tool is all you really need to use. You see unlike a brush tool the pencil makes pure pixels when you click down. To explain why this is important I most explain anti aliasing.

-Anti-aliasing:



Left AA used in Brushes Right no AA is use for pencils

Now this what we call Anti aliasing and it's there to give objects the illusion of smoothness. You know every thing is made up of pixels which are squares but as you can guess this makes thinks look choppy. In order to make pixels look smooth you gradually lighten the pixels on the edge to make it bend.

You don't want use pen or brush tools for pixel art outlines because of this. Do not AA outside the outline of a sprite! You only want to use anti aliasing IF and or when you need it.

Making lineart:

Never paint your line!

You always want to use a 1px pencil tool for you pixel at. The best way to make smooth and neat pixel art is to make the lines by hand. This means placing each pixel one by one. IF you do draw then remove extra stray pixels. You see the most common mistake people make is to draw lines and not clean them up. It's very impotent to clean up any tray lines in your art or it will give your picture a jagged appearance..




Eraser Tool:

Next to your pencil the eraser tool is another most have tool. Now it's VERY important that your eraser tool is a pencil eraser. Like brushes erasers can have anti aliasing. In programs like photoshop make sure to set your eraser tool to pencil to avoid AA. Personally I can't see you ever needing AA in your eraser tool.

Very handy MS paint trick with the eraser tool:

In MS paint the eraser tool can do a very cool trick that is crucial if you use MS paint for your pixel art.

Here's a example of how it works.

1. Make a like in blue.

2. Make a line over it in red.

3. Now make sure blue is your main color and white is your secondary color.

4. Now right click and hold then go over the blue and red lines.

5. If you did it right you should have only remove the blue line!

This allows you to cover the a line in the secondary color. This works for you if want to color a black line blue without messing with any other color on your canvas. Most importantly it will let you make guide lines and color them over for the line art then eraser the guide lines leaving only your line art.

More Handy tricks in MS:

Did you know you can have up to three colors in MS selected? Not only can you have a main and secondary colors selected but you can have a third color selected. All you have to do is hold down Ctrl and select a color and behind the two other colors should be the new color. Now when ever you hold down the Ctrl button you will color with the third color.

Fill Tool:

This is good for filling in your base colors quick and easy. I don't recommend it for recoloring. I recommend the eraser tool using the above mentioned technique.


Select and Free form Select:

These two are also very handy for moving and repositioning your line art but best to use it before you color and shade.

Note:in my copy of photoshop the free form select tool distorts line after moving them. You have to make sure your settings right before moving using this tool.

Eye dropper

I think this is a very handy tool to have. For me I make a list of the pallets I'm using in my sprite and just eye drop when the time comes to color. Also handy if you use the erase tool trick a lot.

Zoom Tool

Another very important tool to use in your art. You will need to zoom in and out a lot when your working. In MS paint there is a fifth zoom setting but you have to know how to find it.



Well that ends part 1 of my Pixel tutorial. Sadly I can't post any more pictures in this post. So see you in the next post for part 2.