Photoshop timeline animation

This week I was working on a Photoshop animation for a client’s email campaign. I hadn’t done simple frame animation in Photoshop in a while, so I figured I would document the process in case anyone might benefit from it.

Setting up the scene step-by-step

  1. In my Layers panel I have three layers: a container, a green tree Smart Object, and an orange tree Smart Object.
  2. You only need a total of two frames to start your tween animation. The first frame is the green tree, the second frame is the orange tree (which we’ll be transitioning to).
  3. Select the first frame on the Timeline (the green tree) and Shift+Click the second frame (the orange tree). Then click the Tween button and add 20 more frames. This will put 20 additional frames between the orange and green tree frames.
  4. Next, select all the frames and change their time duration to “No Delay”. This will give the animation a seamless frame to frame transition.
  5. Finally, select whether you want the animation to run Once or Forever in the dropdown and save out your gif. If you want to test your animation, simply open a new browser tab and drag your gif file in to it. If you see the tree change from green to orange, you’re all set!

Follow along with the Photoshop animation screencast

I’ve included a simple screencast to show the steps—feel free to follow along. If you have any questions about the process or run in to any snags, please don’t hesitate to reach out on Twitter.