Skip to content

Screenshot Standards

Purpose

Guidelines for creating consistent, professional screenshots for AudioLab documentation.

Technical Requirements

Resolution

  • Minimum: 1920x1080 (Full HD)
  • Preferred: 2560x1440 (2K) or higher
  • Retina/HiDPI: Capture at 2x resolution, scale down

Format

  • Web: PNG for UI/code (lossless)
  • Photos: JPEG at 90% quality
  • Diagrams: SVG when possible
  • Avoid: GIF for static images (use for animations only)

File Size

  • Target: <500KB per screenshot
  • Maximum: 1MB per screenshot
  • Optimization: Use TinyPNG, ImageOptim, or optipng

Color Space

  • sRGB for web consistency
  • 8-bit color depth (no HDR)

Capture Tools

Windows

Recommended: ShareX (free, powerful) 

Settings:
- Hotkey: PrintScreen
- Format: PNG
- Save to: var/screenshots/raw/
- Auto-number: Yes

Built-in: Snipping Tool, Win+Shift+S

macOS

Recommended: Built-in (Cmd+Shift+4) 

Defaults:
- Format: PNG
- Location: ~/Desktop (change as needed)
- Shadow: Disable for UI (defaults write com.apple.screencapture disable-shadow -bool true)

Cross-Platform

  • Flameshot (Linux-friendly)
  • Greenshot (Windows)

Visual Style

Application Theme

Consistent theme for all screenshots: - VS Code: Dark+ (default dark) or One Dark Pro - Browser: Clean Chrome profile, no extensions visible - Terminal: PowerShell Core with Posh-Git - OS: Windows 11 with dark mode

Window State

  • Clean desktop (hide icons, taskbar if possible)
  • Close unnecessary windows
  • Full-screen or maximized windows
  • No personal information (file paths, usernames)
  • No notifications visible

Code Editor Settings

// VS Code settings for screenshots
{
  "editor.fontSize": 16,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,  // Disable for clarity
  "workbench.colorTheme": "One Dark Pro",
  "window.zoomLevel": 1  // Adjust for readability
}

Screenshot Types

1. Full Window

When: Showing complete UI, workflow context How: Capture entire application window Crop: Include window chrome (title bar)

Example: Plugin GUI, IDE workspace

2. UI Element

When: Highlighting specific control, button, menu How: Crop tightly around element + small margin Crop: 10-20px padding

Example: Parameter knob, button, checkbox

3. Code Snippet

When: Showing specific code section How: Capture editor pane only Crop: Show 5-10 lines before/after for context

Example: Function implementation, class definition

4. Before/After

When: Demonstrating changes, improvements How: Side-by-side layout or sequence Crop: Same dimensions for both

Example: UI redesign, performance comparison

5. Annotated

When: Explaining complex UI or flow How: Add arrows, text, highlights Crop: Leave space for annotations

Example: Workflow diagram, feature tour

Annotation Guidelines

Tools

  • Snagit (paid, excellent for annotations)
  • Greenshot (free, basic annotations)
  • Photoshop/GIMP (manual, full control)
  • draw.io (for complex diagrams)

Annotation Style

Arrows

  • Color: Red #E74C3C or Blue #3498DB
  • Width: 4-6px
  • Style: Solid with arrowhead
  • Curve: Slight curve, not straight

Highlights/Boxes

  • Color: Yellow #F39C12 at 30% opacity
  • Border: 2px solid #E67E22
  • Corner Radius: 5px
  • Style: Rounded rectangle

Text/Labels

  • Font: Segoe UI Bold (Windows) or SF Pro Bold (macOS)
  • Size: 18-24pt
  • Color: White #FFFFFF with black outline (3px)
  • Background: Semi-transparent black #000000 at 70% opacity
  • Padding: 10px around text

Callouts

┌─────────────────┐
│ Parameter Knob  │  ← White text on semi-transparent black
└────────┬────────┘
         │ Red arrow (4px)
         ↓
      [UI Element]

Numbering Steps

Use numbered circles for sequential steps: - Circle: 40px diameter - Color: Blue #3498DB background, white #FFFFFF text - Font: Segoe UI Bold, 20pt - Position: Top-left of annotated element

Example: 

❶ Click "New Project"
❷ Select template
❸ Configure settings

Best Practices

Capture Process

  1. Clean environment
  2. Close unnecessary apps
  3. Hide desktop icons
  4. Disable notifications

  5. Use incognito browser if capturing web

  6. Setup scene

  7. Arrange windows at intended size
  8. Zoom editor/browser to readable level
  9. Position cursor off-screen (unless showing click)

  10. Prepare demo data/code

  11. Capture

  12. Use consistent capture tool
  13. Capture at native resolution (no scaling)

  14. Review immediately (check for PII, errors)

  15. Post-process

  16. Crop to relevant area
  17. Add annotations if needed
  18. Optimize file size
  19. Save with descriptive name

What to Avoid

  • ❌ Tiny text (< 14pt in editor)
  • ❌ Personal information (names, paths, keys)
  • ❌ Inconsistent themes/colors
  • ❌ Low resolution (<1920px width)
  • ❌ Too many annotations (cluttered)
  • ❌ Screenshots of screenshots
  • ❌ Watermarks or branding (unless AudioLab)

What to Include

  • ✅ Clear, readable text
  • ✅ Sufficient context (but not too much)
  • ✅ Consistent styling
  • ✅ High contrast (dark on light or vice versa)
  • ✅ Meaningful content (not Lorem Ipsum)
  • ✅ Realistic examples

Organizing Screenshots

File Naming

YYYY-MM-DD_feature-description_version.png

Examples:
2025-01-15_buffer-manager-ui.png
2025-01-15_buffer-manager-ui-annotated.png
2025-01-20_plugin-settings-dialog.png

Directory Structure

var/screenshots/
├── raw/                    # Unedited captures
├── edited/                 # Annotated/cropped
└── published/              # Optimized for web
    ├── getting-started/
    ├── user-guide/
    ├── tutorials/
    └── reference/

Metadata (Optional)

Create .txt file alongside screenshot: 

buffer-manager-ui.png.txt:
---
title: Buffer Manager UI
captured: 2025-01-15
tool: ShareX
resolution: 1920x1080
theme: VS Code One Dark Pro
notes: Shows default layout with sidebar open
---

Responsive Considerations

Multiple Resolutions

For critical screenshots, capture at multiple resolutions: - Desktop: 1920x1080 (default) - Tablet: 1024x768 (if web UI) - Mobile: 375x667 (if mobile-responsive)

Scaling

When screenshots are displayed smaller than captured: - 2x resolution: Capture at 3840x2160, display at 1920x1080 - Retina-ready: Ensures crisp display on HiDPI screens - Web optimization: Scale down in HTML, not in image file

Automation

Batch Optimization

# PowerShell script to optimize all PNGs
Get-ChildItem -Path "var/screenshots/edited" -Filter *.png | ForEach-Object {
    $outPath = $_.FullName -replace 'edited', 'published'
    # Requires optipng installed
    optipng -o5 -out $outPath $_.FullName
}

Automated Capture (Advanced)

For consistent UI screenshots, use Selenium/Puppeteer: 

// Capture browser UI with Puppeteer
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('http://localhost:3000/plugin-ui');
  await page.screenshot({ path: 'plugin-ui.png' });
  await browser.close();
})();

Quality Checklist

Before publishing screenshot: - [ ] Resolution is 1920x1080 or higher - [ ] Text is clearly readable - [ ] No personal information visible - [ ] Annotations are clear and professional - [ ] File size is <500KB - [ ] Format is PNG (or JPEG for photos) - [ ] Filename is descriptive - [ ] Consistent with other screenshots

Examples

Reference screenshots: - var/screenshots/examples/good-code-snippet.png - var/screenshots/examples/good-ui-element.png - var/screenshots/examples/good-annotated.png - var/screenshots/examples/bad-too-small.png (what to avoid)

Tools Reference

Free Tools

Optimization

References