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.
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:
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.
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 ;-)))