Tutorial: How to make a Sprite sig (56k BEWARE), This will show you how to make your own

Ok, as of late, I've been asked to make a tutorial to show how I make these so-called "Sprite sigs".

Here are some examples of these "sprite sigs":



What are sprites?
Sprites are image sheets, which display a characters actions, frame for frame. One sequence is usually all in the same row, left to right.

Where can I get sprites?
There are many websites that have sprites, and from many different video games. Here are some that I would recommend:

* http://www.panelmonkey.org/
* http://sprites.planet-megaman.com/
* http://www.videogamesprites.net/

How do I go about making a sprite sig?
First off, you have to start off by opening up Adobe Photoshop (Version 7 or higher recommended). You would find a background that suits your needs, then size it to your approval. You would then open the sprite sheet, and choose which line, or action you want the character to do in the sig, then select one character at a time, and copy and paste it to your sig, placing it according to where you would want it. From here on, just keep repeating the actions as said before, but make sure that after each layer, that they're lined up (unless you want the character moving left or right), so they look like they would in a video game. You then open the sig up in Imageready, and adjust the frames, layers, and timing. After that, you save it optimized to how you want it.

Tutorial:

Ok, were gonna start off by choosing a background for our sprite sig. For some good backgrounds that go with the game you want, I would recommend the first link provided up at the top. My game of choice for this sig is Metal Slug.

So, I chose this background:


Ok, first thing we wanna do is open up Photoshop. Now, open up the background above. What we wanna do is select only part of the background, using the Rectangular Marquee Tool: Select the part of the background that would look best with your sig. I did this:



After you select your desired area, select Edit>copy. Then, go to File>new>ok, then Edit>paste. This will paste the copied portion of the background onto your new image. Should look like this:



Now that we have the background, we need to choose a sprite sheet to go with the background. I chose this one:



After you choose your sprite sheet, choose which lines or actions, you would like your character to do. I chose this line:



Now, one at a time, select one guy at a time. Like this:



Go to Edit>copy. Then open your background from earlier, and go to Edit>paste. It should make a new layer for what you pasted. Layer box should look like this:



Repeat the step above by copying each character, going in a row. One thing you need to make sure of is that you have the sprites lined up. You may have to zoom in to make sure that they're lined up. After you have all of the sprites on the background, and lined up, the layer box should look like this:



With all the sprites lined up, the sig should look like this:



Now it's time to open up the sig in Imageready. To do this, click the last button on the bottom of the toolbar. Looks like this (button inside of red rectangle):



Ok, if you did things right, your sig should be opened in Imageready.You will notice that there is an animation bar near the bottom left corner of Imageready. In the animation bar, there is a duplicate frame button. Should be located here (again, inside of red rectangle box):



You will make as many layers by pushing that button, as many as there are sprites. In this case, there are 6 sprites, so click the duplicate frame button 5 times (since there's already one frame). The animation bar should now look like this, having 6 layers:



Now, using the layer box and the animation bar, make sure that each frame is coordinating with each sprite layer. Click on frame one on the animation bar, and make sure that it's just the background, and sprite one selected, by making sure the eye icon is only on those two. Continue to do that from frame 2, 3, etc. After you do this for frame one, the layer box should look like this:



Now that we have the frame and layers set up, we need to fix the timing, so the character will move not too fast, or too slow. To change speed for all frames, click the arrow in the top right corner of the animation box, and pick "select all frames". Now, the animation box should look like this:



In order to change timing, you need to click the tiny arrow that is located right by where it says "0 sec.". It's located here:



Click it, and a time box, with a different amount of settings will pop-up. For timing, normally, you would pick which time you feel runs best for character movement, and trying different times is the best way to find out how good it is. After testing, I found that .1 seconds is the best timing setting, so select that. Now, we have save the optimized version of this sig, so, go to the optimized box. Settings should look like this:



Now, to save the final sig version, go to File>Save optimized. From there, you can choose where to save it at, and choose a name for the image file.

FINAL RESULT:


Hopefully this tutorial gave you a general guide of how to make sprite sigs. If you practice this enough, you will eventually be able to make sigs like I posted near the top. Please post comments, and show me what you guys can make. I hope you guys enjoyed. Not bad for my first tutorial, huh?

GJ Matt

Thanks MIK.

Well here's my go at it


It isn't finished
Has some bugs and I left out the first row of it by mistake
And i need to fix that screen shake in it
Took 2 hours and it's 34 frames
This is quite fun
I'll ix the bugs tomorrow
It's 2:33 am over here

That is awesome. I love it. Yeah, it is pretty time consuming. Can't wait to see the final product.

Well here is the final result


My next attempt at this will include two diffrent sprites
Not quite sure how ima get it to work but i'll get it done alright

Here's a quickie i did



I couldn't find two sprites that would go well with eachother
Also I can't get this one to loop
NVM
I got it to loop

man thanks for great tut

OMG MATT!!! UR SOO KOOL!!! THAT'S SUCH A GREAT TUTORIAL!!! i went and made one myself also and here it is....




is it gud? i dont think it's gud. ..heh heh heh...im going to make more....THANKOU SOOOOOOOOOOOOOOO MUCH MATT!!!!

guys, i'm searching all over the net for a good background.... can someone plz help me?

nice tut

great tut

Where can i find backgrounds which i can use with this tut? I can find sprites but no backgrounds.

Hey, when I use this sprite http://www.panelmonkey.org/sprite.php?id=326&theme=3 and paste the image into ps the background turns black

You guys might want to register

Doesn't happen to me

Very excellent and very helpful tutorial and links. Right now I'm working on a Mario-themed one.

Heres Mine Thx for this Great TuT!

Doesn't happen to me

Hmm, going to register later but then I'll guess it's my computer =/

How do i view it!!1!!