Pixel Art Tutorials

OK, a long overdue tutorial on hair. I got up some sprites to use because the pros would be better to learn from than me

Terra from Final Fantasy 6. This one is the one with the least shades. An Outline Color, a Shadow, middle tone and highlight.  The highlights are used sparingly and are mostly in the front of Hair or in The ponytail in back view.  for highlights: Usually the hair that sticks outmost will have it. The hair below and behind will be in shadow.

Agrias from final fantasy tactics. The sprite  Style is different and There are more colors.. One Midtone, one highlight,and 3 Shadows. There isn’t an outline like the FF one.  With This kind of hair, you can start by coloring it_ with the Midtone. For her braids, the middle goes in-the most, which is why that part is darkest.

Celcius From tales of Eternia. Far more highlight and shadow and less midtones. This has a sort-of selective outline.the outline is affected by The light direction as well. The lighting for an RPG character is going to nearly always be top down.Some, especially a Zelda perspective, would have a light source directly above the character. That’s not the case here. Think of it more like the light is above but in front of the character instead of directly above.

Laharl from Disgaea. A bright base color, and 4 shadows. Here you have a top left light source. The 1st and 3rd colors in the palette are the most used. the 2nd acts to anti-alias the 1st and 3rd colors. The 4th is the darker shadow, and the 5th is the dark outline. If it’s hard to imagine the characters hair from the side or back, try looking up pictures with characters that have similar hair, or see if someone can draw you a concept art sketch for each direction. What is nice about this, is that ignoring the antenna hair, you can pretty much just cover the face with a shadow color and have the back of the head.

Hawk from Seiken Densetsu 3. Hair parting is usually the darkest part of the hair. In the back view, they have a ring of highlight around their head. If i had to make his hair, I would start with the blue. Outline the front bangs and the hair with the lighter purple. Go darker at the base of the hair. The middle of the blue will then get the yellow highlight, more so on the top as it is top down.

Angela from Seiken Densetsu 3. Again, the parts that stick out most will be brightest, like the bottom of Angelas hair in the back view. Highlights for Angela would be done last. General rules: Highlights where the light hits most, highlights when the hair (or object if not hair) pops out most, darkest away from the light source, and darkest when it goes back (Like an arm moving behind in a walk animation).

This took longer than i expected, my arm is hurting so I’m one hand typing so I’m ending this here.

Source

This was a nice step by step tutorial by Aozane and I liked the result, so I’m posting it. If you don’t have a pixiv account you probably would need to have one to log in there to see the original. It’s also a nice place to look for artwork in general, there are some really beautiful pics I found on there. And no, I don’t know what the text says.

Nessiah told me to do a post on icons, since I figured I probably wasn’t good enough with hair to make one on that. This is all made in MS Paint. I really missed my Character Maker, but use whatever program you’re comfortable with.

I started out making a 24×24 box in MS Paint. The canvas is otherwise white and bigger, but I’ll deal with that later. Honestly I’m not sure how big the RMXP and RMVX iconset limits are, but you can always use the RTP ones to judge that. At least keep it a multiple of 24. I made a checker board pattern with the 24×24 boxes so it’s easy to see the space you have to work in.

I’ve copied over the boxes to make a template. I set up a palette thing, which is immediately going to go to waste since I’m going to make a new one closer up later that actually has the colors I’ll use. In this case since it’s not as easy to switch colors as it is in Character Maker, I try out a color and add it to the palette if I like it.

I made the shapes for the general icons. I didn’t worry about the shield or potion yet, I can mirror those. I copied the left 12 pixels of the icon, paste and do a horizontal flip, and then place it on the right side of the icon.

I went off and colored in the inside. Sometimes I find it easier to make the whole image one color and then trace the outline instead of filling it, but it depends on the object.

And I set up a palette with the colors I was using at the time. I tend to work on 8x zoom here. I think it may be a good idea to have a smaller monitor resolution, but I have mine at 1280×960.

Updating the palette. I use the eyedropper tool to get colors from there. The palette on the bottom of MS Paint is not going to save when you close out, so I prefer to do it on the canvas itself.

Shading now. With icons this size, you likely don’t need too many tones. Zoom out and see if you can spot each color. If you can’t, then maybe your colors need more contrast.

Here’s the color editor in MS Paint.

See where it says “SAT”? That’s Saturation. The more saturation, the more it’ll be near the top of the color chart, the less saturated, the more grey it’ll be.

If you are picking colors, don’t only go for the top colors. you can check to see the saturation values, if you’re getting a bunch of 200+ values, you may need to put some more thought into the color choices. You can try starting at the middles of the color chart for each color to test them out.

This is what we have for the icons so far. I put them all on one background now, so when you import it into RPG Maker, it will be a transparent color. You can add your own little BGs to them if you’d like, for one icon set I made a purple circle behind them.

I posted this in a topic in RMN but I figured it’d be a good reference to have around here as well.

Tree/Canopy studies in Pixelation. Shows various WIPs of canopies/trunks, and some tree examples from various games as well. Well worth a look.

Example:

Sprite Rotater can be used to rotate sprites without anti-aliasing them. While it’s cheating, it can be fun to play around with at times. You basically need to specify a degree which to rotate it (most commonly 45 degrees). It can also do resizes. It will rotate the whole image though, you cannot specify what part you want.

It works best on sprites with less dithering on them, it may mess up dithering patterns if you do it on a heavily dithered piece so manual retouching may still be necessary.

In RPG Maker, it is simple to import a resource and set a transparent background for it. In the preview when you import, you click on the background color, and that will be the transparent background. Not all engines can do this for you though, and maybe you may want to upload an art with a transparent background.

In this example, the first Amelia is on a black background. The second one is on a transparent background.

There are various ways of going about this. I’ll go over 2 ways for now:

In Photoshop:

you can draw your resources on one layer that is seperate from the background layer. All you need to do is remove the background layer and save it as a PNG. If it’s a single layer, 8 bit PNG, you can go to Save for Web. Look at the palette, find the background color (there’s an eyedropper tool in the save for web option), and right click it. There should be an option to map to/from transparent color. Then you can save.

If you made your graphics all in one layer and want to remove the background color,  you can use the magic wand tool for that. When you select the magic wand tool, make sure to turn off “Anti-alias” and “Contiguous”. Anti-Alias will blur out your image, which is good for drawings but bad for pixel art. Contiguous will select the area nearby only, unchecking it will get every instance of that color. Once you’ve selected the background color with the magic wand tool, you can go to Select –> Inverse. So now all your art should be selected, not the background color. Make it into a new layer (either by copy/paste or perhaps Control-E). Then you can delete the other layer. Once you see the checkerboard pattern in the back, that’s when you know you have it.

Alternatively, instead of making a new layer and deleting the previous one, you can change the background layer into a regular layer by just double clicking the layer. Then use magic wand tool, and press “Delete” when the background color is selected.

In Irfanview:

You can download Irfanview here. It’s not a drawing program as it’s more image viewing and basic manipulation, but it can do batch conversions which is nice. It can also do transparent bgs easily. In there, open the image, go to Save as…, in there, click “Show options dialogue”. There should be a checkmark for “Save transparent color”, make sure it’s checked. Then save it as a PNG (unless you need it as gif, it can do that too), and it’ll show a preview window of it, you just click the background color and you’re set.

This was requested by Skie. As I did for the kitchen one, I seperated out the palette.

I was requested to do a kitchen:

Each object has their own colors, even if it’s similar looking to another color. I could combine them and get a lower color count, but it makes it easier to change colors this way since it only affects the object and not other things as well.

16×16 tiles this time.

By Holder

This tutorial uses Graphics Gale mainly, but it’s not too hard to apply it to other programs. This focuses most on RPG Maker XP since that program has unlimited tileset size (vertically at least).

Read it here

And here is one about creating and importing Palettes in Graphics Gale. This can be useful especially for looking on how commercial games colors work.

Read it here

I saw someone link to this, and I haven’t seen it before. It shows how they did various tiles and sprites. There’s actually quite a bit of them here too. It’s in Japanese but the pictures show a lot so you shouldn’t be lost.

Check here for the link.

Example: