Help with Photoshop function, Move all layers horizontally.

[jorgefrances]

Hi, I'm new in this forum.

I need to move 289 frames of a .Gif image, to generate a horizontal image containing all the layers of the gif, like the example I done, I made the example image manually, but I'm sure there's a automatically way to do that. Anyone knows how to do that? Thank you so much

 

[jorgefrances]

Hi, I want to have all the layers of the gif horizontally, I just copied and pasted the four layers manually, but I want to know if i can make all the layers at once with a function.

I need to make all the layers one next to other, because we need to put it in a website and make a css animation.

 

[Rich54]

I hate to insert myself and muddy the water, but my impression of what the OP is asking is that he wants all 289 frames of his GIF to be laid out horizontally. When he says "quiet", I take that to mean that the horizontal frames are not animated GIFs. Rather, the horizontal frames are the 289 static images that comprise his GIF, as if they were a strip of movie film.

 

[IamSam]

Ahhhhh..........OK. I'm always open to others interpretation! This would be more consistent with what the OP (sort of) stated/wrote in his first post!

However, the example images he posted with his first post caused me to go in the direction I did. Based on the layers panel in his second sample image, I thought he wanted 4 side by side characters in 289 layers which was confusing.........for me anyway!! The OP would have been better off not posting the sample images.

but my impression of what the OP is asking is that he wants all 289 frames of his GIF to be laid out horizontally.

Like a sprite sheet????



Here is my GIF with all the layers laid out horizontally.


No hard feelings at all Rich, but I will leave this in your great hands! I'm far too frustrated with myself now!

I have cleaned this thread up so my posts are no longer confusing for future reading!

 

[Rich54]

No hard feelings at all Rich, but I will leave this in your great hands! I'm far too frustrated with myself now!

Unfortunately, I don't think I know how to do it. The OP did his sample manually, but he is looking for some automated way to deal with all 289 individual layers.

I know nothing about scripts, but I suspect that's what's needed to automatically arrange 289 layers horizontally with even spacing.

 

[thebestcpu]

I agree that a good script could do the job.

The other way I thought of to get this done was with a couple steps.

1) File > Export >Layers to Files

And then

2) File > Automate > Contact Sheet II

Where you set the options for the contact sheet base on the Document size x number of Layers and select a single row options and columns matches the number of Layers.

It should create an Document with all the Layers side by side if all the parameters are set right.

The only question that I did not test out is the order the files would be put together in the contact sheet. If done alphabetcially, the Layers might have to be labeled appropriately so the would stay in order.

Just a quick thought on an approach that might work without a script
John Wheeler

 

[polarwoc]

I wanted to share my thoughts based on what I understood so far.

I need to move 289 frames of a .Gif image, to generate a horizontal image containing all the layers of the gif, like the example I done,

Your images are about 24 mm (173 pixels) squares. If you want to juxtapose 289 of that size images side by side (assuming there is no gap between the images), you will end up with an image that is about 6.9 meters by 24 mm high (about 50,000 Pixels wide and 173 pixels high). Most browsers could have an issue with dealing with an image of that dimensions.

I need to make all the layers one next to other, because we need to put it in a website and make a css animation.

Save each of those 289 frames as an image file and use this site which will create a sprite sheet. Note that I have not tested it myself and also am unsure if it will be able to handle a resulting image that is 50,000 pixels wide. If possible, cut down your frames to essentials so the composite is more easier to handle.
If the above does not work, here is a solution on how to make a sprite sheet using Adobe Animate.

Also, I found this CSS article interesting on how to create Sprite Sheet animation but it requires the composite sprite sheet made.

Good luck and let us know how you fared.

 

[polarwoc]

A big thumbs up to John @thebestcpu
I had the following layers

I moved them to individual files using "Layers to Files"
Then, I used the following settings in Contact Sheet II

This is the resulting image as a sprite sheet


It is to be noted that it took a bit of processing time to generate the above. Also, the "Layers to Files" step above created 4 PSD files.

Bottom line is, it works.