2

Here is a transparent GIF that I made using Blender and Photoshop:

enter image description here

I'm happy with it, but I would like to trim out the transparent pixels that are unused around the ball throughout the animation to make the file lighter and easier to fit with other content in a webpage.

However, the animation has a variable height and width, so when I put it in Photoshop and select "Image > Trim > Transparent Pixels", it trims around one of the frames which doesn't work out because one single frame of the animation has a height and width that are not significant to the rest of the animation.

What is a workflow-friendly and easy way to trim out pixels outside the animated area of a GIF?

PS: Sorry for the epilepsy inducing GIF

1

Because of the way Photoshop works, when you crop an image it crops every layer the same size, and with the same x and y coordinates.

Therefore, you cannot crop every frame of this animation based on the content of only one layer. Your canvas has to be big enough to include the content of every single layer, no matter where the content is located and how big it is.

This means that you can only crop the content:

  • to the left of frame 1
  • above and below frame 15
  • to the right of frame 34

The way I would do it would be to use guides to mark how much I can crop from all 4 sides and still include everything. I put a black background to show the guides better.

To the left of frame 1

enter image description here

Above and below frame 15

enter image description here

To the right of frame 34

enter image description here

You can then use the crop tool.

P.S.: If you want to really make the file as light as possible, you could also remove the duplicate frames; 1 and 60 are the same, and so are 30 and 31. You could delete frames 31 and 60, then double the duration of frames 1 and 30 to 0,06.

  • That's a good answer, thanks, but would you be kind enough to explain how to select all the frames in the timeline and crop the whole thing in one go? – MicroMachine Feb 27 '18 at 18:10
  • 1
    You don't have to select any specific frames or layers. By using the crop tool (or making a selection then image/crop), it crops the canvas according to your selection, so every layer will be cropped with the same size and x/y coordinates. – BenoitLussier Feb 27 '18 at 18:17
1

Not Photoshop, but you can do it very quickly at https://ezgif.com/crop

Upload the image, check Autocrop option and it will remove transparent pixels around the image.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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