Quick Tip: Use the New Timeline in Photoshop CS6 to Create an Animated GIF from a Video

Quick Tip: Use the New Timeline in Photoshop CS6 to Create an Animated GIF from a Video

on Apr 22nd 2012 with 55 comments
Tutorial Details
  • Program: Adobe Photoshop CS6
  • Difficulty: Beginner
  • Estimated Completion Time: 90 Seconds

Final Product What You'll Be Creating

The new timeline feature in Photoshop CS6 will allow you to open, edit, and export videos without ever having to leave the application. In this tutorial, we’ll show you how to use this new feature to create an animated GIF from a video; a feature that could be used for banner ads, avatars, and more. Let’s get started!

Tags: CS6Tips
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Grant Friedman is a veteran blogger, social media addict, and design enthusiast. Grant has been blogging about the design industry since 2008 and is currently the editor of Psdtuts. If you have any questions, comments, or suggestions about Psdtuts, feel free to direct them to Grant's Twitter account.  

Plus Premium
 
 
  • Lucas Mateo Moyano Vega

    Fast and easy. Great tutorial.

  • El Tirano

    What a bad tutorial, this feature has been implemented already since photoshop cs5 or early….
    nothing new on cs6

    • http://psd.tutsplus.com/ Grant Friedman
      Author

      Most people probably don’t know that. My guess is that this is new to most people. I could be wrong. Thanks for the feedback though.

      • http://jayeshomg.tumblr.com/ Jay

        Thanks a lot for sharing this. I always wanted to know this, from a reliable source, psdtuts.
        Thanks.

  • http://shounig.com/blog Purmou

    Could it get any easier? :P

  • Elaine

    Wow, no more using image layers to make an animated GIF! I make lots of and lots of animated icons now and they will look seamless! Oh, this is so going on my Amazon wishlist. Thank you Adobe for this!

  • http://hydrox24.tumblr.com Alexanderjb

    Finally! someone that pronounced .GIF correctly. BONUS POINTS for you!!

    • Educated

      Since when did “Graphics” start with a ‘J’ ?
      Because that’s what GIF is … “Graphics Interchange Format”.
      “JIF” is a cleaning product.
      Maybe JPEG should be pronounced Gaypeg and maybe he should spell his name Jrant.
      lol ..
      Otherwise, nice tutorial :-)

      • http://psd.tutsplus.com/ Grant Friedman
        Author

        In English, a G followed by an I, E, or Y is pronounced with a J.

      • ZGirl4ever

        However, Gif isn’t really a word, it’s an acronym and it stands for Graphics Interchange Format. So you do not pronounce it Jif

      • Norman

        Pronounced “with”(?) a J? That’s not very good English. Maybe *as* a J. But your post is a true gift (jift) to us who needed to make gifs.

      • Educated

        Seeing as I can’t reply directly to the authors response to my original post, I shall reply here…

        So in English, “girlfriend” should be Jirlfriend and “get” should be Jet and “gynecologist” should be Jynecologist or just for laughs, lets call it vagynecologist.

        LOL thanks again for making me smile :-)

  • David

    Cool! THanks never knew that.
    Is there any way to control the amount of keyframes generated? From your squirrel example, a small 100px by 100 px GIF takes more than 2 MB :P

  • Jasmine

    For some reason, this doesn’t work for me. I open a video clip(.wmv file) in Photoshop, crop it, go to save for web and select gif + adaptive + loop forever. Save it and it previews fine in my browser, but when I upload it, it’s a still image. It doesn’t move at all, even though it says it saved as a gif. What am I doing wrong?

    • http://psd.tutsplus.com/ Grant Friedman
      Author

      Could it be a download issue? Maybe the image is just downloading really slow?

      • Rin

        I don’t know if this has already been resolved but .mp4 and .mov files are the only accepted formats in Photoshop CS6.

  • Lorne

    I opened up the video I wanted to use, but the aspect ratio isn’t set for widescreen so it’s cutting off the edges of the frame. Is there a way to change that? Thanks so much for this it seems really easy!

  • Richard

    Thanks for the tip

    I just tired to open a mp4 video and it says it’s not the right kind of document. Is this only for MOV?

    • Rin

      So far the only video format i’ve been able to use are .mov files. i was able to use an .mp4 file but the quality wasn’t as good after it was changed into layers.

  • Rin

    whenever i save my gif’s to web they always come out faster than what the timeline in Photoshop is displaying. is there a fix to this?

  • Ecto

    Is there any way to create multiple gifs from separate parts of a video without having to split the video each time? That would have been kind of helpful to know

  • Kelly

    Hi, my gif’s keep turning out to fast.. Like when i make them and put them on “forever” in the loop it goes really fast and I think they are way to many MB when other GIF’s are only KB but mine are so short and I don’t know… help?

  • http://promotis.us Yeager

    I cannot find any info on adding new objects or resizing objects. If I change the size or if I add a new object, say in the 50th frame. It changes every frame to look exactly like the one I am working on. Like if I have a 300 pixel ball and I want it to shrink down as soon as I change it to a 250pixel ball ps changes the entire animation to 250.

    It does it with graphics also. I am trying to make a quick networking animations and show the single customer becoming many but as soon as I duplicate it, it does it on every frame back to #1???

  • John

    If I wanted to created a GIF in CS5 ( not form a video) I would go to Windows – Animations and add layers and turn on and off the different layers. “Animation” is no longer in CS6 – what have they done with it?

    • Norman

      They call it timeline, I beloive

  • nazha

    when i open a video ps says could not complete your request because it is not the right kind of document
    plzzzz help me

    • Vin

      Apparently the videos need to be .mov or .mp4. There’s also a size limit (although I don’t know what it is).

      • http://twitter.com/DallonSmiles Hannah Bear

        It won’t work for me either, and the file IS an mp4… What the hell should I do? Also, the file is very small. I don’t understand… Help? Please?

      • http://twitter.com/DallonSmiles Hannah Bear

        Grrr.. I just converted my mp4 video into mov and it STILL won’t read it… I don’t get this. SO FRUSTRATING! D:

  • Jean

    I actually wanted to make a GIF to a selected part of the video only, like between 2:17-2:19 only… How can I cut it?

    • Helping You

      Drag the blue slider control (with the red line) to 2:17, right click the blue slider control to reveal the menu, select “trim start of clip”. Now drag the blue slider control to 2:19 and right click it again, select “trim end of clip”. Now drag whats left of your clip, back down to the beginning so that the left edge is back at 0:00. Have a happy day :-)

  • Vin

    This is really good. Thank you! But I would also be really grateful for an easy tutorial on how to make a GIF from image layers.

    • Helping You

      1. You have two layers. Make sure they’re both unlocked (if they’re not, double click the padlock and select ok when the popup appears).
      2. Now select both layers by holding the control button (on a pc) and clicking each layer once. They should now be grey/blue in colour.
      3. On the timeline at the bottom there is a button, make sure it says “Create video timeline” by selecting the arrow on it’s right. When it does, click it. You will now see your two layers one above the other on the time line.
      4. Click and drag one of the purple boxes onto the other one. They should now be on the same line, one after the other.
      5. In the very bottom left, there is a button with three little boxes, Click it. Now you have both layers as frames with the length of time each frame will be displayed beneath them. You can change the time by clicking it and selecting a new time for each frame.
      6. Below them is the word “once”, this is how many times your frames will loop. Change it to “forever” if you want it to loop forever.
      7. Click the play button to view your animation. (Stop it and change the frame display times if you need to.)
      8. On the menu at the top, click “File” then “Save for Web”.
      9. In the window that appears there will be the word “Presets” at the top right with a button underneath. Make sure the button says “GIF”. Now you can click the “SAVE” button and save your new animated GIF.
      Have a happy day :-)

  • dasquirrelsnuts

    jif,gif, what about “crate” and “create”.Soooo annoying when people doing these things can’t even pronunciate . A crate is something you put things in and create is when you make something, like an interesting video. Back to school for you whateveryourfaceis !!!!!!!

    • Smart Person

      Um…actually he’s saying GIF right. The person who invented GIFs pronounced it that way. Maybeyou should go back to school….?

    • Norman

      “pronunciate” is also a little annoying…and in a way entertaining. But “pronounce” is a little more accurate, as far as English goes. And usually, we also don’t put our periods right next to the first word in the following sentence. > .Periods don’t go there — They go here. Nor do they go here . But rather here.

  • Kevin Brown

    Thanks for this.

  • john

    You completely missed the point I was looking for. Your little tutorial I already know how to do all that. What I need to do is this- I have 2 separate images on the timeline right? Ok so I want the gif to go from one image to the other but to replay after that. So far I have 2 images. One on one track and the other on the other. They are both one next to the other but on separate tracks. However what happens here is when it gets to that 2nd image the gif stops instead of looping to the first pic. Not sure if that makes sense but that is what I need your help with is looping the image so when it gets to the last picture in the set it goes back to the first one. if you can help me that would be great thanks.

    • Helping You

      Drag one of your images onto the same track as the other. Three boxes will appear at the very bottom left … click them. Your timeline will now show only your two images. At the bottom of those images you can select the length of time each frame is displayed. Below that is the word “once”, click it and select “forever”, this is your looping parameter. Select play :-) Save for Web, save as gif (pronounced with a “G”) and have a happy day.

  • http://blogverize.blogspot.com Nimsrules

    Wonderful tutorial here. Helped me a lot in designing disco lights gif for a client. Lol, requirements of clients these days, phew!

  • ZGirl4ever

    It’s not peanut butter, it’s not called Jif. It’s GIF. It stands for Graphics Interchange Format. Why would you be saying Jif?

    • Allan

      There’s someone else in the world that actually knows the truth!!

      • Norman

        troof

    • Norman

      The peanut butter is “Jiffy”, with two efs and a why do you give shit?

    • ntother

      actually, the original pronounciation was JIF as in “choosy designers choose GIF”. really.

    • Prokanda

      Wrong. Completely wrong. Funny that you mentioned Jif, since that’s *exactly* the word that the creators wanted to mimic. The creators of the format even used the tagline “Choosy developers choose GIF”, to parody the Jif peanut butter tagline “Choosy mothers choose Jif.” You’re pronouncing the acronym letters, not the words they stand for. Not all acronyms sound like the words they stand for. NASA for instance. The second A sounds like “ah”, but it stands for Administration and that word doesn’t start with the same sound. Logic, it’s a hell of a thing. Here, there’s even an entire section on how to pronounce it. The only reason that the way you incorrectly pronounce it is considered valid, is because so many people have pronounced it incorrectly over the years. Moron. http://en.wikipedia.org/wiki/Gif#Pronunciation

  • Paul

    I can’t import a video :( What do I have to do??

  • http://www.amlabc.com Abhi

    Thanks a lot!! Came across your post after so many hours of struggle. Finally got my gif created from mp4!!

    -Abhi

  • khalil

    The problem with Photoshop cs6 when trying to create animated gifs, the file size comes too big, if you tell me how to make the file smaller like when I create the same file in Fireworks it will be great, if you can’t then Fireworks is still the best by creating small animated gif

    • Norman

      How about gif crater super deluxe 9.999? That’s the best one for my money.

  • Ender

    I love Jif!

    • Norman

      Yeah, that’s not even real peanut butter. A bunch of fat and other crap designed to make you fat and ugly.

  • Norman

    I call it a jellyroll.

  • Norman

    Like the guy who invented it knows everything.

  • Norman

    If the guy who invented it spelled it gif and pronounced it “elephant” would that be correct too?