Приветствую вас дорогой коллега. Часто в тех. задании заказчика можно встретить такой пункт, как верстка pixel perfect. Что это такое разберём в данной статье.
Если перевести дословно, то Perfect pixel означает — прекрасный пиксель. То есть здесь задумка сводится к тому, что в идеале ваш сверстанный шаблон должен в точности соответствовать макету дизайна. Казалось бы — нет проблем, я верстаю достаточно хорошо и быстро, но…
Как же верстать в pixel perfect? Для начала, верстаем, не задумываясь ни о каких соответствиях. Все размеры берем с макета в точности. Если шрифт, например, указан не целым числом, то я его округляю до целого в большую или меньшую сторону. Отступы padding и поля margin я могу взять с макета или на глаз, благо опыта уже хватает, чтобы определить более менее точно. Вообще определить margin и padding не проблема, в Figma, Zeplin или в том же Photoshop делается это довольно просто. Но все это требует времени, а время в верстке также, как и качество также играет весомую роль.
Когда макет сверстан можно проверять на точное соответствие макету. Вам может показаться, что вы сделали все правильно и у вас соответствуют все расстояния между элементами, соблюдены все размеры и все на глаз смотрится идеально. Но это только на глаз. Я долгое время так и верстал. Но что будет, если наложить полупрозрачную картинку макета на ваш шаблон? Как это сделать легко?
Для проверки верстки в Pixel perfect существуют плагины для браузеров, в основном для Chrome и Firefox. Я использую Firefox Developer поэтому расскажу про тот плагин, который сам использую.
Я сейчас не буду в подробностях рассказывать, как устанавливать плагины для браузера. Это все делается элементарно. И так, заходим на страницу плагинов Firefox и в поиске вбиваем «perfect pixel». В найденном списке устанавливаем под названием «PerfectPixel». Скорее всего он будет первым в выдаче. Вот как он выглядит…
Очень понравился этот плагин, так как он прост в работе и полностью на русском языке.
Первое, что необходимо сделать после вызова окна плагина (кликаем по иконке в панели инструментов) — это загрузить скриншот макета сайта. Скриншот можете сделать именно той области, которую хотите проверить. Например, шапка сайта. Создать скриншот можно как угодно, я лично пользуюсь небольшой программкой под названием Joxi.
Добавляем наш скрин в окно PerfectPixel. После этого в окне браузера появится наслоение данной картинки над нашим сверстанным шаблоном. Теперь необходимо совместить картинку с элементами шаблона. Просто перемещаем скрин, зацепив левой кнопкой мыши. Можно совместить только один блок, например, логотип в шапке сайта и далее «плясать» от него.
Если трудно попасть мышкой, то выставляете примерно и двигаете далее стрелками клавиатуры. Также есть возможность двигать картинку стрелками в окне PerfectPixel.
После того, как выставили далее блокируем слой с картинкой, чтобы он не съезжал никуда.
Вообще обратите внимание на кнопочки слева и справа от замочка. Иконка глаза отключает/включает скриншот, иконка фильтра позволяет приглушить некоторые цвета, тем самым выделяя сопоставляемые слои.
Поиграйтесь также прозрачностью слоя — перемещайте ползунок влево — вправо. Выставите то значение, с которым вам комфортно работать.
Теперь мы видим, что нужно править. Открываем инспектор кода и вносим правки. В идеале оба слоя должны наложиться друг на друга без отклонений. Но есть тут одно «НО»…
Например, не всегда в дизайне бывают идеально указаны отступы между пунктами меню. Всегда найдется отклонений в 1-2 пикс. На глаз не видно, но при верстке в пиксель перфект могут возникнуть сложности. Я считаю, что не стоит относиться к этому с фанатизмом. Правим косячки дизайнера и объясняем заказчику, что так быть не должно. Также, если вы начинаете подгонять под дизайн, перемещая элементы отрицательными отступами, то явно тут делаете что-то не то. В общем, такого быть не должно.
Вот в принципе и все. Вот такой вот полезный инструмент. Напоследок скажу, что не всем заказчикам принципиально прям в пиксель перфект, но лично я проверяю по умолчанию свою верстку на соответствие.
Остались вопросы? Задавайте в комментариях. До встречи в следующих постах!
(5 оценок, среднее: 4,40 из 5)
Загрузка...