Что такое 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». Скорее всего он будет первым в выдаче. Вот как он выглядит…
Очень понравился этот плагин, так как он прост в работе и полностью на русском языке.
Первое, что необходимо сделать после вызова окна плагина (кликаем по иконке в панели инструментов) — это загрузить скриншот макета сайта. Скриншот можете сделать именно той области, которую хотите проверить. Например, шапка сайта. Создать скриншот можно как угодно, я лично пользуюсь небольшой программкой под названием Joxi.
Добавляем наш скрин в окно PerfectPixel. После этого в окне браузера появится наслоение данной картинки над нашим сверстанным шаблоном. Теперь необходимо совместить картинку с элементами шаблона. Просто перемещаем скрин, зацепив левой кнопкой мыши. Можно совместить только один блок, например, логотип в шапке сайта и далее «плясать» от него.
Наслоение скриншота макета над сверстанным шаблоном
Если трудно попасть мышкой, то выставляете примерно и двигаете далее стрелками клавиатуры. Также есть возможность двигать картинку стрелками в окне PerfectPixel.
После того, как выставили далее блокируем слой с картинкой, чтобы он не съезжал никуда.
Вообще обратите внимание на кнопочки слева и справа от замочка. Иконка глаза отключает/включает скриншот, иконка фильтра позволяет приглушить некоторые цвета, тем самым выделяя сопоставляемые слои.
Выделение слоев в Perfect Pixel
Поиграйтесь также прозрачностью слоя — перемещайте ползунок влево — вправо. Выставите то значение, с которым вам комфортно работать.
Теперь мы видим, что нужно править. Открываем инспектор кода и вносим правки. В идеале оба слоя должны наложиться друг на друга без отклонений. Но есть тут одно «НО»…
Например, не всегда в дизайне бывают идеально указаны отступы между пунктами меню. Всегда найдется отклонений в 1-2 пикс. На глаз не видно, но при верстке в пиксель перфект могут возникнуть сложности. Я считаю, что не стоит относиться к этому с фанатизмом. Правим косячки дизайнера и объясняем заказчику, что так быть не должно. Также, если вы начинаете подгонять под дизайн, перемещая элементы отрицательными отступами, то явно тут делаете что-то не то. В общем, такого быть не должно.
Вот в принципе и все. Вот такой вот полезный инструмент. Напоследок скажу, что не всем заказчикам принципиально прям в пиксель перфект, но лично я проверяю по умолчанию свою верстку на соответствие.
Остались вопросы? Задавайте в комментариях. До встречи в следующих постах!
Остались вопросы? Посмотрите видео.
Что такое pixel perfect
Всем привет. Сегодня хочу рассказать по Pixel Perfect в верстка сайта.
Рассмотрим три основных пунктов для понимания Pixel Perfect.
Что такое Pixel Perfect верстка?
Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.
По современным требованиям к верстке Pixel Perfect уже чуть ли не стандарт де-факто, но стандарта Pixel Perfect нет.
Дизайн должен быть продуман до мелочей.
В частности дизайнеры допускают ошибки, например: есть разделители между элементами списка новостей, но пункты разной высоты, и если всё это сверстать и задать правильные отступы, то при наложении хотя бы один разделитель не попадает точь-в-точь туда же, где он на картинке. Или какая-нибудь иконка по логике дизайна находится по центру, а в дизайне съехала на несколько пикселей. И таких моментов много, просто это самые частые из того, что бывает.
В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке.
Должен ли разработчик всё это подгонять под дизайн, не обращая внимания на здравый смысл? Или же он должен делать хороший интерфейс, который можно будет легко расширять, который не будет обладать массой захардкоденных параметров, используемых исключительно затем, чтобы конкретная иконочка отображалась в конкретном месте именно так, как нарисовали?
Все это – адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.
Применение Pixel Perfect верстки
Техника работы с Pixel Perfect версткой осуществляется за счет применения особых плагинов, созданных специально для определенных браузеров, а также с помощью специализированных скриптов. Основные этапы работы с Pixel Perfect версткой включают в себя такие процедуры:
Инструменты для Pixel Perfect верстки
Pixel Perfect верстка требует наличия определенных плагинов или скриптов для возможности осуществления точной корректировки картинок и настроек. Среди наиболее популярных и эффективных плагинов и скриптов для Pixel Perfect верстки стоит выделить:
Все скрипты и плагины отличаются удобным и понятным интерфейсом, широкими функциональными возможностями, легкостью подключения и комфортными для работы настройками, позволяющими верстать коды быстрее и эффективнее.
Что такое 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 верстка является идеальным решением для доведения качества контента до максимально возможного уровня.