Instantly share code, notes, and snippets.

Embed
What would you like to do?
Screencapture and animated gifs

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

  1. hit the button

image

  1. you can chose to record entire screen or a portion by dragging:
  2. do that then record and hit the stop button in the top taskbar.
  • You can then Trim the video in quicktime with cmd-t.
  1. File > "Save…". Save that shit.

Capturing (Pro)

  1. Use Screenflow. It can do 60fps and do all sorts of annotations beyond the basic clicks that Quicktime will capture.

Making an animated gif (easy)

  1. Go to gfycat and drag your mov file onto it. image
  2. get the embed code and use the iframe
![2014-10-22 11_35_09](https://cloud.githubusercontent.com/assets/39191/4741874/9890757a-5a1a-11e4-9a71-3f64bd66b7ab.gif)

Really, use the iframe. It'll give you better perf and will load way faster for your users.

If you really want a GIF file (terrible), then click the "GIF" icon. It's sweet to let them do the work for us.


However if you want to make the gif on your own.. continue.

Making an animated gif (cheater)

Use an app called GIFBrewery but it costs money and is a little weird to configure. But it works. Run it through imageoptim after.

Making an animated gif (pro)

(This path is for people comfortable with homebrew and dotfiles.)

  1. Grab gifify from @SlexAxton's gist: https://gist.github.com/SlexAxton/4989674 and toss it into your dotfiles somewhre
  2. Make sure you have the dependencies: brew install ffmpeg gifsicle imagemagick
  3. Run it with gifify yourvideo.mov --good
  4. Run the image through imageoptim after.
@altryne

This comment has been minimized.

Show comment
Hide comment
@altryne

altryne Oct 23, 2014

How about http://recordit.co/?
It has a nice interface, just select an area and record.
The Framerate is low on the free account, but it works.

altryne commented Oct 23, 2014

How about http://recordit.co/?
It has a nice interface, just select an area and record.
The Framerate is low on the free account, but it works.

@gokulkrishh

This comment has been minimized.

Show comment
Hide comment
@gokulkrishh

gokulkrishh Oct 23, 2014

Hey paul, Just thought it would be great if you add the same for ubuntu. Below is the instruction.

For Ubuntu

Type the following command in ubuntu terminal

  1. sudo add-apt-repository -y ppa:fossfreedom/byzanz
  2. sudo apt-get update
  3. sudo apt-get install -y byzanz

Record the screen and save the file as gif

byzanz-record --duration=15 --x=400 --y=400 --width=800 --height=600 filename.gif

To record a full screen, just type

byzanz-record --duration=30 filename.gif

for more option

byzanz-record --help

gokulkrishh commented Oct 23, 2014

Hey paul, Just thought it would be great if you add the same for ubuntu. Below is the instruction.

For Ubuntu

Type the following command in ubuntu terminal

  1. sudo add-apt-repository -y ppa:fossfreedom/byzanz
  2. sudo apt-get update
  3. sudo apt-get install -y byzanz

Record the screen and save the file as gif

byzanz-record --duration=15 --x=400 --y=400 --width=800 --height=600 filename.gif

To record a full screen, just type

byzanz-record --duration=30 filename.gif

for more option

byzanz-record --help

@nwinkler

This comment has been minimized.

Show comment
Hide comment
@nwinkler

nwinkler Oct 23, 2014

I've added the gifify function to my bash-it fork: nwinkler/bash-it@e4bdad6

Awesome work!

nwinkler commented Oct 23, 2014

I've added the gifify function to my bash-it fork: nwinkler/bash-it@e4bdad6

Awesome work!

@mhauken

This comment has been minimized.

Show comment
Hide comment
@mhauken

mhauken Oct 23, 2014

You also have LICEcap which is a great alternative..

mhauken commented Oct 23, 2014

You also have LICEcap which is a great alternative..

@juanbrujo

This comment has been minimized.

Show comment
Hide comment
@juanbrujo

juanbrujo Oct 23, 2014

I use GifGrabber, great tool and lightweight (Mac OSX)

juanbrujo commented Oct 23, 2014

I use GifGrabber, great tool and lightweight (Mac OSX)

@xdumaine

This comment has been minimized.

Show comment
Hide comment
@xdumaine

xdumaine Oct 23, 2014

+1 for LICEcap

xdumaine commented Oct 23, 2014

+1 for LICEcap

@n1k0

This comment has been minimized.

Show comment
Hide comment
@n1k0

n1k0 Oct 25, 2014

Another vote for LICEcap

n1k0 commented Oct 25, 2014

Another vote for LICEcap

@so0k

This comment has been minimized.

Show comment
Hide comment
@so0k

so0k May 1, 2015

LICEcap because it supports windows (sorry)

so0k commented May 1, 2015

LICEcap because it supports windows (sorry)

@jgomo3

This comment has been minimized.

Show comment
Hide comment
@jgomo3

jgomo3 May 13, 2016

@gokulkrishh thank you for the info on Linux.

jgomo3 commented May 13, 2016

@gokulkrishh thank you for the info on Linux.

@apokusin

This comment has been minimized.

Show comment
Hide comment
@apokusin

apokusin Jun 7, 2016

Droplr let's you record your screen and immediately uploads the GIF to a short URL. I use it for all my screenshots and caps.

apokusin commented Jun 7, 2016

Droplr let's you record your screen and immediately uploads the GIF to a short URL. I use it for all my screenshots and caps.

@Kilims

This comment has been minimized.

Show comment
Hide comment
@Kilims

Kilims Nov 3, 2016

Can you provide a version that I can use directly on windows?(green edition)Thanks deeply if you can.I love this tool

Kilims commented Nov 3, 2016

Can you provide a version that I can use directly on windows?(green edition)Thanks deeply if you can.I love this tool

@scotcha1

This comment has been minimized.

Show comment
Hide comment
@scotcha1

scotcha1 Nov 29, 2016

This is really cool, nice work. It's probably a few too many steps to really get used to though. CloudApp has a desktop app for both Mac and Windows, supports native screenshot annotation, GIF creation, HD video with sound, drag and drop file support, and uploads it all to a short URL to share. Cuts all those steps down to capture + share.

scotcha1 commented Nov 29, 2016

This is really cool, nice work. It's probably a few too many steps to really get used to though. CloudApp has a desktop app for both Mac and Windows, supports native screenshot annotation, GIF creation, HD video with sound, drag and drop file support, and uploads it all to a short URL to share. Cuts all those steps down to capture + share.

@juliandavidmr

This comment has been minimized.

Show comment
Hide comment

juliandavidmr commented Apr 5, 2017

@nstohler

This comment has been minimized.

Show comment
Hide comment

nstohler commented Jun 28, 2017

@paulohenriquesg

This comment has been minimized.

Show comment
Hide comment
@paulohenriquesg

paulohenriquesg Aug 7, 2017

GIFBrewery is free now :)

paulohenriquesg commented Aug 7, 2017

GIFBrewery is free now :)

@vmpartner

This comment has been minimized.

Show comment
Hide comment
@vmpartner

vmpartner commented Sep 2, 2017

@tuanphpvn

This comment has been minimized.

Show comment
Hide comment
@tuanphpvn

tuanphpvn Nov 8, 2017

Thanks.

Ubuntu 16.04 work too.

sudo apt-get install ffmpeg gifsicle imagemagick
gifify yourvideo.mp4 --good

tuanphpvn commented Nov 8, 2017

Thanks.

Ubuntu 16.04 work too.

sudo apt-get install ffmpeg gifsicle imagemagick
gifify yourvideo.mp4 --good
@viper25

This comment has been minimized.

Show comment
Hide comment
@viper25

viper25 May 22, 2018

Use ShareX

viper25 commented May 22, 2018

Use ShareX

@tamsanh

This comment has been minimized.

Show comment
Hide comment
@tamsanh

tamsanh Jun 5, 2018

giphy has a great piece of software on MacOS for capturing gifs:

https://giphy.com/apps/giphycapture

tamsanh commented Jun 5, 2018

giphy has a great piece of software on MacOS for capturing gifs:

https://giphy.com/apps/giphycapture

@alechp

This comment has been minimized.

Show comment
Hide comment
@alechp

alechp commented Jun 15, 2018

https://getkap.co/ is pretty phenomenal

(repo: https://github.com/wulkano/kap)

@ArkaJU

This comment has been minimized.

Show comment
Hide comment
@ArkaJU

ArkaJU Aug 17, 2018

LICEcap is pretty cool. 💯

ArkaJU commented Aug 17, 2018

LICEcap is pretty cool. 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment