Gradienti: forse li ami, forse no.
Ad ogni modo, negli ultimi anni sono diventati molto popolari nel mondo del design e sembra che non spariranno tanto presto. Noi di Be.Family adoriamo utilizzare i gradienti perché non solo aggiungono livelli di profondità, ma ci danno la libertà di creare colori super personalizzati!
In onore delle nostre amate sfumature, abbiamo creato un elenco di cinque strumenti online per selezionare i vostri gradienti preferiti.
Il bello è che sono tutti gratuiti!
1. Grabient
Grabient è stato effettivamente creato l’anno scorso dal team Unfold su Dribbble.
Amiamo questo strumento perché è estremamente flessibile: si ha il controllo completo sul set di gradienti in termini di personalizzazione. È possibile modificare l’angolo, aggiungere o rimuovere colori e modificare anche la quantità di ciascun colore visualizzato.
Chicchetta: dalla home del sito di Grabient potrete scaricare il file in Sketch con alcuni gradienti molto molto validi.
2. Gradients Guru
Gradients Guru offre centinaia di bellissime sfumature che puoi filntrare per “Cool” (colori morbidi, più chiari) o “Strong” (colori molto più saturi). Ciò che amiamo è la possibilità di ruotare l’angolo di ogni sfumatura con un clic di un pulsante e ottenere l’aspetto esatto che si sta cercando.
Un’altra funzione utile è chiamata “Blend Mode” e permette applicare e sovrapporre il gradiente scelto a qualsiasi immagine. È quindi possibile personalizzare la trasparenza del gradiente sopra l’immagine e la variante di colore. Quando hai finito, fai clic su “Download” e l’immagine è pronta per essere utilizzata nel tuo computer. Ecco un esempio:
3. Egg Gradients
Egg Gradients ha oltre 200 combinazioni di sfumature tra cui scegliere, e sì, i gradienti sono visualizzati a forma di uova! Amiamo questo strumento in particolare perché i nomi dei gradienti sono ridicolmente intelligenti (ad esempio “Notification from ex” e “John Snow’s funeral” giusto per nominarne un paio). Se vuoi ordinare i gradienti per colore, puoi farlo facendo clic sulla tonalità desiderata sotto il testo introduttivo. Per utilizzare una delle sfumature del tuo progetto, copia e incolla i codici esadecimali e replica il gradiente da solo, oppure copia semplicemente il CSS.
Vi assicuriamo che tutti, ma proprio tutti i nomi dei gradienti sono fantastici:
4. UI Gradients
Questo è forse il primo tool online che mi è capitato di provare cercando il giusto gradiente per il mio progetto.
Atterrati sul sito di UI Gradients e vi troverete faccia a faccia con un gradiente grande e bellissimo. Copiate e incolla il codice esadecimale o il CSS oppure scaricate il file .jpg ad alta risoluzione del gradiente. Potrete anche aggiungere il vostro gradiente personalizzato al sito usando le istruzioni di GitHub sotto l’opzione Aggiungi un gradiente. Amiamo la grande visualizzazione dei gradienti e la facilità con cui si riesca a passare da uno all’altro con i tasti direzionali.
Se tuttavia preferite vedere tutti i gradienti contemporaneamente, c’è l’opzione dedicata Show all gradients.
5. Web Gradients
Un altro semplice strumento che ti fa risparmiare un sacco di tempo è Webgradients, una raccolta di 180 gradienti da utilizzare per i vostri background. A differenza di alcuni degli altri strumenti menzionati qui, questi gradienti non sono personalizzabili, ma sono già stati perfettamente curati dal team di progettazione che ha creato l’app. Anche qui è possibile scaricare la raccolta completa per Photoshop o Sketch!
Quindi, se stai cercando gradienti grab-and-go, questo strumento sarà probabilmente l’ideale per te.
Questi strumenti vi torneranno sicuramente utili la prossima volta che vorrete implementare una bella sfumatura nel vostro progetto. Ora, è il momento di giocare con ciascuno di essi e scoprire quale strumento funziona meglio per il tuo metodo di lavoro.
