Skip to main content
AnnotateFast logoAnnotateFast
Shortcuts Open Editor
Learning Guide

Annotation Tool Examples

Master each annotation tool with practical examples and use cases. Learn when to use arrows, shapes, text, highlights, and more.

Quick Start

Press the tool's keyboard shortcut to activate it quickly
Adjust color, size, and opacity in the Properties panel
Use Ctrl+Z to undo if you make a mistake
Press V to switch back to Select tool
👆

Select Tool V

Move, resize, and modify existing annotations

When to Use

  • Reposition annotations after drawing them
  • Resize shapes to cover more or less area
  • Edit text content by double-clicking
  • Delete annotations by selecting and pressing Delete

Real-World Examples

Move an arrow that's pointing to the wrong element

Resize a rectangle to cover a larger UI section

Edit text to fix a typo or add more details

Pro Tips

  • Click outside to deselect all annotations
  • Shift+Click to select multiple annotations
  • Drag handles to resize shapes proportionally
➡️

Arrow Tool A

Point to specific elements or areas that need attention

When to Use

  • Highlight a bug location in UI
  • Point to a button or feature for documentation
  • Direct attention to a specific error message
  • Show the flow or sequence of steps

Real-World Examples

Bug report: Arrow pointing to broken navigation menu

Design feedback: Arrow indicating misaligned text

Tutorial: Arrow showing where to click "Submit" button

Support: Arrow pointing to error message for context

Pro Tips

  • Drag from tail to head to control arrow direction
  • Change color to match urgency (red for bugs, blue for info)
  • Adjust stroke width for emphasis
▭

Rectangle Tool R

Highlight sections with bordered boxes

When to Use

  • Frame entire UI sections or components
  • Group related elements together
  • Mark safe zones or boundaries
  • Create emphasis on rectangular areas

Real-World Examples

Bug report: Box around entire broken widget

Design feedback: Frame the header section for review

Documentation: Outline the settings panel

Support: Box around error notification banner

Pro Tips

  • Hold Shift while dragging to create perfect squares
  • Toggle "Fill Shape" for solid background rectangles
  • Use with low opacity for subtle highlighting
  • Combine with text annotations for labeled sections
⭕

Circle Tool C

Draw attention to small elements or create soft emphasis

When to Use

  • Highlight small buttons or icons
  • Circle text errors or typos
  • Mark specific data points in charts
  • Create softer, less formal emphasis than rectangles

Real-World Examples

Bug report: Circle around incorrect icon

Design feedback: Circle the logo that needs resizing

Documentation: Circle the save button

Support: Circle the checkbox user should select

Pro Tips

  • Hold Shift while dragging to create perfect circles
  • Use filled circles for stronger emphasis
  • Smaller circles for pinpoint accuracy on tiny elements
  • Red circles for errors, green for approvals
📝

Text Tool T

Add labels, descriptions, or notes directly on screenshots

When to Use

  • Describe what's wrong or needs changing
  • Label UI elements in documentation
  • Add step numbers for tutorials
  • Provide detailed explanations

Real-World Examples

Bug report: "Button doesn't respond when clicked"

Design feedback: "Increase font size to 18px"

Documentation: "1. Click here to start"

Support: "Expected: Blue / Actual: Red"

Pro Tips

  • Double-click to edit text after placing it
  • Adjust font size in Properties panel (12-48px)
  • Use high contrast colors for readability
  • Keep text concise - use multiple text boxes for separate points
💬

Callout Tool B

Add speech bubble style annotations for comments

When to Use

  • Add conversational feedback or questions
  • Simulate user thoughts or reactions
  • Provide friendly, informal notes
  • Ask questions about design decisions

Real-World Examples

Design feedback: "Is this the final color scheme?"

Bug report: "Why does this button appear here?"

Documentation: "Note: This feature requires login"

Support: "Have you tried refreshing the page?"

Pro Tips

  • Callouts feel friendlier than plain text boxes
  • Great for collaborative design reviews
  • Position the pointer to show what you're commenting on
  • Use for questions, not just statements
🖍️

Highlight Tool H

Draw freeform highlights like a marker pen

When to Use

  • Underline important text
  • Mark multiple lines of code
  • Create emphasis on irregularly shaped areas
  • Mimic physical highlighter marking

Real-World Examples

Bug report: Highlight error message text

Design feedback: Mark entire paragraph with spacing issues

Documentation: Highlight key terms in instructions

Support: Underline the problematic file path

Pro Tips

  • Use yellow or bright colors for classic highlighter look
  • Set opacity to 40-60% so text remains readable
  • Adjust stroke width for thicker or thinner marks
  • Great for emphasizing text-heavy screenshots
✏️

Pen Tool P

Draw freehand annotations and sketches

When to Use

  • Circle multiple elements with one stroke
  • Draw custom shapes or diagrams
  • Add handwritten style notes
  • Create flow indicators or connections

Real-World Examples

Bug report: Draw circle around cluster of broken links

Design feedback: Sketch how element should be positioned

Documentation: Draw arrows showing workflow

Support: Circle and connect related error messages

Pro Tips

  • Draw slowly for smoother lines
  • Adjust stroke width for fine or bold lines
  • Use red for errors, blue for suggestions
  • Combine with other tools for detailed annotations
1️⃣

Numbered Marker N

Add sequential numbered steps or priorities

When to Use

  • Create step-by-step tutorials
  • Show sequence of actions
  • Prioritize bugs or feedback items
  • Mark order of operations

Real-World Examples

Tutorial: "1. Click here, 2. Enter email, 3. Click Submit"

Bug report: Number issues by severity (1=critical, 2=major)

Design feedback: Show order of elements to fix

Support: Number troubleshooting steps

Pro Tips

  • Numbers increment automatically (1, 2, 3...)
  • Use with arrows to show flow direction
  • Combine with text annotations for descriptions
  • Great for multi-step processes
—

Line Tool L

Draw straight lines to connect or separate elements

When to Use

  • Connect related UI elements
  • Show relationships or dependencies
  • Separate sections of screenshot
  • Create dividers or underlines

Real-World Examples

Design feedback: Connect label to its input field

Documentation: Show data flow between components

Bug report: Underline broken functionality

Support: Connect cause to effect in error scenario

Pro Tips

  • Hold Shift to draw perfectly horizontal or vertical lines
  • Adjust stroke width for emphasis
  • Use dashed lines for suggestions (if implemented)
  • Combine with arrows for directional flow
🔒

Blur Tool X

Hide sensitive information like emails, passwords, or personal data

When to Use

  • Redact email addresses before sharing
  • Hide passwords or API keys
  • Protect personal information (names, addresses)
  • Obscure confidential business data

Real-World Examples

Bug report: Blur customer email in error message

Design feedback: Hide production API keys in screenshot

Documentation: Redact personal data in examples

Support: Blur sensitive user information

Pro Tips

  • Always blur before sharing screenshots publicly
  • Check corners and edges of blur area for leaks
  • Better than black boxes - less visually jarring
  • Review carefully - blur is permanent after export

Common Workflows

🐛 Bug Reporting

  1. 1. Use Arrow (A) to point at the bug
  2. 2. Add Rectangle (R) around affected area
  3. 3. Use Text (T) to describe the issue
  4. 4. Add Numbered Markers (N) for multiple bugs
  5. 5. Blur (X) any sensitive data before sharing

📚 Creating Tutorials

  1. 1. Add Numbered Markers (N) for each step
  2. 2. Use Arrows (A) to show where to click
  3. 3. Add Text (T) instructions for each step
  4. 4. Use Highlight (H) to emphasize important text
  5. 5. Use Callouts (B) for helpful tips

🎨 Design Feedback

  1. 1. Use Circles (C) around elements to review
  2. 2. Add Callouts (B) with suggestions
  3. 3. Use Pen (P) to sketch improvements
  4. 4. Add Text (T) with specific measurements
  5. 5. Use Rectangles (R) to show layouts

💬 Customer Support

  1. 1. Use Arrows (A) to point at error messages
  2. 2. Add Highlight (H) on error text
  3. 3. Use Numbered Markers (N) for troubleshooting steps
  4. 4. Blur (X) customer's personal information
  5. 5. Add Text (T) with solution steps

Common Mistakes to Avoid

❌ Using Too Many Tools on One Screenshot

Problem: Adding arrows, rectangles, text, highlights, and callouts all on the same area creates visual clutter and confuses the viewer.

Solution: Choose one primary tool per issue. For example: Use an arrow to point + text to explain, OR use a callout bubble that combines both. Less is more!

⚠️ Forgetting to Blur Sensitive Information

Problem: Sharing screenshots with visible email addresses, API keys, passwords, or personal data is a security risk.

Solution: Always review your screenshot before exporting. Use the Blur tool (X) on any sensitive information. Check corners, address bars, and background windows!

⚠️ Using Red for Everything

Problem: Red is associated with errors and problems. Using it for all annotations makes everything look like a bug, even when giving positive feedback.

Solution: Use a color system: Red for bugs/errors, Blue for suggestions, Green for approvals, Yellow for warnings, Purple for questions. Consistent colors help communicate intent!

💡 Not Providing Enough Context

Problem: Pointing at an element with an arrow and no text leaves viewers guessing what you mean.

Solution: Always add descriptive text. Instead of just an arrow, add text like "Button doesn't respond on mobile" or "Increase padding here to 16px". Clear communication prevents back-and-forth questions!

✋ Covering the Issue You're Trying to Show

Problem: Placing a large text box or shape directly over the element you want to highlight obscures what you're trying to show.

Solution: Position annotations near, not on the element. Use arrows to point from text to the issue, or place callouts to the side. The viewer needs to see the actual problem!

📝 Using Tiny Text That's Unreadable

Problem: Text annotations at 12px font size become illegible when the screenshot is resized or viewed on mobile.

Solution: Use at least 18-24px font size for text annotations. Adjust the font size in the Properties panel. Bigger text ensures your message is readable across all devices!

🎨 Low Contrast Colors on Backgrounds

Problem: Yellow text on white backgrounds or dark blue on black backgrounds is nearly invisible.

Solution: Check color contrast. Use opposite colors: dark annotations on light screenshots, light annotations on dark screenshots. White text with a colored background (like purple or blue) works universally!

Teams using these annotation patterns often combine AnnotateFast with FontFinder for typography details and CollageGrid to organize multiple annotated screenshots into visual presentations.

Ready to try these tools?

Open the editor and start practicing with real screenshots

Open Editor Try Demo