1. Skip to navigation
  2. Skip to content
  3. Skip to sidebar



X-Precise is a simple yet effective method to achieve pixel precise results in your PSD to XHTML/CSS projects. By overlaying or underlaying a developed page with a semi-transparent image of the original design you can immediately see and repair any differences from the client's design. Using X-Precise as a method to ensure quality will save you both time and money, and your customers will be happier for it, too!

How it works?

X-Precise interface is initialized by attaching one JavaScript file to the page. An appearance of the interface can be seen on this sample page.

How to install?

Download the latest version of X-Precise. Unpack _xprecise folder to the root directory of your project. Attach xprecise.min.js to the page to load the X-Precise interface. X-Precise requires jQuery to run, other libraries are packed in xprecise.min.js.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="_xprecise/xprecise.min.js" type="text/javascript"></script>

Create overlay images for pages you are coding. Grayscale images are recommended to see the differences better. Use JPG for the overlay and save it with the same name as the page your are working on to X-Precise folder /_xprecise/. X-Precise will automatically try to load a JPG with the same name as the page has (index.html -> index.jpg) from this folder. Of course you can load an image with different name, too. Just be sure to change the path in X-Precise interface.

How to use?

The main feature of X-Precise is that it automatically stores and remembers all its settings so you should have everything at the same place with the same settings when you reload the page to check your changes. You can:

Any time you do any of the actions above the settings are automatically stored to a cookie. The settings are stored individually for every page you are using X-Precise with.

Recommendations: