Often when a web developer gets busy converting initial design concepts into a functioning website, there’s a bit of a struggle comparing the original artwork to the product that is actively being developed.

Sure, you can take a screenshot of the project every time you finishing coding a module, and overlay it in Photoshop to see how it compares. The only problem is, this is a time consuming process.

A simple solution for a simple problem

We’ve gone ahead and written a super basic piece of javascript to overcome this problem. Here’s the basic idea:

  • The developer saves a flat image of the artwork
  • The javascript binds to a key (in our case, we use the z key)
  • When the key bind is triggered, the flat image is placed as the body elements background, and all other elements inside the body are set to 50% opacity.
  • Triggering the key bind again will set the page back to normal. It’s great for quick switching and comparing.

Although a super simple concept, this little trick has improved both our development accuracy and development speed.

An example

Here’s an example to show how it works. (The title is deliberately out of place to show the accuracy of this development method).

Press the “result” table, and then press the Z key to trigger the overlay comparison.