DEV Community

Cover image for How to make gifs for your Github using Giphy - Is there a better way?
denvermullets
denvermullets

Posted on

How to make gifs for your Github using Giphy - Is there a better way?

If you're trying to spruce up your Github readme's you're probably looking to add a gif or two showing how your app works or the UI navigation. I've been trying to find an easy way to make gifs without having to resort to my usual way of screen recording in Quicktime and editing it down in After Effects and then compressing it in Photoshop.

Job Scraper gif

I think I found a good way to do if you're using a Mac. Giphy has made a Capture App that's really super useful and really easy to use! Just select the screensize and hit record.

Screenshot of Giphy app in use

The video clip shows at the bottom of the app and once you click on it it'll bring you to a customization menu where you can resize it to trim down on file size or skip frames.

Giphy screen capture settings

If you're not uploading the final gif in your actual Github repo, then it'll need to be under 5mb in total size. Depending on how complex your readme is, you might need to split it into other gifs.

I think this is a pretty great and easy way to make gifs and if you've got Photoshop you can extend longer gifs by compressing them further with the options they provide. You can see my gifs in action here in my job tracker app

Do you know of any easier or better ways to make screencap gifs? I'd love to revamp the workflow.

Discussion (0)