Welcome to How to Animate Multiple Sprites in a Avatar: The Shatterstar Way.
First, I would like to point out that this is My method and this is not exactly the most effective method, but it gets the job done. This TUT will be using these 2 programs:
[list][]Adobe Photoshop CS2 (PS) *
[]Adobe Image Ready CS2 (IR)
[/list]
- Youll probably notice that Im actually making the avatar in Photoshop CS3, but the only difference is that Ill have to save my project and then open it in IR so dont freak out. This TUT will be still described for CS2 users.*
OKAY! Ill be showing you the Semi - HORD way of animating more than one sprite, and that is by animating individual sprites from scratch. This means, youll be getting sprites from a sprite pack. Mad props to Zweifuss, Xenozip, and all other Mugen people all over the world for taking the effort to rip sprites for us to use. Without yawll this shyt wouldnt even be possible. Thankx, a lot!
http://img462.imageshack.us/img462/4316/tutyz0.th.jpg
Anyway, find whatever you want to animate. Im gonna choose Bison from Alpha. Also, Im gonna be a lil lazy and pick something that uses very few sprites to animate. I picked Bison floating backwards since Ill be using only 3 frames/ sprites. Also, since I have Nero 7, I can use its snap viewer to view my files and scroll down with my mouse and I can see the sprites as if its being animated. If your not like me, then use the windows filmstrip option to view your files. Now, right click and pick open with and choose PS or just open PS and then open it from there.
http://img49.imageshack.us/img49/9134/tut1ai7.th.jpg
Make sure you have all the frames that you want to use opened in PS and get ready to start working. First, select the magic wand on the left side of your screen and also keep refering to my thumbnails because I have highlighted everything that you need to know and use so make sure that everything is exactly like I have it set up. Select the background delete it. Do the same process with all other sprites.
http://img462.imageshack.us/img462/4692/tut2zg9.th.jpg
Now we need a avatar so lets get one set up. Click file > new and use the non premium setup which is 160 x 64.
http://img462.imageshack.us/img462/6412/tut3po0.th.jpg
Next, use the move tool then select the very first sprite you opened up. Drag the selection in the avatar canvas and place it wherever you want it at. Repeat this process, but make sure you are matching your sprites together so when you finally animate it its not hopping out of place. The best way to know youre putting it in correctly is by zooming in on a certain part of the characters body. Usually its there feet or head, but in this case its Bisons right hand.
http://img243.imageshack.us/img243/2446/tut4nr5.th.jpg
Find whatever other character sprite you want to use and just do the same exact thing. I used Megaman, for some reason.You should notice that the layers are displayed on your right and it has now 7 layers. If you have more, then you fucked up, lol. Always use the same amount of animation in your second sprite as your first, so in this case, Bison has three frames then Megaman should have 3 aswell. The very 1st layer should have nothing in it since this will be your background.
http://img49.imageshack.us/img49/630/tut5ck9.th.jpg
To lower the confusion of all the multiple layers, merge Bisons and Megas animations together. Do this by using the eyes on the layer display in the lower right corner. The eyes just mean what layer is visible. Clear all eyes by clicking them then merge your layers in this order:
[list]
[] layer2 visible, layer5 visible, merge into layer2 make sure that the layer that youre merging into is highlited. Very important.
[] layer3 v., layer6 v., merge into layer3
[*] layer4 v., layer7 v, merge into layer4[/list]
http://img49.imageshack.us/img49/8255/tut6lf6.th.jpg
You should only have 4 layers now. If not, you fucked up! Ok, go to layer1 and pick some colors for your BG. I picked red and blue. Theres two ways of making a BG but Im only going to show you one and thats the gradient tool. Click and drag a line, no matter how long or in what direction. Instant BG. Finally, you need to make multiple copies of the BG so multiply the layer two times. Place your BG in this order: BG, sprites, repeat. Merge your BG in the way you did the spites earlier. Almost done!
http://img49.imageshack.us/img49/5403/tut7mq8.th.jpg
Click the button at the bottom of the tools on your left side. It should say once highlighted edit in ImageReady.
Time get this shyt over with. Go to the bottom of the screen and you should have the Animation Reel thingy so go to its upper right hand corner and look for the arrow. Click it. Choose the option, make frame from layers. Your three layers automaticly set up for you.
http://img243.imageshack.us/img243/6735/tut8xv8.th.jpg
You can press play, if you want, but believe me that shyt is movin way too fast. Wanna slow it down? Easy. Look at those numbers at the bottom of each frame. This determines how fast each individual frame will be made visible before going into the next frame. Right click the lil black arrow at the bottom. Your animation is defaulted at no delay or 0" so lets change it to .1 seconds. Edit all of the rest of the frames to .1 sec. Then press play. If thats still too fast then just play with the times till your comfortable with what speed you want. I picked .2 sec.
http://img243.imageshack.us/img243/1319/tut9ev9.th.jpg
In this situation, file size is not an issue, and it shouldnt be. Your optimized file size at the best quality possible shouldnt be any higher than 12.0K. If its anywhere beyond that, all I can say is, you are the worst avatar maker ever! My work came out at a lil over 8K. Now, click file > save optimized as and make sure your saving this as a gif.
finished!!!1
BONUS
adding text. Same as making a BG. Just put your work back in PS and add text with the text tool, pick your color, multiply the layer, then merge them. Go back to IR, and use what you did the first time but use the delete option then make frames from layers, now its animated with text.
http://img260.imageshack.us/img260/3285/tutbonusak7.th.jpg
http://img49.imageshack.us/img49/2253/tutbonus1tj6.th.jpg