Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
In Photoshop I have done File > Import > video frames to layers
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.
When you click it you will see a dialogue box with a load of options.
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!!
As you can see, each frame is linked in the layer panel, and they are all spread out.
Hope this helps!!
transformcss property.