1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Photo Shop / Image Ready tutorial for sprite animation

Discussion in 'Creative Archive' started by Pokepok, Oct 25, 2008.

Thread Status:
Not open for further replies.
  1. Pokepok

    Pokepok Guest

    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.

    [​IMG]

    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).

    [​IMG]

    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!

    [​IMG]

    THANK YOU

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

Share This Page