You need to Log in!

Spriting Tutorial

 :: Tutorials

View previous topic View next topic Go down

Spriting Tutorial

Post by Skull on 18/11/2010, 3:49 am

Spriting-Spriting is usually defined as the act of creating partially transparent 2D raster graphics for use in video games, commonly referred to as sprites; by extension, it is also used to refer to the act of creating pixel art, though not all sprites are necessarily done in that style. Pixel art comprises a large part of "sprite art" as a whole; though technological advances since the mid-nineties allowed pre-rendered raytraced imagery, or essentially any 2-dimensional image style to be used as a sprite. In some communities, "pixel art" is considered a synonym of "sprite art", and classification of artwork as "sprite art" is held to the same standards, though pixel art itself its not limited to the creation of sprites.


For Beginners

Basic Helpful Knowledge

So, you're ready to start spriting, eh? There's a couple of things you should know before you sprite in order to get the best of your ideas.
The first is recognizing sprite construction and shading styles. Most, if not all games, differ in terms of build, color choices and shading.
Let's compare two very popular and well-made games: The King of Fighters and Street Fighter.


Notice how Street Fighter's sprites have a bulky, muscle-bound style, especially around the arms, and the way the clothes are constructed to look very light and cartoony, along with the overall shading being light. Also notice the definite difference betweek them and King of Fighters, which goes for a more "realistic" approach in both build and shading, and have overall darker colors.
If you were to combine these two different styles in the same game, it would stand out pretty hard that they're not in the same style.
The second thing is to take advantage of light sources, one of the most important parts in both editing and full-on customs.
When making a custom or doing some heavy rehauling on a sprite, try to imagine where light would be hitting it in order to make out the shades. If you need to, you can grab an action figure and observe the way the light hits it and the shadows change depending on the direction facing, or you can observe people around you, but that may be a bit on the creepy/uncomfortable side.
Here's an example:

Notice the way that shadows move around as the light changes. This is crucial in making your sprite "jump out" and look good.
The third, and most important part, PATIENCE!
If you want the pose and design to come out the way your brain comes up with it, you need to sprite slow so the final product will look much neater.

Making a Color Palette

You should have a good eye for color when making your character's color palette. It's a good idea to make the base colors using one of the box brushes in Paint.

Simple, no? Start off with base colors.
Now comes the tricky part; choosing a good selection of darker, and if necesary, lighter shades of the same color. Most spriters, whether they be beginners or elites, still have a problem with shade choosing. You don't want to make the shades bland, or too dark/light, you want to make them "just right." This is very important; if you don't choose the right shades with your palette, or if your colors are too bright, it will become VERY uncomfortable for others to look at it.

Now we've got more shades of the same colors. If you've decided how many you would like to use, then you can move on to your first step in touching the sprite; recoloring.

Your First Recolor

So, you've got your knowledge, and you've got your colors. What's next for you? Starting to rework the sprite to the way you would like it to turn out. A good idea is to recolor it first to get an idea on how the sprite's overall shade style and light source are.
Let's start with something relatively easy: Mega Man.

Despite the fact that it's one of the most overused styles in the world, it's a good choice for beginners.
Notice how the palette we made earlier was pasted into the window for you to use in your recolor.
Microsoft Paint has a handy feature in the Eraser tool; taking advantage of the main color and background color choice. A quick way to recolor with it would be to select the sprite's original color with the Eyedropper, then right-click the color that is going to replace it. After doing so, equip your Eraser and rub over the sprite, not with the left mouse button, but with the RIGHT. Instead of erasing your entire product, it replaces the colors. Pretty nifty, eh? This will be an invaluable tool for the rest of your spritage journey. Let's start recoloring now.

Doesn't look too bad, eh? You are most likely going to have some leftover colors that you didn't use; keep them. You'll need them for your edits. In some cases, you may also run out of shades while recoloring; just make another one of that specific color and you'll be all good. If you have any clashing colors, such as hot pink/excruciatingly bright green and clashing shades, darken and fix those now.

Getting To Editing
Now that we've recolored our sprite, it's time for the best, and most time-consuming part; editing the character to match the idea in your mind. If there are necessary details that are not already on the sprite, be prepared to add them yourself!
To start off, grab any color that will stand out from the sprite and outline the basic idea of what you would like to add. Start sketching out things to remove with one color and things to add with another.

In the case of this sprite, the helmet is there and doesn't match the design, so I decided to sketch out some hair over it.
Don't worry about adding a bunch of excruciating detail yet, especially with parts you had to add yourself like I did the hair; just focus on adding the concept colors, and recoloring other parts if necessary.

Doesn't look too bad, huh? Don't stop here though; you're not done! Now that you've got the basic construction idea, you need to add more detail to make your sprite stand out even more. Start shading added parts like the items that they are.

Shade clothes like they are, making sure to pay attention to your light source. If you're satisfied with your sprite right now, then feel free to stop here. However, if you decide you want to expand your edit even more, go for it.

Think Outside The Box!: Expanding Your Edits
So, you've gotten your design down-pat and slapped onto a sprite. But what if you want more than what you are supplied in your selected style? This is your sprite, so your opportunities are almost infinite. Add more shades if you want to really make your sprite stand out, or even go for resize-and-retouching. Beginners probably shouldn't go for resize-and-retouch unless they are absolutely confident in themselves, because it is a very long, and hard process. Let's stick to expanding our current design for now.

Notice that a shade was added to every color as the style's detail and shading was increased. The head was also slightly edited and I decided to relax the eyes a bit. A small chain was also added, and two small "wing" designs were added to the shirt. It's small changes like this that can really make a sprite look detailed, so take advantage of it.
Take note that the smaller the sprite, the harder it will be to edit and add extra details. Styles such as Fire Emblem should probably be held off until you get more experienced.

Now we've finished our first edit! If you want, compare the original with your new sprite and see how much you changed.

[DARE TO COMPARE]

Now that you have the knowledge, start spriting like crazy!

Intermediate
First , find a base to practice with Smile




P.S. These are not mine ; I simply re-organized the tutorials based on Expertise.

-------------
avatar
Skull
Legate
Legate

Posts : 209
Status Update : You know ;)

Back to top Go down

Re: Spriting Tutorial

Post by Luffy on 18/11/2010, 6:19 am

Very nice tutorial Skull!

-------------




I'm the one who's going to be the Pirate King.
avatar
Luffy
Crown
Crown

Posts : 828
Status Update : 'Screw you guys, I'm going home' - Eric Cartman

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 :: Tutorials

 
Permissions in this forum:
You cannot reply to topics in this forum