Jump to content
Phalo

Our Guide to Basic Spriting

Recommended Posts

Some of you may be wondering, exactly how do I sprite like those guys? That problem should be solved in the reading of this topic I've created. A couple other forum friends have agreed that this would be a useful topic, and I hope it is.

 

Recoloring or Editing

 

In Basic Spriting, there is creating your own, or creating different multi-colored verisions of an already made sprite. This section will introduce how to do that in Microsoft Paint©.

First, you must choose your sprite. Right-click on it and then choose "Save Picture As..." After you save it to your My Pictures folder, you can begin to edit it.

I will introduce to you MS Paint. Once you have your sprite opened and on the screen, don't just jump on it and start to do crazy things. Pick your colors carefully. Not all of the shades of the colors you may want are one the bottom of the screen on the color palette. Double-click on any of the colors and a window will come up allowing you to add custom colors to your palette.

Next, comes the color picker. On the left side onf the screen, choose the icon that looks like an eye dropper. Clicking on this, go back down to the palette and click on a color. It will appear above the default color. Next, choose the background color by right-clicking. Now you can apply it to the sprite as please where the color is necessary. Once you have completed the sprite to your content, save it to the folder.

*Note!!!* Do not use this method on DragCave without permission or if using it to improve sprites in the "Dragon Requests" or Sprite Replacement Project" areas.

 

Creating Your Own Sprites

 

To create your own custom made sprites, I would begin by creating a concept sketch on a seperate paper. It doesn't have to be wonderful or anything, just basic. Next, scan it to your computer and open it in Paint. This is where the fun begins. Using the methods in the previous section, edit your sprite and resize it until you have it as good as it can get. Use shading so that the colors blend well, or use seperate colors for good contrast such as eyes. Once you are happy, I would save it with a different name so that you can always go back to the concept sketch on the computer and edit it. Saving it with the same name, you might decide to make a change but it might not agree with you. If this happened, there might not be enough "Undo" options for you to get it back to normal. Therefore, your good sprite will be quite safe from harm. smile.gif

*TIP* Don't save your sprite as a JPG or JPEG! That will ruin the how picture. Try saving as PNG or Gif. (PNG generally works better)

 

Sharing Your Work

 

So, you want to share your work with others now? If you are posting it on your own website, there should be a feature that allows you to upload it. If it is a forum, like in this case, you can use free servers like TinyPic or Photobucket, that allow you to upload your pictures in HTML, BBCode, and Email form. Easy as that!

 

*NOTE!* This topic will be edited and updated from time to time. You may also reply with questions here.

Edited by Phalo

Share this post


Link to post

PF13's picture-based guide to spriting that's missing it's pictures!!

(I decided to post what I've done so far)

 

Initial note: I use photoshop elements, so I am sorry if I do something that is not possible with ms paint or other programs. I will do my best to only talk about basic elements, which shouldn't be too hard as I rarely use the more exotic tools. Just ignore me if I mention the magic wand tool. =3

 

Second initial note: I'm just going to tell you now. If you aren't a good artist, you probably won't be able to make good scratch sprites. The base drawing is the most important part of a sprite, and if there are flaws in it, there will be flaws in the sprite.

 

Step 1: concept drawing

The first, and most important step in spriting is the concept drawing. Thought this was going to be all on the computer? Think again. Get out your pencil and paper and get to work! Remember that, without a good basic outline, no matter what you do to your sprite it just won't turn out good. Getting the anatomy and pose right before you start spriting will save you much trouble later. Some talented people can create their concept drawing directly as the outline of their sprite, but it would be suggested to draw it on paper first. I would strongly suggest not drawing with a mouse. Use a tablet if you just have to draw using the computer. If you have someplace where you can get critique and suggestions for your art, it's a good idea to post your image there before beginning to sprite. That way you get problems out of the way before you even make the outline. Please remember that small details often do not transfer to sprites well. Spikes should be kept simple and minimal, as well as any body patterns and such. Fingers tend to turn into a blur, and so on. Just keep in mind that you may have to scrap certain detailed ideas when converting a drawing to a sprite.

 

Step 2: outline

This step is broken up into stages, as it is an important one.

 

First, you want to get rid of any background color and misplaced lines, may they be eraser smudges or sketchy lines. You want this to be as clean as possible before you resize it. If you want, you can even go over your lines with a pencil or brush tool to make sure they are clean and dark. (if you have a program that can adjust brightness and contrast, this is a useful tool)

 

Next you resize your image. Simply resize your outline, choosing a width and height that you are comfortable with, but remember that dimensions between 50 and 80 pixels are preferable.

 

Once the image is resized you should have a somewhat fuzzy, smaller version of your large drawing. Now you get a 1 pixel pencil tool and start going over the outline. You can color code different body parts if you like, but I usually just do it with straight black. This is going to be your final outline, so try to make any final adjustments now, rather than having to change things once you have started coloring. I usually use the large pic as a reference so I make sure I'm following the original design.

 

Now that the outline is done, use the paint bucket or a similar tool to remove the gray blur around your outline and turn it into a black and white picture. I have usually made the background transparent by now, but it is by no means necessary, I just prefer working that way.

 

Step 3: Colors

Choosing your colors is important to the tone of a sprite. Something that is cute can be made to look relatively evil with the right color choices, and similarly something that is sinister (as long as it doesn't have fangs or gore) can be made to look cute by coloring it in bright and/or pastel colors. If you are unsure what colors to use, ask some friends for advice. I usually work with a palate of 6 shades per color, and I wouldn't recommend using many more than that, or you will start getting into size issues. You can adjust your colors and shades later, so don't stress too much over this step, but still try to choose colors close to your final palate. Create a palate of colors like the one in the sprite above. This makes it easy to change between shades

 

Step 4: Coloring/Shading

The first thing I do when I have the outline is take the darkest colors from my palate (the outline colors) and go over the black outline with the outline colors for the color that body part will be. Then I fill the body with the neutral tone (in the middle, with the same number of highlight colors on one side, and the same number of shadow colors on the other). The neutral tone is the color that the body will be if it is neither highlighted or in shadow, so that is the base I work off of. Now that you have the basic colors mapped out, you are ready to start shading your sprite. But before you do anything else, I need to talk to you about light. Your light source is something any artist needs to consider, and the spriter can never forget where his light is coming from. I might suggest putting a mark where your light source is, just so you always have something to remind you. Before you go any farther, I would suggest going into a dark room and turning on one light and observing how different objects are highlighted and shadowed. If you have any pets, do similarly with them. Try to set up your dog or cat in a similar pose to your sprite and shine a light from the light source. If nothing else, this will help you get a rough idea of what will be lit up and what will be in shadow on your sprite.

Edited by animeluver

Share this post


Link to post

SO, if there are anymore questions about spriting, you can post them here and hopefully this topic will have satisfied your needs.

Share this post


Link to post

(This should Be Pinned IMO)

 

Anyway, I used Sonic Showcase to learn some shading techniques in the pixel art section.

 

Also, how do you downsize it without making it too blurry, and not being able to find what is what? I am in need of help with this, because i have a LOT of sketches and such, but i cant resize without killing the picture!

 

This is awesome! Now all we need are a few more people to explain dithering and other advanced techniques (A lot are on that website above)

Share this post


Link to post

It depends on what computer you have. Many have MS Paint, which I find easiest to use. For Photoshop though, it depends. I would get your basic sprite down and adjust it before you color it. Don't forget to save the Scrap copy. Then you can color it.

 

And, as for downsizing, you should use the diagonal corner for that job. But it is hard to keep it from blurring. I should say just make it as small as you can without blurring it, or so that you can at least tell what it is. Perhaps less details would help. Photobucket also helps sometimes.

Share this post


Link to post

Mmm... I think I will pin this. TJ, if you don't think this belongs here or it shouldn't be pinned, feel free to do what you wish with it.

Share this post


Link to post

What do you mean by best things?

 

Speaking generally, I use the tools Color Picker, Pencil first not paintbrush, and using the custom colors table.

Share this post


Link to post

I didn't read the whole thing, so this may have already have been said, but you might want to include somewhere not to save the sprite as a jpeg image, or the whole thing will be damaged and you will have to start all over again.

Share this post


Link to post

A sprite is a small image, usually 80x80 or smaller, with limited colors (normally 16 or less) and every pixel and color placed purposefully and with complete control (eg, no paintbrush tool). I'm not sure how good of an explanation that was, but just think of the little pictures that represent characters in hand-held video games.

Share this post


Link to post

All the dragons here on DragonCave are sprites, which is the real purpose of this guide, although it can be helpful for other things too.

Share this post


Link to post

I learned how to sprite and shade by trying to sprite a dragon for the site X3. I didn't do any of that revamping stuff. I suppose it depends on the person though.

Also, haveing real animals, and just drawing helps out a lot too.

Share this post


Link to post

I really actually learn my stuff from this site (Especially) and from other sprites and such. I also have dragon models (McFarlane's) and i try to position those. I look at the shading on them and the sprites, but i cant really tell which way is best....

Share this post


Link to post

Well, I use Photoshop elements to remove it. But there are other programs that work. Let me check something real quick...

 

 

Let's see... I think that Paint.NET works for it, too. Basically, you select the part you want to make transparent then hit DELETE. Then just save it. Paint.NET is free, but it's just for Windows, I think. You need to get the latest .NET frameware from the Microsoft website, though. But I've used it for a while and it works nice. :3

 

 

EDIT: I think there might also be websites that do it, too.

Edited by KageSora

Share this post


Link to post

I use Gimp. It's a free downloadable program that is a lot like photoshop.

Photoshop always crashed on me 8_8

 

Share this post


Link to post

Sorry to ask, I was trying to sprite for a game in RPGmaker and I lost the color defined as transparent for that sprite, so I had a little mage walking around with a weird white square around her.

I easily replaced the color using one of the RTP's (the package that came with the original pictures) sprites, and the game recognized it has transparent.

 

Though, that was one case I had the color already saved elsewhere, but how would a person make the background tranparent with MSpaint?

 

I belive it isn't possible with MSpaint but I prefer to hear an expert's oppinion.

Share this post


Link to post

I don't think you can with paint, however Graphics Gale allows you to! biggrin.gif

 

Graphics Gale is a program made especially for pixel artwork. The program has a free version and a paid version. The free version does not allow you to save .gif files however. :/ BUT! They give you a free 30 day trial of the full version! biggrin.gif

 

Graphics Gale Download page! biggrin.gif

Share this post


Link to post

  • Recently Browsing   0 members

    No registered users viewing this page.