At Magnolia, we recently started using Picnik to annotate screenshots. We wanted a casual but obvious way to draw the reader's attention to an image detail. In this post I explain why we chose Picnik and how it is working so far.
Picnik is a photo editor that runs in the browser. You may have seen it as the embedded photo editor in Picasa Web Albums. The requirements that drove us to a Web-based tool were:
- No OS lock-in. We have technical writers working on Windows 7, Vista and Mac OSX. It is difficult to find a screenshot tool that works on all those platforms. Skitch is awesome on the Mac but a Windows version is still only hearsay.
- Consistent annotations. Annotations are the circles and arrows we add to screenshots to draw the reader's attention to whatever it is we write about. While any screenshot tool can take a plain screenshot, adding consistent annotation shapes is difficult unless everybody uses the same tool. Documentation ends up looking amateurish and poor if the shapes are not consistent.
- Casual, hand-drawn look. We wanted a casual, edgy look. Straight lines and rectangles are difficult to see on a UI that already has lots of straight lines. They also look incredibly boring. If you annotated something on a piece of paper, you would grab a pen and circle it. That's the look we wanted.
- Shared storage. Web-based tools promise cloud storage. Why should everybody take the same screenshot when a perfectly good example exists in a shared library? Why draw your own arrows with a shaky mouse if there's a nice-looking arrow in the toolbox?
I must emphasize that Picnik really isn't a screenshoot tool. It's a photo editor whose features are clearly geared towards processing photos. It's great for assembling favorite shots into a Christmas card but for taking a screenshot you still need a local tool, which is fine for us.
Picnik features we love and curse
Uploading an image is a snap. The image is opened in the editor immediately so no unnecessary browsing is needed. Besides upload, you can open an image from Flickr, Facebook and several other popular services.
Resizing to new dimensions works as expected. The quality of the reduced image is not as good as if you used Photoshop. The image is fuzzier, which can be a problem. Text in a screenshot must stay sharp and readable in smaller size too. To get around the issue, we either crop to the relevant area or keep the shot full-size. Modern browsers do a very good job at resizing in the viewport, certainly no worse than Picnik.
Canvas as a concept does not exist as in Picnik. When you need more room around the image, add a border. The border can be any color and width. Make it white and you effectively have a bigger canvas.
Shapes. I drew a collection of annotation shapes by hand in Skitch and saved them as PNG files. Then I uploaded them into a Picasa Web Album that is visible in the Photo Basket in Picnik. Now anybody in the team can drag-and-drop symbols onto an image. This solves the requirement that all writers use the same symbols to produce a consistent look and feel.
Text. Picnik has a huge variety of fonts to choose from. They are very hip and cool, which means they are perfect for a scary Halloween photo but not so great when you need readable text. We chose a font called Just Me Again Down Here by Kimberly Geswein. It's a good compromise between hand-drawn look and readability. We matched the font size to the shape stroke width.
Sharing and layers are my biggest grievance with Picnik. I asked on the help forum why sharing is so weird. Bottom line: edits are stored on the image owner's Picnik account and are not accessible to other users. This means that while you can save an image to a Picasa Web Album, other team members won't be able to edit it. The image is flat to them. This is a shame because picking up from where another use left would be fantastic. As for the shapes, we put them in a common Picasa account which all technical writers register in their Picnik. So at least the shapes are available to everyone.
So there you have it. Picnik works for us now. Drop a comment if you solved similar requirements in your team with something else.