Being able to capture (and share) what you're seeing on your screen is extremely useful. Here are a few examples:
- Performing a code-review or pair programming
- Creating a how-to video for clients
- Demonstrating a simple issue on a site or app
- 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
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.
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.
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.
Next time you need to share your screen be sure to give one of these a try. Here's the shortlist: