In breve
- La texture di un gradiente è qualsiasi dettaglio di superficie steso su una sfumatura di colore, come grana, fibra di carta, vetro o riflesso di seta, che lo fa leggere come un materiale.
- Ogni famiglia di texture ha le sue associazioni: la grana suggerisce pellicola e stampa, la carta l’artigianato, il vetro la tecnologia e la seta il lusso.
- La texture cambia il carattere di un gradiente più di quanto lo faccia un cambio di colore, ed è per questo che è una delle cose più difficili da copiare.
- Le texture si possono sovrapporre, di solito come una struttura come seta o scanalatura, una superficie come grana o carta e una luce sopra.
- La texture deve restare fuori dalla strada delle parole: più leggera dietro il testo, più forte nelle aree aperte.
In questa pagina
La texture di un gradiente è la superficie che stendi su una sfumatura di colore perché si legga come un materiale e non come un’impostazione predefinita dello schermo: una grana fine come la pellicola, la grana della carta, la limpidezza e la rifrazione del vetro, o le pieghe morbide della seta. I colori dicono che umore hai; la texture dice di cosa è fatta la cosa. Per questo due gradienti con colori identici possono sembrare completamente diversi, e per questo la texture è una delle parti più distintive di un’identità visiva.
Le quattro famiglie di texture
| Texture | Che aspetto ha | Cosa dice | Si adatta a |
|---|---|---|---|
| Grana | Fine puntinatura casuale sul colore | Pellicola, stampa, calore analogico | Editoria, musica, fotografia, la maggior parte dei brand |
| Carta | Fibre morbide e trama, base bianco sporco caldo | Artigianato, calma, qualcosa fatto a mano | Cartoleria, cibo, libri, studi |
| Vetro | Limpidezza, sfocatura, rifrazione, riflessi netti | Tecnologia, precisione, profondità | App, software, hardware, finanza |
| Seta | Pieghe lisce con riflessi morbidi e mobili | Lusso, morbidezza, sensualità | Bellezza, moda, profumi, gioielli |
Grana: pellicola e stampa
La grana è la texture più versatile e la più facile da aggiungere. Un sottile strato di rumore monocromatico fa sembrare una sfumatura fotografata o stampata, e nasconde anche il banding che i gradienti digitali lisci mostrano spesso. Funziona con quasi qualsiasi palette, ed è per questo che è diventata il ritocco finale predefinito. Quanta usarne, e come, è spiegato nei gradienti con grana.
Carta: artigianato e calma
La texture di carta porta una base bianco sporco calda, fibre morbide e una lieve irregolarità, come se il gradiente fosse stato stampato o dipinto. Si abbina naturalmente ai colori chiari, agli inchiostri spenti e ai caratteri con grazie. Tieni piccole le fioriture di colore e lascia che la carta si veda; un gradiente pastello o terroso su carta sembra fatto a mano come non riesce mai un fondo bianco puro. Vedi i gradienti pastello per palette adatte.
Vetro: tecnologia e profondità
Le texture di vetro sono di due tipi. Il vetro smerigliato sfoca ciò che sta dietro, ed è la base del glassmorphism. Il vetro limpido o scanalato rifrange il colore in bande e aggiunge riflessi nitidi dove la luce colpisce un bordo. Entrambi suggeriscono precisione e hardware moderno. Il punto chiave è il riflesso: una linea sottile e luminosa posta dove la luce colpirebbe, e un colore più scuro dappertutto altrove.
Seta: lusso e morbidezza
Seta e raso sembrano pieghe lisce di tessuto: ampie ombre morbide e riflessi stretti e luminosi dove la stoffa gira verso la luce. Sullo schermo significa un gradiente con bande di luce nitide tra toni più profondi, spesso in una sola tinta. I colori gioiello intensi, come vinaccia, smeraldo e blu notte, sembrano abiti da sera; quelli chiari, come champagne e rosa tenue, sembrano da sposa o da cura della pelle. La seta funziona benissimo al rallentatore, dove i riflessi possono scivolare.
Come sovrapporre le texture
I materiali reali combinano texture: la seta ha una lucentezza e una trama, la carta stampata ha fibre e grana d’inchiostro. I gradienti possono fare lo stesso, purché ogni livello abbia un compito chiaro. Un ordine affidabile è colore, poi struttura, poi superficie, poi luce.
- 1
Campo di colore
La sfumatura in sé: il tuo gradiente, mesh o alone. Sistema prima questo; la texture non può correggere una palette fangosa.
- 2
Struttura
La forma a grande scala del materiale: pieghe di seta, scanalature di vetro, la morbida irregolarità della carta. Cambia il modo in cui scorre il colore.
- 3
Superficie
Il dettaglio fine: grana o trama della carta. Sta sopra tutto e fa sembrare fisica la superficie.
- 4
Luce
Riflessi e ombre che dicono all’occhio da dove viene la luce. Un’unica sorgente di luce coerente fa leggere tutti i livelli come un solo oggetto.
.silk {
position: relative;
isolation: isolate;
/* colour and structure: satin folds in one hue */
background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}
.silk::after {
/* surface: fine monochrome grain */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
opacity: 0.25;
}Texture e leggibilità
La texture aggiunge dettaglio, e il dettaglio dietro le lettere piccole le rende più difficili da leggere. Tieni la texture più leggera dietro il testo e più forte nelle aree aperte, e tieni testo e loghi sopra ogni livello di texture perché i loro bordi restino nitidi. I riflessi forti della seta e i riflessi del vetro sono il rischio maggiore, perché creano linee luminose che possono tagliare una parola. Vedi il testo su sfondi movimentati.
La texture a piena forza dietro le parole: la superficie compete con la frase.
Lo stesso materiale che si rilassa dietro le parole: texture dove c’è spazio, calma dove c’è testo.
La texture come identità
I colori si possono prelevare da uno screenshot in pochi secondi. Una texture, e il modo in cui si comporta con la luce e il movimento, è molto più difficile da riprodurre. Questo fa della texture uno dei modi più forti per rendere tuo un gradiente. Ogni Mark di Gradiently sovrappone fino a tre materiali ai suoi colori, con la sua luce e la sua grana, e la Forge ti lascia sceglierli controllo per controllo.
GR·75X1·NM
February Quay
Vedi questo MarkLe domande più frequenti
Cos’è la texture di un gradiente?
La texture di un gradiente è un dettaglio di superficie steso su una sfumatura di colore, come grana, carta, vetro o seta, perché il gradiente si legga come un materiale.
Quale texture dovrei usare su un gradiente?
Abbina la texture a ciò di cui sarebbe fatto il tuo brand: grana per pellicola e stampa, carta per l’artigianato, vetro per la tecnologia, seta per il lusso.
Come aggiungo una texture a un gradiente in CSS?
Sovrapponi al gradiente un’immagine di rumore o di motivo con una modalità di fusione come Luce soffusa o Sovrapponi, a bassa opacità.
Si possono combinare più texture su un solo gradiente?
Sì. Sovrapponile per compito: campo di colore, poi struttura come le pieghe di seta, poi superficie come la grana, poi luce.
La texture rende il testo più difficile da leggere?
Può farlo. Tieni la texture più leggera dietro le parole e tieni il testo sopra tutti i livelli di texture.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
