Андрей Смирнов
Время чтения: ~10 мин.
Просмотров: 7

Урок 6. Плагин для Google Chrome PerfectPixel

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

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

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

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

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

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

1 

</td>

.png

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

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

Pixel Perfect под Firefox

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

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

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

1 

</td>

.png

</td></tr></tbody></table> через “Save for Web…”.</p>

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

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

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

pixel_perfect_01.png

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

pixel_perfect_02.png

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

pixel_perfect_03.png

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

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

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

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

PerfectPixel под Google Chrome

Плагин PerfectPixel под браузер Chrome очень похож по назначению и функционалу (и названию!) на плагин Pixel Perfect под браузер Firefox.

После установки PerfectPixel необходимо зайти в настройки расширений браузера Chrome — chrome://extensions/ и активировать для плагина галочку “Allow access to file URLs”, тем самым разрешив плагину доступ к локальным HTML-страницам:

perfectpixel_01.png

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

После этого запускаем плагин PerfectPixel, добавляем в нем новый слой (PNG-копию оригинала) и проверяем:

perfectpixel_02.png

Функционал и работа плагина PerfectPixel ничем не отличается от функционала и работы плагина Pixel Perfect.

Ниже приведен видео-ролик с официальной страницы плагина PerfectPixel для демонстрации работы в нем:

Рассмотрение плагина PerfectPixel можно на этом закончить.

X-Precise

Если в двух предыдущих случаях были рассмотрены бесплатные плагины под два популярных браузера Firefox и Chrome, то в данном случае речь пойдет о платном ($5 на момент написания статьи) скрипте X-Precise, написанном на JavaScript и использующем библиотеку jQuery.

Подключение X-Precise

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

Затем нужно распаковать папку

1 

</td>

_xprecise

</td></tr></tbody></table>в корневую директорию проекта. И подключить скрипт

1 

</td>

xprecise.min.js

</td></tr></tbody></table> к HTML-странице для запуска интерсейса скрипта X-Precise.</p>

Обратите внимание, что скрипт для своей работы использует библиотеку jQuery (v1.3.2), поэтому подключение X-Precise должно выглядеть таким образом:

 

Затем нужно создать копии PSD-оригиналов в формате JPG и сохранить под тем же именем, что и файл оригинала в директории

1 

</td>

/_xprecise/

</td></tr></tbody></table> скрипта X-Precise.</p>

При сохранении в формате JPG рекомендуется выбирать режим оттенков серого, так как при таком варианте лучше видна разница между сверстанной копией и оригиналом (помните об опции “Invert” плагина Pixel Perfect?).

Скрипт X-Precise попытается автоматически загрузить JPG-изображение из директории

1 

</td>

/_xprecise/

</td></tr></tbody></table> по имени файла этого изображения, считая, что имя файла иображения идентично имени файла открытой HTML-страницы (index.html -> index.jpg).</p>

Но это не означает, что нельзя загрузить файл изображения с другим именем. Для этого достаточно задать другой путь к файлу в интерфейсе скрипта X-Precise.

Использование X-Precise

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

В целом, интерфейс скрипта X-Precise и его применение ничем не отличается от плагинов Pixel Perfect или PerfectPixel. Для желающих — можно ознакомиться со скриншотами по ссылке на главной странице проекта.

pixLayout

pixLayout — еще один плагин (наподобие X-Precise) под библиотеку jQuery, предназначенный для попиксельной верстки. Однако, в отличие от предыдущего скрипта, pixLayout бесплатный (интересная особенность — скрипт создан отечественным разработчиком).

Для своей работы скрипт pixLayout может использовать изображение в двух популярных форматах — JPG или PNG.

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

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

  

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

$(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) или версии конкретного браузера. Скрипты будут работать одинаково во всех случаях.

На этом все.

Дата публикации: 30-08-2017

Чтобы иметь доступ к просмотру всех уроков этого курса, оформите подписку в премиум раздел

1.jpg

От автора: многие заказчики, когда заказывают верстку или сайт, указывают в техническом задании, что верстка должна быть PixelPerfect. Это означает, что верстка должна в точности, до малейших деталей, соответствовать тому, что изначально нарисовано на макете дизайна сайта в Photoshop.

В этом случае расширение PerfectPixel для Google Chrome вам просто необходимо. Благодаря ему вы сможете создавать веб-сайты, которые будут в точности соответствовать тому, что нарисовано в дизайне. Плагин работает следующим образом: вы, помощью простых действий размещаете поверх вашей страницы полупрозрачное изображение исходного дизайна, чтобы проверить, если они совпадают вплоть до каждого пикселя. И по ходу разработки проверяете верстку на соответствие макету.

В данном уроке мы рассмотрим работу и настройку данного плагина.

prslide2.jpg

Все уроки курса:

Урок 1. Плагин для Google Chrome Font Playground
Урок 2. Плагин для Google Chrome What Font
Урок 3. Плагин для Google Chrome YSlow
Урок 4. Плагин для Google Chrome Web Developer
Урок 5. Плагин для Google Chrome Web Developer checklist
Урок 6. Плагин для Google Chrome PerfectPixel
Урок 7. Плагин для Google Chrome IE Tab
Урок 8. Плагин для Chrome Page Ruler
Урок 9. Плагин для Chrome Check My Links
Урок 10. Плагин для Chrome Code Cola
Урок 11. Плагин для Chrome Clear Cache
Урок 12. Плагин для Chrome Instant Wireframe
Урок 13. Плагин для Chrome Chrome Sniffer
Урок 14. Плагин для Chrome Resolution Test
Урок 15. Плагин для Chrome SEOquake

Метки:chrome, плагины

https://webformyself.com/urok-6-plagin-dlya-google-chrome-perfectpixel/—>

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?
  • Быстрее создается страница, чем когда бегаешь между браузером и PSD.
  • Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
  • Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал. Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт. Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.Вкратце: При создании нового проекта нужно будет подключать скрипт, и не забывать его удалять при сдаче. После подключение нужно создавать папку или указать в диалоговом окне имя папки где лежит наша картинка, или же сразу прямой url. Я использую ‘.ajax’ с отключенным кроссдоменном. Так что картинки нужно хранить на том же домене где и сайт. Далее можно настроить позиционирование и прозрачность картинки так как вы этого хотите. Скрипт сохраняет каждую манипуляцию с картинкой в cookie, бегая по страницам сайта не нужно будет настраивать все заново. Во время создания скрипта я представлял как разработчик будет переходить на другую страницу и видеть дизайн предыдущей страницы, тогда появилась идея создать layouts. Используя хот-кеи можно быстро поменять изображение соответствующее текущей странице сайта. Последней удобной функцией пока стала ‘Hover mode’, картинка прячется автоматически если вы стараетесь инспектором выбрать какой-то элемент, и показывается снова. Все хот-кеи тут:

196
102.9k 196
Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации