# Kornstruktur: så lägger du filmkorn på digitala designer

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

Lite korn är det snabbaste sättet att få en digital design att kännas som ett tillverkat föremål. För mycket och det ser ut som en trasig skärm. Så bedömer du mängd, storlek och färg.

## The short version

- Kornstruktur är ett fint, slumpmässigt stänk lagt över en design så att platt digital färg läses som film, papper eller tryck.
- Korn hjälper på tre sätt: det döljer bandning i mjuka gradienter, binder ihop foton och platt grafik och ger rena former en fysisk yta.
- För de flesta skärmdesigner ska korn knappt synas i full storlek och vara osynligt på armlängds avstånd; märker folk det först är det för mycket.
- Enfärgat korn är det säkra standardvalet; färgat korn liknar verklig film mer men kan förskjuta en palett.
- Hård JPEG-komprimering jämnar ut korn, så exportera kornig stillbild som PNG eller JPEG i hög kvalitet och ge kornig video en generös bitrate.

**Kornstruktur** är ett fint lager slumpmässigt brus som läggs över en design så att helt platt digital färg ser ut som om den tryckts, fotograferats på film eller pressats in i papper. Det är subtilt med flit: i rätt mängd sätter ingen ord på det, man känner bara att bilden har en yta. Att få det rätt handlar om fyra inställningar: mängd, storlek, färg och blandning.

## Därför ser digitala designer bättre ut med korn

Skärmar kan visa färg som inget fysiskt material kan: helt jämn, helt ren. Just den renheten får många digitala designer att kännas billiga eller ofärdiga. Korn ger tillbaka lite av den ojämnhet som varje verklig yta har. Det gör dessutom tre praktiska jobb.

- **Det döljer bandning.** Mjuka gradienter bryts upp i synliga ränder på 8-bitsskärmar. Slumpmässigt brus bryter upp kanterna så att ögat uppfattar en jämn övergång. [Bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar orsaken.
- **Det förenar blandade element.** Ett foto har naturligt korn och en platt form har inget. Ett kornlager över båda får dem att se ut att höra till samma bild.
- **Det ger en yta.** Platt färg läses som en skärm; färg med korn läses som ett material. Därför ligger korn i hjärtat av de flesta val av [bakgrundsstruktur](https://gradiently.design/sv/guide/background-texture).

Ett inlägg från ett kafferosteri med varm strukturerad bakgrund och en kort rubrik

En varm, mjukt strukturerad bakgrund läses som ett hantverk, vilket passar en produkt gjord för hand.

Ett inlägg med ett stort tal på en mjukt kornig färgad bakgrund

Samma känsla bär ett enkelt faktum. Korn hindrar ett stort tal från att se ut som ett kalkylblad.

## Hur mycket korn ska du lägga till

Det ärliga testet är avstånd. Titta på designen i 100 procent: du ska precis kunna se kornet. Titta sedan på den i mobilen på armlängds avstånd: då ska du inte kunna det. Om korn är det första någon lägger märke till, halvera det. Olika jobb passar olika mängd.

| Användning | Mängd | Kornstorlek | Varför |
| --- | --- | --- | --- |
| Webbplatsbakgrund | Mycket lätt, 3 till 6 % opacitet | Fint | Stora ytor och lång betraktningstid gör korn tydligt |
| Socialt inlägg | Lätt, 6 till 12 % | Fint till medelstort | Klarar omkomprimering och mobilskärmar |
| Affisch eller flygblad | Medel, 10 till 18 % | Medelstort | Ses på avstånd, där korn läses som tryck |
| Retro- eller filmlook | Starkt, 18 till 30 % | Medelstort till grovt | Kornet är en del av stilen |
| Videoloop | Lätt, animerat | Fint | Stillastående korn på rörlig video ser ut som smuts på linsen |

Utgångspunkter, som opacitet på ett brusskikt i Överlägg eller Mjukt ljus. Justera efter ögat; skärmar och färger varierar.

> **Mörka designer behöver mindre** Korn syns mer i mörka toner och mellantoner än på nästan vitt. På en mörk bakgrund, börja med hälften av den mängd du skulle använda på en ljus.

## Enfärgat eller färgat korn

Verkligt filmkorn är färgat: små prickar av rött, grönt och blått som varierar från bildruta till bildruta. Digitalt enfärgat korn är bara ljust och mörkt. Båda har sin plats.

### Enfärgat korn

- Behåller paletten exakt som du valt den
- Läses som tryck, papper eller riso
- Tryggt för varumärkesfärger och logotyper
- Rätt standardval för det mesta

### Färgat korn

- Ser ut som analog film
- Ger liv åt foton och hudtoner
- Kan förskjuta en platt varumärkesfärg något
- Bäst för fotografiska, nostalgiska stilar

Kornstorlek spelar lika stor roll som färg. Fint korn känns dyrt och modernt. Grovt korn känns handgjort, rått och högljutt. Skala kornet efter utdata: ett inlägg på 1080×1350 behöver finare korn än en A3-affisch på 3508×4961, eftersom affischen ses från längre håll.

## Så lägger du till kornstruktur i vilket designverktyg som helst

1. **Skapa ett brusskikt** Fyll ett nytt skikt med mellangrått (`#808080`) och lägg till brus. I de flesta program är det ett filter som heter Lägg till brus, Brus eller Korn. Välj Gaussiskt och enfärgat för en ren start.
2. **Ställ in blandningsläget** Ändra skiktet till **Överlägg** eller **Mjukt ljus**. Det grå försvinner och bara stänket blir kvar, som ljusnar och mörknar färgerna under.
3. **Sänk opaciteten** Dra ner den till mängden i tabellen ovan. Kontrollera i 100 procents zoom och sedan igen på mobilen.
4. **Behåll det överst** Korn hör hemma ovanför bakgrunden och fotona. Lägg liten text och logotyper ovanför kornet om du vill ha dem skarpa, eller under för en tryckt känsla.
5. **Exportera noga** Exportera PNG eller JPEG i hög kvalitet. Hård komprimering smetar ut korn till fläckar, vilket ser sämre ut än inget korn alls.

Om du lägger korn på en färggradient specifikt har [kornig gradient](https://gradiently.design/sv/guide/grainy-gradients) inställningarna för det, och [brusbakgrunder](https://gradiently.design/sv/guide/noise-background) har färdiga recept.

## Kornstruktur på webben

På en webbplats behöver du ingen bildfil för korn. En inbäddad SVG med filtret `feTurbulence` ritar brus i webbläsaren i valfri storlek, så det förblir skarpt på varje skärm och väger nästan 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>
```

Ett fast kornlager över en hel sida. Höj `baseFrequency` för finare korn, sänk den för grövre. Ta bort färgmatrisen för färgat brus.

Håll opaciteten låg: en hel sida med korn är en stor yta, och 6 procent räcker ofta gott. [MDN:s referens för feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) listar alla inställningar.

## Korn i video och rörelse

På rörligt material ska kornet också röra sig. Ett enda stillastående kornlager över video ser ut som en smutsig lins. Använd animerat korn som ändras varje bildruta, håll det fint och exportera med generös bitrate, eftersom videokomprimering behandlar korn som detaljer att kasta bort. För loopar, läs [sömlös videoloop](https://gradiently.design/sv/guide/seamless-loop-video) innan du lägger på struktur.

Gradiently bygger in korn i varje Mark som en del av dess recept, tillsammans med färg, material, ljus och rörelse, så strukturen ritas på nytt i varje storlek du designar i i stället för att sträckas från en enda bild. Vill du ha en bakgrund som redan har sin yta, bläddra i Marknaden och designa med vilken ledig Mark som helst.

## FAQ

### Vad är kornstruktur i design?

Ett fint, slumpmässigt stänk av ljust och mörkt lagt över en design så att platt digital färg ser ut som film, papper eller tryck.

### Hur mycket korn ska jag lägga till på en bild?

Så mycket att det syns i 100 procents zoom men inte på armlängds avstånd. För sociala inlägg är ett brusskikt på ungefär 6 till 12 procents opacitet i Överlägg en bra början.

### Rättar korn till bandning i gradienter?

Oftast, ja. Slumpmässigt brus bryter upp de hårda kanterna mellan banden så att ögat uppfattar en jämn övergång.

### Varför försvinner mitt korn efter uppladdning?

Plattformar komprimerar bilder om och behandlar fint korn som detaljer att kasta. Använd lite mer korn, exportera PNG eller JPEG i hög kvalitet och ladda upp i plattformens exakta storlek.

### Ska filmkorn vara färgat eller svartvitt?

Enfärgat korn håller varumärkesfärger exakta och passar det mesta. Färgat korn liknar analog film mer och passar fotografiska stilar.