A Quick Photoshop Tutorial For Creating Animated GIFs

Christian Bonilla 20-10-2016

GIFs are the staple of the online world. There’s rarely feed that doesn’t include educational, entertaining, or cinematic GIFs. To some, this begs the question “How do people even create these things?” If you’ve ever wanted to take your online presence from casual newbie to experienced educator or entertainer, read on!


To create our GIF, we’re going to use Adobe Photoshop CC 2015.5 edition. If you don’t own Photoshop, you can always install a free trial 5 Awesome Adobe Apps That Are Completely Free Adobe makes industry standard design programs. But it also offers high-quality software and apps that are free. Here are the top five Adobe tools that are all free. Read More onto your PC to get started.

Pick Your Footage

You’ll need footage to create a GIF. This footage can either be original or taken from your favorite video. It can be in a wide variety of formats, as Photoshop can handle most video formats available. If Photoshop does not support your video file, consider using VLC to convert your file The Mega Guide to Media File Conversion Tools in Windows Wondering how to best convert that media file? This is your guide out of the media file jungle. We compiled the most relevant media file conversion tools and show you how to use them. Read More .

If you have a large clip, you can trim it using a program like Windows Movie Maker. You can also record footage using VLC’s Record function, which will allow you to record and save video footage. To use, open your video using VLC, head to View and then Advanced Controls


The red button on the bottom of your window allows you to record what plays in VLC. Pause your video at a select location, press the record button, and play until your clip finishes. Then, press the record button again to stop recording. Your clip will save automatically to your Videos folder. You can also choose to save your file to a different folder. Head to Tools, Preferences, Input / Codecs, and change the Record directory of filename parameter to one of your choosing.


Place In Photoshop

Drag and drop your clip into Photoshop. This will open Photoshop’s Video timeline, which will allow you to edit video.


In this window, you can edit Saturation, Curves, and Levels settings to your satisfaction. If you feel out of your depth, no worries! Use our Guide To Adobe Photoshop Learn Photo Editing in Photoshop: Get the Basics Down in 1 Hour Photoshop is an intimidating program—but with just one hour, you can learn all of the basics. Grab a photo you want to edit, and let's get started! Read More to learn more.

If you’re using individual layers rather than a video clip, place your frames as layers into Photoshop. Once you’ve entered and positioned your layers, activate the Timeline window (Window, then Timeline). In the open Timeline window, click on Create Frame Animation.



Click on the Settings button and select Make Frames From Layers. This will create frames from your layers in the timeline. If you enter a GIF into Photoshop, this window should display automatically for all the frames in your GIF file.


Now that you have the raw video or raw frames, you need to convert them into a GIF.


Editing GIF Settings

If you’ve spent some time online, you’ve seen the difference between a quality GIF and a sub-standard display of images. These settings will provide you with the best display possible, maintaining the high quality of whatever assortment of images or video clips How to Edit Videos Like a Pro: 8 Tips You Need to Master If you're just getting into the editing game, you may be confused as to what to do with the many millions of clips you have... well, we're here to help. Read More you are using.

Head to File, Export, and Save for Web (Legacy). This will open up the Save for Web window, allowing you to save your images in an assortment of file formats. Your files will require some time to render. Then, select the drop down menu beside Presets  and select GIF 128 Dithered. This will provide the default settings for our GIF.


You will need to make a couple of changes to this settings. Change the following:

  • Selective to Adaptive — These are reduction settings, which decide the color palette of your GIF. Adaptive tends to give your GIFs a smoother and more realistic color palette than Selective.
  • Colors: 128 to 256 — This setting will double the number of colors to your image, creating a more seamless color scheme.
  • Dither: 88% to 100% — Dithering simulates shading using small dots, similar to dithering and crosshatching in sketch work.  This will subtly fill in different corresponding colors where shadows should be.

You can save these settings by pressing the Setting icon beside your Present parameter and selecting Save Setting. Name the preset whatever you’d like.


Modify Image Size to your match preferences. Ensure the chain link icon beside is engaged – it will maintain the aspect ratio of your video. Finally, change the Looping Options under your Animation settings from Once to Forever. Once you’ve made your setting changes, click Save to name and place your new GIF file.

Spread Your GIF

Here is an example of a GIF I made, using source footage from the cinematic classic 12 Angry Men.


The higher the quality of your source footage, the better your GIF will be. If you want to create a link for your GIF, drag and drop your file to an image hosting website like Imgur to upload.

What Are You Waiting For?

Now you have a proper foundation to creating high quality and infinitely repeating GIFs. All that’s left is to find videos 4 Stock Video Websites To Catch A Glimpse Of History Captured On Film There are quite a few other websites out there which host stock video footage from key moments in history. They playback not only eyewitness accounts, but also give us history lessons in video…as it happened.... Read More in order to convert, or begin sketching frames yourself. If you’d like some inspiration, Reddit’s /r/highqualitygifs has a dedicated fan base which provides daily, high-quality content.

What methods do you use to create GIFs? What are some of your favorites? Let us know in the comments below!

Originally written by Saikat Basu on 16th February 2012.

Related topics: Adobe Photoshop, GIF, Photoshop Tutorial.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Borhan
    March 30, 2017 at 12:15 pm

    As you mention this is quite a manual based approach and can see using it only for really demanding requirements.

  2. Billy
    May 19, 2015 at 3:38 pm

    Does anybody use this website anymore? Seems like the last time anybody was on this website was back in 2012

  3. Billy
    May 11, 2015 at 3:21 pm

    Go away Asher! Go eat a porcupine

  4. Billy
    May 8, 2015 at 3:04 pm

    This article suks balls.. Big fat hairy bwalls

    • Asher
      May 11, 2015 at 3:20 pm

      okay that's good to know billy

  5. Tara
    June 20, 2012 at 2:08 pm

    Thank you, but do you have a tutorial on how to make gifs using a video, in photoshop cs5?

  6. Frédéric COIGNOT - Auteur Photographe
    April 26, 2012 at 11:29 pm

    Hello There. I found your blog the use of msn. That is an extremely smartly written article. I will be sure to bookmark it and return to read more of your helpful information. Thank you for the post. I will definitely comeback.

  7. Siya Mava
    February 20, 2012 at 4:54 am

    Hi, Saikat nice tutorial but I couldnt get it to work. followed every step except for 8, i cuoldnt see that icon. I am using PS 7.

    • Saikat Basu
      February 27, 2012 at 3:47 am

      Hi Siyanda,

      I don't exactly recall the interface in PS7 as it was quite some while ago. But you must be using Image Ready as in the older versions, Image Ready was used to prepare the animations. There is a 
      Make Frames from Layers command under the little flyout arrow. You can use that. The Image Ready help file I am sure contains a simple tutorial explaining the process. You can also Google for it.

  8. Mridul Godha
    February 16, 2012 at 11:39 am

    Mr. Saikat, I wish to receive makeuseof newsletters on my e-mail containing only the posts of the category 'Makeuseof Lists'. Can you tell me how to do this? Thanks a lot.

    • James Bruce
      February 17, 2012 at 10:06 am

      Thats not possible I'm afraid.