Learn Animation in Photoshop For First Time - Creating Frame Animation

Learn Animation in Photoshop with basic knowledge of making images.

I have no knowledge of making animation in photoshop, this is my first attempt.

I want to make animations for my Miss Rice Stickers. I found two tutorials are very helpful.

These two sources are what I Learnt from: One is from creating Frame Animation Hubspot and Another one is from Create Video Timeline smashingmagazine

You may interest my post

—>How to create animation from Create Video Timeline .

The differences between them

Frame Animation is very limited for details, sounds and frames. If you want to create something like marketing ads, email ads, you’re better go for Frame Animations. If you want more details for smooth animations, you better go for Video Timelines, for example, you want to add more effects, video clips, sounds effect and multimedia stuff. ^.^

For both types of animations, there must create more than one layer to start with. Because the first layer just not suppose to edit, like you create a new document, the first layer is locked in the layers panel. =.=‘’(Although you can unlock it, I just not bothered and always put some background colour in.) Well, let’s create more contents in different layers.

First Attempt

I created a Frame Animation, totally followed the tutorial from Hubspot. It worked well. There is one thing I want to take notes on is SAVE as a GIF file.

  • If the file have gradients, choose Dithered GIF.
  • If used a lot of solid colours, choose No Dithered.
  • High dither has more colours and Details and end up with a bigger file size.



Creating all the layers first, and for each frame, I always can turn on/off the layers in each frame, which means I don’t need to save each image in each frame, then put in the ps file. I can just turn on/off layers for each part in the image, using the eye icon in the layers panel.

  • Export

    Always Choose Export for Web, in this way, you keep your animation as a animated GIF.

  • File size

    I tried different GIF Export options, such as:

    • Dithered or no Dithered have the same file size.
    • Restrictive Changes the image colours.
    • 128, 64, 32 does have slightly colour changes. But File size range is up to 2k difference for this GIF image.

My first attempt is very successful. A Good Start.

–> My Second Attempt How to create animation from Create Video Timeline

Ting Chen

Work hard, play hard!

contact@ting-chen.com Glasgow, UK