Ask DN: How do you make animated GIFs look good on dribbble?

10 years ago from Will Hitchcock, Freelance designer and front end developer

I've been seeing a lot of animated shots recently on dribbble and wanted to do something like that for myself. I created the animation in the browser so I tried to screen capture it with Quicktime and then convert that to a GIF and crop it down in PS, but it ends up looking like crap because of the limited colors. Any advice on better ways to do this?

Here is the animation that I want to capture for reference: http://campfourcreative.com/sandbox/jmt/

17 comments

Guillaume Gosselin, 10 years ago (edited 10 years ago )
Hi, i've made this https://dl.dropboxusercontent.com/u/47491630/Exemple_gif.gif with Quicktime Player and Photoshop in 5 minutes approx. Successfully uploaded to my dribbble account.
5 points
- Alyssa Pelletier, 10 years ago
  Dang – you kind of stole his dribbble thunder...
  0 points
  - Guillaume Gosselin, 10 years ago
    I know and It's gone.
    1 point
- Will Hitchcock, 10 years ago
  Wow that looks a lot better than when I did it. Thanks! Were you able to open up the .mov file directly in PS?
  1 point
  - Guillaume Gosselin, 10 years ago
    Of course. Photoshop open Video and you can Save for web as a Gif.
    0 points
    - Will Hitchcock, 10 years ago
      Oh that's interesting. When I tried to open the MOV file, PS told me that it was an unrecognized format. Maybe because I'm using CS6?
      0 points
      - Jonathan Yap, 10 years ago
        It could be the updates, or it could be using CS6 vs CS6 extended version. Heard a similar problem a couple months back.
        0 points
- Kenneth Jensen, 10 years ago
  Could you elaborate the settings of your gifs and how you contruct the gif after importing it in PS?
  1 point
  - Guillaume Gosselin, 10 years ago
    Here it is : http://quick.as/oamhker
    0 points
    - Kenneth Jensen, 10 years ago
      It looks good and the settings are the same I use, but mine isn't fast and smooth :/
      0 points
      - Guillaume Gosselin, 10 years ago
        I have a MacMini 2012
        0 points
- Oscar Waczynski, 10 years ago
  Any details about your process?
  0 points
  - Guillaume Gosselin, 10 years ago
    Check this QuickCast : http://quick.as/oamhker
    2 points
Daniel Eden, 10 years ago
I use Screeny (http://www.screenyapp.com) to capture my screen for animation stuff, and GIFBrewery (http://gifbrewery.com) to convert to a .gif. GIFBrewery gives you a ton of customisation options to optimise and tweak the gif.
1 point
- Will Hitchcock, 10 years ago
  This is an outside of the box answer. I'm definitely going to check these things out for future animations. Using Quicktime + PS is a real pain. Thanks for the tips.
  0 points
EJ Fox, 10 years ago
I tried to do the same with the site you linked, and used these as the preferences: http://cloud.ejfox.com/RGsS
I got this: http://cloud.ejfox.com/RH9j - it isn't perfect, but when you give it to Dribbble retina-sized, a lot of times when it's shown at the smaller size the imperfections are hard to see. I think that some gif-distortion is inescapable, and certain designs lend themselves to gifs better.
1 point
- Will Hitchcock, 10 years ago
  Thanks a lot for taking the time to do that! That looks a lot better than my original attempt.
  0 points

Designer News

Join Us

Ask DN: How do you make animated GIFs look good on dribbble?

17 comments

Join Us

Login to Comment

Register Today