Sprite Animation Tutorial- Young Entrepreneurs Making Money Online

Homepage Forum Interviews Rich List Blog Directory Creating Websites Make Money News Advertise Contact Us

Sprite Animation Tutorial
This tutorial will teach you how to make a simple sprite animation

Category: Photoshop
Views: 26852

Sprite Animation Tutorial Sprite Animation Tutorial
This tutorial will teach you how to make a simple sprite animation, like this:

You Will Need:
- Photoshop
- ImageReady
- Internet

Open up your internet browser and go to a searchengine. Type in *Game name* Sprite Sheet, replacing*Game Name* with whatever game you want.

This is the one i'm using for the tutorial:

Save the sprite sheet, and open it, or just copy and paste it, into photoshop. If it has a background, justgrab the magic wand tool, click anywhere on the backgroundand press delete.

Please Note: If you opened the sheet from afile, then you will have to copy and paste it intoa new photoshop document.

Sprite Sheets are usually organised so that whichever ones are from a set animation are in row(s).

The row that is going to be animated in this tutorialis the darkened row shown below:

I left the background on so it would show up better.

Now you know which row you are going to animate, you need to create a new photoshop document, 100 x 100 is usuallysufficient, with a transparent background. If your spritegoes off the sides of the document, just go to Image > Canvas Size and make it bigger by adding more pixels toeither width or height.

Now go back to the sprite sheet and use the marquee tool to select the first sprite in the row.

Now copy and paste that into your new document. Now dothe same with the other sprites, copying and pastingthem each as new layers (it should do that automaticallywhen pasting).

Please Note: One of the most important factors inSpriting is that they all align properly, so find somethingthat the new sprite and the previous sprite have in common,such as limbs, hair, or some kind of special effect.Now you should have a layer structure similar to this:

Now save that as a .psd with a suitable name.

Click the 'Edit In ImageReady' button

That should now open the psd in ImageReady.

If you have a slow computer I reccomend that youclose photoshop down, as you won't need it again.

In IR (ImageReady) make sure that you have the animationsbox open, if you don't go to Windows > Animationsand just make sure that 'Animations' is ticked.

The animations toolbar looks like this:

Now hide the top layer and show the bottom layer.

Click the 'Duplicate This Frame' button on the animationstoolbar.

Now hide the first layer and show the second. Click the Duplicate Frame Button.

Next hide the second layer and show the third. Click the Duplicate Frame Button.

Then hide the third and show the fourth. Click the Duplicate Frame Button.

Do that until all the layers have been shown once.

Now press play and watch your animation run smoothly.

Thank you for reading this tutorial, I hope it has helped you.

If you would like more help with this tutorial please register and visit the forum.

About Michael

Michael Dunlop personal statement

“But I am already older than 21”, I hear you cry. Don’t worry, despite the name, the information and advice is more geared towards retiring prior to having a fake hip installed.