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:
- Open / Close X-Precise interface
- Position X-Precise interface at the screen by dragging it around
- Set the overlay image and choose whether it should over or underlay the page
- Switch the overlay image on/off - and work with the page as you normally would
- Position the overlay image by dragging or changing its Top and Left coordinates
- Fine-tune the position of the overlay image, use W S A D keys when hovering over the image
- Change opacity of the overlay image
- Change opacity of the page
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:
- Try to fix the biggest differences from the client's design first. These are differences that the client can easily spot. Usually these are the exact position of various elements with fixed size like logos, banners, badges, buttons etc. They can also be custom font headings or navigation elements, alignment of the elements on the grid, padding and margin of the elements and their overall size. Keep in mind that designers often are more sensitive about their designs than you!
- Don't be a slave of X-Precise! Sometimes it's hard to achieve pixel accuracy, particularly in long content areas that contains long text or many repeating elements such as items listings and blog posts. This due to the fact that designers are less precise in these areas and don't use the same margin, padding etc. everywhere. A super pixel-precision usually isn't necessary in these cases, however, so you should rely more on your own eyes than X-Precise to judge if these sections look good in general.
- After long sections such as those mentioned above, sometimes another section may follow where pixel accuracy is desirable. This could for example be a custom bottom of the page or footer. With X-Precise, however, you can drag the overlay image over these areas and work with them until you achieve desired accuracy.
- Before sending the project to the client for a preview make sure you detach xprecise.js from the pages and remove /_xprecise/ folder with X-Precise and overlay images. You should backup this folder for later use.