Расширение PerfectPixel by WellDoneCode. Знакомимся с Pixel Perfect PerfectPixel под Google Chrome
Добрый день, друзья. На днях со мной связался Дима Шулешов и предложил мне тему для интересной статьи (Дима, привет!). Ну для меня — интересной и актуальной, надеюсь и вам тоже, кому-нибудь пригодиться. Это несколько строчек кода, которые помогут вам верстать landing page в точности с макетом.
Кроме, того, вы значительно сократите время на замеры расстояний и переключения между фотошопом, окном браузера и текстовым редактором.
Готовый результат сводится к тому, что у вас в проекте есть кнопка, закрепленная в левом верхнем углу (любом месте), при нажатии на которую, на вашу верстку накладывается макет (картинка) с определенной прозрачностью, и вы можете оценить, насколько точно ваши отступы, размеры, позиционирование соответствует дизайну. Чтобы понять, — нужно попробовать. Рекомендую скачать исходник и посмотреть, как это работает или воспроизведите это короткое видео:
Итак, если у вас возникали проблемы с дотошными заказчиками, которые проверяют каждый пиксель, то теперь такой проблемы больше не должно возникнуть. Давайте же наконец реализуем этот эффект.
Первым делом, как это часто бывает, подключаем библиотеку jQuery:
Так как в большинстве проектов она уже подключена, обязательно убедитесь, чтобы вы не сделали этого повторно. Это может вызвать конфликт, и вы долго будете разбираться, почему же именно он возникает.
Теперь, давайте пропишем несколько тегов внутри нашего проекта. У меня это выглядит так:
Pixel Perfect
Где первый div — это блок, отвечающий за кнопку, а второй, за наложение нашего макета. Для того, чтобы он накладывался корректно, нужно сделать несколько простых настроек:
P { background: url(../images/maket.jpg) no-repeat; /* Ваш макет */ width: 1255px;/* ширина макета */ height: 750px;/* высота макета*/ left: calc(50% - 627.5px);/* второе значение - половина, от ширины макета*/ position: absolute; top: 0; opacity: 0.4 !important; transition: .3s; z-index: 97; }
Вот 4 параметра, которые сопровождаются комментарием и нужно заменить на свои. Все — просто!
Теперь, давайте зададим стили для кнопки. Если вам принципиален внешний вид, то редактируйте, а так, можно оставить как есть.
#p { position: fixed; left: 0; top: 0; width: 200px; height: 75px; background: #c36c2c; z-index: 99; cursor: pointer; text-align: center; font-size: 25px; line-height: 0px; color: #c36c2c; left: -150px; vertical-align: middle; font-weight: 700; transition: .3s } #p:hover { left: 0; line-height: 80px; background: #88d3c2; }
Ну и осталось добавить реакцию на клик по кнопке. Будем просто добавлять/удалять класс и менять прозрачность блока с макетом на фоне:
$(document).ready(function () { $("#p").click(function () { $("#pp").toggleClass("p") });});
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; }
Этим уже тоже можно как-то пользоваться, но мне в этом решении не хватало удобного управления прозрачностью, поэтому я написала небольшой скрипт, который добавляет на страницу вот такую панель:
Она позволяет управлять прозрачностью (в данном случае вместо макетов просто полосатый фон), её можно таскать по странице и можно выключить, если не нужна.
Расширение для браузера решила не делать, чтобы не ограничивать количество браузеров, в которых это можно использовать.
Установка в итоге выглядит вот так:
По-моему, получился довольно удобный инструмент, но наверняка можно что-то улучшить. Если у вас есть какие-то идеи на этот счёт, напишите мне о них в комментариях. Также мне будет интересно как вы решаете подобные задачи и какие инструменты для этого используете.
UPD: библиотека переехала на npm, спасибо всем участникам
Если Вы только начинаете осваивать компьютер и использовать различный софт и Вам необходима программа для просмотра изображений, скачайте Pixel Perfect. Этот вьювер реализован настолько просто, что его с легкостью освоит даже неопытный пользователь, несмотря на то, что разработчики не пожелали позаботиться о локализации продукта для русскоговорящих пользователей (да и вообще забросили свое детище с десяток лет тому).
Об интерфейсеКак уже было сказано ранее, Pixel Perfect имеет достаточно скудный функционал. Он может показаться весьма ограниченным тем юзерам, которые привыкли к многозадачным просмотрщикам, умеющим не только демонстрировать фотографии и картинки, но и редактировать их, выводить в печать или даже публиковать в сети. Поэтому, если Вам нужно множество функций, то рекомендуем обойти это ПО стороной, найдя аналог, например - .
Pixel Perfect позволяет открывать и просматривать изображения в форматах JPEG, PNG, GIF и BMP. При этом программа не поддерживает переход от одного изображения к другому и, ввиду того, что отсутствует кнопка "перелистывания", каждое изображение придется открывать отдельно. Во время открытия файла вьювер в нижней части экрана показывает всю техническую информацию об объекте, что довольно удобно. При просмотре пользователи могут отцентрировать изображение и растянуть его.
Особенности работыPixel Perfect распространяется в портативном формате, что еще больше упрощает процесс взаимодействия с пользователем. Нет нужды беспокоиться об установке, просто распакуйте скачанный архив и запустите исполняемый файл. Просмотрщик выявляет несущественные требования к "железу" ПК и к версии Windows, которая не нем установлена.
Итоги- отсутствие русифицированного интерфейса;
- распространяется в портативном формате;
- инструментарий программы базируется на выполнении одной функции - отображении графических файлов;
- демонстрация технических данных во время просмотра изображения;
- программный продукт перестал поддерживаться разработчиками.
Обзор плагинов и скриптов для работы в технике Pixel Perfect.
Для начала - что такое техника Pixel Perfect? Все просто и можно догадаться по названию - это техника верстки, при которой сверстанный HTML-шаблон в точности (пиксель-в-пиксель) совпадает с оригиналом, PSD-макетом.
Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпасть. Совместиться должны все элементы картинок - текст, изображения, графические элементы.
По современным требованиям к верстке Pixel Perfect уже чуть ли не стандарт де-факто. Так что изучить этот вопрос жизненно необходимо, если есть желание и стремление иметь много заказов и заказчиков.
На момент написания статьи реализация техники Pixel Perfect осуществляется при помощи соответствующих плагинов под браузеры или же с помощью специализированных скриптов. Ниже будут кратко рассмотрены два плагина и два скрипта, однако во всех случаях шаги для проверки Pixel Perfect одинаковы.
Первоначально в программе Photoshop оригинальный PSD-макет сохраняется как изображение в формате
| 1 | .png |
В этом и заключается вся несложная процедура Pixel Perfect проверки сверстанной страницы. Там, где на странице элементы не совпадают с оригиналом, производится коррекция значений в файлах стилей.
Pixel Perfect под FirefoxДля браузера Firefox имеется плагин Pixel Perfect для одноименной проверки сверстанной страницы.
После установки плагина Pixel Perfect его значок появиться в панели инструментов браузера Firefox. Стоит сказать, что плагин Pixel Perfect поддерживает только последние версии браузера Firefox (к примеру, в версии v.31 этот плагин не будет работать).
Теперь нужно открыть в Photoshop оригинальный PSD-макет и сохранить его целиком как изображение в формате
| 1 | .png |
Важно! Перед экспортом в 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) или версии конкретного браузера. Скрипты будут работать одинаково во всех случаях.