Pixel Art tutorial

This is an archive of a topic from NESdev BBS, taken in mid-October 2019 before a server upgrade.
View original topic
Pixel Art tutorial
by on (#66533)
http://web.archive.org/web/200510240450 ... 17&page=61

Thought it was worth posting since the site is down and can only be viewed on archive.org. Very detailed look at the graphic design of FF1, FF6 and Seiken Densetsu 3. I especially love how it breaks down the tiles in 8-bit games.

by on (#66536)
This totorial is amazing. I'm halfway through it, and why it says a lot of things I figured on my own, it also brings on new ideas to me.
I'll read the sprite section now hopefully it'll be as good as the BG section - I always had more trouble to draw sprites myself.
Anyone MUST read this really.

by on (#66545)
Here seems to be a mirror of the site: http://www.petesqbsite.com/sections/tut ... s/tsugumo/

Might not be exactly the same though, but archive.org loads very slowly for me.

by on (#66567)
Yeah, I read this ages ago, it's a nice resource. Really well done.

I find it can also help a lot just to look at other people's sprites, examine them up close, figure out what makes them stand out.

Here is the current location of the forum mentioned on that page - Pixelation. They are very helpful in critiquing your pixel art. Also they have a script on their forum so you can just click any picture to zoom in, helpful with pixel art. Lots of great game mockups to look at.

Here's a cool Megaman competition they did a while back:

http://www.wayofthepixel.net/pixelation ... pic=6890.0

And here is another great pixel art site with many of the same qualities - Pixel Joint. They have a lot of galleries and challenges and a big hall of fame to look through.

by on (#66575)
OK so I've written down a summary of general guidelines to follow, some I made up myself, and some that are from this tutorial. I'm far from a graphics expert, but I think it might be good if I made a list of stuff I figured out and share it :

GRAPHICS CREATION GUIDE LINES :

Both BG & Sprites :
- Avoid single colored areas (use dithering shading or wathever)
- Avoid large staright lines (unless something is supposed to actually be large and straight)
- Only dither colors which are already sufficiently close to eachother to crete the illusion of more colors (don't try to dither blue and red to get purple it won't work !)
- Outline objects that stand out. Object which already stand out by their different colors don't have to be outlined.

BG :

- Make the tile gird as less noticeable as possible (areas of more than several pixels of the same colors should be modified)
- Always make "border" tiles to tiles that are repeated instead of having the repeat pattern end suddently into another one. (borders of two different types of tiles can be "combined" to save metatiles)
- In the border tiles, blend the color to dark/black so that different palettes goes well along eath other.
- For top-down games, avoid too much contrast on the ground / contrast is reserved for elements that should "stand out" such as walls, trees, etc...
- For side-scroller games, it's the exact opposite as what is said above - the ground should "stand out" to show where the player can walk.
- Add dithering/randomness into anything that is supposed to look natural
- If there is free tiles left, make a "craclked" version of your metatiles and use them randomly.

Sprites :
- It's good practice to outline sprites with black/dark colors BUT....
- Not everything has to be outlined. Inside the sprite, only stuff that "stand out" should be outlined. The feet and the hair can be left with incomplete outlines if there is no room to do so.
- Use bright colors for sprites so they are very visible on the background
- Avoid too much contrast - just do some minor/lazy shading.
- Sprites doesn't HAVE to take up all the room reserved for them - it can be an artistic choice to have tiles making up the sprite have some empty rows or columns if this is better
- Avoid making sprites perfectly symetrical (when they are facing up or down that is). It's good practice to have the "center line" of the sprite one pixel left or right to the actual center line, so that you get a "middle row" of pixel. This implies one side can be one pixel larger than the other if there is a need to (good for breaking the symetry)

Human sprites :
- Because the sprites are so few pixels, only represent important elements of the sprite. This is : Head, feet, arms, hair, then if there is room belt, hairband, waistband, shoes, or any other fancy accesories you add to give your sprite an unique look.
- It's hard to get the expression right on a human face that is only a small # of pixels - but worth wasting a lot of time on it. Always draw big eyes, a small mouth if there is room for it (a big mooth WILL look like a mustache, and this is how Nintendo made Mario by error btw), and no nose nor any ears (unless you really have a lot of room).

Drawing a close up / cutscenes :
- A technique that work well is to expand an existing small sprite, round the blocky edge, add lost details (expression in eyes, nose, ears, etc...) and add more shading to it.

Animation :
- Always exagerrate motion as much as possible (even if you don't plan to have a cartoonish game)
- *All* the body of a character should move when it's walking (NOT just the feet !), but the head shouldn't move. The feet should move ALOT, not just a few pixels.
- Use motion lines

EDIT : It's fun how games that try to have more realistic graphics go for no or dark-of-the-same-color outinles - while games that aim a more cartoonish style go for black outlines. I must admit I kninda like the latter style.

by on (#66582)
Bregalad wrote:
Only dither colors which are already sufficiently close to eachother to crete the illusion of more colors (don't try to dither blue and red to get purple it won't work !)

Unless, of course, you're trying to make a game where objects have to be placed at 8x8 pixel boundaries and you run up against the 3 colors per tile (plus backdrop color) limitation. You get diagonal stripe artifacts (NTSC) or possibly something different on PAL, but at least you get some mixing due to the TV's comb filter.

Quote:
- Add dithering/randomness into anything that is supposed to look natural
- If there is free tiles left, make a "craclked" version of your metatiles and use them randomly.

That and if a background object has some repeated tiles and some tiles that aren't repeated, put the cracks in some of the non-repeated ones.

Quote:
- It's hard to get the expression right on a human face that is only a small # of pixels - but worth wasting a lot of time on it. Always draw big eyes, a small mouth if there is room for it (a big mooth WILL look like a mustache, and this is how Nintendo made Mario by error btw), and no nose nor any ears (unless you really have a lot of room).

The other option, which works especially well if your character has a distinct uniform, is to avert graphics-induced super-deformity and just don't make much of a distinct face at all in-game. It worked for Contra, Batman, and Jurassic Park.

Quote:
A technique that work well is to expand an existing small sprite, round the blocky edge

In other words, run your sprite sheet through Scale2x to start off with.