Sprites Preparation - HELP

[thoc]

Hello everyone 

So I am a newbie in pixel art and animation in general. I know this is probably a really dumb question but here we go ->

I've been doing some animations trying to improve and discover my style. But my question is more technical then the drawing itself..  How is the best way to "cut" the sprite and turning into a gif to test your animation? Like crop it each separate sprite and save it as a gif? Or just drag each sprite on top of each other then hide the other sprites and save it on by one? Or there is another easier way to do it? (sorry for my english)

[Probo]

Theres a program called Graphics Gale that makes animation really easy, its pretty cheap too.

http://www.humanbalance.net/gale/us/

[Clandesdyne]

If you're using photoshop, you can make an animated gif, png sequence, or simply test the frame animation directly in the software.

[Mathias]

I'm a Photoshop user. So, for something like this I might keep it as a "strip", like you have pictured in your post and simply move the strip by a set increment per frame. It's good practice to have your frames artwork always the same distance from each other.
This way, while editing, you don't even need to switch layers to edit your frames. I've assigned CTRL+> and CTRL+< to advance my timeline panel back and forth when desired. No need to click those stupid tiny buttons constantly.



If you want - while working, crop your canvas to the size of the animation (set to NOT delete cropped data). Not necessary while working, but you will want to do this before outputting the GIF animation file.

This is an expedient workflow that I highly recommend.
There's more to it than this, but that's a start.

[thoc]

Awesome, I would like to keep working on photoshop 

Ok the "strip" workflow looks easy and fast to do. But sorry I think I didnīt get it all of it.

So you mean I have to crop each one and save it something like.. "anim_00", "anim_01"...

Or I donīt even have to crop them? Because the way you did this strip seems like the "camera" just go one by one in the same png! How this magic happens!? 

[Mathias]

So you mean I have to crop each one and save it something like.. "anim_00", "anim_01"...

No way. Just complete the strip's artwork, make a quick frame by frame animation of it by moving it right to left, like I did, and output the finished GIF with Photoshop's "Save For Web" dialogue.

Or I don't even have to crop them? Because the way you did this strip seems like the "camera" just go one by one in the same png! How this magic happens!?

Cropping is optional. Whatever you want to do.
I'm simply moving the strip (as one layer) from right to left.

And I'm making sure to move the whole strip far enough each frame so that the character falls in the same spot. Therefore, you get the illusion of motion.
In my previous post's image I've expanded the canvas to show you what's happening.

Try it.

[thoc]

Ohhhhh I get it now! Thank you very much Mathias  really appreciated you help!

I think I got it =D and it was like 20 seconds to make it so great 

[Mathias]

You got it.

Now, in the future, try and space each frame, in the strip, using the same exact increment/distance.
If you don't, then when it comes time to tell your game engine where each frame is, you'll have to measure out and find the coordinates of EVERY frame, which is incredibly monotonous and time-consuming.
With a standard spacing of say 50x57, you can easily determine where the top left and bottom right corner of each frame is.
frame 1 = 0,0    X  50,57
frame 2 = 50,0   X  100,57
frame 3 = 100,0  X  150,57
and so on . . .