Плагин pixel perfect. Знакомимся с Pixel Perfect

Если Вы только начинаете осваивать компьютер и использовать различный софт и Вам необходима программа для просмотра изображений, скачайте Pixel Perfect. Этот вьювер реализован настолько просто, что его с легкостью освоит даже неопытный пользователь, несмотря на то, что разработчики не пожелали позаботиться о локализации продукта для русскоговорящих пользователей (да и вообще забросили свое детище с десяток лет тому).

Об интерфейсе

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

Pixel Perfect позволяет открывать и просматривать изображения в форматах JPEG, PNG, GIF и BMP. При этом программа не поддерживает переход от одного изображения к другому и, ввиду того, что отсутствует кнопка "перелистывания", каждое изображение придется открывать отдельно. Во время открытия файла вьювер в нижней части экрана показывает всю техническую информацию об объекте, что довольно удобно. При просмотре пользователи могут отцентрировать изображение и растянуть его.

Особенности работы

Pixel Perfect распространяется в портативном формате, что еще больше упрощает процесс взаимодействия с пользователем. Нет нужды беспокоиться об установке, просто распакуйте скачанный архив и запустите исполняемый файл. Просмотрщик выявляет несущественные требования к "железу" ПК и к версии Windows, которая не нем установлена.

Итоги

• отсутствие русифицированного интерфейса;
• распространяется в портативном формате;
• инструментарий программы базируется на выполнении одной функции - отображении графических файлов;
• демонстрация технических данных во время просмотра изображения;
• программный продукт перестал поддерживаться разработчиками.

13/01/2017

Начну издалека. Не так давно я присоединилась к HTML Академии в качестве наставника. Помимо того, что наставничество помогает упорядочить свои знания, оно удивительным образом стимулирует разработку разных полезных штук, потому что в процессе появляются интересные задачи, решение которых можно удобно автоматизировать.

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

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

Первым делом я конечно вспомнила про плагин Pixel Perfect (он как минимум есть для Chrome и Firefox), но он не подходит по ряду причин. Например, загруженные макеты не умеют меняться при переходе между страницами и при изменении окна браузера, а переключать их каждый раз руками довольно быстро надоест. Тем более, что есть медиавыражения, которые прекрасно могут переключать макеты за нас.

Моё самое первое решение выглядело вот так:

BODY { background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); } @media (min-width: 768px) { BODY { background-image: url("img/index-tablet.png"); } } @media (min-width: 1024px) { BODY { background-image: url("img/index-desktop.png"); } }

Этот код вставляется в каждой страницы. В нём задаются нужные медиавыражения, а ссылки на картинки меняются на актуальные макеты для каждой конкретной страницы.

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

Но по мере написания стилей на странице появляются свои фоны и картинки, и макеты в нижнем слое становятся не видны. Как быть?

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

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

Мне хотелось найти какое-то совсем-совсем простое решение, чтобы любой смог бы справиться с настройкой и установкой, и чтобы при этом он хотя бы примерно понимал что он делает.

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

Если макеты задать фоном для , при изменении прозрачности макеты тоже станут полупрозрачными, поэтому в качестве слоя с макетами лучше использовать элемент :

HTML { background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); } @media (min-width: 768px) { HTML { background-image: url("img/index-tablet.png"); } } @media (min-width: 1024px) { HTML { background-image: url("img/index-desktop.png"); } }

Как и в предыдущем случае, макеты будут лежать под разметкой, но сейчас если у задан фон, их не будет видно. Сделаем слой с разметкой полупрозрачным, добавив opacity для :

/* Используем как слой с макетами */ HTML { background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); } @media (min-width: 768px) { HTML { background-image: url("img/index-tablet.png"); } } @media (min-width: 1024px) { HTML { background-image: url("img/index-desktop.png"); } } /* Делаем слой с разметкой полупрозрачным */ BODY { opacity: .5; }

Этим уже тоже можно как-то пользоваться, но мне в этом решении не хватало удобного управления прозрачностью, поэтому я написала небольшой скрипт, который добавляет на страницу вот такую панель:

Она позволяет управлять прозрачностью (в данном случае вместо макетов просто полосатый фон), её можно таскать по странице и можно выключить, если не нужна.

Расширение для браузера решила не делать, чтобы не ограничивать количество браузеров, в которых это можно использовать.

Установка в итоге выглядит вот так:

Установите пакет в папку с проектом через npm: npm i pixel-glass --save-dev

Положите картинки с макетами в ваш проект в папку img (или в другую папку с картинками внутри проекта).

Вставьте в страницы такой код: HTML { background-repeat: no-repeat; background-position: 50% 0; /* По умолчанию мобильный макет */ background-image: url("img/index-mobile.png"); } /* Планшет */ @media (min-width: 760px) { HTML { /* Планшетный макет */ background-image: url("img/index-tablet.png"); } } /* Десктоп */ @media (min-width: 960px) { HTML { /* Десктопный макет */ background-image: url("img/index-desktop.png"); } } BODY { opacity: .5; } Отредактируйте его под свой проект: настройте медиавыражения, поменяйте адреса картинок на рабочие.

Обновите страницу и пользуйтесь.

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

UPD: библиотека переехала на npm, спасибо всем участникам

Обзор плагинов и скриптов для работы в технике Pixel Perfect.

Для начала - что такое техника Pixel Perfect? Все просто и можно догадаться по названию - это техника верстки, при которой сверстанный HTML-шаблон в точности (пиксель-в-пиксель) совпадает с оригиналом, PSD-макетом.

Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпасть. Совместиться должны все элементы картинок - текст, изображения, графические элементы.

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

На момент написания статьи реализация техники Pixel Perfect осуществляется при помощи соответствующих плагинов под браузеры или же с помощью специализированных скриптов. Ниже будут кратко рассмотрены два плагина и два скрипта, однако во всех случаях шаги для проверки Pixel Perfect одинаковы.

Первоначально в программе Photoshop оригинальный PSD-макет сохраняется как изображение в формате

1

.png

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

В этом и заключается вся несложная процедура Pixel Perfect проверки сверстанной страницы. Там, где на странице элементы не совпадают с оригиналом, производится коррекция значений в файлах стилей.

Pixel Perfect под Firefox

Для браузера Firefox имеется плагин Pixel Perfect для одноименной проверки сверстанной страницы.

После установки плагина Pixel Perfect его значок появиться в панели инструментов браузера Firefox. Стоит сказать, что плагин Pixel Perfect поддерживает только последние версии браузера Firefox (к примеру, в версии v.31 этот плагин не будет работать).

Теперь нужно открыть в Photoshop оригинальный PSD-макет и сохранить его целиком как изображение в формате

1

.png

через “Save for Web…”.

Важно! Перед экспортом в PNG-изображение PSD-макет необходимо привести к оригинальному размеру ! Для этого в Photoshop зарезервирована комбинация hotkeys: Ctrl+1 - под Windows\Linux, Cmd+1 - под Mac OS X.

Как только PNG-копия PSD-макета подготовлена и сохранена, открываем в окне браузера Firefox сверстанную по этому макету HTML-страницу.

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

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

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

Обратите внимание на режим “Invert” плагина Pixel Perfect - с помощью него можно очень точно корректировать элементы HTML-страницы.

В описанном выше процессе и заключается работа с плагином Pixel Perfect, а также Pixel Perfect верстка как таковая. Все предельно просто.

Ниже приведен видео-ролик, в котором показан процесс работы с плагином Pixel Perfect (видео не мое, поэтому за качество во всех смыслах ответственности не несу) - для наглядности работы пойдет:

Рассмотрение плагина Pixel Perfect под браузер Firefox закончено.

PerfectPixel под Google Chrome

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

$ (function (){ $ . pixlayout ("/path_to_picture/picture.ext" ); });

Можно дополнить базовый набор, указав в скрипте параметры (взято с официального сайта ):

$ (function (){ $ . pixlayout ({ src : "/img/layout.jpg" , opacity : 0.8 , top : 50 , center : true , clip : true , show : true }, ".wrapper" ); }); Краткая справка по использованию скрипта pixLayout

Краткая справка по использованию скрипта pixLayout приведена в двух абзацах ниже (также взята с официального сайта ):

Перемещение

• кнопки: ‘влево’, ‘вправо’, ‘вверх’, ‘вниз’
• кнопки: W , A , S , D , когда картинка видима
• кнопки панели навигации

Операции

• Уничтожить (удалить весь html и css код pixLayout со страницы ) - крестик в правом верхнем углу панели;
• Закрепить панель - иконка в правом верхнем углу панели;
• Краткая справка - знак вопроса в правом верхнем углу панели;
• Свернуть параметры - стрелка “вверх”” внизу панели;
• Показать\убрать картинку - центральная кнопка панели навигации или Shift + E .

Ниже приведено официальное видео, демонстрирующее работу со скриптом pixLayout:

Заключение

В этом небольшом обзоре мы познакомились с четырьмя инструментами для попиксельной (pixel perfect) верстки. Два из них - это бесплатные плагины под браузеры. Другие два - скрипты на JavaScript для подключения к HTML-странице.

Что выбирать для своей работы - решать каждому.

В пользу плагинов под браузеры можно сказать, что они бесплатные, их легко установить и просто использовать.

В минус скрипту X-Precise можно сказать, что он платный ($5), требует подключения к проверяемой HTML-странице и зависит от библиотеки jQuery. В минус pixLayout также можно сказать, что для своей работы он требует дополнительной “возни” с подключением к HTML-странице.

Однако в плюс обоим скриптам можно привести тот неоспоримый факт, что это кроссбраузерное решение, абсолютно не зависящее от какого-либо браузера (Firefox, Chrome, Opera, Safari) или версии конкретного браузера. Скрипты будут работать одинаково во всех случаях.

Расширение PerfectPixel для Google Chrome помогает верстальщикам и веб-разработчикам создавать разметку сайта, максимально соответствующую утвержденному заказчиком дизайну.

Открываете страницу, которую разрабатываете, в Chrome, запускаете PerfectPixel, добавляете новый слой - картинку-задание, и теперь можете в реальном времени накладывать изображение на результат, сравнивать и справлять дефекты. Ознакомится с работой расширения можно посмотрев это видео:

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

Для удобства разработчика имеется функция Lock/Заблокировать - при активации вы можете взаимодействовать с элементами страницы, которые находятся под активным слоем. Также можно менять прозрачность слоя, задавать ему явные координаты, менять масштаб (полезно для тестирования Retina изображений).

Для тех, кто хочет максимально эффективно работать с инструментом, поддерживаются горячие клавиши и режимы работы мыши, полный список которых имеется на официальном сайте проекта: www.welldonecode.com/perfectpixel/shortcuts .

Панель управления можно свернуть в правый край экрана путем двойного клика на заголовок. Мини-режим полезен при тестировании responsive дизайна на маленьких размерах экрана.

Расширение регулярно обновляется, добавляются новые функции, горячие клавиши, исправляются ошибки. Мы приветствуем любые замечания и пожелания, пожалуйста пишите нам на email: [email protected] . В недалеком будущем планируется выпустить версии для других браузеров: Firefox, Safari, IE, реализовать синхронизацию слоев и настроек через облако. Подпишитесь на рассылку для того чтобы быть в курсе сроков выхода новой функциональности на официальном сайте: www.welldonecode.com/perfextpixel .

Буду рад ответить на ваши вопросы здесь в комментариях либо по почте.

Рад знакомству с коммьюнити Хром.РФ!