Photoshop exercise: create an animated GIF


Home → Workshops → Photoshop exercise: create an animated GIF


TASK

  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

Workshop

  • 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)

output


Simple 2-frame animation

dog1


Hand drawn frame by frame animation

sixfootgiraffe_kylesmith_2016_54

Kyle Smith


Cut-out animation

trummy
…Sorry for bringing Trump again 😉


Animations created out of video sequences

penguin

kitty


Animated photoshop effects

red-11

George Redhawk


More from George Redhawk


Home → Workshops → Photoshop exercise: create an animated GIF

Advertisements