Image Annotation
Back to: Exploring the Image Hopper Plugin
Annotations help your users better express their ideas, concerns, or creativity visually when submitting a photo. In this lesson you will learn about the different annotation tools that are available and how they can be used. To start, click the Annotate tab from the Primary Toolbar.
Sharpie
The Sharpie tool allows free-hand drawing on the uploaded image using the mouse. Change the line color and line width as needed.
Line
To draw a Line, click and drag the mouse up to the desired length. You can adjust the line color and line width as needed.
Change the line ends by clicking on the start and end dropdowns and choosing from the list of available shapes and arrowheads.
After drawing a line, you will see a floating toolbox on top of the object containing three options:
- Move to front – moves the position of the selected line on top of an existing object
- Duplicate – creates another copy of the selected line
- Remove – deletes the selected line
Arrow
To draw an Arrow, click and drag the mouse up to the desired length. You can adjust the line color and line width as needed.
Change the line ends by clicking on the start and end dropdowns and choosing from the list of available shapes and arrowheads.
After drawing a line, you will see a floating toolbox on top of the object containing three options:
- Move to front – moves the position of the selected arrow on top of an existing object
- Duplicate – creates another copy of the selected arrow
- Remove – deletes the selected arrow
Text
To add a single-line or multi-line text, click anywhere and drag the mouse to create a text box.
Click the font dropdown to select the font you want to use, and adjust the color, style, size, and text alignment as needed.
After adding a text, you will see a row of floating icons at top of the object containing the following options:
- Flip horizontal – flip the position of the text horizontally
- Move to front – moves the position of the selected text on top of an existing object
- Duplicate – creates another copy of the selected text
- Remove – deletes the selected arrow text
- Fixed size – automatically fits the text box to the inside content
- Edit text – edit the content of the selected text
Rectangle
To draw a Rectangle, click and drag the mouse up to the desired size. You can adjust the fill color, line color, and line width as needed.
After drawing a rectangle, you will see a floating toolbox on top of the object containing three options:
- Move to front – moves the position of the selected rectangle on top of an existing object
- Duplicate – creates another copy of the selected rectangle
- Remove – deletes the selected rectangle
Ellipse
To draw an Ellipse, click and drag the mouse up to the desired size. You can adjust the fill color, line color, and line width as needed.
After drawing an ellipse, you will see a floating toolbox on top of the object containing three options:
- Move to front – moves the position of the selected ellipse on top of an existing object
- Duplicate – creates another copy of the selected ellipse
- Remove – deletes the selected ellipse
Eraser
The Eraser tool lets you erase Sharpie, Line, and Arrow -drawn objects (as a whole) by dragging the cross-shaped cursor over the object.
Now that you’ve learned how these image annotation tools work, you can now enable whichever you need to give your users more freedom to communicate their concerns. With the help of the Image Hopper Editor, users can now draw, point, label, or write on images before submitting their form. If you’re ready to proceed, mark this lesson complete.