Pixel perfect плъгин. Нека се запознаем с Pixel Perfect. Бърза справка за използването на скрипта pixLayout
Преглед на плъгини и скриптове за работа в технологиите Перфектен пиксел.
Първо, какво представлява техниката Pixel Perfect? Всичко е просто и можете да познаете по името - това е техника за оформление, при която оформлението на HTML шаблона съвпада точно (пиксел по пиксел) с оригиналното PSD оформление.
С други думи, ако наложите „картината“ на проектирания HTML шаблон върху картината на оригиналното PSD оформление, тогава и двете картини трябва да съвпадат. Всички елементи на картините трябва да бъдат комбинирани - текст, изображения, графични елементи.
Според съвременните изисквания за оформление, Pixel Perfect е почти де факто стандарт. Така че е жизненоважно да проучите този въпрос, ако имате желание и желание да имате много поръчки и клиенти.
Към момента на писане техниката Pixel Perfect се прилага с помощта на подходящи плъгини за браузър или с помощта на специализирани скриптове. Два плъгина и два скрипта ще бъдат обсъдени накратко по-долу, но във всички случаи стъпките за тестване на Pixel Perfect са едни и същи.
Първоначално в Програма фотошопоригиналното PSD оформление се записва като изображение във формат
| 1 | .png |
Това е цялата проста процедура Pixel Perfect за проверка на оформлението на страницата. Когато елементите на страницата не съвпадат с оригинала, стойностите в стиловите файлове се коригират.
Pixel Perfect за FirefoxЗа браузъра Firefox има плъгин Pixel Perfect за проверка на оформлението на страницата със същото име.
След като инсталирате плъгина Pixel Perfect, неговата икона ще се появи в лентата с инструменти на браузъра Firefox. Струва си да се каже, че плъгинът Pixel Perfect само поддържа най-новите версииБраузър Firefox(например във версия v.31 този плъгин няма да работи).
Сега трябва да отворите оригиналното PSD оформление във Photoshop и да го запишете изцяло като изображение във формата
| 1 | .png |
важно! Преди да експортирате в PNG изображение, PSD оформлението трябва да бъде доведено до оригиналния си размер! За целта комбинацията от клавишни комбинации е запазена във Photoshop: Ctrl+1 - за Windows\Linux, Cmd+1 - за Mac OS X.
Веднага след като PNG копието на PSD оформлението бъде подготвено и запазено, отворете HTML страницата въз основа на това оформление в прозореца на браузъра Firefox.
Стартирайте приставката Pixel Perfect, като щракнете върху иконата й в лентата с инструменти на браузъра. Веднага ще се появи прозорец на плъгина, в който ще ни подкани да изберем предварително подготвено PNG изображение (копие на PSD оформлението):
Кликнете върху бутона „Добавяне на слой“, изберете подготвеното PNG изображение и получете резултата - наслагването на два слоя (проектиран и оригинален):
Виждаме как текстът и бутонът на HTML страницата не съвпадат с PNG оригинала. Затова отворете раздела стилове във Firebug (този плъгин се активира автоматично, когато стартирате плъгина Pixel Perfect) и започнете да редактирате/коригирате:
Обърнете внимание на режима „Инвертиране“ на приставката Pixel Perfect - с него можете много точно да коригирате елементите на HTML страницата.
Процесът, описан по-горе, се състои от работа с приставката Pixel Perfect, както и оформлението Pixel Perfect като такова. Всичко е изключително просто.
По-долу има видеоклип, който показва процеса на работа с приставката Pixel Perfect (видеото не е мое, така че не нося отговорност за качеството във всеки смисъл) - за яснота на работата ще отиде:
Прегледът на плъгина Pixel Perfect за браузъра Firefox приключи.
PerfectPixel под Google ChromeЗа да се свържете с тестваната страница, трябва да се регистрирате основен комплектлинии:
$ (функция ()( $ . pixlayout ( "/path_to_picture/picture.ext" ); ));Можете да допълните основния набор, като посочите параметри в скрипта ( взети от официалния сайт):
) );Бърза справка за използването на скрипта pixLayout Кратка справка за използването на скрипта pixLayout е предоставена в двата параграфа по-долу ():
също взети от официалния сайт- Преместване
- бутони: "наляво", "надясно", "нагоре", "надолу"
- бутони: W , A , S , D, когато картината е видима
- Операции Унищожи ( премахнете всички html и css код pixLayout от страницата
- ) - кръст в горния десен ъгъл на панела;
- Закачете панела - икона в горния десен ъгъл на панела;
- Бърза справка - въпросителен знак в горния десен ъгъл на панела;
- Параметри за свиване - стрелка "нагоре" в долната част на панела;
Показване\скриване на картината - централния бутон на навигационния панел или Shift + E. По-долу еофициално видео
, демонстриращ как да работите със скрипта pixLayout:В това кратко ревю се запознахме с четири инструмента за пикселно перфектно оформление. Два от тях са безплатни добавкиза браузъри. Другите два са JavaScript скриптове за свързване към HTML страница.
Какво да изберете за работата си, всеки сам решава.
Най-хубавото на приставките за браузъри е, че те са безплатни, лесни за инсталиране и лесни за използване.
Недостатъкът на скрипта X-Precise е, че е платен ($5), изисква връзка с проверяваната HTML страница и зависи от библиотеката jQuery. Недостатъкът на pixLayout може да се каже също, че за да работи, е необходимо допълнително „суетене“ със свързването към HTML страницата.
Предимството и на двата скрипта обаче е безспорният факт, че това е кросбраузърно решение, абсолютно независимо от който и да е браузър (Firefox, Chrome, Opera, Safari) или версията на даден браузър. Скриптовете ще работят еднакво във всички случаи.
Разширението PerfectPixel за Google Chrome помага на дизайнерите на оформление и уеб разработчиците да създават оформления на уебсайтове, които най-добре съответстват на одобрения от клиента дизайн.
Отворете страницата, която разработвате в Chrome, стартирайте PerfectPixel, добавете нов слой- снимка на задача и сега можете да наслагвате изображението върху резултата в реално време, да сравнявате и коригирате дефекти. Можете да видите как работи разширението, като гледате този видеоклип:
Поддържат се няколко слоя на страница и наборът от слоеве е различен за различните домейни. Добавените слоеве и техните атрибути се запазват, ако затворите браузъра и изключите компютъра.
За удобство на разработчиците има функция за заключване - когато е активирана, можете да взаимодействате с елементи на страницата, които се намират под активния слой. Можете също така да промените прозрачността на слоя, да му дадете изрични координати, да промените мащаба (полезно за Тестване на ретинатаизображения).
За тези, които искат да работят с инструмента възможно най-ефективно, се поддържат клавишни комбинации и режими на работа на мишката, пълен списъккоито са достъпни на официалния сайт на проекта: www.welldonecode.com/perfectpixel/shortcuts.
Контролният панел може да бъде минимизиран до десния край на екрана чрез двукратно щракване върху заглавието. Мини режимът е полезен при тестване на адаптивен дизайн на малки екрани.
Разширението се актуализира редовно, добавят се нови функции и клавишни комбинации и се коригират грешки. Приветстваме всякакви коментари и предложения, моля, пишете ни на имейл: [имейл защитен]. В близко бъдеще се планира да се пуснат версии за други браузъри: Firefox, Safari, IE и да се приложи синхронизиране на слоеве и настройки чрез облака. Абонирайте се за бюлетина, за да бъдете информирани за датите на пускане на новата функционалност на официалния уебсайт: www.welldonecode.com/perfextpixel.
Ще се радвам да отговоря на вашите въпроси тук в коментарите или по имейл.
Радвам се да се запознаем в общността на Chrome.RF!
Ако тепърва започвате да овладявате компютъра и да използвате различен софтуер и имате нужда от програма за преглед на изображения, изтеглете Pixel Perfect. Този зрител е внедрен толкова просто, че дори неопитен потребител може лесно да го овладее, въпреки факта, че разработчиците не искаха да се притесняват за локализирането на продукта за рускоезични потребители (и като цяло изоставиха своето въображение преди десет години).
Относно интерфейсаКакто споменахме по-рано, Pixel Perfect има доста оскъдна функционалност. Може да изглежда много ограничено за онези потребители, които са свикнали с мултитаскинг зрители, които могат не само да показват снимки и картини, но и да ги редактират, отпечатват или дори публикуват онлайн. Ето защо, ако имате нужда от много функции, препоръчваме ви да заобиколите този софтуер, като намерите аналог, например -.
Pixel Perfect ви позволява да отваряте и разглеждате изображения във формати JPEG, PNG, GIF и BMP. Програмата обаче не поддържа преместване от едно изображение на друго и поради факта, че няма бутон за обръщане, всяко изображение ще трябва да се отваря отделно. Докато отваряте файл, програмата за преглед в долната част на екрана показва всички техническа информацияза обекта, което е доста удобно. Когато гледат, потребителите могат да центрират изображението и да го разтягат.
Характеристики на работаPixel Perfect се разпространява в преносим формат, което допълнително опростява потребителското изживяване. Няма нужда да се притеснявате за инсталирането, просто разархивирайте изтегления архив и стартирайте изпълнимия файл. Гледащият идентифицира несъществени изисквания за компютърен хардуер и Windows версии, който не е инсталиран.
Резултати- липса на русифициран интерфейс;
- разпространява се в преносим формат;
- Инструментите на програмата се основават на изпълнение на една функция - показване на графични файлове;
- демонстрация на технически данни при разглеждане на изображението;
- програмен продуктвече не се поддържа от разработчиците.
Ще започна отдалеч. Неотдавна се присъединих към HTML Academy като ментор. В допълнение към факта, че наставничеството помага да организирате вашите знания, то удивително стимулира развитието на различни полезни неща, защото в процеса се появяват интересни задачи, чието решение може да бъде удобно автоматизирано.
Учениците получават учебен дизайн от три страници, всяка с оформления за три състояния: мобилно устройство, таблет и настолен компютър - за общо девет оформления. В процеса на оформяне на адаптивна страница има смисъл периодично да променяте размера на прозореца и да проверявате дали при добавяне на стилове за настолната версия, например, мобилната не се счупи. Кой е най-добрият начин за проверка за съответствие с оформлението?
Екранните снимки, които се използват в големи проекти, са твърде тежки за такава задача; имаме нужда от нещо много просто, така че всеки начинаещ да може да го използва.
Първото нещо, за което се сетих, разбира се, беше приставката 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- изображение: url("img/index-tablet.png"); @media (min-width: 1024px) ( BODY (background-image: url("img/index-desktop.png"); ) )
Този код се вмъква във всяка страница. Той задава необходимите медийни изрази и връзките към снимки се променят към текущите оформления за всяка конкретна страница.
Оформленията се променят при превключване между страници и при преоразмеряване на прозореца, това вече може да се използва и е доста удобно. Оформленията лежат директно под маркировките, така че не е нужно да ходите до магазина през цялото време, за да ги вземете. графичен редактор, така че дори и това прост дизайнможе значително да спести време.
Но докато се пишат стилове, страницата се появява със собствен фон и картини, а оформленията в долния слой стават невидими. какво трябва да направя
Следващото ми решение беше разширение за Chrome, което създава полупрозрачен слойс оформления. Когато преоразмерите прозореца, оформленията се променят с помощта на медийни изрази, както в предишния случай. Като бонус добавихме контрол върху прозрачността на слоя с оформлението и възможността за активиране на режима на смесване на разликите, за да улесним намирането на разликите.
Оказа се нещо прекрасно. Но работи само в Chrome, ключови точкиза превключване на оформления и пътища към изображения трябва да бъдат зададени в конфигурациите на самото разширение, изображенията на оформлението трябва да се намират вътре в разширението и имаше всякакви други ограничения. Като цяло не е универсален, за всеки нов проект ще ви трябва ръчна настройкаи това изобщо не е подходящо за начинаещи.
Исках да намеря някакво много, много просто решение, така че всеки да може да се справи с настройката и инсталацията и в същото време поне приблизително да разбере какво прави.
За да сравните маркирането с оформленията, имате нужда от два слоя: слой с маркиране и слой с оформления. От една страна, можете ръчно да вмъкнете слой с оформления в оформлението на страницата, от друга страна, има голям риск да го забравите там, когато вече не е необходим, така че следващата опция беше да използвате съществуващите елементи на страницата като слоеве.
Ако зададете оформления като фон за , когато промените прозрачността, оформленията също ще станат полупрозрачни, така че е по-добре да използвате елемента като слой с оформления:
HTML (background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (min-width: 768px) ( HTML ( background- изображение: url("img/index-tablet.png"); @media (min-width: 1024px) ( HTML (background-image: url("img/index-desktop.png"); ) )
Както в предишния случай, оформленията ще лежат под маркирането, но сега, ако е зададен фон, те няма да се виждат. Нека направим слоя за маркиране полупрозрачен, като добавим непрозрачност за:
/* Използвайте като слой с оформления */ HTML (background-repeat: no-repeat; background-position: 50% 0; background-image: url("img/index-mobile.png"); ) @media (мин. - ширина: 768px) ( HTML ( background-image: url("img/index-tablet.png"); ) ) @media (min-width: 1024px) ( HTML ( background-image: url("img/index- desktop .png"); ) ) /* Направете слоя за маркиране полупрозрачен */ BODY (непрозрачност: .5; )
Това също може да се използва по някакъв начин, но на това решение липсваха удобни контроли за прозрачност, така че написах малък скрипт, който добавя следния панел към страницата:
Позволява ви да контролирате прозрачността (в този случай вместо оформления има просто раиран фон), може да се влачи из страницата и може да се изключи, ако не е необходимо.
Реших да не правя разширение за браузър, за да не ограничавам броя на браузърите, в които може да се използва.
Инсталацията завършва така:
По мое мнение се оказа доста удобен инструмент, но със сигурност може да се подобри нещо. Ако имате някакви идеи по този въпрос, напишете ми ги в коментарите. Ще ми е интересно и как решавате подобни проблеми и какви инструменти използвате за това.
UPD: библиотеката се премести в npm, благодаря на всички участници
Добър ден, приятели. Онзи ден Дима Шулешов се свърза с мен и ми предложи тема за интересна статия (Дима, здравей!). Е, за мен е интересно и актуално, надявам се да е полезно и за вас, за някого. Това са няколко реда код, които ще ви помогнат при оформлението целева страницаточно с оформлението.
Освен това значително ще намалите времето, прекарано в измерване на разстояния и превключване между Photoshop, прозореца на браузъра и текстов редактор.
Крайният резултат се свежда до това, че имате бутон във вашия проект, фиксиран в горния ляв ъгъл (произволно място), когато щракнете върху него, върху оформлението ви се наслагва оформление (картина) с определена прозрачност и можете да оцените колко точни са вашите отстъпи, размери, позициониране, съответстващи на дизайна. За да разберете, трябва да опитате. Препоръчвам да изтеглите източника и да видите как работи или да пуснете този кратък видеоклип:
Така че, ако сте имали проблеми с щателни клиенти, които проверяват всеки пиксел, сега такъв проблем вече не трябва да възниква. Нека най-накрая осъзнаем този ефект.
На първо място, както често се случва, свързваме библиотеката jQuery:
Тъй като в повечето проекти той вече е свързан, уверете се, че не правите това отново. Това може да предизвика конфликт и ще ви отнеме много време, за да разберете точно защо възниква.
Сега нека добавим някои тагове в нашия проект. За мен изглежда така:
Перфектен пиксел
Където първият div е блок, отговорен за бутона, а вторият е за наслагването на нашето оформление. За да се приложи правилно, трябва да направите няколко прости настройки:
P ( фон: url(../images/maket.jpg) no-repeat; /* Вашето оформление */ ширина: 1255px;/* Ширина на оформлението */ височина: 750px;/* Височина на оформлението */ ляво: calc(50 % - 627.5px);/* втора стойност - половината от ширината на оформлението */ позиция: абсолютна; непрозрачност: 0.4 !z-index: 97);
Ето 4 параметъра, които са придружени с коментар и трябва да бъдат заменени със собствени. Всичко е просто!
Сега нека стилизираме бутона. Ако ти пука външен вид, след това редактирайте, в противен случай можете да го оставите както е.
#p (позиция: фиксирана; ляво: 0; горе: 0; ширина: 200px; височина: 75px; фон: #c36c2c; z-индекс: 99; курсор: показалец; подравняване на текст: център; размер на шрифта: 25px; line-height: 0px; vertical-align: middle: .3s ) #p:hover (left: 0; line-height: 80px; background: #88d3c2;
Е, остава само да добавите реакция към щракване върху бутона. Просто ще добавим/премахнем клас и ще променим прозрачността на блока с оформлението на фона:
$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));