Materiali delle sfumature spiegati: seta, aurora, grana e gli altri

I materiali delle sfumature sono ciò che fa sembrare una sfumatura qualcosa invece di una fusione tra due colori. Un materiale è la struttura che il colore riempie: una lucentezza direzionale nella Seta, tendaggi di luce nell’Aurora, morbide fioriture nella Mesh, sabbia nel Limo, venature nel marmo. Ogni Mark di Gradiently ne impila fino a tre, poi aggiunge luce, grana e movimento, ed è per questo che due Mark con la stessa palette possono non somigliarsi per niente.

Cos’è un materiale

Pensa alla palette come alla vernice e al materiale come alla superficie su cui si applica. Versa lo stesso blu navy, verde petrolio e arancione su seta, vetro satinato o carta fatta a mano e ottieni tre oggetti diversi. In un Mark, ogni materiale attinge alla palette del Mark stesso, quindi cambiare il materiale cambia il carattere senza cambiare i colori.

Le quattordici famiglie di materiali

Gradiently raggruppa i suoi materiali in famiglie in base a ciò a cui somigliano. I nomi qui sotto sono materiali veri che incontrerai nel Mercato; ogni famiglia ne contiene molti altri.

Seta, aurora e mesh

Questi tre sono quelli di cui le persone chiedono di più. La Seta è una lucentezza direzionale su fili sottili: elegante, un po’ formale, a suo agio con bellezza e moda. L’Aurora sono tendaggi di luce che salgono da un orlo luminoso in un cielo scuro, drammatica su un fondo vuoto. La Mesh sono morbide fioriture di colore che si sciolgono l’una nell’altra, la classica sfumatura moderna, amichevole e versatile. Le sfumature seta, le sfumature aurora e le sfumature mesh hanno ciascuna la propria guida con il CSS.

Grana, carta e stampa

La famiglia Grana fa sembrare stampato uno schermo. Fibra è carta fatta a mano con lunghe fibre e qualche puntino, Risografia è una stampa a due inchiostri, Pellicola è la grana della pellicola, Dithering scandisce il colore in pixel. Vanno bene per cibo, artigianato, libri e tutto ciò che deve sembrare fatto a mano. Nascondono anche il banding, le strisce che compaiono nelle sfumature morbide, come spiegano le sfumature granulose.

Come si impilano i livelli

Un Mark ha un livello di base e fino a due altri sopra. Ogni livello superiore ha la propria opacità e una modalità di fusione (normale, screen, multiply, overlay o soft), la stessa idea dei livelli di un editor di foto. Una ricetta comune è una base ampia come Mesh o Foschia per il campo di colore, un livello strutturale come Lino o Retino per la texture, e un livello di luce come Alone o Spiraglio per mettere a fuoco.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Luce, grana e movimento

Dentro ogni livello, una manciata di impostazioni cambia il comportamento del materiale: la scala, quanto si deforma, quanto dettaglio fine mostra, quanto è illuminato, quanta grana ha sopra e quanto si muove. La stessa Seta può essere uno scintillio stretto e luminoso o un ampio drappo scuro. Il movimento è condiviso dal Mark, con la propria velocità e deriva, così i livelli si muovono insieme e non l’uno contro l’altro.

Dettaglio e parole competono, ed è per questo che i Mark attenuano da soli il dettaglio affollato vicino al testo. Un Mark sa dove sono le parole: la sua zona più calma si sposta dietro il testo e i colori vicino alle lettere si approfondiscono o si schiariscono, così anche un materiale con texture mantiene leggibile il tuo titolo.

Come scegliere un materiale

Chiediti di cosa è fatto il tuo brand. Una panetteria è farina, carta e luce calda, quindi Fibra o Velatura. Uno studio che vende software è vetro e luce pulita, quindi Satinato o Prisma. Poi chiediti quanto spesso pubblicherai su di esso: più spesso, più calmo dovrebbe essere. Come scegliere il Mark giusto percorre il resto della decisione, e il Mercato permette di filtrare direttamente per materiale.