Pixel Art Tutorial

A place for tutorials on how to get the most out of Flash

Pixel Art Tutorial

Postby Thaedael » Wed May 04, 2011 10:54 pm

Pixel Art with Thaedael

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.

Image

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;

Image

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.
Thaedael
 

Re: Pixel Art Tutorial

Postby Thaedael » Thu May 05, 2011 6:20 pm

Connecting the Pixels, From Concept to Final Art
Are you done familiarizing yourself with your tools? No? I can wait honestly I can. For those art students that did do the assigned readings we will continue on a bit with my process. This is going to be done in Paint.net but feel free to follow along with any of the programs you have decided to pick up.

Setting Up: Sketch twice, Pixel art Once:

I first started with a blank canvas. I wanted to make an avatar, since most of the questions about pixel art have been about my avatar, and so I started by changing the size of my canvas.

Image

I go to image re-size, check absolute size box, take off maintain aspect ratio, and type in 60 pixels by 60 pixels. So far pretty easy no?

Image

I got to window, hit layers, the layer window now pops open. I make a new layer (image>add new layer OR click the add layer button on the layer window on the bottom left hand side). I then click properties of layer to raise its transparency so that my sketch is nice and light. Alternatively you could alter the brush flow and transparency, it is really up to you.

I had a rough idea of the pose I wanted so I drew a quick little skeleton. Considering this is a furry community I decided to make it a furry as opposed to a human like I normally do, however this still started off with a roughly human skeleton.

Image

On a new layer I began to outline the proportions I wanted by using basic anatomy lessons. i decided to exagerate the rump a little since I wanted a bite more focus on the tail area. I also sketched out how I wanted the tail to go, overlapping some of the limbs previously sketched.

Image

On a new layer I finally begin to make the outline I want, I did it in two separate colors that contrast each-other and everything on the layers underneath. Depending what kind of artist you are you can do this to separate the colors you will use, especially if you plan not to use black lines like I did here. If you want to take it a step further, you can also make the outline change with the lighting but I figured I would keep it simple for now.

Image

Here you see what I have done up to this point, note that the face is a different color after talking to our resident furry expert KatsuO_O, he thinks a muzzle was better so I tried. Unfortunately it looks like a :3 face, which is ok with me <3.

Filling it out; the way to trick the eyes;

Now that we got ourselves a basic outline, time to have some fun doing some coloring. In this art I will just use basic coloring, with a dash of dithering to add a bit of nice transition where I think it will be needed.

Image

I start off with by base-coating the colors I want into the line art. I already begin to toy with a palette, and want to see how the colors interact with each-other before I continue on.

Image

After talking to Katsu again I end up reworking my palette a little bit. I have four shades of each color, and I decide to break up the line art's rigidity a bit by replacing black with the a darker shade of the colors the line art wraps around. As mentioned before if you want to put in more effort you can also have the line art affected by the light source too.

I begin with the lightest color already outlined in the darkest line colors.
Image

I started off with the hair and tail colors. I used a bit of dithering on the tail to break it up and make it look a little more furry/textured.

Dithering is basically a style of applying a pixels to trick the eye into thinking there is a gradient;
Image

In traditional digital art when you make a gradient it makes thousands of pixels fade between the colors you want, and so subtly it looks like one smooth transition. In pixel art you can mimic this to a degree using a technique called dithering. If you chose two colors that are similar and apply a dithering pattern it tricks the eye into generating the third color between the two by blending. This is especially useful in creating the illusions of shading, and in larger pixel arts is essential in making furs, hairs, and skin tones. It also allows you to cut back on color palettes if you are under programming restraints.

After which I end up finishing the fur tones and the eyes. I decided to add a little bit of a frame using the most underused color which was my eye colors. Then I put up a signature on it, since I do like my work and want to take pride in making it.

Image

However I needed to fix up a few things, and Kat wanted the contrast to appear better at 100% (1:1 pixels) so I tweaked the colors on the fur a little.

Image

That is basically how I do my pixel art. Just keep practicing it and you can do a lot with it :)

___________________________________________
As a side not her name will by Iyaden, and I will need to go bug Bussa about drawing her. Then I can do a line art and coloring tutorial in photoshop next <3
Thaedael
 

Re: Pixel Art Tutorial

Postby Kryger » Sat May 07, 2011 12:51 am

This looks pretty freaking legit. And by that I mean it looks great. I'll have to make some in my spare time.
You are no God to me. This is a Reckoning.
You are nothing to me. This is a Reckoning.
User avatar
Kryger
 
Joined: Sun Mar 14, 2010 9:04 pm
Location: Hell

Re: Pixel Art Tutorial

Postby kuja » Sat May 07, 2011 9:34 pm

Awesome. This topic should be fixed.
User avatar
kuja
 
Joined: Fri Jun 11, 2010 8:05 pm
Location: Boletaria.

Re: Pixel Art Tutorial

Postby prettypinkpwny » Sun May 08, 2011 1:43 pm

I feel like the tail should be above the lining of the butt. Just saying.
User avatar
prettypinkpwny
 
Joined: Thu Feb 25, 2010 8:08 am

Re: Pixel Art Tutorial

Postby Thaedael » Sun May 08, 2011 6:51 pm

Hey be nice now, this is maybe my second furry character ever. ^^;;
Thaedael
 

Re: Pixel Art Tutorial

Postby Cthulhu » Tue May 31, 2011 4:19 am

It's nice to find another tutorial on here (the other being the flash thread), one that's also informative. I definitely plan to look at this again if I ever plan to make a game of pixels. Haha, if I ever make a game in the first place...
User avatar
Cthulhu
 
Joined: Mon May 30, 2011 10:52 pm

Re: Pixel Art Tutorial

Postby Thaedael » Thu Jun 02, 2011 2:11 pm

Going to move this from general to the newly formed tutorial section, and pin it t the request of Kuja.
Thaedael
 

Re: Pixel Art Tutorial

Postby Nookie » Fri Jun 24, 2011 3:23 pm

Pretty nice tutorial, thanks :)
User avatar
Nookie
 
Joined: Tue Jun 14, 2011 4:44 pm

Re: Pixel Art Tutorial

Postby ANooB » Sat Jul 02, 2011 1:47 am

May I worship you??? I'm having trouble posing characters. They just look like stiff zombies with no expression. Is there any way I can learn to pose pixel art so I can portray energy and motion and stuff?????
Spruce your games up using free vector content: viewtopic.php?f=45&t=7109

There're no such things as mistakes, just happy little accidents. ~Bob Ross
User avatar
ANooB
 
Joined: Mon Aug 09, 2010 12:58 am

Re: Pixel Art Tutorial

Postby Hnyarly » Sat Jul 09, 2011 10:46 am

Great tutorial.
I'd like to ask: are there tools better than MS paint for pixel drawing? Any recommendation?
User avatar
Hnyarly
 
Joined: Tue Jun 07, 2011 5:11 pm

Re: Pixel Art Tutorial

Postby ANooB » Sat Jul 09, 2011 3:21 pm

Hnyarly Wrote:Great tutorial.
I'd like to ask: are there tools better than MS paint for pixel drawing? Any recommendation?


He's using Paint.Net for spriting. Very good program for that. Free, too. Other good ones are GIMP (Also Free and capable of Photoshop level work) and Photoshop (expensive, but pirateable.) I'd recommend PAINT.NET cuz it's the easiest and sprites don't really need all the bells and whistles of the other two.

PAINT.NET: http://paint.net/

GIMP: http://www.gimp.org/
Spruce your games up using free vector content: viewtopic.php?f=45&t=7109

There're no such things as mistakes, just happy little accidents. ~Bob Ross
User avatar
ANooB
 
Joined: Mon Aug 09, 2010 12:58 am

Re: Pixel Art Tutorial

Postby Thaedael » Sat Jan 14, 2012 3:39 am

Anyone still care about pixel art. Looking back it was a shitty tutorial and the quality of sprite I made is pretty bad considering what I work with on a daily basis. If there is enough interest I might go about showing real techniques instead of just the basics.
Thaedael
 

Re: Pixel Art Tutorial

Postby BlueLight » Sat Jan 14, 2012 10:00 am

Thaedael Wrote:Anyone still care about pixel art. Looking back it was a shitty tutorial and the quality of sprite I made is pretty bad considering what I work with on a daily basis. If there is enough interest I might go about showing real techniques instead of just the basics.

Yes my good sir.

So i am interested. I was making a map by using titles.

So i am making tiles by a 60 by 60 format.

Wall.gif
Wall.gif (1.48 KiB) Viewed 6269 times


Here is a example of what i got. Personally i just wanted something to work with. It looks like crap and the gif format seems to be unable to handle all the colors which is strange.
I get a bit of corruption. I think i used 3 shades of grey, 2 shades of green, black and white. I'm going random colored pixel how ever. I think it adds to it but it's still annoying for that to be a bug if anything (By bug i mean a problem with the format)
User avatar
BlueLight
Gangs n' Whores Developer
 
Joined: Sat Jun 04, 2011 8:23 am


Return to Tutorials



Who is online

Users browsing this forum: No registered users