RulersGuides.js - Righelli e guide di stile Photoshop sul Web

Una delle cose migliori di Photoshop sono le linee guida facili da usare che possono essere estratte dai righelli. Queste guide possono rendere il processo di progettazione molto più semplice quando si tratta di posizionare un oggetto e ottenere l'equilibrio giusto.

Con nostra grande gioia, Mark Rolich ha implementato questa particolare funzionalità per l'uso sul Web. Ha creato RulersGuide.js basandosi sui righelli e le linee guida di Photoshop.

RulersGuide.js ha la possibilità di aggiungere un'interfaccia in stile guida di Photoshop su una pagina web . Le linee che sono state create possono essere salvate anche per uso futuro. Fornisce tre opzioni di utilizzo: una libreria javascript, un bookmarklet o un'estensione Chrome .

Il Javascript

RulersGuide.js richiede alcune altre dipendenze per funzionare bene. Poiché funziona tramite il trascinamento e il rilascio di linee nella pagina e richiede l'utilizzo di alcuni eventi, dovrai aggiungere Dragdrop.js (disponibile qui) ed Event.js (disponibile qui). Quindi, includi quelle dipendenze insieme all'origine RulersGuide.js (scarica qui) in questo modo:

Se non ti piace lo stile predefinito, puoi modificare il suo CSS in base ai tuoi gusti. Quindi, inizializza questi pacchetti con il seguente script:

Bookmarklet e Chrome Extension

Per praticità, puoi utilizzare questo strumento come bookmarklet o estensione di Chrome e aprirlo quando e dove vuoi.

Installazione di Bookmarklet

Per il bookmarklet, installalo come al solito. Poiché Internet Explorer a volte funziona in modo diverso, questo strumento lo consente differenziando il programma di installazione dei bookmarklet per gli utenti IE e Non-IE. Basta trascinare e rilasciare il link appropriato sotto alla barra dei bookmarklet.

• Bookmarklet non IE
• Bookmarklet di IE Users

Installazione dell'estensione di Chrome

Se sei un amante di Chrome, ti potrebbe piacere questa opzione. Sfortunatamente, RulersGuide non è ancora disponibile nel Chrome Webstore. L'unica scelta è installarla manualmente.

Innanzitutto, prendi il file di estensione qui. Il browser ti chiederà di confermare il file; basta premere continua. L'estensione non verrà installata automaticamente perché Chrome ha il suo protocollo di sicurezza per tenerti al sicuro.

Aprilo selezionando Opzioni> Strumenti> Estensioni oppure apri una nuova scheda quindi copia e incolla chrome: // extensions nella barra degli indirizzi. Quindi, trascina il file RulersGuide.crx scaricato nella pagina di estensione come mostrato di seguito.

L'estensione è ora pronta.

Lavorare con RulersGuide

Come accennato, RulersGuide funziona esattamente come il righello e la linea guida di Photoshop. Quando attivi questo strumento, otterrai righelli nella parte superiore e sinistra del browser. Puoi estrarre alcune linee da quei governanti.

E nella parte in alto a sinistra della pagina, puoi ottenere più opzioni dal menu disponibile. Da questo menu, puoi personalizzare se vuoi che le linee vengano mostrate, salvate, bloccate e altro.

Impariamo a conoscere meglio le opzioni.

• L'opzione Nascondi è usata per nascondere sia i righelli che le guide come desideri. Anche quando i righelli sono nascosti, puoi ancora vedere l'opzione di menu.

• Se premi Sblocca, i righelli rimarranno visibili nella pagina mentre scorri. Cancella tutte le guide è utile quando vuoi cancellare tutte le guide che hai creato.
• L'opzione Salva griglia è usata per salvare la griglia che hai creato. La griglia verrà salvata in base alla posizione della pagina, quindi non è possibile utilizzare la stessa griglia su altre finestre / schede del browser. E come ci si aspetterebbe, l'opzione Open grid è di aprire le tue griglie salvate.

• Quando premi l' opzione Mostra informazioni dettagliate, la modalità informazioni dettagliate sarà abilitata. Può mostrarti la posizione e la dimensione delle regioni della griglia che crei e le eventuali modifiche apportate alla posizione della guida.

• L'ultimo è l' opzione di snap . Questo è quello che mi piace di RulersGuide. È possibile agganciare le guide all'elemento DOM o utilizzarlo con la dimensione dei pixel definita. Nota che l'opzione Snap to DOM è ancora nella sua fase sperimentale al momento della scrittura. Può rallentare o non rispondere su una pagina con molti elementi.

Conclusione

Sfortunatamente, c'è ancora un piccolo inconveniente. Non è possibile rimuovere una singola guida come in Photoshop. È possibile rimuovere solo tutte le guide e sxtart per crearle da zero. Tuttavia, se lavori spesso sui layout web sui browser, questo strumento fa al caso tuo.

23 Uso intelligente e divertente degli emoji

Se sei un utente di smartphone attivo, che è praticamente un dato di questi tempi, probabilmente avrai molta dimestichezza con le emoji. Sebbene gli emoji siano originari del Giappone, oggigiorno l'uso di emoji è ormai una caratteristica comune nei messaggi.Il loro design e il loro utilizzo possono sembrare piuttosto semplici ma in realtà c'è un grande potenziale nell'uso di queste emoticon in modo creativo. Ab

(Consigli tecnici e di design)

10 siti per creare gratuitamente GIF animate

Qualunque sia il tuo stato d'animo o la tua fantasia, da qualche parte nel mondo online, c'è probabilmente una GIF là fuori per mostrare come ti senti veramente. Ma cosa succede se non trovi quella GIF esatta che desideri ? Perché non creare la tua GIF animata personalizzata? Non è necessario essere un esperto per farlo e non sono necessarie competenze tecniche per crearne uno.Qui

(Consigli tecnici e di design)