Join us at TNW Conference 2022 for insights into the future of tech →

The heart of tech

This article was published on September 11, 2012

Uberlayer lets you overlay design mockups and reference them as you code

Uberlayer lets you overlay design mockups and reference them as you code
Harrison Weber
Story by

Harrison Weber

Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email. Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email.

Created by Amsterdam-based Twelve TwentyUberlayer lets you display any image as an overlay on your Mac and lock it in place. This deceptively simple utility can be used for a variety of purposes, like watermarking a presentation, but for Web designers, it makes it so easy to compare design mockups with final products.

When creating a site, it’s common to start off in Photoshop with a mockup and then code the working results match your desired design. Traditionally, this involves trial and error, making sure every single pixel matches up — something especially difficult to do with Web typography.

Normally that matching process involves taking screenshots of your work and overlaying things in Photoshop, checking back and forth. Uberlayer eliminates that back and forth, so you can actively adjust elements and compare them at the same time. That’s it.

If you’re an efficient-minded designer or developer, you know what to do. The app just received a Retina update and costs two bucks.

➤ Uberlayer, $2 via the Mac App Store

Featured image Brendan DeBrincat

Published
Back to top