Wireframe example | separati.st

Mon, 23/11/2009 - 17:12 | by richshaw

To add a comment to a image, click the 'Add note' link. A yellow box should appear. You can move the box around by dragging it from the middle. You can resize the box by dragging it's edge.

Type your comment in the box and click 'ok' to save. You can edit your notes by clicking on them again. Once you exit or refresh the page your notes will be saved permanently and you won't be able to edit them.

(Image by activeside)

Using the image annotation tool is really easy:

To add a note, click "Add Note" and a small yellow box will appear on the image below.
To move the yellow box to part of the image you want to comment on, click the center of the yellow box and drag it with your mouse, the cursor will normally be in the shape of a hand.
To resize the yellow box click on the edge of the yellow box and drag it with your mouse, the cursor will be in the shape of an arrow.
Once you've highlighted the part of the image you want to comment on you can type your comment in the text box underneath the yellow box. To save your comment click the "ok" button.

If you want to see this information again click "Help" at any time. To close this help box click the "X" in the top right or press "Esc" on your keyboard.