Whether you're capturing images of websites, documents, or application interfaces, screenshots are one of the most basic building blocks that we use as training developers. Basic screengrabs may work in a pinch, but the final quality of our work can only be as good as the quality of the assets we build it with. Yet, the quality of the average screenshot isn't great. Each capture is its own unique puzzle to get right. For instance, how do you get a clean, high-resolution capture when the subject is larger than your screen? And how do you deal with sensitive information caught in the capture, without resorting to blur or censor effects?

In this session we will answer these questions and more as you learn to master the art of capturing pixel-perfect screenshots and screen recordings, every time. You will take a comprehensive look at the variables involved in your recording environment—from the resolution and magnification of your operating system to the application zoom and dimensions of your target capture window. You will learn about the surprising role of basic coding fundamentals in screen capture, and how you can edit any webpage in real-time using Chrome DevTools. For those who are not yet comfortable using code, you will find a fun and risk-free way of practicing code yourself. In our field of work there are very few skills you can master without significant time and effort. Thankfully, perfecting the art of screen capture is one. Bring your laptop and prepare to become your team's capture guru.

In this session, you will learn:

  • To master the art of capturing pixel-perfect screenshots and screen recordings, every time
  • How to use Chrome DevTools to edit webpages pre-capture
  • Why it's important to properly stage your capture environment carefully
  • How to batch your capture process and ensure consistency across screenshots
  • How to adjust screen resolution, zoom, and capture dimensions
  • How to emulate the screens of tablets and mobile phones for accurate captures from your PC or Mac
  • How to use Photoshop templates to incorporate your screenshots into photorealistic 3-D scenes

Technology discussed:

Snagit from Techsmith, Chrome DevTools, Adobe Photoshop

Participant technology requirements:

A laptop (MAC or PC) with Google Chrome, a free trial of Snagit from Techsmith (and Adobe Photoshop if possible, though not required)

Handouts