pixel perfect что это такое
Знакомимся с Pixel Perfect
April 18, 2015
Обзор плагинов и скриптов для работы в технике Pixel Perfect.
По современным требованиям к верстке Pixel Perfect уже чуть ли не стандарт де-факто. Так что изучить этот вопрос жизненно необходимо, если есть желание и стремление иметь много заказов и заказчиков.
На момент написания статьи реализация техники Pixel Perfect осуществляется при помощи соответствующих плагинов под браузеры или же с помощью специализированных скриптов. Ниже будут кратко рассмотрены два плагина и два скрипта, однако во всех случаях шаги для проверки Pixel Perfect одинаковы.
В этом и заключается вся несложная процедура Pixel Perfect проверки сверстанной страницы. Там, где на странице элементы не совпадают с оригиналом, производится коррекция значений в файлах стилей.
Pixel Perfect под Firefox
Для браузера Firefox имеется плагин Pixel Perfect для одноименной проверки сверстанной страницы.
После установки плагина Pixel Perfect его значок появиться в панели инструментов браузера Firefox. Стоит сказать, что плагин Pixel Perfect поддерживает только последние версии браузера Firefox (к примеру, в версии v.31 этот плагин не будет работать).
Как только PNG-копия PSD-макета подготовлена и сохранена, открываем в окне браузера Firefox сверстанную по этому макету HTML-страницу.
Запускаем плагин Pixel Perfect щелчком мыши по его иконке в панели инструментов браузера. Сразу же появится окно плагина, в котором он предложит нам выбрать заранее подготовленное PNG-изображение (копию PSD-макета):
Видим, как не совпадают текст и кнопка HTML-страницы c PNG-оригиналом. Поэтому открываем в Firebug (этот плагин активируется автоматически при запуске плагина Pixel Perfect) вкладку со стилями и начинаем правку\подгонку:
В описанном выше процессе и заключается работа с плагином Pixel Perfect, а также Pixel Perfect верстка как таковая. Все предельно просто.
Рассмотрение плагина Pixel Perfect под браузер Firefox закончено.
PerfectPixel под Google Chrome
Плагин PerfectPixel под браузер Chrome очень похож по назначению и функционалу (и названию!) на плагин Pixel Perfect под браузер Firefox.
После этого запускаем плагин PerfectPixel, добавляем в нем новый слой (PNG-копию оригинала) и проверяем:
Функционал и работа плагина PerfectPixel ничем не отличается от функционала и работы плагина Pixel Perfect.
Ниже приведен видео-ролик с официальной страницы плагина PerfectPixel для демонстрации работы в нем:
Рассмотрение плагина PerfectPixel можно на этом закончить.
X-Precise
Если в двух предыдущих случаях были рассмотрены бесплатные плагины под два популярных браузера Firefox и Chrome, то в данном случае речь пойдет о платном ($5 на момент написания статьи) скрипте X-Precise, написанном на JavaScript и использующем библиотеку jQuery.
Подключение X-Precise
Для того, чтобы получить наложение картинки-оригинала на сверстанную страницу нужно подключить скрипт X-Precise к этой странице. Для этого необходимо скачать архив X-Precise.
Затем нужно распаковать папку _xprecise в корневую директорию проекта. И подключить скрипт xprecise.min.js к HTML-странице для запуска интерсейса скрипта X-Precise.
Обратите внимание, что скрипт для своей работы использует библиотеку jQuery (v1.3.2), поэтому подключение X-Precise должно выглядеть таким образом:
Затем нужно создать копии PSD-оригиналов в формате JPG и сохранить под тем же именем, что и файл оригинала в директории /_xprecise/ скрипта X-Precise.
При сохранении в формате JPG рекомендуется выбирать режим оттенков серого, так как при таком варианте лучше видна разница между сверстанной копией и оригиналом (помните об опции “Invert” плагина Pixel Perfect?).
Но это не означает, что нельзя загрузить файл изображения с другим именем. Для этого достаточно задать другой путь к файлу в интерфейсе скрипта X-Precise.
Использование X-Precise
Основным достоинством скрипта X-Precise является его способность автоматически запоминать и хранить все настройки.
pixLayout
Для подключения к тестируемой странице необходимо прописать базовый набор строк:
Можно дополнить базовый набор, указав в скрипте параметры (взято с официального сайта):
Краткая справка по использованию скрипта pixLayout
Краткая справка по использованию скрипта pixLayout приведена в двух абзацах ниже (также взята с официального сайта):
Перемещение
Операции
Ниже приведено официальное видео, демонстрирующее работу со скриптом pixLayout:
Заключение
В пользу плагинов под браузеры можно сказать, что они бесплатные, их легко установить и просто использовать.
В минус скрипту X-Precise можно сказать, что он платный ($5), требует подключения к проверяемой HTML-странице и зависит от библиотеки jQuery. В минус pixLayout также можно сказать, что для своей работы он требует дополнительной “возни” с подключением к HTML-странице.
Однако в плюс обоим скриптам можно привести тот неоспоримый факт, что это кроссбраузерное решение, абсолютно не зависящее от какого-либо браузера (Firefox, Chrome, Opera, Safari) или версии конкретного браузера. Скрипты будут работать одинаково во всех случаях.
Что такое Pixel Perfect в верстке: особенности, инструменты для работы, советы
Процесс верстки сайта всегда основывается на макете, созданном в Photoshop, Figma или другом редакторе. Там можно быстро узнать свойства того или иного элемента, его расположение относительно других объектов. Задачей верстальщика является максимально точно передать внешний вид и расположение элементов на макете в своей верстке. Однако при обычной верстке допускаются небольшие расхождения с оригинальным макетом, а в Pixel Perfect требуется максимально точное соответствие предложенному макету.
Особенности Pixel Perfect верстки
Порой технически невозможно сделать идеальную верстку “пиксель в пиксель” из-за особенностей отображения элементов в браузере, размера окон, графики, подготовленной дизайнером, необходимости адаптации макета под множество устройств. Золотым правилом является максимальное расхождение с макетом в 5 пикселей.
При верстке “пиксель в пиксель” могут возникнуть проблемы со следующими элементами:
Только в исключительных случаях нужно подгонять готовую верстку прямо “пиксель в пиксель”. Если же верстальщик видит, что готовый макет получается неудобным, некрасивым, хоть и полностью соответствующим макету от дизайнера, то лучше проигнорировать принцип Pixel Perfect и верстать так, чтобы макет хорошо смотрелся и был удобен для пользователя.
Где применяется Pixel Perfect верстка
Папка с макетом и исходниками
Очень желательно, но необязательно, получить минимальную документацию к дизайн-макету. Подробное описание поведения элементов и решений дизайнера поможет лучше подогнать верстку под Pixel Perfect и удовлетворить требования заказчика.
Как верстать в Pixel Perfect
Верстка “пиксель в пиксель” ничем не отличается от стандартного процесса верстки, за исключением необходимости следить за размерами элементов и сверять их с размерами на представленном шаблоне. Узнать точные размеры элементов, их расстояние друг от друга можно, используя встроенные инструменты графических редакторов. Например, в Photoshop есть инструмент “Линейка” для измерения расстояния между элементами, а свойства самих блоков можно посмотреть в верхней части экрана.
Инструменты для ускорения Pixel Perfect верстки
С помощью Avocado процесс работы с макетами и версткой значительно ускоряется, так как стили и HTML-каркас можно просто скопировать из программы. Правда, скопированные данные придется все равно править, подстраивая под вашу верстку, так как программа пока умеет преобразовывать в HTML/CSS только отдельные компоненты, а не весь макет.
Код элемента в Avocado
Инструменты для проверки верстки
Готовая верстка визуально может полностью соответствовать дизайн-макету, но ее требуется дополнительно проверить, особенно, если в ТЗ важным пунктом идет верстка “пиксель в пиксель”. Проверку точному соответствую макету можно организовать с помощью специальных плагинов для браузера.
Наиболее популярным плагином для проверки соответствий носит название Pixel Perfect. Существуют версии для браузеров с движком от Google Chrome и Mozilla Firefox. Плагин полностью бесплатен. Проверка производится с помощью заранее заготовленного изображения макета. Пока Pixel Perfect умеет работать только с изображениями PNG и JPG, поэтому макет придется преобразовать в один из этих форматов.
Плагин Pixel Perfect в Google Web Store
Вот краткая инструкция по использованию плагина в Google Chrome:
1. После установки плагина кликните в верхней панели браузера по его иконке.
2. Откроется поле, куда нужно будет перенести макет, преобразованный в изображение. Это можно сделать как простым перетаскиванием, так и воспользоваться специальной кнопкой.
Добавление макета для сравнения
3. После этого в браузере появится наслоение картинки макета, которая будет накладываться поверх верстки. Управлять расположением картинки можно с помощью специальной панели, а также клавишами со стрелками.
4. Наложите изображение так, чтобы оно максимально плотно прилегало к верстке. В идеале у вас должно получиться прилегание “пиксель в пиксель”.
5. Зафиксируйте изображение поверх верстки, воспользовавшись иконкой замка.
Наложение макета поверх верстки
6. Если нужно, то можно настроить прозрачность и контрастность накладываемого изображения, воспользовавшись соответствующими кнопками.
После наложения макета вы явно сможете понять, что нужно подправить в текущей верстке.
Заключение
Что такое Pixel Perfect в верстке
Приветствую вас дорогой коллега. Часто в тех. задании заказчика можно встретить такой пункт, как верстка pixel perfect. Что это такое разберём в данной статье.
Если перевести дословно, то Perfect pixel означает — прекрасный пиксель. То есть здесь задумка сводится к тому, что в идеале ваш сверстанный шаблон должен в точности соответствовать макету дизайна. Казалось бы — нет проблем, я верстаю достаточно хорошо и быстро, но…
Как же верстать в pixel perfect? Для начала, верстаем, не задумываясь ни о каких соответствиях. Все размеры берем с макета в точности. Если шрифт, например, указан не целым числом, то я его округляю до целого в большую или меньшую сторону. Отступы padding и поля margin я могу взять с макета или на глаз, благо опыта уже хватает, чтобы определить более менее точно. Вообще определить margin и padding не проблема, в Figma, Zeplin или в том же Photoshop делается это довольно просто. Но все это требует времени, а время в верстке также, как и качество также играет весомую роль.
Когда макет сверстан можно проверять на точное соответствие макету. Вам может показаться, что вы сделали все правильно и у вас соответствуют все расстояния между элементами, соблюдены все размеры и все на глаз смотрится идеально. Но это только на глаз. Я долгое время так и верстал. Но что будет, если наложить полупрозрачную картинку макета на ваш шаблон? Как это сделать легко?
Для проверки верстки в Pixel perfect существуют плагины для браузеров, в основном для Chrome и Firefox. Я использую Firefox Developer поэтому расскажу про тот плагин, который сам использую.
Я сейчас не буду в подробностях рассказывать, как устанавливать плагины для браузера. Это все делается элементарно. И так, заходим на страницу плагинов Firefox и в поиске вбиваем «perfect pixel». В найденном списке устанавливаем под названием «PerfectPixel». Скорее всего он будет первым в выдаче. Вот как он выглядит…
Расширение для Firefox PerfectPixel
Очень понравился этот плагин, так как он прост в работе и полностью на русском языке.
Первое, что необходимо сделать после вызова окна плагина (кликаем по иконке в панели инструментов) — это загрузить скриншот макета сайта. Скриншот можете сделать именно той области, которую хотите проверить. Например, шапка сайта. Создать скриншот можно как угодно, я лично пользуюсь небольшой программкой под названием Joxi.
Добавляем наш скрин в окно PerfectPixel. После этого в окне браузера появится наслоение данной картинки над нашим сверстанным шаблоном. Теперь необходимо совместить картинку с элементами шаблона. Просто перемещаем скрин, зацепив левой кнопкой мыши. Можно совместить только один блок, например, логотип в шапке сайта и далее «плясать» от него.
Наслоение скриншота макета над сверстанным шаблоном
Если трудно попасть мышкой, то выставляете примерно и двигаете далее стрелками клавиатуры. Также есть возможность двигать картинку стрелками в окне PerfectPixel.
После того, как выставили далее блокируем слой с картинкой, чтобы он не съезжал никуда.
Вообще обратите внимание на кнопочки слева и справа от замочка. Иконка глаза отключает/включает скриншот, иконка фильтра позволяет приглушить некоторые цвета, тем самым выделяя сопоставляемые слои.
Выделение слоев в Perfect Pixel
Поиграйтесь также прозрачностью слоя — перемещайте ползунок влево — вправо. Выставите то значение, с которым вам комфортно работать.
Теперь мы видим, что нужно править. Открываем инспектор кода и вносим правки. В идеале оба слоя должны наложиться друг на друга без отклонений. Но есть тут одно «НО»…
Например, не всегда в дизайне бывают идеально указаны отступы между пунктами меню. Всегда найдется отклонений в 1-2 пикс. На глаз не видно, но при верстке в пиксель перфект могут возникнуть сложности. Я считаю, что не стоит относиться к этому с фанатизмом. Правим косячки дизайнера и объясняем заказчику, что так быть не должно. Также, если вы начинаете подгонять под дизайн, перемещая элементы отрицательными отступами, то явно тут делаете что-то не то. В общем, такого быть не должно.
Вот в принципе и все. Вот такой вот полезный инструмент. Напоследок скажу, что не всем заказчикам принципиально прям в пиксель перфект, но лично я проверяю по умолчанию свою верстку на соответствие.
Остались вопросы? Задавайте в комментариях. До встречи в следующих постах!
Остались вопросы? Посмотрите видео.
Что такое Pixel Perfect верстка
Создайте рассылку в конструкторе за 15 минут. Отправляйте до 1500 писем в месяц бесплатно.
Отправить рассылку
Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.
Применение Pixel Perfect верстки
Техника работы с Pixel Perfect версткой осуществляется за счет применения особых плагинов, созданных специально для определенных браузеров, а также с помощью специализированных скриптов. Основные этапы работы с Pixel Perfect версткой включают в себя такие процедуры:
Плагины и скрипты для Pixel Perfect верстки
Pixel Perfect верстка требует наличия определенных плагинов или скриптов для возможности осуществления точной корректировки картинок и настроек. Среди наиболее популярных и эффективных плагинов и скриптов для Pixel Perfect верстки стоит выделить:
Все скрипты и плагины отличаются удобным и понятным интерфейсом, широкими функциональными возможностями, легкостью подключения и комфортными для работы настройками, позволяющими верстать коды быстрее и эффективнее.
Pixel Perfect верстка в email-рассылках
Pixel Perfect верстка активно применяется при создании email-рассылок. Основной целью рассылок является привлечение как можно большего количества потенциальных клиентов, а также качественное и своевременное информирование и удержание существующих.
В данном случае большое значение имеет не только содержание сообщения, но и способ его подачи. По этой причине Pixel Perfect верстка является идеальным решением для доведения качества контента до максимально возможного уровня.
Что такое Pixel Perfect вёрстка и зачем она нужна
Работа над сайтом начинается с разработки дизайна. Сначала дизайнер продумывает, как будут выглядеть страницы, и создает макет. Затем утверждает оформление с заказчиком и вносит итоговые правки.
Заказчик еще до появления сайта знает, как должен выглядеть каждый элемент на странице. И если в процессе работы что-то изменится, он может не принять работу. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету.
Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей.
Наложение вёрстки на макет. Видно, как отличаются отступы, межбуквенное расстояние у заголовков, размер шрифта и высота строк у текста.
Зачем учиться Pixel Perfect вёрстке начинающему разработчику?
Концепция Pixel Perfect вёрстки распространена в компаниях, которые занимаются разработкой сайтов и веб-приложений. Чтобы не испытывать проблем с заказчиками в коммерческой разработке и не затягивать сроки сдачи проектов, полезно сразу, ещё во время обучения, научиться верстать сайты «пиксель в пиксель». Для этого нужны время и практика, ноо с каждым проектом вы начнете быстрее разрабатывать сайты и проекты, полностью соответствующие макету.
Как верстать под Pixel Perfect?
Чтобы вёрстка соответствовала дизайну, нужно указывать точные размеры и группы шрифтов, высоту строк, отступы между элементами и блоками, размеры изображения.
Чтобы добиться еще большего сходства, разработчики используют программы и скрипты: X-Precise, pixLayout, Crosspixel и другие. Но один из наиболее удобных способов проверить совпадение сайта и макета — работа со специальным плагином PerfectPixel. С его помощью можно в браузере наложить макет на вёрстку и проверить, какие элементы нужно исправить.
Пример наложения макета на страницу в режиме инверсии. Белая «обводка» — разница между элементами двух слоёв.
Как проверить вёрстку с помощью PerfectPixel?
Чтобы проверить вёрстку, для начала нужно скачать плагин PerfectPixel для браузера Chrome, Opera или Edge. Для Firefox можно использовать Pixel Perfect Pro, а вот для Safari плагин пока находится в стадии разработки.
После установки в панели браузера появится розовая иконка — это и есть PerfectPixel Если она не появилась, добавьте самостоятельно. Для этого откройте «Расширения» (находится на панели или в настройках браузера) и закрепите иконку в меню быстрого запуска.
Так выглядит иконка PerfectPixel в браузере Chrome.
Иногда плагин бывает недоступен для работы с сайтами, запущенными локально, то есть не размещёнными в интернете. В таких случаях откройте в браузере раздел «Расширения» и найти в нём PerfectPixel. Затем нажмите на кнопку «Подробнее» и измените в настройках две функции: «разрешить открывать локальные файлы по ссылкам» и «разрешить доступ на всех сайтах».
Следующий этап — экспорт страницы макета в формате PNG из Figma или Adobe Photoshop. Если не помните, как работать с Figma, прочитайте статью «Старт в Figma для верстальщика».
Чтобы проверить сайт, откройте его в браузере, а затем в инструментах разработчика установите такую же ширину, как у экспортированного макета. Если, например, дизайнер подготовил макет для мобильной версии шириной 320px, тоже установите ширину 320px. Для этого откройте инструменты разработчика с помощью комбинаций:
OS X — Control + Command + I
Linux — Ctrl + Shift + I
В инструментах разработчика нажмите на значок переключения устройств (toggle device mode), а затем установите подходящую ширину вьюпорта (окна). Это нужно для того, чтобы макет точно ложился на страницу сайта, ведь макеты экспортируется статичными, а ширина страницы в браузере зависит от разрешения экрана вашего устройства.
Инструменты разработчика: стрелками показаны значок переключения устройств и окно для изменения ширины вьюпорта.
Далее нажмите на иконку PerfectPixel и добавьте слой для сравнения — макет страницы. После загрузки макета уточните размеры: на примере ниже показано, как установить размер 1:1. Если нужно, выровняйте расположение макета по высоте и ширине или зафиксируйте по центру.
Над полем с положением находятся три кнопки. Первая устанавливает прозрачность слоя с макетом. Вторая фиксирует этот слой. Третья в режиме инверсии цвета показывает разницу между сайтом и макетом. Используйте эти кнопки, чтобы сравнить вёрстку и утвержденный дизайн.
Работа с PerfectPixel: загружаем слой, выравниваем его и проверяем в режиме прозрачности или инверсии.
Что может пойти не так
Самые частые ошибки новичков при Pixel Perfect вёрстке — неправильное выравнивание слоёв, игнорирование межбуквенного интервала или высоты строк и хаотичный порядок редактуры. Из-за этого вёрстка начинает «ползти», а наложение вновь и вновь показывает разницу между расположением элементов. Есть несколько способов избежать таких ошибок.
Задайте положение макета: отцентрируйте его или выровняйте по левому верхнему углу сайта. Исправляйте отступы и размеры от верхних элементов к нижним, от левых к правым. Так гораздо быстрее и меньше рисков, что вам придется что-то переделывать.
Если вы используете резиновую вёрстку, проверяйте соответствие только на тех же размерах, которые использовал дизайнер в макете. На промежуточных состояниях, если их вид не предусмотрен макетом, добиваться схожести не нужно.
И главное: начинайте работу с PerfectPixel только тогда, когда полностью завершите работу над блоком или страницей: добавите стили и графику. Если после проверки измените какие-то элементы, придется заново подстраивать сайт под макет.
Насколько точным должно быть совпадение?
Сверстать сайт пиксель в пиксель с макетом невозможно и не нужно, и на это есть причины. Одна из них — специфика отображения шрифтов в разных браузерах и операционных системах. Например, если вёрстка в Chrome сделана точно по образцу, то в Safari элементы могут отличаться.
Резиновая вёрстка тоже не позволяет достичь полного сходства. Причина в том, что дизайнер готовит макеты только в нескольких размерах. Например, 320px для мобильной версии, 768px для планшета и 1440px для экранов компьютеров. Этого достаточно, чтобы проверить фиксированную или адаптивную вёрстку. Но страница, которая меняет размеры элементов и перестраивает сетки в зависимости от ширины окна браузера, на промежуточных состояниях будет отличаться от макета.
Дизайнер подготовил макеты только для двух разрешений: 320px и 1920px. Так как других макетов нет, разработчику не с чем сравнивать отрисовку сайта на промежуточных состояниях.
Порой перфекционизм излишен и приводит к увеличению объема кода. Из-за этого сайт становится тяжелее и медленнее. Такое возможно, если дизайнер выпустил макет с ошибками: у одного из элементов указал отличающиеся отступы, размеры или семейство шрифта. В таких случаях желательно обсудить правки с дизайнером или заказчиком: возможно, стоит внести правки в макет или проигнорировать ошибку.
Не пытайтесь добиться идеального совпадения: в реальной коммерческой разработке допускаются небольшие расхождения в отступах. Например, горизонтальная погрешность до 1-2px и вертикальная до 5px. Важнее научиться понимать сам принцип использования PerfectPixel.
Научиться концепции Pixel Perfect можно на профессии «Фронтенд-разработчик». Под контролем личного наставника вы создадите сайты, которые соответствуют концепции Pixel Perfect и требованиям коммерческой разработки.