Free Image Markup Tool

Annotation Station says “hi!”

In depth guide [here]:

Here’s a not-so-secret secret:

I hate doing screenshots and labelling them.

I’m constantly working on Muser Studio and frequently need to express “hey, this new thing? You can find it here”.  Cue loading up some image software to draw ellipses around things, typing text, remembering the right colours, fonts. Urgh. Even if with saving a templates I have to remember where they are blah blah. It’s all so mind-numbing.

Thats why I made this.  And I’m sharing it with you.

How to mark up your images for free

Getting your images in

This is the first thing. You have three paths:

• A) click Add images and pick them
• B) drag them onto the page from Finder
• C) on Desktop hit Open folder and point it at the folder they live in.

That last one is my most commonly used one, as it also lets the tool save your annotation edits (think recipe) back into the same folder when you’re done.  This can be very useful because your data is never uploaded away from your computer, so there’s no other way for Annotation Station to remember your work between session.

The toolbar

Along the top is the row of tools: Select, Ellipse, Rectangle, Arrow, Text, Badge and Crop. Whichever one is lit is what a drag on the image will draw, and Ellipse is the one you land on. Select is where you go back to when you want to move or resize something you’ve already drawn rather than add another one.

Underneath it sits a second row that changes with whatever you’ve got picked - colour and line width for the shapes, size for text and badges. Click something you’ve already drawn and that row switches to showing you its settings, so you can restyle it without starting over.

Marking things up

Pick Ellipse and drag around whatever you’re pointing at. Rectangle and Arrow work exactly the same way.

Want a number beside it? Pick Badge and click the shape - it counts itself, so the next one is 2, then 3, and so on (or A, B, C if you flip the toggle). Need words? Pick Text and click where you want them. Right-clicking a shape gets you the same things without swapping tools, and adds one you can’t get any other way: Add attached text, which is a label that stays stuck to the shape when you drag it around.

Taking things out

With Rectangle picked, that second row offers Outline, Redact and Blur. Redact puts a solid black panel over the region and Blur softens it past the point of legibility.

Both are baked into the exported file rather than laid on top of it, so what’s underneath is genuinely gone rather than merely obfuscated - which matters for a licence key, an email address, or a folder path with your own name in it.

Doing it once for a whole set

Here’s the bit that saves me the most time, and really why I made this in the first place.  Say you have five screenshots of the same screen and you want the same label in the same spot on every one.  Do it once, right-click, Copy to all other images, and it goes across the whole lot.  Everything stays consistent and I only do the fiddly bit once.

Cropping

In a similar vein, want to trim the frame down to just the bit that matters? Pick Crop and drag the box you want to keep - everything outside it dims, and that’s what gets saved. It doesn’t disturb your markings; they stay where they are and the crop is only applied when you export. Copy to all pushes the same crop onto every image, so a whole set ends up framed identically.

Naming them and getting them out

Before you save, you can name the output. Each image has a box under its thumbnail in the left column - type whatever you want the file called, or leave it and it saves as <original>_edited so your originals are never overwritten.

When it all looks right, Export all saves every image (or Export current for just the one you’re on). In Chrome they go straight back into your folder; in other browsers you get a zip instead. The whole thing runs inside your browser too - nothing is uploaded anywhere.

That is the quick tour. There’s a fair bit I’ve skipped over - constraining an ellipse to a circle, rectangle to a square, line to 45º angles, undo, moving badges about, copying every mark on an image in one go - and all of that is in the full guide if you want it.

There you go!  Free, no sign-up, nothing to install, and every image stays on your own machine.  It works on a phone as well, which is where a fair few of my screenshots start out, obviously (Muser Studio is only on iOS, currently).  I made this because I kept needing to do this.  I am way too strong with the OCD to have highlights, text and crop regions bouncing around between images.  The endless squinting, and carefully moving the mouse/stylus/touch pad was really annoying me.  If this saves you the same faff, then please feel free to have a go.

Photo credit: Hitomi Bremmer - A Close-Up Of A Few Pills

Photo credit: Soragrit Wongsa - Assorted Photos On Beige Wooden Table