My Favorite Screen Capturing Tools

in code

Being able to capture (and share) what you're seeing on your screen is extremely useful. Here are a few examples:

  1. Performing a code-review or pair programming
  2. Creating a how-to video for clients
  3. Demonstrating a simple issue on a site or app
  4. Capturing a static image of how a site, app or single element appears on your screen

Over the course of the past week I've done each of these several times. My previous post also used a simple animated screen share.

Types of Screen Captures###

Capturing a screen can be mean anything from a real-time screenshare to capturing still frames of a small area of a screen. The 'buckets' I find I normally need are:

  • A real-time video screenshare with audio
  • A non real-time video screen capture with or without audio
  • A short video screen capture without audio
  • A static image of my screen

My Tools of Choice###

Depending on what I need to capture I use one of several tools.

Real-Time Video with Audio######

My go-to choice is Google Hangouts. I use others from time to time but Hangouts is the easiest in my mind. It does audio and video for 1-1 or group calls, and I can share my desktop as well as chat and use a variety of add-on apps for more functionality.

Bonus, because I use Slack I can start a Hangout using the /hangout command.

Recorded Video with Audio######

In cases where I need to record my screen (with audio) and create video files iShowU HD (for Mac) is a great option. The app allows me to select a region of my screen and record my actions (including mouse movements and clicks), with audio from my microphone. Typically I use this for creating walk-throughs of complex tasks for clients, showing them how to complete a task while talking them through it.

The videos can be saved to a number of formats and shared via email or uploaded to Vimeo/YouTube.

Simple Video with no Audio######

More and more I have a need to quickly share a short video of an element on a page or part of an app. For example, to show how a specific interactive component is working. There's no need for audio, and I usually want to share the result quickly, via email or chat (or Slack). A video would be overkill but a static image isn't good enough.

Several weeks ago I came across the oddly named LICEcap (both Mac and PC). Honestly, I have no idea what the LICE part of the name stands for. I DO know the app is amazing.

Opening the app displays a frame showing the area of the my screen it'll capture. The window can be resized easily, then I simply click record to capture my screen. It also has the option to capture mouse-clicks, making it perfect for demoing web app and site issues.

The best part about LICEcap, by a long shot, is it saves the screen capture as an animated GIF. This allows me to quickly email the file, or drop it into Slack for instantaneous sharing. Because it's a simple image file, Slack will display the video without requiring recipients to download/open it.

A friend also recommended RecordIt. Very similar in function though it requires a few more clicks and more cursor-moving to record a video. A high-quality alternative regardless.

Static Images######

For static images I use two tools. The first, the simple built-in screen capture on Mac - CMD + SHIFT + 4. This is perfect for capturing anything on my screen, at any size I need.

For browser-based screen captures I've found Awesome Screenshot (a Chrome extension) to be the best option. It has shortcuts to capture several useful views:

  • The visible part of the screen
  • A specific area
  • The entire page
  • The entire desktop

I find this especially useful when I need to take a screenshot of an entire webpage for reviewing.

Chrome Filmstrips######

Another form of screen capture I'm finding increasingly useful are Chrome's Filmstrips. This is a feature in Chrome's Dev Tools that captures time-based screenshots as the page is loading (or during a transition/animation or similar event).

Head on over to the post on the Google Developers blog for more info.

Round-up###

Next time you need to share your screen be sure to give one of these a try. Here's the shortlist:

Comments