5 минутPixel Perfect — это подход в верстке сайтов, который предполагает полное совпадение макета, нарисованного дизайнером, с финальным результатом. Чтобы этого добиться, используется несколько технологий. В статье расскажем, как верстать этим способом, пользоваться расширением PerfectPixel и проводить тестирование.
Особенности Pixel Perfect: зачем он нужен в веб-разработке
Дизайнеры создают макет сайта в графическом редакторе, чаще всего в Figma. Задача верстальщика ― перенести этот макет в код так, чтобы он соответствовал изначальному замыслу. Однако, сделать это не так просто, как кажется: даже у самых опытных специалистов итоговый сайт может отличаться от дизайнерского варианта.
Зачастую несовпадение макета и финального результата приводит к проблемам с согласованием. Заказчик хочет получить сайт, который до единого пикселя совпадает с нарисованной дизайнером картинкой. И в итоге сайт отправляется на доработку к верстальщику.
Чтобы этого не происходило, используют подход Pixel Perfect — когда верстальщик старается повторить проект пиксель в пиксель. Он берет макет сайта, делает его полупрозрачным и накладывает на свою верстку. Так можно сразу увидеть, где использованы некорректные шрифты, размеры картинок, межбуквенные и межстрочные интервалы, и выявить другие проблемы верстки.
Если вы хотите научиться верстать сайты, пройдите курс «Профессия Веб-разработчик» от ProductStar. Он поможет с нуля изучить основы создания сайтов, понять, как работать с макетами, и собрать портфолио из собственных проектов. А после завершения обучения специалисты Карьерного центра помогут вам грамотно оформить резюме и найти работу по специальности.
Инструменты для Pixel Perfect
Для работы с методом Pixel Perfect можно использовать несколько инструментов:
Скриншот сайта
Самый простой вариант ― это сделать скриншот сайта, который у вас получился. Затем нужно открыть получившееся изображение в графическом редакторе и наложить на макет сайта, применив к нему эффект прозрачности в пределах 50%. Это позволит увидеть, где верстка соответствует макету, а где ― разъехалась.
Однако, этот метод не такой удобный в использовании: при изменении параметров верстки нужно будет повторять процедуру, описанную выше, чтобы сопоставить результат с макетом еще раз.
Плагины для кода
Для фреймворка jQuery создано несколько плагинов, которые позволяют сравнивать макеты и получившуюся верстку. Это X-Precise и pixLayout. Они работают быстро и довольно удобные. Но чтобы пользоваться этими плагинами нужно разбираться в программировании чуть лучше, чем это необходимо для верстки сайтов. Важно понимать, что если вы не используете jQuery в проекте, его нужно будет подключить.
Расширение для браузера
Самый быстрый вариант создания точной верстки ― использовать расширение для браузера, например, Pixel Perfect Pro, PerfectPixel или Crosspixel. Они легко устанавливаются и их просто использовать. Также расширения позволяют сразу увидеть, какие изменения были внесены в верстку и совпадают ли они с макетом.
Как пользоваться Perfect Pixel
Для работы понадобится браузерное расширение, например, PerfectPixel. Чтобы его установить, нужно перейти на официальный сайт разработчика и выбрать браузер, с которого работаете. В настоящее время представлены версии для Google Chrome, Opera, Edge, но для Mozilla Firefox пока недоступна.
После этого необходимо установить плагин из магазина приложений для вашего браузера и можно приступить к его настройке:
Откройте сверстанную вами страницу в браузере, затем нажмите на иконку расширения PerfectPixel в панели инструментов.
Далее в панели управления выберите кнопку Add image — Добавить изображение. Предварительно нужно будет экспортировать макет в виде картинки из Figma или другого редактора, где работает дизайнер.
Найдите файл макета страницы и откройте его. Так изображение наложится на страницу, которую вы верстаете.
Чтобы настроить прозрачность картинки, используйте ползунок Opacity. Выставьте на нем 50%, чтобы было видно, насколько верстка соответствует макету.
Если хотите выровнять изображение четко по макету, можно использовать стрелки клавиатуры. При нажатии на них макет будет сдвигаться на один пиксель.
У расширения есть два режима наложения: обычный и с подсветкой элементов. Выберите тот, которым будет удобнее пользоваться.
Как верстать по Pixel Perfect: пошаговый процесс
Для начала понадобится макет сайта, подготовленный дизайнером. Необходимо экспортировать его в формате 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% сходства макета и верстки, так как в зависимости от браузера сайт может отображаться по-разному.
Варианты использования Perfect Pixel в проектах
Perfect Pixel можно применять для работы над векторными изображениями, например, логотипами и иконками, которые будут одинаково выглядеть на всех типах экранов.
С Perfect Pixel удобно разрабатывать сайты, используя сетки и направляющие, которые позволят быстро расставлять элементы на странице.
Также Perfect Pixel используют при обработке фотографий, чтобы не исказить их, а также для отрисовки изображений.
Этот подход позволяет повторять чужой дизайн интерфейсов в собственных проектах.
В каких случаях Pixel Perfect не подходит
Стандарт современного интернета ― адаптивная верстка, то есть страница сайта должна подстраиваться под экран, на котором его просматривают. Поэтому создавать сайт, совпадающий пиксель в пиксель с макетом, часто бывает бессмысленно — таким его увидят только те пользователи, который будут просматривать страницу с монитора компьютера. Контент на сайте видоизменяется в зависимости от размера экрана: текст может быть разной длины, а картинки меняют расширение.
Негативно на подходе Pixel Perfect сказывается и работа разных браузеров с CSS-параметрами. То, что выглядит хорошо в одном браузере, может смотреться иначе в другом.
В качестве альтернативы можно использовать дизайн-системы. Это конструктор из элементов, который уже был утвержден, и теперь из него можно собирать сайт. Дизайн-система хорошо масштабируется, ее легко поддерживать. Она позволяет ускорить работу верстальщика.
Как избегать распространенных ошибок в Pixel Perfect
Важно исключить неправильное выравнивание слоев, некорректные отступы, межстрочные и межбуквенные интервалы. Именно из-за этих параметров верстка «плывет» и перестает совпадать с макетом.
Чтобы работать было удобнее, начинайте менять код сайта с левого верхнего угла. Так вы сможете быстрее исправить все ошибки, и вам не придется вносить изменения два раза в расположение одного и того же элемента.
Добивайтесь сходства с макетом дизайна только на тех размерах экранов, которые предоставил дизайнер. В остальных случаях детального совпадения все равно не получить.
Работайте с PerfectPixel только после того, как закончите верстку. Если начать подгонять сайт под макет сразу, двойной работы не избежать.
