# Texture granulosa: aggiungere grana pellicola ai design digitali

[Canonical HTML page](https://gradiently.design/it/guide/textured-background)

Un po’ di grana è il modo più rapido per far sembrare un design digitale un oggetto fatto a mano. Troppa, e sembra uno schermo rotto. Ecco come giudicarne quantità, dimensione e colore.

## The short version

- La grana è una fine granulosità casuale stesa su un design perché il colore digitale piatto sembri pellicola, carta o stampa.
- La grana aiuta in tre modi: nasconde le bande nelle sfumature lisce, lega insieme foto e grafiche piatte e dà alle forme pulite una superficie fisica.
- Per la maggior parte dei design da schermo, la grana deve essere appena visibile a dimensione piena e invisibile a distanza di braccio; se la gente la nota per prima, ce n’è troppa.
- La grana monocromatica è la scelta sicura; la grana colorata somiglia di più alla vera pellicola ma può spostare una palette.
- Una forte compressione JPEG cancella la grana, quindi esporta le immagini granulose in PNG o JPEG di alta qualità e dai ai video granulosi un bitrate generoso.

La **grana** è uno strato fine di rumore casuale messo sopra un design perché il colore digitale perfettamente piatto sembri stampato, fotografato su pellicola o impresso nella carta. È sottile per natura: nella giusta quantità nessuno la nomina, sente solo che l’immagine ha una superficie. Farla bene si riduce a quattro impostazioni: quantità, dimensione, colore e fusione.

## Perché la grana fa sembrare meglio i design digitali

Gli schermi possono mostrare un colore che nessun materiale fisico può dare: perfettamente uniforme, perfettamente pulito. È quella pulizia a far sembrare dozzinali o incompiuti molti design digitali. La grana restituisce un po’ dell’irregolarità che ha ogni superficie reale. Fa anche tre lavori pratici.

- **Nasconde le bande.** Le sfumature lisce si spezzano in strisce visibili sugli schermi a 8 bit. Il rumore casuale rompe quei bordi, così l’occhio legge una dissolvenza continua. Le [bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) ne spiegano la causa.
- **Unifica elementi diversi.** Una foto ha una grana naturale e una forma piatta no. Un solo strato di grana su entrambe le fa sembrare parte della stessa immagine.
- **Aggiunge una superficie.** Un colore piatto si legge come uno schermo; un colore con grana si legge come un materiale. Per questo la grana sta al cuore della maggior parte delle scelte di [texture di sfondo](https://gradiently.design/it/guide/background-texture).

Un post di una torrefazione con sfondo caldo e texturizzato e un titolo breve

Uno sfondo caldo e leggermente texturizzato si legge come un oggetto lavorato, adatto a un prodotto fatto a mano.

Un post con un grande numero su uno sfondo colorato leggermente granuloso

La stessa sensazione porta un fatto semplice. La grana evita che un numero grande sembri un foglio di calcolo.

## Quanta grana aggiungere

Il test onesto è la distanza. Guarda il design al 100 per cento: la grana dovresti appena vederla. Poi guardalo sul telefono tenuto a distanza di braccio: non dovresti vederla. Se la grana è la prima cosa che qualcuno nota, dimezzala. Lavori diversi vogliono quantità diverse.

| Uso | Quantità | Dimensione della grana | Perché |
| --- | --- | --- | --- |
| Sfondo di un sito | Molto leggera, opacità dal 3 al 6% | Fine | Aree ampie e osservazione prolungata rendono evidente la grana |
| Post social | Leggera, dal 6 al 12% | Da fine a media | Sopravvive alla ricompressione e agli schermi dei telefoni |
| Poster o volantino | Media, dal 10 al 18% | Media | Visto da lontano, la grana si legge come stampa |
| Look retrò o pellicola | Forte, dal 18 al 30% | Da media a grossa | La grana fa parte dello stile |
| Loop video | Leggera, animata | Fine | Una grana statica su un video in movimento sembra sporco sull’obiettivo |

Punti di partenza, come opacità di uno strato di rumore in Sovrapponi o Luce soffusa. Regola a occhio; schermi e colori variano.

> **I design scuri ne vogliono meno** La grana si vede di più sui toni scuri e medi che sul quasi bianco. Su uno sfondo scuro, parti dalla metà della quantità che useresti su uno chiaro.

## Grana monocromatica o a colori

La vera grana della pellicola è colorata: minuscole macchioline di rosso, verde e blu che variano da fotogramma a fotogramma. La grana monocromatica digitale è solo chiaro e scuro. Entrambe hanno il loro posto.

### Grana monocromatica

- Tiene la tua palette esattamente come l’hai scelta
- Si legge come stampa, carta o risograph
- Sicura per colori di brand e loghi
- La scelta giusta per la maggior parte dei lavori

### Grana a colori

- Somiglia alla pellicola analogica
- Dà vita a foto e carnagioni
- Può spostare un po’ un colore di brand piatto
- Ideale per stili fotografici e nostalgici

La dimensione della grana conta quanto il colore. La grana fine sembra costosa e moderna. La grana grossa sembra artigianale, ruvida e rumorosa. Scala la grana sull’output: un post 1080×1350 vuole una grana più fine di un poster A3 a 3508×4961, perché il poster si vede da più lontano.

## Come aggiungere la grana in qualsiasi strumento di design

1. **Crea uno strato di rumore** Riempi un nuovo livello con grigio medio (`#808080`) e aggiungi rumore. Nella maggior parte degli editor è un filtro chiamato Aggiungi rumore, Rumore o Grana. Scegli gaussiano e monocromatico per partire pulito.
2. **Imposta la modalità di fusione** Cambia il livello in **Sovrapponi** o **Luce soffusa**. Il grigio sparisce e resta solo la granulosità, che schiarisce e scurisce i colori sotto.
3. **Abbassa l’opacità** Portala alla quantità indicata nella tabella qui sopra. Controlla al 100 per cento di zoom e ancora sul telefono.
4. **Tienila sopra** La grana sta sopra lo sfondo e le foto. Lascia testo piccolo e loghi sopra la grana se li vuoi nitidi, o sotto per un effetto stampato.
5. **Esporta con cura** Esporta in PNG o JPEG di alta qualità. Una forte compressione impasta la grana in macchie, e sta peggio che senza grana.

Se aggiungi la grana proprio a una sfumatura di colore, i [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) hanno le impostazioni per farlo, e i [gradienti con rumore](https://gradiently.design/it/guide/noise-background) hanno ricette pronte.

## La grana sul web

Su un sito non serve un file immagine per la grana. Un SVG inline con il filtro `feTurbulence` disegna il rumore nel browser a qualsiasi dimensione, quindi resta nitido su ogni schermo e pesa quasi nulla.

```html
<svg class="grain" aria-hidden="true">
  <filter id="grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

<style>
  .grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.06;
  }
</style>
```

Uno strato di grana fisso su un’intera pagina. Alza `baseFrequency` per una grana più fine, abbassalo per una più grossa. Togli la matrice di colore per un rumore a colori.

Tieni bassa l’opacità: una pagina intera di grana è un’area ampia, e il 6 per cento spesso basta. Il [riferimento MDN per feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) elenca ogni impostazione.

## La grana nel video e nel movimento

Su un filmato in movimento, anche la grana deve muoversi. Un solo strato di grana fermo su un video sembra un obiettivo sporco. Usa una grana animata che cambia a ogni fotogramma, tienila fine ed esporta con un bitrate generoso, perché la compressione video tratta la grana come un dettaglio da buttare. Per i loop, leggi i [video in loop senza giunture](https://gradiently.design/it/guide/seamless-loop-video) prima di aggiungere texture.

Gradiently costruisce la grana in ogni Mark come parte della sua ricetta, accanto a colore, materiale, luce e movimento, così la texture viene resa da capo a ogni misura in cui disegni invece di essere stirata da un’unica immagine. Se vuoi uno sfondo che abbia già la sua superficie, sfoglia il Mercato e disegna con qualsiasi Mark non ancora riservato.

## FAQ

### Che cos’è la grana nel design?

Una fine granulosità casuale di chiari e scuri stesa su un design perché il colore digitale piatto sembri pellicola, carta o stampa.

### Quanta grana devo aggiungere a un’immagine?

Quanto basta per vederla al 100 per cento di zoom e non a distanza di braccio. Per i post social, uno strato di rumore con opacità di circa il 6-12 per cento in Sovrapponi è un buon inizio.

### La grana risolve le bande nei gradienti?

Di solito sì. Il rumore casuale rompe i bordi netti tra le bande, così l’occhio legge una dissolvenza liscia.

### Perché la mia grana sparisce dopo il caricamento?

Le piattaforme ricomprimono le immagini e trattano la grana fine come un dettaglio da scartare. Usa un po’ più di grana, esporta in PNG o JPEG di alta qualità e carica alla dimensione esatta della piattaforma.

### La grana pellicola deve essere a colori o in bianco e nero?

La grana monocromatica mantiene esatti i colori del brand e va bene per la maggior parte dei lavori. La grana a colori somiglia di più alla pellicola analogica e va bene per gli stili fotografici.
