Capturing Premium Product Screenshots

Professional UI screenshots should clearly represent your brand—but capturing them consistently is challenging. View our guide to consistently capturing clear, professional-quality UI screenshots.

Adi Kurian Adi Kurian

Before developing our Chrome extension with automatic screenshot capture, we worked with customers to manually create product documentation. The most time-consuming element was producing professional-quality screenshots.

The most common issues with manually-captured screenshots include:

  • Inconsistent dimensions between images
  • Low resolution and pixelation when scaled
  • Difficulty isolating specific UI components
  • Visual distractions from browser elements
  • Poor visibility of important interface details

Windows screenshot capabilities are particularly limiting. The built-in Snipping Tool produces inconsistent results, and third-party tools often add watermarks or lack precision controls. macOS offers better native options with Command-Shift-3 (full screen) and Command-Shift-4 (selection), but even these lack fine-grained control over resolution and UI element selection.

Ideally, screenshots should be produced in a consistent format to give a professional presentation and be as clear as possible for your customers. In this article we’ve shared a couple of tried-and-true methods to create great screenshots.

Google Chrome’s Hidden Screenshot Features

Google Chrome provides precise control over screenshot capture that ordinary screen capture tools lack. It requires using Chrome’s Developer Tools feature. The screenshots you take with DevTools consistently provide:

  • Resolution: 1920×1080 at 2x DPR (producing 3840×2160 images that you can compress later)
  • Aspect ratio: HD 16:9 for full interfaces, adjustable for UI components
  • Format: PNG for interface elements with transparency, JPEG at 90% quality for full screens

We have summarized the method below.

First-Time Setup

The first step is to set up your screenshot for a full HD aspect ratio and a device pixel ratio (DPR) of 2.

  • Open Chrome DevTools: Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows)
  • Toggle Device Toolbar: Cmd + Shift + M (Mac) or Ctrl + Shift + M (Windows).
  • Expand Dimensions: Click dropdown
  • Edit Devices: Click “Edit”
  • Add Custom: Select “Add Custom Device”
  • Name Device: Enter a name, for example, “HD screenshot”
  • Set Resolution: Input 1920 x 1080
  • Adjust Ratio: Device pixel ratio 2
  • Choose Desktop user agent string: Select “Desktop” mode
  • Confirm Addition: Click “Add”
  • Exit Menu: Close with “X”

If you prefer to use a mouse, you can follow the instructions in the video below.

Taking the Shot

Once you have set up the HD aspect ratio and DPR of 2, these are the steps to take optimized screenshots:

  1. Open Chrome DevTools: Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows)
  2. Access the Command Menu with Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows).
  3. Type “screenshot” to see available options:
  • “Capture node screenshot” for specific UI elements
  • “Capture full size screenshot” for entire pages

You can also do this without using keyboard shortcuts, as demonstrated in the video below.

Highlights

Often, editors use basic utilities—Preview on macOS or Photos on Windows—to add highlights and annotations manually. This results in a lot of screenshots with clunky square boxes in bright red and blue colors that are not the best look for your brand.

To help with adding nicely styled highlights to focus attention on specific UI features, we made a free Figma template you are welcome to use. The template is set up with this styling:

  • Padding: 24-32px minimum around focal elements
  • Corner radius: 8px for framed screenshots
  • Shadow: 15% opacity, 12px blur, 4px y-offset

This styling captures UI elements with pixel-perfect accuracy and proper scaling for high-resolution displays.

Advanced Methods

The truth is, raw screenshots rarely look professional without additional treatment. For documentation and marketing materials, consider refining screenshots with these presentation techniques:

Portal Effect

Inspired by the image styling in Linear’s documentation, the “portal effect” creates depth and focus:

  • Place screenshot in a container with subtle corner radius (8px)
  • Add drop shadow (12px blur, 4px y-offset, 15% opacity)
  • Set against a subtle gradient background
  • Use subtle border (1px, 10% opacity)

This technique creates visual separation between the UI and the surrounding content, drawing attention to interface details.

Gradient Backgrounds

Screenshots placed on flat white backgrounds often appear stark and clinical. We recommend using subtle gradients as a best practice:

  • Create a linear or gradient background (2-3 colors with subtle difference)
  • Position the brighter part of your gradient background near any specific UI element you want to emphasize
  • Match gradient colors to subtle UI elements for cohesion

We recommend adding annotations in a professional tool such as Figma or Photoshop.

You can also do so using DocsHound, as shown below.

Annotations

In some cases it may prove necessary to also add text annotations on top of your screenshot. Using the basic image editing utilities, this often results in jagged text in garish colors.

Here is best practice styling we recommend for annotations:

  • Use a consistent color system (we recommend a primary color at 100% opacity)
  • Maintain uniform stroke weight (2px recommended)
  • Use clean geometric shapes (circles, rectangles) rather than freehand drawings
  • Position annotations with consistent spacing from highlighted elements

We made a free Figma template you can use to replicate the annotation pattern DocsHound uses.

Capturing Interactive Elements

Chrome provides a method to capture shots of interactive elements on a page:

  • Use the elements panel to click the specific element you want to capture
  • From there, follow the Taking the Shot instructions above, but instead of entering the command for a full page screenshot, type in “capture node screenshot” and hit return.

Establish a Standard Workflow

To keep a consistent standard for screenshots, we recommend documenting a standard workflow for all team members to reference. This should include these topics:

  • How to create a sequence of consistent screenshots
  • How to maintain identical dimensions and viewport settings
  • Using visual numbering or arrows to indicate flow direction

Using AI to Capture Screenshots

The methods above, while effective, still require significant manual effort for every update to your documentation.

As a time-saving alternative, you can try DocsHound.

DocsHound automatically:

  • Detects significant UI elements
  • Orders them in a logical sequence
  • Captures screenshots at optimal resolution
  • Applies consistent styling and formatting
  • Highlights elements based on user interaction

You can use DocsHound to annotate and generate branded gradients in seconds. It’s as simple to use as recording a Loom video.

For those still taking screenshots manually, these technical guidelines provide a foundation for creating professional images. For everyone else, DocsHound’s automatic screenshot capabilities eliminate these technical considerations entirely.

Does all this sound a bit much for a screenshot? If so, we agree, which is one of the reasons we built a tool to automate it. Say goodbye to manual screenshot hassles—try the DocsHound Chrome Extension today.