TERRAWORLD SPRITING GUIDE VERSION 2.0

This guide is to help out newb spriters (and possibly vet spriters) on some of the key points in spriting. This probably won't make you an instant expert on pixel art, but it will get you informed on some really good tricks and techniques. And don't forget to practice. I will try to lay off of the large pictures, this guide is dial-up friendly!! This guide is unfinished and will be updated occasionally.

See the credits section to see who all is responsible for making this guide!

TABLE OF CONTENTS

1. INTRODUCTION TO SPRITING

2. ALL ABOUT PERSPECTIVE

3. MAKING AN OUTLINE

4. LEARNING TO SHADE

5. CREATING TEXTURE

6. SPRITE BASE PAINTS AND TEMPLATES

7. SPRITING IN MICROSOFT PAINT

8. SPRITER VOCABULARY

9. LINKS

10. CREDITS

1. INTRODUCTION TO SPRITING

Spriting isn't as hard as one might think, all that you have to do is just make an outline and color it in, and then all you have to do is shade it using lighter and darker colors (And if you want to get fancy with it, make a texture too!!). You can learn a ton about spriting by just looking at other peoples sprites, and by looking at the shading, outline, texture, and styles that are used to make it, then use the knowledge you have gained from them to create your own unique sprite! Another way to learn about it is to just try it. Getting some hands-on experience is probably, if not, THE best way to learn something, whether it be spriting, basketball, PKing, or even Ping Pong.

2. ALL ABOUT PERSPECTIVE

Perspective is a term you've probably learned in school (art class!) and it is especially important for making a sprites look 3-D (three-dimensional! <__<). We want to encourage spriters to use this in their sprites to make it appear less flat. The perspective we look at Terraworld in is a front-top view, which means that it appears to be at about a forty five degree angle.

The image on the left is just a front view of a box, all that it appears to be is a square. The image to the right is a front-top view of a box, meaning that it shows both the top and the front view, giving it a more 3-D perspective. Terraworld uses the front-top view perspective.

3. MAKING AN OUTLINE

You may not think its neccessary to have a section about making outlines, but the outline is actually one of the key elements in spriting. You would be surprised how many sprites I have seen that had good shading and texture, but got rated a five or six out of ten just because of the outline being too jagged or from having an odd shape. Some good methods to making an outline might be to look up whatever your spriting on google and observe the shape and details (this can also apply to shading and texture).

This is an outline for the Terraworld character sprite(this is actually the spammer avatar lol), use it to practice, you can find other outlines in section 6.

4. LEARNING TO SHADE

Shading is important in spriting, especially if your looking to get ten out of ten ratings! Shading will give a sprite depth (which is good!!) and make it look less cartoon-ish when it is in the game. In Terraworld, we shade our sprites as if the light is coming from the top left corner to make all of the tiles match together. Other then the light effect, shading can also be used to show dents, bumps, and stuff like that, this is where alot of the confusion between shading and texture is.

The image on the left is light coming from the front and the shading on the right is shading coming from the top-right, which is what we spriters are trying to achieve with our tiles.

Shading boxes

5. CREATING A TEXTURE

Do not get texture confused with shading, they are different. Texture is basicly the pattern that is on the sprite. Take wood for example, wood has grains, bark, holes, and alot of other woody stuff, do you think a brown square with darker browns on the edges is gonna cut it? NO!! You want to put a texture so that it actually looks like wood.

The image on the left is a plain gradient shading with the light source coming from the top right, and the image on the right is the same shading, just with a texture. If you took out the texture of the right image it will look nearly identical to the left image.

6. SPRITE BASE PAINTS AND TEMPLATES

Here, you will find item templates. Use these to start on your pixel art!

TWO Character Template

TWA Base Sprites

http://img13.imageshack.us/img13/6843/twabase.png

These are the wings. Note that attacking and moving will not change what the wings look like. these are Ice Wings from Terraworld, so no stealing!

Sword and shield views. Notice how the shield changes.

Last but not least, helmet and items. The helmet does not change when moving.

Every tile you sprite should be exactly this size (32x32 pix).

7. SPRITING IN MICROSOFT PAINT

Spriting in Microsoft paint in 4 simple picture's

To select colors:

8. ARTIST VOCABULARY

NOTICE: If you think that I have left out a valuable term or defined a term wrong (or mispelled it... <__<), just say so and I will have it down as long as it is worthy!

BMP file format - An image format, bigger file size then png and jpeg. BMP stands for bitmap.

Complimentary Colors - Colors that are opposite, and usually look good together. A good example is football uniforms, the Minnisota Vikings and the Los Angelas Lakers have yellow and purple uniforms, yellow and purple are complimentary to each other. (green and red)(orange and blue)

Cropping - To cut off all of the extra un-needed space from a picture to decrease file size.

Dithering - A form of shading used back when computers had 16 colors, putting pixels into a pattern to create different shades.

Gradient - Simple shading that goes from lightest to darkest or vise versa.

Hue - Pure color without changing the tint or saturation in it.

JPEG file format - JPEG is short for "Joint Photographic Experts Group" JPEG does not support transparencys nor animation, JPEG is the worst file format to save your sprite on because it scrambles the pixels and makes your sprite blurry. JPEG is ment for photographs, not sprites.

Luminescence - Determines how bright the color is. Also known as lightness or tint on other kinds of color spectrums. (0=black, 240=white)

Map - The image created when you put tiles together

Noise - A rough grainy texture that is similar to the "white noise" on your television set.

Outline - The line that borders the edges of your sprite.

Perspective - Looking at something in a different point of view. In Terraworlds case, it would be a like a 45 degree angle.

Pillow Shading - Using gradient to shade a sprite, creating a fluffy, blurry effect.

PNG file format - This is the file format you want to save your sprites in, it has lower file size and doesn't mess up the pixels. PNG is short for "Portable Network Graphics"

Saturation - Determines how dull or intense a color is.

Shading - Putting different shades in different areas to give the piece depth.

Sprite - A pixel image

Template - Main outline of a sprite, can be used for resprites.

Texturizing - Changing the surface of a piece to make it seem like it is real (example: slimy, grainy, rough, ect.)

Tile - A sprite that is patched together with other tiles to create a bigger image. Terraworlds tiles are 32 x 32 pixels.

Transparent Color - The color within a game that doesn't show up, and is used to make some parts of the sprite invisable. In Terraworld, the trasparent color is Red: 0 Green: 255 Blue: 0. So in otherwords the transparent color for Terraworld is pure green. This ----->

9. LINKS

Official NPC/Monster Template - Use this to make your NPCs and monsters!

Tile Studio - Come here to download Tile Studio and files containing FSO tiles.

Secrets of mspaint revealed - Some nifty tricks to mspaint, most of it does not apply to Windows Vista users.

Pixel Art Tutorial - made by a pixel artist named Tsugumo.

Learn to Post Screenshots - A guide on how to post pictures on forums. Created by Thepastor aka Tehpastor.

IMAGESHACK - Use this website to host your images so that you can post them online!

10. CREDITS

In Alphabetical Order:

Ciiciu – Is responsible for the equipment templates.

FVANtom - Stickied the guide.

Micknash – Responsible for the shading box diagram

PonchO - Creator of this guide, unless otherwise noted in this credit section

Pung - Compiled the original guide with a variety of different guides to expand on spriting.

Toptechnorules – Several updates to the guide

Wikipedia - Gave good info about file formats.

XassaX – Responsible for the screenshot depicting how to select colors in paint

XconolX – Responsible for the section "Spriting in Microsoft Paint"

This guide is partly compiled with the following topics:

Shading Boxes - by TOPtechnorules.

Base sprites and templates - By Ciiciu

Tile Sheet - By ShientX

Paint pixels - By XconolX