Counter

Add numbered markers for step-by-step instructions.

Shortcut: C

How to Use

1. Select the Counter tool (press C)
2. Click where you want to place the first number
3. Click again to place the next number (auto-increments)
4. Switch tools when done

Numbers automatically increment: 1, 2, 3, etc.

Options

Option	Values	Description
Color	Any color	Counter color
Size	10–999px	Circle diameter
Style	Sticker, Filled, Open	Visual style
Shadow	On / Off	Drop shadow behind the counter

Counter Styles

• Sticker — Filled circle with shadow (stands out)
• Filled — Solid colored circle
• Open — Circle outline only

Auto-Contrast Text

The counter’s inner text automatically selects the best complementary color based on the hue and brightness of your chosen color. For example, a black counter displays white text, and a white counter displays black text — so the number is always readable.

Renumbering

When you delete a counter, others don’t automatically renumber. To fix numbering:

1. Delete the counters you want to change
2. Add them again in the correct order

Tips

• Step-by-step guides — Perfect for tutorials
• Callouts — Mark multiple items to reference in text
• Sticker style — Best visibility on any background
• Consistent size — Use the same size for all counters in a screenshot

Examples

Tutorial steps:

1. Click Settings → 2. Select Account → 3. Click Save

Marking UI elements:

Number each button you want to explain

Creating legends:

Add counters to items, then explain each number below

---

See also: Arrow Tool | Text Tool