In breve
- 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.
In questa pagina
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 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.
Uno sfondo caldo e leggermente texturizzato si legge come un oggetto lavorato, adatto a un prodotto fatto a mano.
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.
Quantità
Dimensione della grana
Perché
Quantità
Dimensione della grana
Perché
Quantità
Dimensione della grana
Perché
Quantità
Dimensione della grana
Perché
Quantità
Dimensione della grana
Perché
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 hanno le impostazioni per farlo, e i gradienti con rumore 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.
<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>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 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 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.
Le domande più frequenti
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.
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