Wednesday, November 13, 2013

Making Gifs in Photoshop

Let's Make Gifs!

I figured I would follow up my previous post about tumblr with one of its most essential parts: gifs.

.GIF stands for Graphics Interchange Format, and is essentially a very short video made out a minimal amount of frames.  Gifs are usually quick and simple--it is not a video, but rather a series of images that are shown one after another to create the illusion of movement.  On tumblr gifs are typically used as reaction images, but they are also used by artists to tell a story that would be impossible in a single frame.

In these days, gifs are SO EASY to make.  They can be created in software like Photoshop or Flash, and even be made online at sites likeMake A Gif.

Making Gifs in Photoshop

The tutorial here is for Photoshop CS6.  CS5 has a slightly different process.


First off, go to File > Scripts >Load Files into Stacks.

This will open the following window.  Here you can browse for the files you want to use, and then arrange them in the order you prefer.  I arranged the images ahead of time and added numbers to make things easier.

At this point you want to make sure the Timeline window is open by going to Window > Timeline.  (If you are using CS5, this window will be called "Animation".)

Now that the Timeline window is open, let's covert the images into frames.  This can be done by clicking the button in the upper right corner and selecting Make Frames From Layers.

Now that all the layers are frames you can change the time that each frame will occur for.  Though there is always value in having different times for each frame, it's also handy to know that if you want to select all the frames at once, you can click the same button in the top right corner, and choose Select All Frames.  

You can preview the gif by clicking on the arrow keys at the bottom of the Timeline window.  It's important to remember that gifs loop, so if your first image and your last image don't link well, you will want to make the last frame a bit longer so there is some pause between the beginning and the end.  You can even add a black frame if you want to.

When your gif is ready, make sure to click File > Save for Web.  Simply saving the file will not do the trick.

In this final window you can make final changes with your gif.  The first thing you want to make sure is that Photoshop is saving the file as a gif (yellow arrow).  Next you can chose the size you want to export the file as--gifs are best smaller for easy web use, so make sure you're exporting a reasonable size (green circle).  You can also edit Looping Options and preview your gif (red circle).