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.
reklama

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:

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

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ář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

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

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
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.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru