Introduction: From Pixel to Pixel Art
I been asked a lot lately how I go about making pixel art. It's not really as relevant to the Legend of Krystal development as other things but in an effort to stop getting new private messages on the matter I figured I would just explain a bit of what I do. At the very least it will give aspiring pixel artists and game makers an idea on how to go about making things.
As with any art, it starts off with a simple idea. I know some artists have a hard time coming up with things to draw, and some days I get that too. However careful planning allows you to get a better grasp of your image you are making. It also allows you to sketch as a second nature, and most importantly allows you the ability to manage time efficiently.
There are hundreds of painting programs out there, and some of them costing several hundreds of dollars, there are also different accessories such as tablets that allow you to draw better. The advantage of pixel art is that you don't need any expensive programs or set up, all you need is a bit of creativity, paint (a program that is stock on all windows computer), and a mouse.
However there are some programs that I do like a lot. One of them is called paint.net, and while the .net may throw many people off it is an upgrade from normal paint. It is an open sourced software that you can download for free from;
http://www.getpaint.net/
Do be aware however that you need the .net mainframe, and that it takes a while to install. It is not necessary but it has a couple features I really enjoy while working, a color wheel, magic wand, and more importantly a layer function. Many of the different painting programs out there have these functions so do not feel forced to download this program, its a matter of preference only.
Getting to Know Your Tools: Building a Strong Foundation
Paint:
Understanding how your program works means you are not only become familiar with it, but it also means you can use its tools to the fullest. Paint has had many iterations over the years, the one in this tutorial will be the one that came with my netbook, so I am assuming this is the windows 7 version. For the most part paint has remained the same for a long time so most of the symbols and functions will be universal across the many platforms.
Upon opening paint you are greeted with a white canvas. The canvas is usually set to the same size as the last project you worked on, the pixels displayed either under the resize tab, or on the bottom where I marked canvas size. You can change the canvas side by either using the re-size function (do this before a project or you will stretch it), or by hovering your mouse over the squares that appear on the edge of the canvas; proceed by click on them and dragging the canvas to the size you want. The advantage of this over image re-size is that you can get the image the size you want it without having to stretch anything.
There are also a few other things I labeled:
[A]
This has the selection tab;
-The selection tab is comprised of;
-Rectangular selection. Click and drag to form a rectangle, anything selected in this rectangle is now selected, you can use this to delete what is selected (delete key) or move it around by dragging it in the center. Right clicking will bring up options that are futher covered in subsequent descriptions. As with the canvas you can drag the corners or the sides of a selected object to stretch it but it will distort the image, so its usually better to draw something than to distort it.
-Free form selection follows much of the same function, with the difference that you draw what you want to be selected.
-Select all.... Selects all
-Invert Selection. This inverts what is selected. If you had a square selected then click this, everything but the square you previously had selected is now selected.
-Delete
-Transparent Selection, in the older versions this is show by having a white square on a background or a hashed square on a background with the image showing. In this case you need to select it before it is applied, but once applied any color that is in the secondary color slot is ignored while moving. In the default set up the two colors are black and white, white being the secondary. So in this case you could move a black rectangle onto a red rectangle and not have to worry about white getting onto the triangle.
Crop: This crops to the selection
Resize;
~You can resize in percentages (%) or in pixels (px).
~horizontal and vertical
~or skew the image by degrees
You can also rotate selected objects;
Flip horizontally, vertically, by angle, etc.
[B]
-Pencil: allows you to draw one pixel at a time. Left click is primary color, right click secondary color.
-Paint bucket: this allows you to quickly fill in areas, anything that is surrounded by pixels will be colored in, or any solid color that is connect by at least one pixel will be replaced with the chosen color.
=Letter tool for applying text, be wary that at smaller scales you may have to create your own letters with a pencil.
-Eraser, this tool erases, however be aware it leaves behind the color in the secondary slot, so if you have white when you use it you create white. Also if you right click with it, the secondary color will replace the primary color. This is especially useful for recoloring in paint.
-Dropper tool, click to replace current color with chosen color
-Magnifying glass, left click to zoom, right click to zoom out.
[C]
These are brushes. For other things they are useful but not so much for pixel art. However I do recommend you become familiar with them if you ever want to use them for something.
[D]
These are assorted tools, for the most part the line tool (1st one in the box) and the curve are what you will use unless you have a preference of drawing by hand. On the circle and square drawing tools, you have the option to fill the shapes, or have a different colored outline with a different color filling.
[E]
This is just for changing the thickness of the brushes, and for the tools listed in [D]
[F]
These are your colors. Primary and Secondary are the ones currently selected. The swatches allow you to get the color you want, however if you double click on a swatch you can modify the value (conversely click on the edit color button) and get a color you want, this is especially useful for when you want to get a shade or a highlight of a specific color.
That is essentially everything you need to know with paint. There a few tricks I know but this will be enough to get you started.
Paint.Net
This is my preferred program for anything more complicated than a simple piece (for pixel art, when it comes to drawing I have a whole slew of other programs). There are several guides it comes with, and you can always ask on their developmental forums about any question you have. However for the purpose of this tutorial I will focus on the things you need most;
This is paint.net's interface. Nothing too complicated however there are a few things I will point out.
[A]
Brush Width, however to the left where the brush is I forgot to point out you can change it to other settings. Most of the work however will be done in pencil tool anyway.
[B]
Tool tab;
All of these are self explanatory however a few tips;
Wand tool you have to chose threshold, in pixel art it is usually 0% tolerance meaning it will select exactly all pixels of the same color. Shift clicking selects all the pixels of that color on the canvas.
On the bar where it shows a Erlenmeyer flask is a smooth line, this is anti-aliasing. If you are doing classic pixel art you can click this to remove it make your lines and brushes draw only the color selected. This removes the softness however so do as you prefer.
[C]
Color wheel;
You can select primary/secondary active colors here, you can chose values from the wheel by clicking or by grabbing preset swatches. If you know the exact RGB (Red/Green/Blue) value you can input it here or toy around with it. You can use HSV (Hue/Saturation/Value) to find the highlight, base coats, and shades of your pixel art.
[D]
Layer window;
This allows you to work on layers. I use this when I have to do complex pixel art. On one layer I typically sketch out the skeleton or general shapes I want, on the other layers I make the line art. You don't need layers if you don't want to use them but it allows you to keep organized otherwise.
_________________________________________________________________
That is end of part one for now. I will post more later. The next section will just walk you through the process I use when making pixel art.
