0

I often have the need to illustrate a little section of coding that would be best achieved by showing an animated gif of how the code is typed. I see these kind of things often enough that I feel there must be tools available to make it easier. Here is such an example: https://github.com/pj3677/vscode-protobuf/raw/master/images/protobufdemo.gif

So the way I've done it (not the above image, that's someone else's) is to do a screen capture after every keypress, paste that image as a new layer in a document in GIMP, crop the entire document with all layers to the section I'm interested in and then export as gif.

As you can imagine, taking a screen grab and pasting it into GIMP after every single key press is tedious work. Also, I have to then manually tweak the timing of each frame to simulate that natural appearance of text being typed by a human.

Surely there must be tools or techniques than can speed up this process. I was thinking for instance that if there is a tool that captures video of the text being typed, then breaks it up into images for each frame, then combines those images into a gif but removing duplicate frames and adjusting the duration of the remaining frame accordingly. So each frame will be unique but they will all have different durations.

Any pointers to software (preferably free and preferably for Windows) would be much appreciated.

  • Welcome to GD.SE - Please look through tour to get a sense of our community – who we are and what we’re about. Then look over How to Ask and How to Answer a question to see what makes a good query here, and how best to frame it. FWIW the example you showed was from Mac OS where they can natively screencap to video using Quicktime Player and choose gif as an export target. – GerardFalla Sep 18 at 18:01
  • Its quite reasonable amount of work to make script that saves a screen capture to disk for any keyboard event, and each xxx mouse event on windows. But such software exist allready. – joojaa Sep 18 at 18:13
  • 1
2

I'd do the following if I was making a sizable batch of these gifs:

  • Record the screen of me typing using any of the tools in Scott's link in his comment above
  • Import the clips into Adobe After Effects
  • Create a new composition for each clip and trim as needed
  • Then I'd use the GifGun After Effects plugin to export them as GIFs.

(There's even an option to batch render with GifGun)

0

On the Windows side, I have used (and still use) Screen2Gif which is freeware and quite effective. I have other more polished tools available for more intensive captures, but for a quickie grab 'n go to gif, it works.

https://www.screentogif.com/

Hope that helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.