Pixel Perfect: что это такое и как добиться идеальной верстки

Дизайнеры создают макет сайта в графическом редакторе, чаще всего в Figma. Задача верстальщика ― перенести этот макет в код так, чтобы он соответствовал изначальному замыслу. Однако, сделать это не так просто, как кажется: даже у самых опытных специалистов итоговый сайт может отличаться от дизайнерского варианта.

Зачастую несовпадение макета и финального результата приводит к проблемам с согласованием. Заказчик хочет получить сайт, который до единого пикселя совпадает с нарисованной дизайнером картинкой. И в итоге сайт отправляется на доработку к верстальщику.

Чтобы этого не происходило, используют подход Pixel Perfect — когда верстальщик старается повторить проект пиксель в пиксель. Он берет макет сайта, делает его полупрозрачным и накладывает на свою верстку. Так можно сразу увидеть, где использованы некорректные шрифты, размеры картинок, межбуквенные и межстрочные интервалы, и выявить другие проблемы верстки.

Если вы хотите научиться верстать сайты, пройдите курс «Профессия Веб-разработчик» от ProductStar. Он поможет с нуля изучить основы создания сайтов, понять, как работать с макетами, и собрать портфолио из собственных проектов. А после завершения обучения специалисты Карьерного центра помогут вам грамотно оформить резюме и найти работу по специальности.

Для работы с методом Pixel Perfect можно использовать несколько инструментов:

Самый простой вариант ― это сделать скриншот сайта, который у вас получился. Затем нужно открыть получившееся изображение в графическом редакторе и наложить на макет сайта, применив к нему эффект прозрачности в пределах 50%. Это позволит увидеть, где верстка соответствует макету, а где ― разъехалась.

Однако, этот метод не такой удобный в использовании: при изменении параметров верстки нужно будет повторять процедуру, описанную выше, чтобы сопоставить результат с макетом еще раз.

Для фреймворка jQuery создано несколько плагинов, которые позволяют сравнивать макеты и получившуюся верстку. Это X-Precise и pixLayout. Они работают быстро и довольно удобные. Но чтобы пользоваться этими плагинами нужно разбираться в программировании чуть лучше, чем это необходимо для верстки сайтов. Важно понимать, что если вы не используете jQuery в проекте, его нужно будет подключить.

Самый быстрый вариант создания точной верстки ― использовать расширение для браузера, например, Pixel Perfect Pro, PerfectPixel или Crosspixel. Они легко устанавливаются и их просто использовать. Также расширения позволяют сразу увидеть, какие изменения были внесены в верстку и совпадают ли они с макетом.

Для работы понадобится браузерное расширение, например, PerfectPixel. Чтобы его установить, нужно перейти на официальный сайт разработчика и выбрать браузер, с которого работаете. В настоящее время представлены версии для Google Chrome, Opera, Edge, но для Mozilla Firefox пока недоступна.

После этого необходимо установить плагин из магазина приложений для вашего браузера и можно приступить к его настройке:

• Откройте сверстанную вами страницу в браузере, затем нажмите на иконку расширения PerfectPixel в панели инструментов.
• Далее в панели управления выберите кнопку Add image — Добавить изображение. Предварительно нужно будет экспортировать макет в виде картинки из Figma или другого редактора, где работает дизайнер.
• Найдите файл макета страницы и откройте его. Так изображение наложится на страницу, которую вы верстаете.
• Чтобы настроить прозрачность картинки, используйте ползунок Opacity. Выставьте на нем 50%, чтобы было видно, насколько верстка соответствует макету.
• Если хотите выровнять изображение четко по макету, можно использовать стрелки клавиатуры. При нажатии на них макет будет сдвигаться на один пиксель.
• У расширения есть два режима наложения: обычный и с подсветкой элементов. Выберите тот, которым будет удобнее пользоваться.

Для начала понадобится макет сайта, подготовленный дизайнером. Необходимо экспортировать его в формате PNG или JPG для дальнейшей работы.

Если будете использовать скриншот сайта для сравнения с макетом, нужно заранее сделать его. Затем открыть оба файла в графическом редакторе, например, в Figma. И наложить одно изображение на другое ― снизу макет, сверху верстка. У файла, который лежит сверху, в свойствах следует уменьшить прозрачность до 50%.

После сравните их и найдите отличия, если есть. Измените код в редакторе, обновите страницу и сделайте еще один скриншот, который нужно будет снова наложить на макет. Повторяйте эти итерации до тех пор, пока верстка не станет соответствовать макету на 100%.

Также можно воспользоваться методом добавления скриншота на страницу. Для этого возьмите картинку с макетом и в коде пропишите ее адрес с тегом <img>. Нужно сделать так, чтобы она легла поверх макета, при этом параметр opacity следует выставить 0,5. В CSS пропишите свойства картинки:

.screenshot-maket {
  position: fixed; // Фиксируем позицию поверх сайта
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5; // Прозрачность 50% 
}

Если вы используете расширение для браузера, откройте страницу с сайтом, нажмите на плагин и добавьте картинку с макетом. Настройте прозрачность картинки и подгоните ее под какой-либо из элементов верстки, чтобы понять, где сайт совпадает с макетом, а где есть расхождения. Меняйте код сайта до тех пор, пока картинка не начнет совпадать с тем, что вы видите на странице.
С расширениями для браузера работать удобнее, так как не нужно писать дополнительный код, а также удалять картинку после завершения работы над версткой страницы. Кроме того, у расширений есть режим инверсии цветов картинки, чтобы расхождения с макетом были хорошо заметны.

Помните, не обязательно добиваться 100% сходства макета и верстки, так как в зависимости от браузера сайт может отображаться по-разному.

Стандарт современного интернета ― адаптивная верстка, то есть страница сайта должна подстраиваться под экран, на котором его просматривают. Поэтому создавать сайт, совпадающий пиксель в пиксель с макетом, часто бывает бессмысленно — таким его увидят только те пользователи, который будут просматривать страницу с монитора компьютера. Контент на сайте видоизменяется в зависимости от размера экрана: текст может быть разной длины, а картинки меняют расширение.

Негативно на подходе Pixel Perfect сказывается и работа разных браузеров с CSS-параметрами. То, что выглядит хорошо в одном браузере, может смотреться иначе в другом.

В качестве альтернативы можно использовать дизайн-системы. Это конструктор из элементов, который уже был утвержден, и теперь из него можно собирать сайт. Дизайн-система хорошо масштабируется, ее легко поддерживать. Она позволяет ускорить работу верстальщика.