Hi, how can we help? 👋

How to make annotations in Screenity

With Screenity, you can use a variety of tools to annotate any website before or during a recording. To access the drawing tools, you need to click on the pencil icon in the toolbar.

 
Notion image
 

After clicking on it, the drawing tools will be expanded on top of your toolbar.

 
Notion image

From left to right, the tools are:

  1. Cursor tool. Use this for moving and resizing shapes, text, and images that you have drawn on the screen.
  1. Pen tool. This is your main tool to draw freely on any website.
  1. Highlighter tool. Use this tool to highlight text and elements. It will create brush strokes with transparency to see through.
  1. Eraser tool. You can use the eraser to delete any shapes you’ve drawn. Just drag your cursor on top of any annotation, and each selected shape be deleted once you release your mouse.
  1. Color and stroke. Click to set the color and stroke thickness of your drawings. After clicking, a radial menu will pop out, with several options:
      • Color swatches along the top left of the wheel. Click for easy access to colors
      • More colors on the top right, distinguished with a gradient icon. You will be able to drag a handle alongside a color wheel to select any color.
      • Different stroke thickness on the bottom right, with a thick, medium, and thin stroke.
      • A color picker on the center of the menu, with an eyedropper icon. Click to enable it, then click anywhere to copy that color and use it for your drawings.
      Notion image
      The color and thickness you select will only be set for any new drawings you made, it won’t apply to anything that’s already on the screen.
  1. Text tool. Click anywhere to create a new text element, then start typing to add your text.
  1. Shape tool. Click to browse different shapes, then drag to add to the canvas. You can switch from stroked or filled shapes by using the button on the right of the menu that pops up.
    1. Notion image
  1. Arrow tool. Use this to point to different elements on the screen. Drag anywhere to create an arrow, and use the handles on either edge to refine its dimensions.
  1. Image tool. Click to browse for images to add to the screen, then click anywhere to place them. Note that videos or GIFs are not supported.
  1. Undo. Click to go back one step, if you made a mistake.
  1. Redo. Click to go forward one step.
  1. Clear canvas. Use this button to remove all annotations from the screen.
 

Once you’ve finished drawing, press the Esc key or click on the “X” icon on the toolbar. You’ll be able to interact with the page again.

 
You can use the handles on the left of the toolbar (icon with 4 dots) to reposition the toolbar anywhere in the screen, so it doesn’t get in the way.
 

👋 Need more help? Feel free to reach out with your query through the Contact form, or report an issue through the Feedback form

Did this answer your question?
😞
😐
🤩