Tutorial
Ok designers, this one is for you... Now you can test the skills of your web developers and see how close they can keep the integrity of your designs.
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.
Follow the instructions below to get started.
Pixel Perfect requires Firefox version 3.0.*, and the latest version of Firebug.
To install the Pixel Perfect Extension on Firefox:
- Go to the Pixel Perfect homepage here*
- Click on the "Download Plugin" link.
- Firefox will ask if you want to allow the Pixel Perfect Extension -- click on "Allow" to proceed.
- Firefox will ask if you want to install the Pixel Perfect Extension -- click on "Install Now" to proceed.
- Restart Firefox when prompted to complete installation.
- You should now see a Pixel Perfect tab in the Firebug extension panel.
- You can also download the extension from the Mozilla Add-ons site here.
Load up a sample website that you would like to test the plugin on and click on the icon to launch the Pixel Perfect panel.
To load your design compositions into the overlay list click the "Add overlay" menu option located in the Pixel Perfect main menu (see screenshot below).
A standard file browser will appear and you may select any standard graphic format that can be loaded into a regular XHTML page (jpg, png, etc).
You can add as many overlay files as you like.
Click on the square box located to the left of your overlay icon to toggle the overlay on. The overlay should now appear in the main browser window.
By default, the overlay is positioned to absolute top left. You can delete any overlay by clicking on the trash can located to the right of the overlay icon.
You can change the opacity to make your composition either more transparent or less transparent.
Making the composition more transparent will allow you to see your changes on the actual developed HTML below the composition.
Less transparency is useful for toggling the composition on and off to see pixel shifts.
By default the opacity will be set to 0.5.
The move controls are intended to be used for fine tuning. Initially when you toggle the overlay on, you can click and drag the overlay to roughly position it over-top of your developed HTML.
Use the move controls to move the overlay those last few pixels.
To inspect elements while the overlay is turned on, you must enable the "Lock?" option.
If you have some extra time and can make a short video of the plugin in action please send the link to [email protected].
- Plugin homepage - www.pixelperfectplugin.com
- Bugs/Issues - GitHub Issues Page