A great way of showcasing interactions or animations on the web is by using GIFs. Compared to video files, they’re relatively small in size. Here’s a short tutorial on how to export great looking GIFs.
1. You can use QuickTime from Apple to record directly from your screen. Open it and go to ‘File -> New Screen Recording’. Make sure to deselect 'Show Mouse Clicks in Recording' from the Screen Recording window.
2. It’s best to keep your recordings short. Think a bit up front about how you want to compose your recording. Background, perspective and dimensions are valuable presentation assets. Keep your recording under 5 seconds and your GIF will stay reasonable in size. QuickTime will export the video in 60FPS when you save the video as a .mov file.
3. Photoshop is great at exporting GIFs. Open the .mov file and go to ‘File -> Save for Web’. Select GIF as the file extension, and you’ll be presented with the settings from the screenshot above. Your GIF will look best if you set Colors to 256 and Dithering to ‘Diffusion' with a value of 100%. Keep an eye on the file size shown in the bottom left of the preview window. The optimal settings are different for every GIF, so play around until you're satisfied with the result.
Pro Tip: Try rendering your video in 30FPS for smaller file sizes. In Photoshop, go to ‘Window -> Timeline' and click the menu icon in the upper right of the panel. From there select 'Set Timeline Frame Rate…' and dial down the FPS.
Final step: hit save and you’re done!