Gradienti con grana: perché un po’ di rumore rende il colore prezioso

Un gradiente con grana è un gradiente con sopra un sottile strato di rumore casuale, così il colore ha una texture visibile invece di una superficie digitale perfettamente liscia. È diventato popolare per una ragione pratica e una visiva: la grana nasconde le strisce che le sfumature lisce mostrano spesso, e fa sembrare il colore sullo schermo qualcosa di stampato, filmato o dipinto. Fatta bene, la maggior parte delle persone non nota affatto la grana. Penserà semplicemente che il colore sia più bello.

Perché la grana migliora un gradiente

Ci sono tre ragioni, e si sommano.

• Nasconde il banding. La maggior parte delle immagini porta 256 sfumature per canale di colore. Una sfumatura dolce su un’area ampia deve passare da una all’altra, e l’occhio coglie i gradini come strisce. Il rumore casuale sparpaglia i pixel tra sfumature vicine, così i bordi tra i gradini spariscono. È la stessa idea del dithering. Vedi il banding nei gradienti.
• Aggiunge tattilità. Le cose fisiche non sono mai perfettamente lisce. La pellicola ha la grana, la carta ha la trama e l’inchiostro stampato si posa in modo irregolare. Una piccola quantità di rumore prende in prestito quelle associazioni, così una sfumatura digitale piatta comincia a sembrare un materiale.
• Sopravvive meglio alla compressione. Le piattaforme social e le app di messaggistica ricomprimono le immagini. Le sfumature lisce sono esattamente ciò che la forte compressione appiattisce in blocchi, e una grana fine dà al codificatore dettagli a cui aggrapparsi. Prova comunque la tua esportazione: una compressione molto forte può impastare anche la grana.

Quanta grana aggiungere

L’errore più comune è esagerare. Una grana pesante sembra un obiettivo sporco o una foto da telefono con poca luce. La quantità giusta dipende dalla dimensione dell’area calma, da quanto è scuro il gradiente e da dove verrà visto. Considera i numeri qui sotto come punti di partenza per uno strato di rumore nella modalità di fusione Sovrapponi o Luce soffusa, poi giudica a occhio a piena dimensione.

Dove mettere la grana

La grana non deve essere uniforme. Sembra più naturale sulle aree grandi e calme di colore e sui toni scuri, dove la grana della pellicola è più visibile nella vita reale. Tienila più leggera dietro il testo piccolo, perché il rumore ai bordi delle lettere le fa sembrare sfocate. E tieni logo e testo sopra lo strato di grana, non sotto, così restano nitidi.

Come aggiungere la grana a un gradiente in CSS

Il metodo più leggero è un filtro di rumore SVG usato come immagine di sfondo. feTurbulence genera rumore casuale, feColorMatrix ne toglie il colore perché non punteggi, e una modalità di fusione lo mescola nel gradiente sotto. Valori più alti di baseFrequency danno una grana più fine; stitchTiles fa ripetere la tessera senza giunture.

.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}

Se preferisci un’immagine, una piccola immagine di rumore ripetibile salvata in PNG funziona come l’SVG. Tienila senza perdita: le tessere di rumore in JPEG raccolgono artefatti di compressione. Per altri motivi e trucchi di texture senza immagini, vedi la texture di rumore in CSS.

Come aggiungere la grana negli strumenti di design

1. 1

   Costruisci prima il gradiente

   Sistema colori, arresti e composizione su un livello pulito. La grana non può salvare una sfumatura fangosa; vedi i gradienti fangosi.

2. 2

   Aggiungi un livello di rumore separato

   Usa l’effetto rumore dello strumento o una texture di rumore su un livello a sé sopra il gradiente, così puoi regolarla senza toccare il colore.

3. 3

   Rendila monocromatica

   Desatura il rumore perché non aggiunga puntini colorati, poi imposta il livello su Sovrapponi o Luce soffusa.

4. 4

   Abbassa l’opacità finché sparisce, poi torna indietro un po’

   La quantità giusta è di solito appena sopra il punto in cui smetti di notarla.

5. 5

   Esporta alla dimensione finale, senza perdita se puoi

   Ingrandire un’immagine granulosa trasforma la grana in macchie. Esporta in PNG alla dimensione esatta, o in JPEG di alta qualità per le foto.

La grana in stampa

Una grana pensata per lo schermo di un telefono può comportarsi in modo diverso sulla carta. A 300 dpi il rumore molto fine può sparire del tutto, e quello grosso può sembrare un difetto di stampa. Per poster e volantini, crea la grana alla risoluzione di stampa e provala sulla carta vera. La stampa dei gradienti tratta il resto del processo.

La grana è anche uno dei tanti materiali. Carta, vetro e seta cambiano ciascuno ciò che un gradiente dice; la texture per gradienti li confronta. Ogni Mark porta la propria impostazione di grana insieme ai suoi colori e materiali, quindi l’equilibrio è già impostato quando cominci a progettare.