Pixel perfect plugin. Let's meet Pixel Perfect. Quick reference to using the pixLayout script
Review of plugins and scripts for working in technology Pixel Perfect.
First of all, what is the Pixel Perfect technique? Everything is simple and you can guess by the name - this is a layout technique in which the layout of the HTML template matches exactly (pixel-for-pixel) the original PSD layout.
In other words, if you superimpose the “picture” of the designed HTML template onto the picture of the original PSD layout, then both pictures should match. All elements of the pictures must be combined - text, images, graphic elements.
According to modern requirements for layout, Pixel Perfect is almost a de facto standard. So it is vital to study this issue if you have the desire and desire to have many orders and customers.
At the time of writing, the Pixel Perfect technique is implemented using appropriate browser plugins or using specialized scripts. Two plugins and two scripts will be briefly discussed below, but in all cases the steps to test Pixel Perfect are the same.
Originally in Photoshop program the original PSD layout is saved as an image in the format
| 1 | .png |
This is the whole simple Pixel Perfect procedure for checking the layout of the page. Where elements on the page do not match the original, the values in the style files are corrected.
Pixel Perfect for FirefoxFor the Firefox browser there is a Pixel Perfect plugin for checking the page layout of the same name.
After installing the Pixel Perfect plugin, its icon will appear in the Firefox browser toolbar. It is worth saying that the Pixel Perfect plugin only supports latest versions Firefox browser(for example, in version v.31 this plugin will not work).
Now you need to open the original PSD layout in Photoshop and save it entirely as an image in the format
| 1 | .png |
Important! Before exporting to a PNG image, the PSD layout must be brought to its original size! For this purpose, Photoshop has a reserved hotkey combination: Ctrl+1 - for Windows\Linux, Cmd+1 - for Mac OS X.
Once the PNG copy of the PSD layout is prepared and saved, open the HTML page based on this layout in the Firefox browser window.
Launch the Pixel Perfect plugin by clicking on its icon in the browser toolbar. A plugin window will immediately appear in which it will prompt us to select a pre-prepared PNG image (a copy of the PSD layout):
Click on the “Add Layer” button, select the prepared PNG image and get the result - the overlay of two layers (designed and original):
We see how the text and button of the HTML page do not match the PNG original. Therefore, open the styles tab in Firebug (this plugin is activated automatically when you launch the Pixel Perfect plugin) and start editing/adjusting:
Pay attention to the “Invert” mode of the Pixel Perfect plugin - with it you can very accurately adjust the elements of the HTML page.
The process described above consists of working with the Pixel Perfect plugin, as well as Pixel Perfect layout as such. Everything is extremely simple.
Below is a video that shows the process of working with the Pixel Perfect plugin (the video is not mine, so I am not responsible for the quality in every sense) - for clarity of work it will go:
The review of the Pixel Perfect plugin for the Firefox browser is over.
PerfectPixel under Google ChromeTo connect to the page being tested, you must register basic set lines:
$ (function ()( $ . pixlayout ( "/path_to_picture/picture.ext" ); ));You can supplement the basic set by specifying parameters in the script ( taken from the official website):
$ (function ()( $ . pixlayout (( src : "/img/layout.jpg" , opacity : 0.8 , top : 50 , center : true , clip : true , show : true ), ".wrapper" ); ) );Quick reference to using the pixLayout script A quick reference to using the pixLayout script is provided in the two paragraphs below ():
also taken from the official website- Moving
- buttons: ‘left’, ‘right’, ‘up’, ‘down’
- buttons: W , A , S , D when the picture is visible
- Operations Destroy ( remove all html and css code pixLayout from page
- ) - a cross in the upper right corner of the panel;
- Pin the panel - icon in the upper right corner of the panel;
- Quick reference - question mark in the upper right corner of the panel;
- Collapse parameters - “up” arrow at the bottom of the panel;
Show\hide the picture - the central button of the navigation panel or Shift + E. Below is official video
, demonstrating how to work with the pixLayout script:In this short review, we got acquainted with four tools for pixel perfect layout. Two of them are free plugins for browsers. The other two are JavaScript scripts to connect to an HTML page.
What to choose for your work is up to everyone to decide.
The best thing about browser plugins is that they are free, easy to install, and easy to use.
The downside to the X-Precise script is that it is paid ($5), requires a connection to the HTML page being checked, and depends on the jQuery library. The disadvantage of pixLayout can also be said that in order for it to work, it requires additional “fuss” with connecting to the HTML page.
However, the advantage of both scripts is the indisputable fact that this is a cross-browser solution, absolutely independent of any browser (Firefox, Chrome, Opera, Safari) or the version of a particular browser. The scripts will work the same in all cases.
The PerfectPixel extension for Google Chrome helps layout designers and web developers create website layouts that best match the design approved by the customer.
Open the page you are developing in Chrome, launch PerfectPixel, add new layer- a task picture, and now you can superimpose the image on the result in real time, compare and correct defects. You can see how the extension works by watching this video:
Multiple layers per page are supported, and the set of layers is different for different domains. Added layers and their attributes are saved if you close the browser and turn off the computer.
For developer convenience, there is a Lock function - when activated, you can interact with page elements that are located under the active layer. You can also change the transparency of the layer, give it explicit coordinates, change the scale (useful for Retina testing images).
For those who want to work with the tool as efficiently as possible, hotkeys and mouse operating modes are supported, full list which are available on the official website of the project: www.welldonecode.com/perfectpixel/shortcuts.
The control panel can be minimized to the right edge of the screen by double-clicking on the title. Mini mode is useful when testing responsive designs on small screen sizes.
The extension is regularly updated, new functions and hotkeys are added, and bugs are fixed. We welcome any comments and suggestions, please write to us by email: [email protected]. In the near future, it is planned to release versions for other browsers: Firefox, Safari, IE, and implement synchronization of layers and settings via the cloud. Subscribe to the newsletter to stay informed about the release dates of new functionality on the official website: www.welldonecode.com/perfextpixel.
I will be happy to answer your questions here in the comments or by email.
Glad to meet you in the Chrome.RF community!
If you are just starting to master the computer and use various software and you need a program for viewing images, download Pixel Perfect. This viewer is implemented so simply that even an inexperienced user can easily master it, despite the fact that the developers did not want to worry about localizing the product for Russian-speaking users (and generally abandoned their brainchild ten years ago).
About the interfaceAs mentioned earlier, Pixel Perfect has rather meager functionality. It may seem very limited to those users who are accustomed to multitasking viewers that can not only display photographs and pictures, but also edit them, print them, or even publish them online. Therefore, if you need many functions, we recommend that you bypass this software by finding an analogue, for example -.
Pixel Perfect allows you to open and view images in JPEG, PNG, GIF and BMP formats. However, the program does not support moving from one image to another and, due to the fact that there is no “flipping” button, each image will have to be opened separately. While opening a file, the viewer at the bottom of the screen shows all technical information about the object, which is quite convenient. When viewing, users can center the image and stretch it.
Features of workPixel Perfect is distributed in a portable format, which further simplifies the user experience. There is no need to worry about installation, just unzip the downloaded archive and run the executable file. The viewer identifies non-essential requirements for PC hardware and Windows versions, which is not installed.
Results- lack of a Russified interface;
- distributed in portable format;
- The program's tools are based on performing one function - displaying graphic files;
- demonstration of technical data while viewing the image;
- software no longer supported by developers.
I'll start from afar. Not long ago I joined HTML Academy as a mentor. In addition to the fact that mentoring helps you organize your knowledge, it amazingly stimulates the development of various useful things, because in the process interesting tasks appear, the solution of which can be conveniently automated.
Students receive a three-page instructional design, each with layouts for three states: mobile, tablet, and desktop - for a total of nine layouts. In the process of laying out an adaptive page, it makes sense to periodically change the size of the window and check that when adding styles for the desktop version, for example, the mobile one did not break. What is the best way to check for compliance with the layout?
Screenshots, which are used in large projects, are too heavy for such a task; we need something very simple so that any beginner can use it.
The first thing I thought of, of course, was the Pixel Perfect plugin (at least it’s available for Chrome and Firefox), but it’s not suitable for a number of reasons. For example, loaded layouts cannot change when switching between pages and when changing the browser window, and switching them manually every time will quickly get boring. Moreover, there are media expressions that can perfectly switch layouts for us.
My very first solution looked like this:
BODY ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( BODY ( background- image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( BODY ( background-image: url("img/index-desktop.png"); ) )
This code is inserted into every page. It sets the necessary media expressions, and links to pictures are changed to the actual layouts for each specific page.
Layouts change when switching between pages and when resizing the window, this can already be used, and it is quite convenient. The layouts lie directly under the markings, so you don’t have to go to the store all the time to get them. graphics editor, so even this simple design can significantly save time.
But as styles are written, the page appears with its own backgrounds and pictures, and the layouts in the bottom layer become invisible. What should I do?
My next solution was an extension for Chrome, which creates translucent layer with layouts. When you resize the window, the layouts are changed using media expressions, as in the previous case. As a bonus, we added control over the transparency of the layout layer and the ability to enable the difference blend mode to make it easier to find differences.
It turned out to be a wonderful thing. But it only works in Chrome, key points to switch layouts and paths to images need to be set in the configs of the extension itself, the layout images must be located inside the extension, and there were all sorts of other restrictions. In general, not universal, for each new project you will need manual setting and this is not at all suitable for beginners.
I wanted to find some very, very simple solution so that anyone could cope with the setup and installation, and at the same time he would at least roughly understand what he was doing.
To compare markup with layouts, you need two layers: a layer with markup and a layer with layouts. On the one hand, you can manually insert a layer with layouts into the page layout, on the other hand, there is a high risk of forgetting it there when it is no longer needed, so the next option was to use existing page elements as layers.
If you set layouts as the background for , when you change the transparency, the layouts will also become translucent, so it is better to use the element as a layer with layouts:
HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( HTML ( background- image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop.png"); ) )
As in the previous case, the layouts will lie under the markup, but now if a background is specified, they will not be visible. Let's make the markup layer semi-transparent by adding opacity for :
/* Use as a layer with layouts */ HTML ( background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min- width: 768px) ( HTML ( background-image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index-desktop .png"); ) ) /* Make the markup layer semi-transparent */ BODY ( opacity: .5; )
This can also be used somehow, but this solution lacked convenient transparency controls, so I wrote a small script that adds the following panel to the page:
It allows you to control transparency (in this case, instead of layouts there is simply a striped background), it can be dragged around the page and can be turned off if not needed.
I decided not to make a browser extension so as not to limit the number of browsers in which it can be used.
The installation ends up looking like this:
In my opinion, it turned out to be a fairly convenient tool, but something could certainly be improved. If you have any ideas on this matter, write them to me in the comments. I will also be interested in how you solve such problems and what tools you use for this.
UPD: the library has moved to npm, thanks to all participants
Good afternoon friends. The other day Dima Shuleshov contacted me and offered me a topic for an interesting article (Dima, hello!). Well, for me it’s interesting and relevant, I hope it’s useful to you too, for someone. These are a few lines of code that will help you layout landing page exactly with the layout.
In addition, you will significantly reduce the time spent measuring distances and switching between Photoshop, the browser window and a text editor.
The finished result boils down to the fact that you have a button in your project, fixed in the upper left corner (any place), when you click on it, a layout (picture) with a certain transparency is superimposed on your layout, and you can evaluate how accurate your indents are , dimensions, positioning corresponds to the design. To understand, you need to try. I recommend downloading the source and seeing how it works, or play this short video:
So, if you had problems with meticulous customers who check every pixel, then now such a problem should no longer arise. Let's finally realize this effect.
First of all, as often happens, we connect the jQuery library:
Since in most projects it is already connected, be sure to make sure that you do not do this again. This can cause conflict, and it will take you a long time to figure out exactly why it arises.
Now, let's add some tags inside our project. For me it looks like this:
Pixel Perfect
Where the first div is a block responsible for the button, and the second is for the overlay of our layout. In order for it to be applied correctly, you need to make a few simple settings:
P ( background: url(../images/maket.jpg) no-repeat; /* Your layout */ width: 1255px;/* layout width */ height: 750px;/* layout height */ left: calc(50 % - 627.5px);/* second value, half of the layout width*/ position: absolute; opacity: 0.4 !important; z-index: 97);
Here are 4 parameters that are accompanied by a comment and need to be replaced with your own. Everything is simple!
Now, let's style the button. If you care appearance, then edit, otherwise you can leave it as is.
#p ( position: fixed; left: 0; top: 0; width: 200px; height: 75px; background: #c36c2c; z-index: 99; cursor: pointer; text-align: center; font-size: 25px; line-height: 0px; color: #c36c2c; vertical-align: middle; transition: .3s ) #p:hover ( left: 0; line-height: 80px; background: #88d3c2;
Well, all that remains is to add a reaction to a click on the button. We will simply add/remove a class and change the transparency of the block with the layout on the background:
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));