Making GIFs with Photoshop

Adobe products are a staple in any designer’s back pocket, and there are no exceptions for GIFs, either! Making animated GIFs with Photoshop can look a little complicated, but here are some simple steps for working with the program to create fun GIFs to use anywhere you like!  We’ll be talking about traditionally animated GIFs as well as GIFs created from videos, so scroll down to find the right tutorial for you!

If you’re looking to make a GIF from simple images, you can make use of the Timeline feature.

Step One: Upload your images to Photoshop, using File > Scripts > Load Files into Stack.  Follow that up with Browse, then select the images you want to use in your GIF and click OK.  Photoshop will automatically open each image in a different layer.  You can also load your images individually, but then you have to create each layer yourself, so try and get all your images together before you start the process!

Step Two: Here’s where you start with Timeline!  Open the feature through the Window tab at the top of the screen.  Timeline is specifically used for simple animated gifs because it lets you turn show different layers at different times for a certain amount of time, giving you a classic feel of stop-motion animation.

Timeline’s features will appear at the bottom of your screen!  Once you’ve opened it, you can proceed to step three.

Pull Quote
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
Step Three: Using Timeline, select the Create Frame Animation option.  You’re on your way!

Step Four:  Now, you need to create a new layer for each frame.  Select all your layers, then click the menu icon at the top right of the Timeline feature menu.  From that dropdown, select “Create New Layers for Each New Frame” and follow it up with Step Five!

Step Five: Reopen that menu, and select “Make Frames From Layers.”  Pretty self-explanatory–this option will put your GIF on track by making each of your layers a different frame of the animation.

Step Six: Now this part can get a little tedious if you have a lot of layers/frames.  Under each frame, you need to select the correct option for how long you want it to appear in the GIF.  A common speed is .5 seconds per frame, but this just depends on your own style, material, and needs!

Step Seven: Now you need to define how long you want the GIF to loop before it stops playing.  You can choose anything from once to forever, and customize every option in between!

Step Eight: Now is the time to preview your GIF and make sure that it is everything you wanted out of an animation piece.  Does it loop long enough?  Is each frame getting enough screen time, so that other users can understand it clearly?  Run through your GIF using the Play button at the bottom of the Timeline feature.

Step Nine:  Save and export your GIF for use on the web!  Instead of just saving your GIF to your computer, use the dropdown menu File > Export > Save for Web (Legacy).  This will give you a lot of options to choose from!  Select what type of GIF you’d like to save it as from the dropdown at the top right of the new menu, then click Save at the bottom!  Now you’re ready to upload your GIF anywhere that allows images.

For more instructions (and some screenshots of the process) visit this article!

Versus Making A Gif From a Video that already exists

Step One:  Find your video!  The longer the video, the larger the file size, so be careful.

Step Two: Open the video in Photoshop!  To do this, go to File > Import > Video Frames to Layers.  When you select your file, Photoshop should open it as a series of frames.  You should also be able to adjust which frames you want to use, and cut extra footage that won’t be part of your final GIF.

Step Three:  Mess with it!  Using Photoshop, you can mess with colors, text, dither (those pesky colors will make your GIF look better, but will up your file size), lossy (this adjusts your quality–the higher the quality, the larger the file size), size, and more!

Step Five: Save and share!  We recommend using the same process as you would for the animated gifs, going through the steps to save it for the web at the right quality.

For more instructions and detailed image screenshots, check out this article (it also has some more tips and tricks for making animated GIFs)!

And, if you want words straight from the horse’s mouth, check out this video from Adobe Creative Suite that will run you through the GIF making process step-by-step.  Beware, the video is over an hour long, but will teach you everything there is to know about creating GIFs with Photoshop!

If you don’t have Photoshop available to you, you can make use of sites such as GIMP or Pixr!  Shop around your options to determine what would be the best for you, and good luck!

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...