How to Annotate Screenshots for Documentation
// tl;dr
- — With Pro, Procshot's built-in annotation tools let you add arrows, boxes, text labels, and blur effects directly to captured screenshots. On the free plan, every step still gets an automatic box around the clicked element.
- — Annotations are applied before export — the annotated screenshots appear in every export format (Markdown, HTML, and PDF; PDF export is also Pro).
- — Effective annotations direct reader attention and protect sensitive data without requiring a separate image editor.
// why this matters
A screenshot without annotation is often ambiguous. On a complex dashboard with 20 buttons, 'click the Settings button' is useless without a visual indicator of which button. Annotations — arrows, boxes, text labels — translate the screenshot from a general image of the UI into a specific instruction. They reduce reader confusion, cut the number of 'where is that?' questions for documentation, and allow you to produce guides that work without back-and-forth clarification. For documentation used in onboarding, training, or customer support, annotation quality is the difference between a guide someone can follow independently and one that requires a person to walk them through it. Procshot Pro includes annotation tools directly in the workflow, so screenshots are annotated before export rather than in a separate image editing step.
Step-by-Step Guide
- 1
Complete your Procshot recording
Record your workflow as normal. Procshot captures a screenshot at every click, including links that move to another page. Once you click Stop Recording, the draft guide with all screenshots is ready to annotate.
- 2
Open the annotation editor for a step (Pro)
In the Procshot guide editor, click on any screenshot to open the annotation editor for that step. The annotation toolbar appears with the available tools: box, arrow, text, and blur.
- 3
Add a box or arrow to highlight the key element
Use the box tool to draw a rectangle around the primary UI element for that step — the button, field, or area the reader needs to interact with. Use the arrow tool to draw a directional pointer toward the element if the box would cover important context. For most steps, one box or arrow is sufficient.
tip: Less is more — annotate the one most important element per step. Multiple boxes on one screenshot dilutes attention rather than focusing it.
- 4
Add text labels for additional context
Use the text tool to add a short label when the element's visual position or function isn't self-evident from the step description alone. Good text labels are 2-5 words: 'Save changes here', 'Select your role', 'Required field'. Avoid long text in annotations — that belongs in the step description.
- 5
Apply blur effects to sensitive data
Use the blur tool to obscure any sensitive data visible in the screenshot: user credentials, API keys, email addresses, names, or internal data. Draw the blur area over the sensitive region. The blur is applied to the screenshot before export and cannot be removed from the exported file.
tip: Apply blur conservatively — blur only the specific data that is sensitive, not the entire form or interface area. Blurring too much reduces the screenshot's usefulness.
- 6
Review annotations across all steps before exporting
Scroll through all steps and verify: every step has an annotation directing attention to the right element, blur is applied to all sensitive data, text labels are brief and accurate. This review pass prevents re-exporting after finding missed annotations.
- 7
Export the annotated guide
Once annotations are complete, export in your preferred format: Markdown, HTML, or PDF (PDF with Pro). Annotations are baked into the screenshots in all export formats — they cannot be edited after export. The exported guide shows each screenshot with its annotations exactly as you see them in the editor.
// use cases
Complex Dashboards with Many Controls
When documenting admin interfaces or analytics dashboards with dense UIs, arrows pointing to the specific button or dropdown direct readers immediately — eliminating the scanning that comes from a plain screenshot.
Bug Reports with Visual Evidence
QA teams add a red box around the broken element in the bug manifestation screenshot. The annotated screenshot makes the problem immediately visible to engineers without reading the full description.
Sensitive Process Documentation
IT admins document admin processes involving real credentials or user data. Blur effects on sensitive fields allow the guide to be shared with a broader audience without data exposure risk.
// tips & best practices
- › Use red or orange box colors for 'action required here' and blue for 'information to read' — consistent color coding builds annotation literacy in your documentation library.
- › Arrow annotations work better than box annotations when the target element is at the edge of the screenshot, where a box would be cut off.
- › For multi-step forms where the same field appears across steps, annotate differently each time to indicate which specific field is the focus of that step.
- › Test your annotated guide with a fresh reader before publishing — if they hesitate at any step to find the element, that step needs a clearer annotation.
- › For error screenshots, annotate the error message AND the area of the UI that caused it — both locations matter for the reader's understanding.
- › Keep blur areas tight around the specific sensitive data — blurring an entire screenshot section makes the guide less useful than blurring just the sensitive value.
// common pitfalls
Over-annotating every step
Adding arrows, boxes, and text labels to every screenshot creates visual noise that trains readers to ignore the annotations. Reserve annotations for steps where the relevant element isn't immediately obvious. If every step needs an arrow, the guide's step descriptions may need improvement first.
Using blur inconsistently across a guide
If you blur email addresses in some screenshots but not others, the inconsistency creates a false sense of security for the unblurred instances. Establish a consistent rule: any PII, credential, or internal data is blurred, always. Apply it uniformly across the entire guide during the review pass.
Annotating after exporting
Procshot's annotations are applied to screenshots within the editor before export. If you export and then realize annotations are missing or incorrectly placed, you need to return to Procshot and re-export. The exported files are not editable back in Procshot. Do the annotation review pass before export, not after.
// faq
Are annotations included in all three export formats?
Yes. Annotations (boxes, arrows, text labels, blur effects) are baked into the screenshot images before export. All three formats — Markdown, HTML, and PDF (PDF is Pro) — include the annotated screenshots. The annotations cannot be removed from exported files.
Can I change the color of annotation elements?
Procshot's annotation tools include standard color options for boxes, arrows, and text labels. The specific color options available are within the annotation editor. For documentation teams with brand color requirements, use the closest available color in the editor.
Can I annotate screenshots after exporting?
Not within Procshot — annotations must be applied before export. If you need to annotate after exporting, use an image editor on the individual screenshot files (available in the Markdown or HTML export package), then re-import or replace the images in the exported document.
Does the blur tool completely hide sensitive data?
Procshot's blur applies a visual obfuscation to the screenshot. It is sufficient for human viewers — the blurred content is not readable. It is not a cryptographic redaction. For highly sensitive regulatory or legal documents, verify the blur is sufficient for your compliance requirements.
Can I add annotations to screenshots I didn't capture with Procshot?
Procshot's annotation tools work on screenshots captured during Procshot recordings. You cannot import external screenshots into Procshot for annotation. For annotating external screenshots, use a dedicated image editor like Preview (Mac), Paint (Windows), or a browser-based annotation tool.
// related tools
Procshot — Free Chrome Extension
Auto-record browser actions to create step-by-step guides with annotated screenshots.
// related guides
How to Create Step-by-Step Tutorials
Chrome extension tutorial guide
How to Document Software Processes
SOPs and onboarding materials
How to Create Bug Reports with Screenshots
QA and developer workflows
How to Export Tutorials to PDF or Markdown
Format guide for technical writers
// compare procshot