2

I have an animation that is split up in ~20 individual images that I use for a mobile game. The game engine I use will take all the individual images and compile them into a sprite sheet for me.

My issue is that some of the frames in the animation have a lot of blank space (its an explosion so it gets bigger every frame) and I would like to crop them to save memory usage and eventually resize all of the images.

When I cropped all 20 by hand in photoshop and using the align vertical and horizontal features it really did not keep a center point for the explosion. This caused the animation to look horrible when the game engine ran through all the images. I am assuming it is because the images did not share that center point anymore since I pretty much cropped by hand.

How can I crop all of these individual images while keeping a main center point? Do I need to use a different program besides photoshop?

Improve this question
1
  • I'd like to think there is automatic way do this, but as long as the shape is asymmetrical, I just don't see how.
    – Joonas
    Commented Jun 16, 2014 at 6:52

3 Answers 3

Reset to default
1

It's seems like your question has less to do with cropping and more to do with alignment.

If you take two differently shaped objects and align them vertically and horizontally in Photoshop using the align tools provided they will not share a center point, as each object is treated individually.

Your objects need to have something in common for Photoshop to be able to align it properly. In your case, you will want at least one edge of the animation that each sprite shares, whether that be the top, bottom, left or right edge is irrelevant because you can then align the sprites to that respective side. This means you will have white-space on some frames. If your animation expands both vertically and horizontally then unfortunately you may need more white-space in both directions.

While I can understand the extra bits and bytes this extra white-space may bring, it's really the only way to align it, other than by hand.

I'm curious why you would be building the a animation from the sprite sheet in Photoshop, though I'm not entirely familiar with the process.

But to answer your question, no, I don't think there's a way to do what you're looking for in Photoshop.

Improve this answer
0

Hey im not sure what set of images you have for animation, and what size, but i just practiced a method, here it is

Open one of your file( png animation image) in photoshop save the file as psd first. go to actions Alt+F9 and create a new action name it whatever you want e.g ( croping method ) now press record button so you can record your action and perform on all the rest of the images without doing the same method by hand again and again.

okay ! now, press CTRL + A to get the overall canvas selection and align your pic centered horizontaly and verticaly now press C from crop and while croping press ALT+SHIFT to crop in perfect ratio. Done croping , save the file in png. and stop the action by pressing stop button. now open other files and select the action you made ( croping method) and press play button , it will do the same as you did before.

Do let me know if you need more help, Thanks

Improve this answer
1
  • The problem that I see with this is that not each image needs to be cropped the same amount. Since the image is an explosion, its growing in size for each frame.
    – joshmmo
    Commented Jun 16, 2014 at 16:32
0

after selecting crop tool->in top left corner enter your desired cropping ratioenter your cropping ratio

->and crop the image keeping alt pressed in the keyboard

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.