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:

Reklama

Komentáře

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