Використання Adobe Photoshop і PerfectPixel в тестуванні верстки сайту

У цій статті ми розглянемо інструменти, які стануть незамінними помічниками для тестувальників при тестуванні верстки сайту, тобто перевірки відповідності зовнішнього вигляду сайту згідно макету дизайну. Простими словами, макет – це демонстрація того, як виглядатиме сайт після закінчення верстання.

Візитною карткою будь-якого сайту є його інтерфейс. Від першого враження залежить – чи залишиться користувач на сайті та продовжить подальшу роботу, або закриє та піде шукати сайт привабливіший, зручніший і зрозуміліший користувачеві. Веб-дизайнери створюють образ інтерфейсу майбутнього сайту, ретельно працюють над зовнішнім виглядом сторінок і відмальовують макет до дрібниць, а розробники реалізують їх задумки. Багато замовників в технічному завданні вказують, що верстання повинне в точності, до найменших деталей, відповідати тому, що зображено на макеті дизайну сайту. Тому так важливо ретельно протестувати зовнішній вигляд сторінки, порівняти заданий макет і помітити які-небудь невідповідності в готовому продукті.

Навіть якщо ви ніколи не стикалися з обробкою зображень, то напевно чули про такий графічний редактор як Adobe Photoshop. Ця програма є надзвичайно потужним додатком, яким користуються багато фотографів, дизайнери, а також тестувальники. Цей інструмент використовується у тестуванні верстки сайту і заслуговує окремої уваги. За допомогою його можна перевірити фінальну версію сайту на відповідність з макетом сайту.

Наступний інструмент, який використовується при тестуванні верстки сайту – це розширення PerfectPixel. Це браузерний плагін, завдяки якому можна порівняти зверстаний шаблон сайту з оригінальним макетом.

Далі на прикладах розглянемо як тестувати верстку, використовуючи ці інструменти.

Перевірка верстки за допомогою розширення PerfectPixel

1. Відкрийте сторінку сайту, яку треба протестувати, в одному з браузерів Google Chrome або Mozilla Firefox.
2. Встановіть розширення PerfectPixel і запустіть його, натиснувши на іконку в правому верхньому кутку браузера.

3. Завантажте початковий файл дизайн-макета сайту, натиснувши кнопку «Add your first layer».

4. Після того, як макет завантажений, відображається накладення двох шарів – зверстаного та оригінального. Тепер видно всі невідповідності та неточності і можна порівняти розташування елементів на сторінці. Також для зручності змінюється прозорість та закріплення шару, а також інвертація кольорів.

Перевірка верстки за допомогою Adobe Photoshop

1. Для роботи з Adobe Photoshop, заздалегідь встановлюємо програму на ПК.
2. Запускаємо Adobe Photoshop і відкриваємо макет сайту (початковий файл дизайну у форматах PSD, JPEG або PNG).

3. Відкриваємо сторінку сайту у браузері при розширенні, для якого було створено макет, і робимо скріншот сторінки сайту. Далі відкриваємо його у фотошопі.

4. Додаємо скріншот новим шаром до макету. Для цього необхідно затиснути кнопку «Ctrl», клікнути на шар зі скріншотом сайту в меню панелі шарів і скопіювати вибраний «Ctrl» + «C».

5. Вставляємо вибраний шар «Ctrl+V» на панель шарів до макету. Виставляємо прозорість, наприклад 70%.
   
6. Вирівнюємо розміри макету та скріншоту, щоб і макет, і скріншот були однакових пропорцій.
7. Порівнюємо розташування компонентів.

Таким чином ми виконали накладку у фотошопі. Після цього можна побачити усі невідповідності і сміло заводити баги.

За допомогою інструментів Adobe Photoshop і PerfectPixel можна знайти такі баги, як відмінності шрифтів, відмінності ширини або висоти блоків, відмінності кольорів елементів сайту, відсутності деяких елементів і т. ін. Використовуючи ці інструменти, можна якісно та швидко протестувати верстку сайту.