Top tips – Annotated Screenshots

So, you’ve finished a project and you’re handing it over to the client. You don’t want to just dump it on them, but want to leave them with some clear and helpful notes that they can refer back to for quick and easy answers when you’re not around.

A visual document of annotated screenshots is so useful, but what is the best way to do this without spending far too much time creating some kind of mish-mash of a document using a variety of tools?

Moving on From Print Screen

I previously used ‘Print Screen’, paste into Photoshop, crop out browser bars and toolbars… maybe stitch some images together if I wanted an image of a whole webpage… and insert into a word/indesign document where I could write some text and draw some wobbly (even if they were straight it looked so hashed together) lines and circles to highlight areas.


I’ve since moved on to browser add-ons such as Firefox’s Screengrab that will capture any part of the website you want, even all of it and without including browser and unnecessary  and sometimes confidential bits and pieces.

But how about a tool that will take a screenshot of the desired area AND let you scribble over it, how much time would that save…?

Awesome Screenshot

I looked at Awesome Screenshot for Google Chrome, Firefox and Safari.  This is a great tool for annotating sections of a webpage to share with anyone; using boxes, circles, free-hand, lines, arrows, blurring out sensitive bits and adding in text.

However, it is not so good if you are making a few notes and want to go back to change a note you have made, without deleting everything you have done since that point.

Pixlr Grabber (NOW RETIRED – 2014)

Another Google Chrome and Firefox extension is Pixlr Grabber. This allows you to take a screenshot of the desired area of the webpage and then loads it into Pixlr for editing. With so many features similar to Photoshop it’s quick and easy to get your head around. You can then save these images to send to colleagues or to combine in a document for more extensive notes to go with the annotated images.

Page Serif

For this I experimented with a free version of Page Serif, (looking for a free alternative to InDesign), which is quite handy for very small layouts – up to five pages.  The features are limited, but I find it useful for small documents. For larger ones, I created new documents for every five pages and printed to pdf, then joined them together. Not time efficient if you need to make changes! I’ll stick to word for compiling my document for now and use the free Page Serif for birthday cards.

 And the Winner is…..

All in all, these tools are useful depending on the type of work you want to do. For any future client ‘how-to’ documents, I’ll be using the feature-rich Pixlr Grabber.


Sadly, our favourite tool has now been retired, to allocate more time and resources on other products. The good folks over at Pixlr recommend using Jing as an alternative. We’ll be trying this one out and are sure there will be more to review in the near future…