Guide a scatto per misurare gli elementi del sito Web con nastro per Chrome

Un buon web design si basa su diversi fattori, uno dei quali è il corretto posizionamento di ogni elemento. Nastro è un'estensione di Chrome che aiuta i web designer a farlo consentendo di aggiungere righelli a una pagina web. Il nastro va oltre ciò che offrono le estensioni di misurazione dei pixel comuni; non ti dice solo l'area occupata da un particolare elemento in pixel, ma ti consente anche di aggiungere tanti righelli a l'interfaccia del browser che desideri, per misurare e delineare la distanza relativa di elementi diversi tra loro. È possibile aggiungere righelli sia in orizzontale che in verticale, definire i punti di origine (sì, più di uno) e impostare il puntatore per agganciare automaticamente a diversi elementi in una pagina Web mentre ci si sposta su di essi, proprio come in Photoshop. Il nastro è abilitato su una pagina Web tramite un pulsante ed è controllato esclusivamente dalla tastiera. Ovviamente, la stessa pagina web non rimane funzionale mentre il nastro è abilitato, quindi non perderai la normale funzionalità dei tasti.

Una volta installato, fai clic sul pulsante dell'estensione accanto alla barra dell'URL per abilitarlo. Apparirà un piccolo popup in basso a sinistra, che elenca le scorciatoie da tastiera e le loro funzioni. Il cursore si trasformerà automaticamente in un righello con linee orizzontali e verticali. Mentre sposti il ​​cursore sulla pagina web, noterai che si aggancia agli elementi (evidenziato in rosso). Consulta l'elenco delle funzioni della tastiera per determinare come aggiungere un righello. La maggior parte di queste scorciatoie sono abbastanza intuitive per cominciare; ad esempio, è possibile utilizzare rispettivamente i tasti H e L per aggiungere linee di righello orizzontale e verticale.

Puoi rilasciare sia una linea verticale che orizzontale originata dallo stesso punto posizionando il cursore su di esso e premendo il tasto O. Il nastro è eccellente per lavorare con elementi di design di grandi dimensioni e offre anche uno strumento di ingrandimento che ti permetterà di aggiungere righelli a elementi più piccoli. Per attivare lo strumento di ingrandimento (chiamato Lente), premi il tasto L con il nastro abilitato e il cursore ingrandirà tutto ciò su cui lo sposti.

I righelli abilitati da Tape possono contenere con precisione anche i piccoli elementi del display e creare una buona griglia attorno ad essi è molto semplice. Forse la migliore caratteristica dell'estensione è che se si disattiva il nastro su una pagina dopo aver tracciato una griglia, lo farà ricorda i tuoi vecchi segni alla successiva attivazione, purché non aggiorni la pagina, chiudi la scheda o esci browser.

Il nastro è abbastanza veloce e molto reattivo e non abbiamo trovato motivo di lamentarci nei nostri test. Le funzionalità sono sufficienti per ogni web designer che utilizza Chrome per provarlo.

Installa nastro dal Chrome Web Store