A few habits that make these look better
- Keep labels short. If a note starts turning into a sentence, it usually belongs in the surrounding doc, not on the image.
- Put the label near the thing you are explaining, but not on top of it.
- If the image already has a lot going on, one label and one highlight is usually enough.
Why Add Text to Screenshots?
A screenshot can show the screen, but it usually cannot tell the viewer what they are supposed to notice. That is where text helps. A short label can turn “here is the page” into “here is the problem” or “click this next.” It is one of the quickest ways to make a bug report, tutorial, or support reply easier to follow.
Steps to Add Text in uBlur
- Go to uBlur.app/edit-image.
- Upload or paste your screenshot (press
Ctrl/Cmd + Vafter copying). - Click the Text tool in the left toolbar.
- Click anywhere on the canvas to insert a text box.
- Type your message, then drag to position the box exactly where you need it.
- Adjust font size and color for readability, then export your image.
Write Text That People Understand
The best screenshot labels read more like signs than explanations. Say what the user should notice or do next. If you are reporting a bug, name the issue plainly: "Price total incorrect" or "Missing state validation". If you are writing instructions, use action language: "Click Settings → Teams" or "Paste API key here".
- Be concrete: prefer "Timeout after 30s" to "Something broke".
- One idea per label: if you need two ideas, use two labels.
- Front-load keywords: start with the noun users are scanning for, e.g., "Billing --","Permissions --".
Design Tips: Make Text Easy to Read
A clear message can still fail if the text is hard to see against the background. These quick adjustments make your labels stand out without clutter:
- Contrast: Pick a text color that contrasts with what's underneath. Dark text over light UI, light text over dark UI.
- Size & hierarchy: Use a slightly larger size for headings like "Step 1", and a regular size for supporting labels.
- Breathing room: Don't pin text directly to a button edge. Leave a few pixels of space so it reads cleanly.
- Alignment: Left-aligned text is fastest to scan. Use center alignment sparingly.
Combine Text with Highlights for Maximum Clarity
Text tells people what to think about; highlights tell them where to look. Use a single highlight around the control or area you're describing, and place a short label just outside the highlighted region. This prevents text from covering the UI you're trying to show. If you need to annotate a process with several steps, number your labels ("1, 2, 3") so the order is obvious.
Common Annotation Patterns That Work
- Callout + action: Highlight a button and add a label like "Click Generate Token".
- Input hint: Place "Paste key here" above the input, not on top of it.
- Error explanation: Point to the problem and state the fix: "Wrong currency -- switch to INR".
- Compare states: When showing "before/after," keep labels consistent: "Before -- with PII", "After -- redacted".
Accessibility & Inclusivity
Annotations should help everyone. Favor high-contrast color combinations, avoid using color alone to convey meaning (pair color with a word like "Error" or "Warning"), and keep text legible at 100% zoom. If your screenshot includes small text, increase the label size slightly so it doesn't compete with the UI beneath it.
Layer Etiquette for Complex Screenshots
If your screenshot needs multiple labels, create them in a logical sequence and keep them grouped by region. You'll avoid overlaps and make edits easier later. As a rule of thumb, place labels outside busy UI areas and use arrows or highlights to connect them to the target element. When you're done, glance over the composition: could someone understand the image in five seconds? If not, remove a label or tighten the highlight.
Troubleshooting: When Text Looks Wrong
- Text disappears over photos: Switch to the opposite color (dark/light), or move the label to a flat background area.
- Overlap with UI: Nudge the label outside the component and point with a highlight.
- Too busy: Reduce content. Two perfect labels beat five mediocre ones.
- Long sentences: Break into two short labels stacked vertically.
Security: Redact First, Then Add Text
If your screenshot contains private data, redact before you annotate. Blur hides typical PII (names, emails, order IDs), while Fill should be used for irreversible concealment of secrets (API tokens, QR/bar codes, reset links). After redaction, add labels and highlights that point only to the safe areas you intend to share.
Mini Style Guide Your Team Can Reuse
- Tone: Imperative and concise -- "Click Save", "Select Team".
- Length: Aim for 2-6 words per label.
- Naming: Use the exact UI text when referencing buttons or menu items.
- Consistency: One highlight color for steps, another for warnings; keep it the same across a tutorial.
Exporting & Sharing
When you're done, export and preview at 100% zoom. Check that text is sharp, nothing private is visible, and the highlight doesn't obscure important UI. For long conversations, add the image filename with a short slug (e.g., "checkout-error-step-2.png") so teammates can reference it later.
Pro Tips
- Use contrasting colors for better visibility.
- Keep your text short and precise for quick understanding.
- Combine text with highlights for better visual guidance.
- Crop first so labels focus on the important area.
- Verify at 100% zoom before you share.
Who Uses This Feature?
- 👨💻 QA Testers -- Add steps to bug report screenshots.
- 👩🏫 Teachers -- Create visual instructions for students.
- 📊 Professionals -- Annotate screenshots for presentations and reviews.
Related Guides
- How to Highlight Areas in Screenshots
- How to Export Your Edited Screenshot
- Privacy-Safe Screenshot Redaction: Best Practices
Try It Now
Start annotating your screenshots easily -- no login required, 100% private. Add a label, draw a quick highlight, and export a share-ready image in under a minute.