Turn videos into animated gifs using Photoshop CS6

Some things you will need:

  • Some video content – a short clip of whatever you want in .mp4 format. (here is a sample if you need it)
  • Photoshop CS6 – you may be able to do this in earlier versions but as far as we know you need CS6
  • 5 minutes of your time

So how do you do it? – Luckily it is incredibly simple, here is our step-by-step guide.
1. Create a canvas
The size of your canvas is entirely up to you, but bear in mind the larger the canvas the larger your .gif will be (file size). For this tutorial we are going to use a 500 x 363 pixel canvas.
canvas-size
2. Add a video as a layer
The easiest way to do this is to drag a video from your desktop onto your canvas. It will then appear as any other layer would. Simply drag its proportions to fit your canvas. (here is our sample again if you need it)
drag-videos
3. Activate the “Timeline” window
Go to Window > Timeline in the menu bar and you will notice the timeline bar appear. Then click “Create video timeline”. You will notice a timeline bar will appear showing each frame of your video. At this point you could make alterations to the timeline but for simplicity we are going to leave the file as it is.
timeline-video
4. Export it as an animated gif!
Right, you are now ready to export your little clip as an animated gif! Simply go to File > Save for web and then choose “gif” from the drop down list of file types. Notice the default animation settings are set to loop once, change this to “forever” if you want just that. You’ll notice the file size is quite large (should be about 3mb or so) this can be tweaked as usual by fiddling the various settings and checking it still looks ok. (For this tutorial we are leaving it at 3mb.)
export-giof
5. Finished!
You can now use your gif in your website or wherever else you want.
clicky-animatedgif-result

Written by Oli Yeates

CEO/Founder

Follow Oli on Twitter