How to Take Perfect Screenshots — Capture, Crop, and Annotate

Capturing Screenshots

Windows

• Full screen: Print Screen key
• Active window: Alt + Print Screen
• Custom area: Windows + Shift + S (Snipping Tool)

Mac

• Full screen: Cmd + Shift + 3
• Custom area: Cmd + Shift + 4
• Window: Cmd + Shift + 4, then Spacebar, click window

Mobile

• iPhone: Side button + Volume Up
• Android: Power + Volume Down (varies by manufacturer)

Post-Capture Editing

Crop to Focus Area

Remove unnecessary parts of the screenshot. Focus on the relevant UI element or content.

Add Annotations

• Arrows pointing to specific elements
• Text labels explaining features
• Highlight boxes around important areas
• Numbered steps for tutorials

Add Borders

A subtle border helps screenshots stand out against white page backgrounds, especially in documentation.

Resize for Use

• Blog post: 800-1200px wide
• Social media: Platform-specific dimensions
• Documentation: Consistent width throughout

Tips for Better Screenshots

1. Clean up first — Close unnecessary tabs, hide bookmarks bar
2. Use incognito mode — No extensions, clean browser chrome
3. Consistent window size — Use the same browser dimensions for a series of screenshots
4. High DPI capture — On retina displays, screenshots are 2x resolution
5. PNG format — Screenshots with text should stay as PNG for sharpness