Что такое Pixel Perfect и как с ним работать

Пиксель Перфект - это техника верстки сайтов и web-приложений, при которой видимый в браузере результат пиксель-в-пиксель совпадает с psd-макетом. Техника реализации Pixel Perfect осуществляется при помощи плагинов для браузеров или с помощью скриптов.

PSD-макет из Photoshop сохраняется как изображение в png-формате. Затем в браузере открывается сверстанный по этому макету HTML-шаблон. При помощи плагина PNG-копия макета накладывается на сверстанную страницу. И становится видна разница в расположении элементов на HTML-странице и на PNG-копии.

Пример работы с плагином Pixel Perfect под Firefox

Открываем в окне браузера Firefox сверстанную по этому макету HTML-страницу. Запускаем плагин Pixel Perfect щелчком мыши по его иконке в панели инструментов браузера. Сразу же появится окно плагина, в котором он предложит нам выбрать заранее подготовленное PNG-изображение (копию PSD-макета):

Pixel Perfect Пиксель Перфект техника верстки сайтов пиксель в пиксель

Жмем на кнопку “Add Layer”, выбираем подготовленное PNG-изображение и получаем результат - наложение двух слоев (сверстанного и оригинального):

Pixel Perfect Пиксель Перфект техника верстки сайтов пиксель в пиксель

Видим, как не совпадают текст и кнопка HTML-страницы c PNG-оригиналом. Поэтому открываем в Firebug (этот плагин активируется автоматически при запуске плагина Pixel Perfect) вкладку со стилями и начинаем правку\подгонку:

Pixel Perfect Пиксель Перфект техника верстки сайтов пиксель в пиксель

Пример работы с платным скриптом X-Precise

Скачиваем архив X-Precise, распаковываем в корневую директорию проекта и подключаем его после библиотеки jQuery.

<script src="/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="_xprecise/xprecise.min.js" type="text/javascript"></script>

Затем нужно создать копии PSD-оригиналов в формате JPG и сохранить под тем же именем, что и файл оригинала в директории /_xprecise/ скрипта X-Precise. При сохранении в формате JPG рекомендуется выбирать режим оттенков серого, так как при таком варианте лучше видна разница между сверстанной копией и оригиналом.

Скрипт X-Precise попытается автоматически загрузить JPG-изображение из директории /_xprecise/ по имени файла этого изображения, считая, что имя файла иображения идентично имени файла открытой HTML-страницы (index.html -> index.jpg). Но это не означает, что нельзя загрузить файл изображения с другим именем. Для этого достаточно задать другой путь к файлу в интерфейсе скрипта X-Precise.

Основным достоинством скрипта X-Precise является его способность автоматически запоминать и хранить все настройки.

Пример работы с бесплатным скриптом pixLayout

pixLayout - это бесплатный скрипт наподобие X-Precise под библиотеку jQuery, предназначенный для попиксельной верстки созданный отечественным разработчиком. Для своей работы скрипт pixLayout может использовать изображение в двух популярных форматах - JPG или PNG.

Домашняя страничка проекта расположена здесь - pixLayout. Скрипт прекрасно документирован как на русском, так и на английском языках. Поупражняться в работе с ним можно на демо-страничке скрипта - pixLayout Test.

Для подключения к тестируемой странице необходимо прописать базовый набор строк:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pixlayout.js"></script>
<script type="text/javascript">
  $(function(){
    $.pixlayout("/path_to_picture/picture.ext");
  });
</script>

Базовый набор возможностей скрипта можно дополнить, указав в скрипте параметры:

$(function(){
  $.pixlayout({
    src: "/img/layout.jpg",
    opacity: 0.8,
    top: 50,
    center: true,
    clip: true,
    show: true
  }, ".wrapper");
});

Оригинал статьи: http://zencoder.ru/web-development/pixel-perfect/