• Welcome back to Pokécharms! We've recently launched a new site and upgraded forums, so there may be a few teething issues as everything settles in. Please see our Relaunch FAQs for more information.

Photo Shop / Image Ready tutorial for sprite animation

Status
Not open for further replies.
P

Pokepok

I have seen in many request topics that many people do not know how to animate their sprites/ walkies. So here is a quick (OK, maybe not quick) and simple tutorial
on how to animate your sprites on photoshop.

Requirements:
1.Photoshop
2.Image ready
3.Spritesheet / walkie


STEP 1
->Download your spritesheet or walkie from internet.You can use any search engine to find them, use spriters resource or else request one from our PokeCharms spriters.
->Load them onto your photoshop software.
->Make the background transparent.If you do not know how to do so, you can learn it by clicking here.

STEP 2
->Open a new file and make the background transparent.
->Select each of your sprites / walkies from the old file one by one  and paste them onto the new file (on top of each other) in the order you want the animation to be. Now, you can close this (old) file.
->Go to Files->Save As and save the new file as a '.psd' file with an appropriate name.

tut2xo3.png


STEP 3
->Use the 'Go to Image ready' Button on you Photoshop toolbar to take you and the file to Image Ready.
->Make sure the Animation toolbar is visible in the Bottom Left corner of your screen. If it is not, then go to Windows->and tick the 'animation' option.

STEP 4
->Now, hide all the Layers using the 'hide this layer' option you get by right clicking on the eye-like button.
->Now, decide which layer you want to see first and then right click on the eye adjoining that layer and clickin on 'Show layer'.
->Go to the animation toolbar and click on 'Duplicate this frame'.
->Next, hide the first layer and show the second Layer and click on duplicate this layer. 
->Next, hide the second layer and show the third Layer and click on duplicate this layer.Do this until you get all the layers at least once.
->Now, Go to the animation toolbar and right click on the place where you can see '0 seconds' written on each frame and right click it.
->Select the required time gap for each frame.
->Click on 'animate' to see whether it works properly (it should and it will).

tut5la9.png


STEP 5
->Click on optimized which is visible below the heading bar of your file.
->Select the 'animate' option again so that it starts walking/running/slapping/killing/whatever again.
->Go to files->Save optimized as.
->Select '.gif' type as the save type.

And finally, you have your own animation! Keep it up!

platinumrj4.gif


THANK YOU

P.S. sprites from spriters resource.
 
Status
Not open for further replies.
Top