How to Make a .GIF Animation

Untitled-1.gif

by Johannes Madsen

Animated Gifs have been around since the dawn of the internet but they have become very popular again especially on media sharing sites like Tumblr or Reddit. Services like Vine and now Instagram have made it easy to create and share short videos. By creating your own gif you can make something extraordinary that really captures attention and inspires imagination.

Want to add something unique to the mix? Make your own animated gif!

Adobe AfterEffects

Try AfterEffects Free Trial

Adobe Photoshop

Try Photoshop Free Trial

Adobe's software is fairly expensive but you can try it free for 30 days at Adobe.com.


HOW TO MAKE A GIF

IN 4 EASY STEPS

➊CREATE ANIMATION IN AFTER EFFECTS

Get creative! Import any clips, graphics and artwork into After Effects and start messing around with animation.

  • Creating a short animation in After Effects takes a little effort but is not too difficult to figure out.
  • You could start from scratch, import a piece of video or one of your existing pieces of artwork.
  • You can mix text and effects in endless ways with After Effects

I simply started with an images of the Artopia logo and a short clip of some moving water. I layered the water clip on top and made the transfer mode 'soft light' this gave me the blending effect. That is all there is to it.

Most of my After Effects knowledge comes from videocopilot.net. They have over lots of great free tutorials.

➋SAVE YOUR ANIMATION AS A .MOV FILE

Once you have made your animation After Effects you need to  render (save/export) it as a .mov file.

  • Pick  'Composition -> Add to Render cue'.
  • Choose Quicktime in the settings.
  • Select a location for your file and press render.

Gifs can play up to 15 frames pr. second so set the frame rate of your composition to 15 fps or lower. Choose a lower FPS to make your animation run slower.

➌IMPORT YOUR .MOV FILE INTO PHOTOSHOP

Once you have Photoshop open you need to get your video file into photoshop

  • Click 'import -> video to layers' and select your .mov file.
  • If you want, adjust the length of your animation. Click 'Ok' and photoshop will automatically make an animation from your clip.
  • At this stage it is possible to do more with your animation in Photoshop like set the timing of individual frames.

If you don't see a timeline, go to 'View -> Timeline'.[/note]

➍ SAVE TO A .GIF FROM PHOTOSHOP

  • Go to 'File -> Save for Web...' to save your animation to a gif.
  • In these settings you have a chance to lower the image quality of your gif in order to make it a smaller file size.
  • Click 'Save' and choose a location.

You're done!


Below is a detailed video tutorial on how to make a gif that I used to figure this process out.