How to make animated GIFS in Photoshop

Posted on Jan 8 2015 - 11:36am by Eric Tompkins

animated gifs in photoshop

How to make animated GIFS in Photoshop

by Eric Tompkins (codemics.com)

How to make an animated GIF with video:

You will need Photoshop to complete this tutorial. There are other ways to do it and other programs that can make GIFs, but few can compare to the power of Photoshop. If you don’t have Photoshop, there are many other software options available such as Gimp, which is FREE. You can also check out the website GIFYoutube, which can convert Youtube videos into GIFs. For best results, Photoshop is your best option.

Step One: Find a good source video sequence with which to make a GIF. This can be really be anything, but try to use a clip that’s not too long, as longer video generally leads to a larger file size.

Step Two: Place the video clip you’ve chosen on your desktop. Trim the footage down to only the length you want the GIF to play. Two or three seconds is great, five is pushing it, and 10 or more is possible with the right chopping, but the file will be large in size and hard to work with.

NOTE: If you’re ripping from YouTube, a cool tool to use is  ClipConverter.cc to rip the clip, you can designate which segment of the video you rip prior to actually downloading it.

Step Three: Open the video with Photoshop. To do this, just navigate to File > Import > Video Frames to Layers. Select the video file you want, and it’ll be added into Photoshop and transformed into a series of still images. You can choose to import the entire video from beginning to end, or use sliders to select a smaller portion of the clip. Limiting the frames will make the file smaller, but will also make the video more choppy.

Step Four: Adust your settings. Here you can change color and look of your video if you like. When you have everything looking perfect, head to File > Save for Web.

You will want to adjust your settings to keep your video below 1MB in file size. Otherwise, your video will perform slowly on the web. Play with all of these until you find a sweet spot.

Settings:

Colors: This limits the number of colors used to create the image, so the higher the better. Only drop down to 128 or lower if you must, or if your GIF doesn’t have much color to begin with

Dither: Dithering scatters different colored pixels in an image to make it appear as though there are intermediate colors in images with a limited color palette. Higher settings will yield better looking images, but will also make the file larger

Lossy: Use this setting to apply an intentional drop in quality. A lower setting is better, but some lossness might be necessary to make your file small enough

Size: Changing the dimensions of your gif can have a huge impact on the size of the file

Step Five: Save and Share. Hit the save button to finalize your creation and save it to your folder of choice. Once that’s done, you can upload it to a free image hosting site like Imgur to share it with your friends and embed it into blogs and websites.

How to make an animated GIF with still images:

You can also create animated GIFs in Photoshop by looping together still images. This process consists of layering each frame the bottom up and then sequencing the layers using Photoshop’s animation/timeline tool.

Step one: Collect the still images that you want to sequence for your GIF and put them in a single folder. Then open File > Scripts > Load Files into Stack. From there, click Browse and select the images on your desktop that you want to string together into a GIF. Select “OK” and a new composition should open with these stills now rendered as individual layers in a single image. Arrange them accordingly; your first frame should occupy the very bottom layer and so forth.

NOTE: You can use a Awesome Screenshot Chrome Extension to capture still images from anything on the web. This tool may be useful when creating your GIFs.

You can also create each layer individually in Photoshop itself, rather than simply batch uploading your stills as layers. Run Photoshop and create a new image by clicking File > New and then selecting “OK.” Then, unlock the background layer by double-clicking the lock icon, create a new layer by opening Layer > New… > Layer and design each frame accordingly. Again, string your animation from the bottom up. This process works if you are using an older version of Photoshop that does not feature a “Load Files into Stack” option. Simply load your stills into Photoshop, drag them into your new project, and resize the newly created layers accordingly using Photoshop’s free transform tool (edit > free transform or Ctrl + T, then drag the corners to resize the object).

Step Two: Now that you’ve arranged your layers accordingly, you can begin sequencing your layers. Again, this process will vary depending on what version of Photoshop you are using. For Photoshop CS5 and lower, access the animation window by opening “Window” + “Animation.” Likewise, click “Window” + “Timeline” in Photoshop CS6 and Photoshop CC to access the Timeline window. For Photoshop CC, click the drop-down menu in the middle of the Timeline window and select “Create Frame Animation.”

Once you’ve opened Photoshop’s sequencing tool, click on small, right-facing arrow in the upper-right hand corner, and then select “Make Frames From Layers.”
You can also click on the right-facing arrow to create a new frame manually (or you can simply use the hot-key command Ctrl>Shift>Alt>F). From there, use the eye icon next to each layer to hide the layers you don’t want to appear in the frame you’ve created.

From here, use the menu underneath each frame to toggle its duration. The menu in the bottom left-hand corner dictates how many times your GIF will replay — set it to “Forever” if you want it to loop endlessly.

Step Three: You have now created an animated GIF using still images and all you have to do is export it out of Photoshop using the process outlined above. For a quick recap:

Head for File > Save for Web. Remember to keep your GIF no larger than 1MB. If necessary, tweak the color, dither, loss, and size settings until your GIF has been resized accordingly. Once you’re satisfied, save your newly minted GIF.

animated

Tags: animated gifs in photoshop

About the Author
Eric Tompkins

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.