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 /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