How to sprite for a skin using paint

Pages » How to sprite for a skin using paint

User Pages

^{Created by fingerz on 05 May 2010 06:25}
^{Updated by fingerz on 25 Jul 2010 22:23}

^{| edit page | upload files |}

Fold

Table of Contents

1. What you will need

2. Finding Paint on your computer

3. Creating your first sprite

4. Making the sprite look better

5. Saving your work

6. Adding your sprite to a CycloDS Evolution skin

7. Finished!

This guide will teach you in easy steps how to sprite using a program called Paint. The reason I’m using Paint is because my computer is on Windows XP. Depending on what you are spriting with and whether you want it exact will determine how long it takes. Sometimes it takes me 20 minutes and sometimes 2 hours. If you are making a skin from scratch, it could take up to 8 hours… be prepared to spend a good part of the day doing this!

1. What you will need

This is a list of items you will need. These are only guidelines, so you don’t have to stick to them.

Computer - duh! Any kind will do, as long as you have a Windows operating system installed (e.g. Windows 95/XP/Vista/7).
Paint - any editing software will do, but I’ll be using Paint.
Sprite images - if you don’t want to create your own sprites you can use other images. Sprites need to be smaller than 64 x 64 pixels, also preferably PNG or Bitmap because they're easier to work with. JPG are not recommended because they distort the colours.
Mouse or Tablet pen - you don't need any of these, but they make the work a whole lot easier.

2. Finding Paint on your computer

I’m sure there will be some poor soul out there who can’t find Paint on their computer, so here are a few ways how to find Paint.

This is how you find Paint in the program files.
1. Click on the start button located on the toolbar.
2. Click on All Programs.
3. Hover above the folder Accessories.
4. Click on the application Paint.

This is how you find Paint using Search.
1. Click on the start button located on the toolbar.
2. Click on the application Search.
3. Type the word Paint into the search box.
4. Click on the application Paint.

If you’re still having trouble locating it, use this image as a guide.

3. Creating your first sprite

Now the fun begins! How you make your sprite is up to you, but below are steps that will help you create a foolproof sprite. Believe in yourself and have patience. The more you create, the better you’ll become. Make sure the sprite you create isn’t any bigger than 64 x 64 pixels otherwise it won’t fit! Let the spriting BEGIN!

1. Start by making a pallet of colour that you’ll be using to create your sprite. Select the lightest shade of a colour you want and paint a square of it on your page. Change the shade so the next colour is darker and paint it on your page too. Continue this process until you have all the colours you want.

This is an example of how you can set out your pallet.

2. Time to make an outline! Make sure you have some idea of what you want to create before you start. First, select a colour you want as the outline and use the magnifying tool to zoom in. I suggest drawing your creation pixel by pixel so you can draw it in portion. Once your outline is complete, check to make sure the pose of your sprite looks okay.

3. This is the trickiest part of spriting: the shading! Start by filling your sprite with the lightest colour and work your way down to the darkest colour. To make sure your shading looks natural, identify your light source and the direction it comes from. Place the lighter colours facing the light source and the darker ones further away. Make sure the part that’s exposed to the most amount of light has minimal shading.

As you can see, the light source is come down from the top-left corner.

4. Now that you’ve got the main part of your sprite created, you can now add in details! Beware though: in order to make the details fit in, make sure you shade them the exact way you shaded the rest of your sprite. If you don’t, your sprite will look weird. Details like stripes and spots don’t need an outline because they’re not separated from the body.

4. Making the sprite look better

Your sprite should be looking pretty good now, but these tips below will make it look so realistic it’ll scare you! Read on to improve your spriting skills.

1. Keeping the outline of your sprite the same colour can cause the shading of the body to look odd, so if you change the outline colour to match the shading of your sprite it will suit it much better. Make sure you colour the outline with light colours where there’s light and darker when it’s further away.

Instead of just one outline colour, there is now many, adding tone to the sprite.

2. This is by far the hardest form of shading to get right. Half tone shading is when you use dots of colour to shade. It adds to the lighting and makes your sprite look even more realistic. There is one fault with this shading: if you use too much of it your sprite will look weird and 2D while if you use not enough it’ll look like you’ve messed up your spriting. Using the right amount will take practise and patience.

5. Saving your work

Who doesn’t crack a fit when their computer runs out of power… and they forgot to save their work!! Here are some tips on saving your work.

1. Even before you’ve started spriting, save your file to an appropriate place so you can find it, preferably where the rest of your skin is.
2. Constantly save your work by selecting the save option of using the shortcut keys Ctrl + S.
3. Regularly check your computer’s battery so it doesn’t get too low.
4. This has nothing to do with saving but make sure you exercise your eyes. You don’t want to go blind!

6. Adding your sprite to a CycloDS Evolution skin

Hooray! Now you’re finally ready to add your sprite or sprites to a CycloDS Evolution skin. Just follow these steps below to create an awe-inspiring skin!

1. Open up a new document in Paint and scale it to 128 pixels in width and 192 pixels in height. Save it as a Bitmap or BMP file (it must be a bitmap or else it won’t work). I suggest you name your file menu-icons or something like that so you remember. Once you’ve done that, to make things easier, mark a straight black line vertically down the center of your page, on the 64 pixel mark. Then place horizontal lines across your page at the pixel intervals 64 and 128. The idea of marking these points in is to make sure your sprites are lined up properly on the skin. This means that they’re in the exact spot you want them to be in. Once you’ve done that, paint the background of your page the colour you want invisible for your skin.

Your page should be set up like this.

2. The way that icons are set up for the skin is that the icons on the right are for when you aren’t selecting them, and the icons on the left are for when you select them and they change, e.g. shape, colour, outline. Next, open up the sprite you made in another document in Paint. Click on the Select or Free-Form Select tool and use it to trace around the image you want, making sure you leave enough room so you don’t chop anything off when you transfer it. Once the image is selected either press the right button on your mouse and select Copy, or use the shortcut keys Ctrl + C. Flip back to your document with the black lines and paste it using the mouse or Ctrl + V. Click and drag your picture to wherever you want it to be and deselect it. If the sprite has a different background colour, change it by selecting the paint icon and colouring it the same as the background. Repeat this step for all the sprites you want to put in, making sure you place them in the correct column.

This is one of my finished products. I’ve kept the same sprite on the left and right sides but changed them so they appear to be moving and they’re highlighted when selected.

3. Once you’ve done this you can erase the black lines you had to start with and replace them with the colour you want invisible. Now you can take a look at your skin. After saving your work, you can use ste123’s Skin Tester to see what they’d actually look like. If there is a bit of unnecessary movement you can always change that by altering the position of the sprites.

7. Finished!

Hooray! Now you have made a sprite for a skin using Paint! If you upload your skin, make sure you leave a comment saying fingerz taught me how to sprite. Just kidding! Just promise me this: I cross my heart and hope to die if I don’t continue to create sprites. Happy spriting everyone!

Yes, I know the sprite I used as an example is a Wailord, but I redrew it myself using its official colours and my spriting ability. It took a long time to draw so please respect my choice. Thank you.

Also, for anyone who’s checked the size of my Wailord you'll find it’s actually bigger than 64 x 64 pixels. I’m an idiot! That’s why I didn’t include it in my finished product.

Replies to How to sprite for a skin using paint

To post a message, you must first become a member.

leiger

01 Jun 2010 04:48

I have removed the Candidate for Deletion notice. Please finish writing it soon though as I want to read it! :)

In the future it might be a good idea to write the tutorial either on a different site (it's a good idea to have a separate wikidot site just for testing stuff and for other reasons that you don't need anyone else to see) … and then move here when it's finished.

I might make a place to store drafts on Revolution in the future, but not planning to do that just yet.

- leiger

NDS lite (Jet Black) FW v5 | CycloDS Evo (Black) HW 1.1 | Transcend 8GB µSDHC Class 6 | EzFlash V 3in1+ (Black)
Nintendo 3DS: Message me if you want to exchange FC. Lost your game save files? You might want to try one of these.

Cannot edit (old post)

fingerz

01 Jun 2010 21:58

thanks leiger. i would've finished it by now, but i've just been hit by english and maths exams. they're nearly all done, so i'll try to finish it this weekend.

Cannot edit (old post)

leiger

02 Jun 2010 01:02

Take your time :)

Cannot edit (old post)

fingerz

22 Jul 2010 22:31

wow! i love this setup! it makes my job a lot easier. i promise it'll be finished by the 3rd August, probably before then. i'll do the writing this weekend and the pictures after that. thanks leiger :D