Converting a website design in Photoshop to an actual website with pixel perfect accuracy can be quite challenging. One thing you can do to simplify this process is by overlaying a semi-transparent browser over your Photoshop design and then using a development tool like Chrome’s Inspector or Firebug to adjust page elements until that match the underlying design. To do this in Windows 7, you’ll need to enable an Aero theme which is in the Personalization Control Panel item.
Then, you must install a tool that can allow you to adjust the transparency of windows like Luke Payne’s Peek Through app. By toggling a hot-key like Windows + A on an active window, you can toggle it’s transparency. The transparency level is adjustable in the app.
Now you can overlay a browser like Chrome on top of a Photoshop design and adjust elements, text, spacing and anything else until they match the underlying Photoshop design.
Update: Following are some programs that can do the same thing and may be better.
- http://www.welldonecode.com/perfectpixel/
- http://imageoverlayutility.bitbucket.org/
Update: If you don’t want to install a browser extension, e.g. because the extension requires an insecure URL reference but the page your using it on is over SSL, you can use a standalone Windows program called Image Overlay Utility which is very lightweight and works just a well.
