1

I made a video in AE(After Effects), I would like to create a strip similar https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-loop-bg-vflsg8hml.jpg

I would like to create this strip inside photoshop, then in a webpage I can animate it at 60fps. I am not exactly sure how to achieve this.

I have done the following.

In AE, rendered it as a photoshop sequence.

enter image description here

In Photoshop I have done File > Import > video frames to layers

Improve this question
4
  • You don’t want to import the frames to layers. Layers are stacked on top of each other, but you are making a film strip, where the frames are side by side across a single layer of canvas (unless I misunderstand you.) If your version of Photoshop has animation features, you should explore those.
    – Simon White
    Feb 3, 2016 at 11:44
  • How do you plan to animate it at 60fps? I don't follow why you're bringing it into photoshop at all.
    – Ryan
    Feb 3, 2016 at 14:27
  • If one frame is 100px then multiply that by 60 you get 6000px that needs to pass through a 100px window at one second. I am not exactly sure how to pass it through at 1 second, but I am sure it's doable with some javascript and transform css property.
    – Michael Joseph Aubry
    Feb 3, 2016 at 20:37
  • I am bringing it in photoshop, because they have a feature to import frames to layers, but Simon is right layers are stacked, I was hoping to import it similarly but instead of stacked, side by side. So that I can save it as a .jpg
    – Michael Joseph Aubry
    Feb 3, 2016 at 20:39

1 Answer 1

Reset to default
2

I got you,

If all you want is to create a line of all the "layers or frames", then this is the easiest way to do it.

You have all the frames from the AE in seperate files? Open your document at whatever size you would like, with the max width being (one frame x60).

Lets say each 'frame' is 50px wide, then your total document will be 50x60 = 3000px.

Next, we have to use an Adobe Script that comes with PS. You can find it in File > Automate > Contact Sheet. It gets complicated here, so I have made an example doc with 29 frames as a reference. Find the Automation Script

When you click it you will see a dialogue box with a load of options.

Contact sheet dialogue box

The next step takes a little bit of Math. So in 1.1, these are your 'frames'. Click browse and get all your files in here. Make sure they are in order of 1 - 60 or your sequence will be out.

In 1.2, this is where you put the width of all 60 frames (3000px, we worked this out above! But this might be different to your actual amount! Work it out!). Make sure the height is the same as 1 of your frames too! Leave the rest the same, since you are keeping the animation on the web.

1.3, this is important and the columns represent the amount of 'frames' you want/have. If your width is 3000 and each from is 50px, then there will not be a gap in the finished outcome, however if you have too few columns or frames than even width, you will get ugly gaps (not what we want). I chose 30 because I have 30 frames. Leave it as Auto Spacing, as you cannot actually have less than 1px.

Press OK and that it you. This takes a while, took a solid 30-40 seconds for my 30 images/frames.

The outcome!! Finished Outcome

As you can see, each frame is linked in the layer panel, and they are all spread out.

Hope this helps!!

Improve this answer
1
  • Just now saw this, will give it a try. Looks good, thanks man!
    – Michael Joseph Aubry
    Feb 9, 2016 at 1:34

Your Answer

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

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