Если в дизайне есть сетка, все отступы и размеры стандартизированы, то достаточно перенести их в вёрстку и пиксель‑пёрфект будет получаться автоматически.

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

Похожих плагинов для других браузеров я не знаю, поэтому для проверки в них я использую «дизайнерский» приём: делаю скриншот нужного элемента и вставляю в фотошоп поверх макета и сравниваю вручную. Минус этого подхода в том, что после каждого изменения приходится всё делать заново.

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

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Отправить
Поделиться
Запинить

Комментарии

В Zeplin есть замечательная функция Ghost Window — открывает отдельное окно, которое можно перетаскивать куда угодно, менять масштаб и прозрачность.

11 окт 2018

На сайте разработчика есть ссылки на плагины и для других браузеров: Сафари, Оперы, Фокса, ИЕ и Эджа. http://www.welldonecode.com/perfectpixel/

11 окт 2018

Рекомендуем похожие советы