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

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

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.

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.

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. 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. 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. 3

   Sänk opaciteten

   Dra ner den till mängden i tabellen ovan. Kontrollera i 100 procents zoom och sedan igen på mobilen.

4. 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. 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 inställningarna för det, och brusbakgrunder 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.

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

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