How to mark up a product image with callouts

Callouts are numbered or lettered markers you place directly on a product image to identify individual components. Each callout auto-increments its label so you can work quickly without manually tracking the sequence.

This article uses a toaster as the example product. The following components will be identified: bread slots, browning dial, cancel button, lever, and crumb tray.

Before you begin

Open the Asset Annotation Editor with your product image loaded. If the canvas shows a "Waiting for image…" placeholder, the image has not yet been attached to the asset or document feature.

Step 1: Select the Callout tool

Click the Callout tab in the sidebar, or press C.

The Callout panel showing Callout Type, Start from, Shape, and Text Inside Callout options.

The Callout panel displays the following options:

Step 2: Choose your callout type and shape

Before placing callouts, set the label format and marker style that suits your document. For a toaster user manual, numeric labels with circle markers are a conventional choice for part identification.

1. Under Callout Type, click 1, 2 to use numeric labels.
2. Under Shape, click Circle.

Step 3: Place callouts on the image

Click anywhere on the canvas to place a callout at that position. The label is applied automatically and increments with each click.

Callout 1 placed on the bread slots of the toaster image.

For the toaster, click each component in sequence:

1. Click the bread slots at the top of the toaster — callout 1 is placed.
2. Click the browning dial on the right side — callout 2 is placed.
3. Click the cancel button — callout 3 is placed.
4. Click the lever — callout 4 is placed.
5. Click the crumb tray at the base — callout 5 is placed.

Step 4: Edit a callout label

If you need to change the text of an existing callout — for example, to correct a label or use a custom value:

1. Press V or Escape to switch to the Select tool.
2. Double-click the callout on the canvas.
3. The label editor appears over the callout. Type the new label.
4. Press Enter to confirm, or Escape to cancel.

Step 5: Reposition a callout

1. Press V or Escape to switch to the Select tool.
2. Click the callout to select it. A selection ring appears around the marker.
3. Drag the callout to the new position.

To constrain movement to horizontal or vertical, hold Shift while dragging.

Step 6: Change callout appearance

Select a callout to display its properties in the sidebar. You can adjust the following:

Step 7: Delete a callout

1. Press V or Escape to switch to the Select tool.
2. Click the callout to select it, or hold Alt and click to select multiple.
3. Press Delete or Backspace.

To remove all annotations from the canvas at once, click the trash icon in the sidebar bottom bar.

Step 8: Save your work

Click Save in the sidebar when you have finished placing and adjusting callouts. The editor exports a full-resolution PNG with all callouts rendered and saves the annotation state for future editing.

The Save button in the sidebar bottom bar. It is enabled when annotations exist or the artboard has been resized.

Related articles

• Asset Annotation Editor overview
• How to draw arrows and shapes on an image
• How to add text annotations
• How to arrange, copy, and delete annotations
• Annotation properties reference
• Keyboard shortcuts for the Asset Annotation Editor