Have you seen the stunning Sony “Be Moved” website and asked yourself “How did they do it”?
As you can read in my deconstruction, the animations are actually a static images exported from a video and rendered on the page in a sequence of images.
So how do you create an image sequence from a video file?
Lets find out, it’s actually pretty simple.
1. Open your video file in Photoshop
Open Photoshop, go to File > Open and navigate to a folder with your video file, select it and click Open.
In my case that is
slowmo-water-video.mp4 from Mazwai.
2. Define an area for export
Select a start and end point. In my case it is 5 seconds from the middle of the movie clip.
3. Define image size
Go to File > Export > Render Video
- Choose Photoshop Image Sequence instead of Adobe Media Encoder,
- select a desired image size,
- define a frame rate,
- keep Work Area as your Range option,
- and click Render.
The above settings will export
149 frames from our video into a
A different image sizes
See a comparison of a different image sizes and the resulting file size.
Each folder with the images was also optimized by ImageOptim to help us reduce the file size.
Even if you optimize your images, your page will still need to download quite a few assets.
Now you know how to export a static frames from a video files and use them in your scrolling animations.
Experiment with the jpg compression and image sizes to achieve a reasonable image quality with a minimal file size.
Share your tips and tricks on how to export and optimize image sequences in the comments below.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.