# Korntekstur: legg filmkorn til digitale design

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

Litt korn er raskeste vei til et digitalt design som føles laget som en gjenstand. For mye ligner en ødelagt skjerm. Slik vurderer du mengde, størrelse og farge.

## The short version

- Korntekstur er fine, tilfeldige prikker over et design som får flat digital farge til å ligne film, papir eller trykk.
- Korn hjelper på tre måter: skjuler fargebånd i jevne blandinger, binder foto og flat grafikk sammen og gir rene former en fysisk overflate.
- I de fleste skjermdesign bør korn så vidt synes i full størrelse og være usynlig på armlengdes avstand. Merkes det først, er det for mye.
- Monokromt korn er et trygt standardvalg. Farget korn ligner mer på ekte film, men kan endre paletten.
- Kraftig JPEG-komprimering glatter bort korn. Eksporter derfor stillbilder som PNG eller JPEG med høy kvalitet, og gi kornete video god bitrate.

**Korntekstur** er et fint lag med tilfeldig støy lagt over et design, så helt flat digital farge ser trykt, fotografert på film eller presset inn i papir ut. Den er bevisst subtil: med riktig mengde setter ingen navn på den, de føler bare at bildet har en overflate. For å treffe må du styre fire innstillinger: mengde, størrelse, farge og blanding.

## Hvorfor korn gjør digitale design bedre

Skjermer kan vise farge ingen fysisk overflate kan ha: helt jevn og helt ren. Renheten får mange digitale design til å virke billige eller uferdige. Korn tilfører litt av ujevnheten alle ekte overflater har. Det gjør også tre praktiske jobber.

- **Skjuler fargebånd.** Jevne blandinger brytes til synlige striper på 8-bits skjermer. Tilfeldig støy bryter opp kantene så øyet leser en sammenhengende overgang. [Fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer årsaken.
- **Forener blandede elementer.** Et fotografi har naturlig korn, en flat form har ingen. Ett kornlag over begge får dem til å høre til samme bilde.
- **Gir en overflate.** Flat farge oppfattes som skjerm. Farge med korn oppfattes som materiale. Derfor er korn sentralt i de fleste valg av [bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture).

Et kaffebrenneriinnlegg med varm teksturert bakgrunn og kort overskrift

En varm, mykt teksturert bakgrunn virker som en håndlaget gjenstand, noe som passer et håndlaget produkt.

Et innlegg med et stort tall på en mykt kornete farget bakgrunn

Samme følelse bærer et enkelt faktum. Korn hindrer at et stort tall ligner et regneark.

## Hvor mye korn du bør legge til

Den ærlige testen er avstand. Se designet ved 100 prosent: kornet bør så vidt synes. Se så på telefon på armlengdes avstand: da bør det ikke synes. Hvis kornet er det første noen merker, halver mengden. Ulike oppgaver trenger ulike mengder.

| Bruk | Mengde | Kornstørrelse | Hvorfor |
| --- | --- | --- | --- |
| Nettstedsbakgrunn | Svært lett, 3 til 6 % opasitet | Fin | Store flater og lang betraktning gjør korn tydelig |
| Sosialt innlegg | Lett, 6 til 12 % | Fin til middels | Tåler ny komprimering og telefonskjermer |
| Plakat eller flygeblad | Middels, 10 til 18 % | Middels | Sett på avstand oppfattes korn som trykk |
| Retro- eller filmuttrykk | Sterk, 18 til 30 % | Middels til grov | Kornet er en del av stilen |
| Videoløkke | Lett, animert | Fin | Statisk korn på bevegelig video ligner smuss på objektivet |

Utgangspunkter som opasitet på et støylag i Overlay eller Soft Light. Juster med øyet, skjermer og farger varierer.

> **Mørke design trenger mindre** Korn vises mer på mørke og mellomlyse toner enn nesten hvitt. På mørk bakgrunn begynner du med halvparten av mengden du ville brukt på lys.

## Monokromt eller farget korn

Ekte filmkorn er farget: små røde, grønne og blå prikker som varierer fra bilde til bilde. Digitalt monokromt korn er bare lyst og mørkt. Begge har sin plass.

### Monokromt korn

- Beholder paletten akkurat som valgt
- Oppfattes som trykk, papir eller risograf
- Trygt for merkevarefarger og logoer
- Riktig standardvalg for det meste

### Farget korn

- Ligner analog film
- Gir liv til foto og hudtoner
- Kan endre flat merkevarefarge litt
- Best for fotografiske, nostalgiske stiler

Kornstørrelsen betyr like mye som fargen. Fint korn virker kostbart og moderne. Grovt korn virker håndlaget, røft og kraftig. Tilpass til sluttformatet: et innlegg i 1080×1350 trenger finere korn enn en A3-plakat i 3508×4961, fordi plakaten ses på lengre avstand.

## Legg til korntekstur i et designverktøy

1. **Lag et støylag** Fyll et nytt lag med mellomgrått (`#808080`) og legg til støy. I de fleste verktøy heter filteret Add Noise, Noise eller Grain. Velg gaussisk og monokromt for en ren start.
2. **Velg blandingsmodus** Bytt laget til **Overlay** eller **Soft Light**. Gråfargen forsvinner, og bare prikkene blir igjen, som lysner og mørkner fargene under.
3. **Senk opasiteten** Senk til mengden i tabellen. Sjekk ved 100 prosent zoom og igjen på telefon.
4. **Hold laget øverst** Korn ligger over bakgrunn og bilder. Ha liten skrift og logoer over kornet for skarphet, eller under for trykt preg.
5. **Eksporter forsiktig** Eksporter PNG eller JPEG med høy kvalitet. Kraftig komprimering smører korn til flekker, som ser verre ut enn ingen korn.

For korn på fargeblandinger har [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) innstillingene, og [støygradienter](https://gradiently.design/nb/guide/noise-background) gir ferdige oppskrifter.

## Korntekstur på nettet

På et nettsted trenger du ingen bildefil for korn. En inline-SVG med `feTurbulence` tegner støy i nettleseren i enhver størrelse. Den forblir skarp på alle skjermer og veier nesten ingenting.

```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>
```

Et fast kornlag over hele siden. Øk `baseFrequency` for finere korn, senk for grovere. Fjern fargematrisen for farget støy.

Hold opasiteten lav: korn over en hel side dekker mye, og 6 prosent er ofte nok. [MDN-referansen for feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) viser alle innstillingene.

## Korn i video og bevegelse

På bevegelige opptak bør korn også bevege seg. Ett stillestående kornlag ligner et skittent objektiv. Bruk animert korn som endres i hvert bilde, hold det fint og eksporter med god bitrate, fordi videokomprimering behandler korn som detaljer den kan kaste. Les [sømløse videoløkker](https://gradiently.design/nb/guide/seamless-loop-video) før du legger til tekstur i løkker.

Gradiently bygger korn inn i hver Mark som del av oppskriften sammen med farge, materiale, lys og bevegelse. Teksturen gjengis dermed på nytt i hver størrelse fremfor å strekkes fra ett bilde. Vil du ha en bakgrunn som allerede har sin overflate, utforsk Markedet og design med en Mark ingen har sikret seg.

## FAQ

### Hva er korntekstur i design?

Fine, tilfeldige lyse og mørke prikker lagt over et design, så flat digital farge ligner film, papir eller trykk.

### Hvor mye korn bør jeg legge på et bilde?

Nok til å ses ved 100 prosent zoom, men ikke på armlengdes avstand. For sosiale innlegg er et støylag i Overlay på omtrent 6 til 12 prosent opasitet en god start.

### Retter korn fargebånd i gradienter?

Vanligvis ja. Tilfeldig støy bryter opp de harde kantene mellom båndene, så øyet ser en jevn overgang.

### Hvorfor forsvinner kornet etter opplasting?

Plattformer komprimerer bilder på nytt og forkaster fint korn som detaljer. Bruk litt mer korn, eksporter PNG eller JPEG med høy kvalitet og last opp i nøyaktig plattformstørrelse.

### Bør filmkorn være farget eller svart-hvitt?

Monokromt korn beholder merkevarefarger nøyaktig og passer det meste. Farget korn ligner mer analog film og passer fotografiske stiler.