Ask DN: How do you do your screen capture gif animation process for your portfolio

7 years ago from , Creative Director @ Caffein8 Creative LABS

So, I've been trying to implement gifs into our portfolio. To increase the sense of interactivity and activeness.

Before this, we actually have a separate video reel to demonstrate responsive websites, amongst other things.

But recently, I've seen more and more people do gifs right in their portfolio online. (Looking at you behancers!)

So I'd love to know what are the process you use to create such gifs. I tried my hand at it, came out extremely choppy as small sizes, and when I increase the frame rate, the file got too big even after using ImageOptim.

DN, please advice.

Example: http://i.imgur.com/zBigtwO.gif


  • Devin HalladayDevin Halladay, 7 years ago

    CloudApp recently added this feature in v3.0.

    9 points
  • Florian Schulz, 7 years ago

    Would also like to know more about this. I’ve been using http://www.cockos.com/licecap/ to record my screen directly as a GIF. It’s super easy for quick demos, but I guess there must be more out there :)

    9 points
    • Jonathan ShariatJonathan Shariat, 7 years ago

      Ya ive tried a few methods now and little ol licecap wins. Its really easy and quick. Plus you can add a title.

      1 point
    • Mike StevensonMike Stevenson, 7 years ago

      Licecap is always so choppy for me though, even when I set the max frame rate ridiculously high. Any tips?

      1 point
  • Jake FlemingJake Fleming, 7 years ago

    All you need to do is open a video file with Adobe Photoshop and save it as a gif under "save for web"

    3 points
  • Andrea MazziniAndrea Mazzini, 7 years ago (edited 7 years ago )

    Licecap is fast and easy, but for better quality I capture the screen with quicktime, and postprocess it with GIF Brewery

    2 points
  • Alaik FAlaik F, 7 years ago (edited 7 years ago )

    after effects

    1 point
  • Arma GetronArma Getron, 7 years ago

    Your example was made in After Effects.

    1 point
    • Alson Kaw, 7 years ago

      So it's an after effects file that got exported into a video, before turning into a gif via photoshop?

      0 points
  • Jason MelgozaJason Melgoza, 7 years ago

    I wrote a blog post on this subject a few weeks ago. There's lots of great tools out there.


    0 points
  • Ivan VásquezIvan Vásquez, 7 years ago

    If you have a Mac, you can record a video with QuickTime and export it to GIF using http://www.gifrocket.com/.

    0 points
  • Koen SlagterKoen Slagter, 7 years ago

    I use this app to do it: http://www.gifgrabber.com/

    0 points
  • Chris MartinChris Martin, 7 years ago

    Gyazo added support for GIFs recently


    0 points
  • Tarun ChakravortyTarun Chakravorty, 7 years ago

    I am interested in knowing more about this as well. I have tried the usual way of screen capturing the animations and then turning that recording into a gif in photoshop, but the file sizes are just too big. I wonder if there are any good rules of thumb when it comes to the number of frames in your gif and the settings in which we should be exporting them.

    0 points
    • Alson Kaw, 7 years ago (edited 7 years ago )

      Yes! That's what happened to me. 4-5mb file of just showing responsiveness with low frame rate.

      If I wanted to make it look smooth, it takes over 10mb of download.

      I've been thinking of trying to do this by converting big smooth gifs into html5 video using Gyfycat before embedding into my online portfolio.

      EDIT: Using the same gif and turning it into HTML5 video using Gyfycat


      Gif Size: 1M Gfy HTML5 Video Size: 272k

      That's a whooping 4x size reduction!

      2 points
      • Kyle ConradKyle Conrad, 7 years ago

        Two things to keep in mind with HTML5 video - you'll need at least 2 formats (webm and mp4, possibly more depending on your target audience) embedded and video takes over the whole screen on play on mobile devices (not iPads, but at least on iPhones).

        0 points