When creating a website, in particular in the process of design integration, our specialists use the most modern approaches and methods of layout layouts. One of them is Pixel Perfect. This is a layout technique in which the HTML layout is exactly the same as the original layout. If you overlay a picture of the layout on top of the typeset HTML template, they will match. Moreover, all the elements will match: pictures, headings, text, etc. The implementation of Pixel Perfect in layout design will be discussed in this article.
There are several dedicated tools that make Pixel Perfect layout easier. These include both browser solutions and specialized scripts. Let’s consider these solutions in more detail.
In general, the algorithm looks like this. The first thing to do is save the original PSD layout in .png or .jpg format. Next, you need to open the laid out HTML template in a browser, overlay a copy of the layout on top, reduce its transparency. Now we can observe the difference in the arrangement of elements of the layout template and the original layout. All that remains now is to “adjust” the elements of the template so that the differences completely disappear.
Pixel Perfect for Firefox
For the Firefox browser, there is a Pixel Perfect plugin for checking the page layout.
After installing the Pixel Perfect plugin, its icon will appear in the Firefox browser toolbar. It should be said that the Pixel Perfect plugin only supports the latest versions of the Firefox browser (for example, in version v.31 this plugin will not work).
As mentioned above, you need to open the original PDS layout in Photoshop and save it in .png format. It is worth remembering that before exporting to a PNG image, the PSD layout must be resized to its original size! For this, the hotkeys combination is reserved in Photoshop: Ctrl + 1 – under Windows Linux, Cmd + 1 – under Mac OS X.
As soon as the PNG copy of the PSD layout is prepared and saved, open the HTML page laid out according to this layout in the Firefox browser window. Launch the Pixel Perfect plugin by clicking on its icon in the browser toolbar. The plugin window will immediately appear, in which it will offer us to select a prepared PNG image (a copy of the PSD layout):
Click on the “Add Layer” button, select the prepared PNG image and get the result – overlay of two layers (typeset and original):
We see how the text and the button of the HTML page with the PNG original do not match. Therefore, we open the developer tools (F12 key) and start editing / adjusting the styles to reduce the differences to zero.
The process described above is the work with the Pixel Perfect plugin, as well as the Pixel Perfect layout as such. Everything is extremely simple.
Perfect Pixel for Google Chrome
The methodology for working in the Google Chrome browser is similar to that in Firefox with the only difference that we use a different plugin (however, the names are almost completely the same). The functionality is similar and still intuitive.
Install PerfectPixel for Chrome browser. After installing PerfectPixel, you need to go to the Chrome browser extensions settings – chrome: // extensions / and activate the “Allow access to file URLs” checkbox for the plugin, thereby allowing the plugin to access local HTML pages:
After that, launch the PerfectPixel plugin, add a new layer in it (PNG copy of the original) and check:
It is clearly seen that the functionality and principle of operation of the plugin is similar to the analogue for Firefox, so there should be no difficulties.
Let’s just say a few words about why scripts are needed if there are convenient solutions for browsers. The undeniable advantage of scripts is that they are completely browser independent. They work equally well in Firefox, Chrome, Opera, Safari. And also do not depend on the specific version of browsers. Let’s go directly to the consideration of working with the first script.
In order to get the overlay of the original image on the typeset page, you need to connect the X-Precise script to this page. To do this, download the X-Precise archive. Then you need to unpack the _xprecise folder into the root directory of the project and connect the xprecise.min.js script to the HTML page to launch the X-Precise interface. Do not forget that the script requires the jQuery library (v1.3.2) to work correctly. This is how the connection of this script should look:
Next, you need to create JPG copies of the PSD originals and save under the same name as the original file in the / _xprecise / directory of the X-Precise script.
When saving in JPG format, it is recommended to select the grayscale mode, as this option better shows the difference between the layout copy and the original.
The X-Precise script will try to automatically load a JPG image from the / _xprecise / directory by the file name of this image, assuming the image file name is the same as the file name of the open HTML page (index.html -> index.jpg).
But this does not mean that you cannot upload an image file with a different name. To do this, simply specify a different path to the file in the X-Precise script interface.
The main advantage of the X-Precise script is its ability to automatically remember and store all settings.
Overall, the X-Precise script interface and application is no different from Pixel Perfect or PerfectPixel plugins.
pixLayout – the second script for the jQuery library, intended for pixel-by-pixel layout. However, unlike the previous script, pixLayout is free.
For its work, the pixLayout script can use an image in two popular formats – JPG or PNG.
The home page of the project is located here – http://pixlayout.polycreative.ru/. The script is perfectly documented in Russian, so there shouldn’t be any problems understanding how it works.
To connect to the page under test, you need to write a basic set of lines:
A quick reference for using the pixLayout script
A quick reference on using the pixLayout script is given in two paragraphs below (taken from the official site):
buttons: ‘left’, ‘right’, ‘up’, ‘down’
buttons: W, A, S, D when the picture is visible
navigation bar buttons
Destroy (remove all html and css pixLayout code from the page) – a cross in the upper right corner of the panel;
Dock Panel – icon in the upper right corner of the panel;
Brief Help – a question mark in the upper right corner of the panel;
Minimize parameters – up arrow at the bottom of the panel;
Show / hide picture – the central button of the navigation bar or Shift + E.
We have now completed our short excursion into Pixel Perfect layout. Layout designers have many tools that they can successfully use to achieve the desired result. What to use? It’s up to you to decide.
Browser plugins are easy to install and have an intuitive interface. Scripts are more versatile and flexible, although they take a little longer for initial configuration.
In conclusion, I would like to say that the Pixel Perfect technique is easy to learn. However, its implementation can take a long time. Therefore, you should always remember about some kind of compromise between layout and template.