Shepherd Interactive

I really admire the work of our graphic designers, the way that they create compelling visual experiences that draw visitors in to engage with the content. Being a developer, it’s easy for me to focus on what is beautiful from a technical perspective, and so I appreciate how our designers lift my developer eyes out of the code and onto the visual aesthetics that are more important to visitors.

In most projects, there is a design phase followed by a development phase. The first phase consists of a designer putting together the visual look-and-feel for the site, and this gets feedback from developers, managers, and finally approval from the client. The deliverables for the design phase are “comps” which are usually Photoshop images depicting how the website would be rendered in a browser.

Several years ago, the way I would take these design comps and turn them into a website was a bit inefficient. I would have the design comp open in Photoshop in one window, the development website loaded into a browser window, and my code editor in another window. I would then proceed to write code in my editor and then switch over to the browser, reload, and then switch between the browser and Photoshop multiple times to see how closely the code produced a visual close to the comp. This workflow not only was inefficient but it also tended to produce results that did not exactly match the original design comps. This was a problem. I wanted to improve my efficiency while also honoring the designer’s labor to produce a visual, and the client’s expectation as to what the approved design would look like implemented.

So I came up with a utility script I call Overlay Comp which overlays the design comp directly onto the page under development. Once the comp is overlaid, it can be toggled on or off by repeatedly hitting Shift+Space. Furthermore, the comp can be displayed with a varying level of opacity so the underlying page can be seen through the design comp. With the Firebug panel open, page styles can be tweaked and their effects can be immediately seen all in one window; page elements can be dynamically repositioned so that they appear in the exact same locations as they appear in the overlaid comp.

Overlay Comp speeds up the implementation of pixel-perfect layouts that honor the design comps. It greatly facilitates the developer’s task of implementing a designer’s comp, and it helps developers ensure their layout looks the same across browsers.

Check out the project page to download and get documentation, and go to the examples page to see it in action.