Create a Photo Animation from an Image Sequence in Photoshop (Make a GIF or Video)

by | Jun 27, 2021

Want to make a photo animation for social media or your website?

I’ll walk you through it.

Situation: You have 3-4 images or more that you’d like to create an animated photo sequence from. You may have shot with motor drive or just shot a very quick continuous series with the same composition.

You can use Photoshop to 

  • stack the layers
  • align the layers
  • create a frame animation

When you shoot a sequence, or series of images with the camera pointed at the same subject area, it is most convenient to use a tripod. In Photoshop the align layers function will help resolve the fact your images are not perfectly aligned.

After applying this you may see some gaps at the edges which will require patching or cropping (cropping is easier).

Note: This process is also handy for doing edits of images in Photoshop to merge the best attributes of multiple images. You’ll notice my final flag edit is actually a combination of two different frames.

Quick Tutorial to Export Video from Image Sequence

  1. Shoot a series of images (tripod is best, otherwise be steady)
  2. Open Photoshop and use File > Script > Load files into stack
  3. Apply Edit > Auto align layers to remove jiggles (select all layers first)
  4. Open Window / Timeline panel
  5. Click create frame animation
  6. Add more frames to the single frame by clicking on the small icon on the right of the timeline window and selecting “Make frames from layers”
  7. In timeline panel change timing to 0.1 second or faster (I use 0.2-0.5 seconds for most sequences)
  8. Export the file to video by using File > Export > Render video
  9. Apply colour correction or other tweaks inside your favourite software
King St long exposure photo animation by @mikesimpson.ms

 King St long exposure by @mikesimpson.ms

 

Animated GIF Export

 To embed on your website export a GIF in Photoshop. Either start with the PSD file or import a video and then choose File > Export > Save for web (legacy) and then choose GIF as your format, and Animation > looping options > forever.

Be warned you may need to make adjustments to the quality as the size can be surprisingly large. Sometimes I use the lower quality settings to get size down. Try reducing colours and dither.

It’s amazing how that this streetcar animated GIF is 6 MB! It’s obviously not a good idea to load your website with many of these!

However unlike many quick GIFs people insert on the net, this one is based on a complex series of images with a lot of information (Detail).

My original images were 3000×4000 pixels but to create this at a reasonable size I ended up at 600×800 pixels. There are 51 frames which is rather a lot.

Screenshots from Photoshop

This tutorial is about a beginner/ intermediate level. To assist, here are some screenshots. Be sure to select the hamburger icon in the timeline panel that will open the dialogue with option to “Make frames from layers.”

Create animation from layers in Photoshop

Don’t miss the hamburger style button (horizontal lines) in the lower right of the software , or top right of the timeline panel to see the the “Make frames from layers” option.

 

Wrapping Up

That’s it. It is a really cool effect that I’ve seen very few people use and adding video to your portfolio is a great idea to freshen things up. Remember to use animated GIF for web, because unlike Instagram for example, which oops video playback, web browsers don’t loop video.

You can do similar photo and image animations in After Effects, Premiere and other software by taking advantage of “image sequence” editing or just loading your pictures into the software and start playing around on the timeline. 

Lastly in Photoshop you can also try frame blending inside your photo animation for a unique look. I tried it with my recent flag photo animation and it has potential (maybe more frames?).

After you try this be sure to let me know how it turned out. Be creative and have fun!

 

Follow Mike on Instagram: @mikesimpson.ms

Adobe help page: https://helpx.adobe.com/photoshop/using/creating-frame-animations.html

Mike Simpson

Mike Simpson

Author

Mike is a teacher, writer, graphic artist, web and media producer. He’s passionate about education and media. Catch up with Mike via his Instagram: @mikesimpson.ms/

Email Newsletter

Please sign up for the newsletter for updates and news on photo walks, interviews and special events and features!

Pin It on Pinterest

Share This