Jak porovnat hotový web s grafickou předlohou? Zkuste PerfectPixel v Chrome

Byť se současná idea konceptu responsivního designu trošku bije s dříve populárním pixel perfect řešením, tak si myslím, že web by měl odpovídat grafickému zadání co nejvíce. S porovnáním vám pomůže jednoduché, ale nečekaně účinné rozšíření pro prohlížeč Chrome.

Dostali jste grafickou předlohu, dokončili jste podle ní web a chcete porovnat, zda se náhodou neliší o nějaký ten pixel? Přiznám se, že občas mám problém s rozestupem prvků, který se mi při stylování rozhodí o nějaký ten pixel. Záleží na grafické podobě webu. Ne vždy je to problém.

Kontrolu toho, zda vše na webu sedí oproti grafickému zadání, uděláte velmi snadno v rozšíření pro webový prohlížeč Chrome s názvem PerfectPixel.

Jak použít PerfectPixel

Po instalaci rozšíření (výše uvedený odkaz si otevřete v Chrome a instalujte z Web Store) vám v liště prohlížeče přibude nové tlačítko. Zobrazíte si jím ovládací panel pro PerfectPixel.

Klikněte na tlačítko Add New Layer. Otevře se souborový dialog, ve kterém vyhledejte obrázek s grafikou webu. PSD vám to nevezme, JPG a PNG jsou bez problému.

Po vložení obrázku se vám tato grafika zobrazí nad webem v překryvné vrstvě. V nastavení PerfectPixelu posunujte táhlem Opacity tak, abyste nastavili průhlednost obrázku, která vám bude vyhovovat.

Pomocí tlačítek se šipkama napozicujte obrázek tak, aby se nějaká jeho část napasovala na část webu a poté prostě jen porovnejte viditelné rozdíly. K posunu lze použít i šipky na klávesnici.

PerfectPixel

Bude-li potřeba, umí PerfectPixel vložit další obrázek jako novou vrstvu.

Jak použít PerfectPixel zároveň s úpravou stylů v Chrome, vám ukáže i následující video:

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Bezvadné. Výborné udělátko pro grafiky, kteří o responsivu nemají ani páru, nafrkají si design dle svého "mustru", kolikrát nesmyslně z pohledu kodéra a pak argumentují, že někde je něco o pixel jinak ;-)))

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru