Using Pixel Perfect

Hello everybody,
For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML page created by the UI developer.

This is how you can use this feature:

1. First of all, you have to install the Pixel Perfect add-on in Firefox.
2. Adding jpg file to the add-on – In latest version of Firefox the add overlay button (which used to be on the top-left corner) is missing. So in the new version, to make your file available to add-on you have to copy jpg file and paste it into user_overlays folder present in content directory of your Pixel Perfect installation folder.

3.Now your jpg will overlay on the web page. You can set the opacity and position of the overlay with the help of Options section as shown in the above screenshot.

Hope it helps.:)
Rajan Shergill
rajan@intelligrape.com