Using Adobe Photoshop and PerfectPixel in testing website layout

In this article, we will look at the tools that will become indispensable helpers for the testers in testing website layout, that is, checking the website appearance according to the design mock-up. In simple terms, mock-ups display how the site will look after finishing the layout.

The interface is a business card of any website. Whether a user will stay on the website or close it and will go to look for a more attractive, user-friendly and easy-to-understand website depends on the first impression. Web designers create the interface image of future websites, thoroughly work on page appearance and draw out the mock-up in detail while the developers realize their ideas. In the technical specification, many customers specify that the layout should match the mock-up to the smallest details. That is why it is important to test the web page appearance, compare the given mock-up and find the inconsistencies in the final product.

Even if you have never processed images, you must hear about such a graphic editor as Adobe Photoshop. This program is an application that is used by many photographers, designers and testers as well. This tool is also used in website layout testing and deserves special attention. 

Using it, you can check the final version of the site according to a mock-up.

The next tool used while testing the site's layout is the PerfectPixel extension. It is a browser plug-in using which you can compare the ready website template with the corresponding mock-up.

 Next, let us look at how to test a layout using these tools.

Checking the layout using PerfectPixel  

1. Open the website page, which you need to test in one of two browsers – Google Chrome or Mozilla Firefox.
2. Install the PerfectPixel extension and open it by clicking the icon in the upper right corner of the browser.

3. Upload the file with the initial website mock-up by clicking the «Add your first layer» button.

4. After uploading the mock-up, the overlay of two layers is displayed – the one after layout and the original one. Now when all the discrepancies and inaccuracies are seen, you can compare the placement of elements on the page. Also, for convenience, the transparency is changed, the layer is fixed, and colour inversion is applied.

Checking the layout using Adobe Photoshop

1. Install the program on the PC in advance.
2. Load Adobe Photoshop and open the website mock-up (the original design file in the PSD, JPEG or PNG formats.)

3. Open a website page, the one the mock-up was made for, in the browser with the extension turned on, and make a screenshot. Then open it in Adobe Photoshop.

4. Now you need to add the screenshot to the mock-up as a new layer. For this, hold the «Ctrl» button, click the layer with the website screenshot in the «Layers» panel menu and copy the chosen one by pressing «Ctrl» + «C».

5. Place the chosen layer by pressing the «Ctrl+V» keys on the «Layers» panel of the mock-up. Then, set transparency, for example, 70%. 
6. Make the mock-up and screenshot one size to have the same proportions.
7. Compare the placement of the components.

In this way, we create an image overlay in photoshop. After this, you can see all discrepancies and safely report bugs.

With the help of Adobe Photoshop and PerfectPixel, it is possible to find such bugs as differences in fonts, width or height of blocks, colors of the site elements, or absence of some elements. Using these tools, you can test the website layout fast and qualitatively.