Photoshop exercise: create an animated GIF

Home → Workshops → Photoshop exercise: create an animated GIF


  1. Get inspired at GIPHY and use the search function (like “funny cat” or whatever)
  2. Develop a simple idea for an animated gif sequence (and can also be a simple 2-3 image animation)
  3. Sketch a little storyboard
  4. Select the image material you need
  5. Create a photoshop file, not too big, square, landscape or portrait format depending on your idea (max. 500x500px)
  6. Select the background you want to use and paste and scale in your PS file
  7. Open the pic material in PS, cut out the elements you want to use for your animation, and paste them into your animation PS file
  8. When you have all elements in your PS file, scale your elements to the appropriate size, create the composition/layout that should be the first frame of your future animation
  9. Each animatable element should be on a separate layer
  10. If you have elements that are not shown in the first picture, disable the layer of this element, you’ll enable it in a further frame


  • In Photoshop, open the “Timeline” window (“Zeitleiste” in german)
  • Click on “Frame Animation”
  • You can animate each layer by: position, layer transparency, effects
  • But you can not animate size and colors (except if you use color effects)
  • All further steps shown on screen by Didier

Samples of animated Gifs

360° Product view
(Might be of interest for one of your portfolio items)


Simple 2-frame animation


Hand drawn frame by frame animation


Kyle Smith

Animations created out of video sequences



Animated photoshop effects


George Redhawk

More from George Redhawk

Home → Workshops → Photoshop exercise: create an animated GIF