Photoshop Animation

Sharing knowledge about Photoshop Animation

Types of Photoshop Animation


Photoshop is capable of doing so many things beyond photo-editing. Over the years the program has gathered so much functionality they might at one point consider renaming Photoshop to One-Stop-Shop… Naaah, I don’t think so, but although Photoshop is capable of doing all these different things, a lot of the time it’s not really intuitive or even well documented how to do these things. It’s the same with Photoshop’s animation capabilities. Personally I’m mainly interested in how the traditional 2D workflow translates to working in Photoshop but the site wouldn’t be complete if I didn’t explore all of Photoshop’s animation tools. Join me in the search for what Photoshop has to offer as an animation program.

Types of Animation

The photoshop Timeline is capable of three kinds of animation, namely:

  1. Keyframe Animation
  2. Frame by Frame Animation (also used in rotoscope and cut-out techniques)
  3. 3D Animation

Keyframe Animation

If you’ve worked with Flash you are probably familiar with the term tweening. Keyframe Animation interpolates between two keyframes of a given property. Say for instance you want a layer to move from the left side of the canvas to right side in two seconds. You’d create a Keyframe for the starting position (left) on the position property in the timeline at time 00,00. Then moving the playhead to the two second mark on the timeline and move the layer to the end position where a new keyframe is generated for the new position values. This way you can move things around but the trouble starts when you’d like to adjust the spacing, like slowing down or speeding up. Things really start to fall apart when you add rotation to the equation. Don’t be fooled by this video from, there is a reason why he’s using the so called “rubberband approach” ;-)

I wrote a review about keyframe animation in Photoshop ›› Types of Animation – Keyframe Animation

Frame by Frame Animation

The traditional method of animating, where every frame or every other frame is drawn to create the illusion of motion.

There are two main approaches to this method:

  1. Layer Animation/Frame Animation
  2. Video Layer Animation

Alex Grigg and Hamilton Draws cover the concept of Layer Animation and VideoLayer animation thoroughly in their tutorials.

3D Animation

3D extrusion was first introduced in Photoshop CS5 Extended and has come a long way since. I did a quick test in Photoshop CC 2014 and I’m amazed at the possibilities. I can see a lot of potential here in terms of adding camera movement, 3D reference, compositing or actually integrating 3D objects. This deserves a little more attention. I’ll be exploring this feature in the near future and I will make a video about my findings.

For now you can watch this video from Animator’s Toolbar user Rafiq Elmansy :-)

Final thought

This article is a good starting point for our quest to explore Photoshop’s animation capabilities. The thing Photoshop has against itself as a useful animation tool must be inconsistent workflows and the sheer fragmentation of tools and panels. There is still a lot to be uncovered if we want to utilise Photoshop’s full animation potential.


Add yours →

  1. >The traditional method of animating also known as rotoscoping, where every other frame is drawn to create the illusion of motion.

    This is so incorrect it makes by brain hurt. This site is a joke.

Leave a Reply

Your email address will not be published.

© 2017 Photoshop Animation. Theme by Anders Norén.