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
- The developer saves a flat image of the artwork
- 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.
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.