# Raetekstuuri: lisää filmiraetta digitaaliseen suunnitelmaan

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

Pieni määrä raetta saa digitaalisen suunnitelman nopeasti tuntumaan oikealta esineeltä. Liika rae muistuttaa rikkoutunutta näyttöä. Näin arvioit rakeen määrää, kokoa ja väriä.

## The short version

- Raetekstuuri on suunnitelman päälle lisättävä hieno satunnainen pistekuvio, joka saa tasaisen digitaalisen värin näyttämään filmiltä, paperilta tai painojäljeltä.
- Rae auttaa kolmella tavalla: se peittää tasaisten liukuvärien juovittumista, yhdistää valokuvia ja tasaisia grafiikoita sekä antaa puhtaille muodoille fyysisen pinnan.
- Useimmissa näytölle tehtävissä suunnitelmissa rakeen pitäisi juuri näkyä täydessä koossa ja kadota käsivarren päästä katsottuna. Jos siihen kiinnittää ensimmäiseksi huomiota, sitä on liikaa.
- Yksivärinen rae on turvallinen oletus. Värillinen rae muistuttaa enemmän oikeaa filmiä mutta voi muuttaa palettia.
- Voimakas JPEG-pakkaus tasoittaa rakeen pois. Vie rakeiset kuvat PNG-muodossa tai laadukkaana JPEG:nä ja käytä rakeisessa videossa reilua bittinopeutta.

**Raetekstuuri** on suunnitelman päälle lisättävä hieno satunnaisen kohinan kerros. Se saa täysin tasaisen digitaalisen värin näyttämään painetulta, filmille kuvatulta tai paperiin puristetulta. Sen kuuluu olla hienovarainen: oikealla määrällä kukaan ei nimeä sitä, vaan tuntee vain, että kuvalla on pinta. Onnistuminen riippuu neljästä säädöstä: määrästä, koosta, väristä ja sekoituksesta.

## Miksi rae parantaa digitaalista suunnitelmaa

Näyttö voi esittää väriä, johon mikään fyysinen materiaali ei pysty: täysin tasaista ja puhdasta. Juuri tämä puhtaus saa monet digitaaliset suunnitelmat tuntumaan halvoilta tai keskeneräisiltä. Rae palauttaa hieman epätasaisuutta, jota jokaisessa aidossa pinnassa on. Sillä on myös kolme käytännön tehtävää.

- **Se peittää juovittumista.** Pehmeät väriliu’ut voivat jakautua näkyviksi raidoiksi 8-bittisillä näytöillä. Satunnainen kohina rikkoo niiden reunoja, jolloin silmä näkee jatkuvan häivytyksen. [Liukuvärien juovittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää syyn.
- **Se yhdistää erilaisia elementtejä.** Valokuvassa on luonnollista raetta, tasaisessa muodossa ei. Yksi raekerros molempien päällä saa ne näyttämään saman kuvan osilta.
- **Se lisää pinnan tuntua.** Tasainen väri näyttää näytöltä, rakeinen väri materiaalilta. Siksi rae on olennainen osa monia [taustatekstuureja](https://gradiently.design/fi/guide/background-texture).

Kahvipaahtimon julkaisu, jossa on lämmin teksturoitu tausta ja lyhyt otsikko

Lämmin, pehmeästi teksturoitu tausta tuntuu käsityönä tehdyltä esineeltä, mikä sopii käsin valmistettuun tuotteeseen.

Julkaisu, jossa suuri numero on pehmeän rakeisella värillisellä taustalla

Sama tunnelma tukee myös pelkkää faktaa. Rae estää suurta numeroa näyttämästä taulukkolaskennalta.

## Kuinka paljon raetta kannattaa lisätä

Paras testi on katseluetäisyys. Katso suunnitelmaa 100 prosentin koossa: rakeen pitäisi juuri näkyä. Katso sitten puhelinta käsivarren päästä: rakeen ei pitäisi näkyä. Jos joku huomaa rakeen ensimmäiseksi, puolita sen määrä. Eri käyttötarkoituksiin sopivat eri määrät.

| Käyttö | Määrä | Rakeen koko | Syy |
| --- | --- | --- | --- |
| Verkkosivun tausta | Hyvin kevyt, peittävyys 3-6 % | Hieno | Suuri pinta ja pitkä katseluaika tekevät rakeesta näkyvän |
| Somejulkaisu | Kevyt, 6-12 % | Hieno tai keskikokoinen | Kestää uudelleenpakkausta ja puhelinnäyttöjä |
| Juliste tai esite | Kohtalainen, 10-18 % | Keskikokoinen | Kaukaa katsottuna rae näyttää painojäljeltä |
| Retro- tai filmi-ilme | Voimakas, 18-30 % | Keskikokoinen tai karkea | Rae kuuluu tyyliin |
| Toistuva video | Kevyt ja animoitu | Hieno | Paikallaan pysyvä rae liikkuvassa videossa näyttää linssin lialta |

Lähtökohtia kohinakerroksen peittävyydelle Peittävä- tai Pehmeä valo -sekoitustilassa. Säädä silmämääräisesti, sillä näytöt ja värit vaihtelevat.

> **Tummat suunnitelmat tarvitsevat vähemmän** Rae näkyy paremmin tummissa ja keskisävyissä kuin lähes valkoisessa. Aloita tummalla taustalla puolesta siitä määrästä, jota käyttäisit vaalealla.

## Yksivärinen vai värillinen rae

Oikea filmirae on värillistä: pieniä punaisia, vihreitä ja sinisiä pisteitä, jotka muuttuvat ruudusta toiseen. Digitaalisessa yksivärisessä rakeessa on vain vaaleaa ja tummaa. Molemmille on paikkansa.

### Yksivärinen rae

- Säilyttää valitsemasi paletin tarkasti
- Muistuttaa painojälkeä, paperia tai risopainoa
- Turvallinen brändiväreille ja logoille
- Sopiva oletus useimpiin töihin

### Värillinen rae

- Näyttää analogiselta filmiltä
- Elävöittää valokuvia ja ihonsävyjä
- Voi muuttaa tasaista brändiväriä hieman
- Sopii parhaiten valokuvalliseen, nostalgiseen tyyliin

Rakeen koko on yhtä tärkeä kuin väri. Hieno rae tuntuu arvokkaalta ja modernilta. Karkea rae tuntuu käsintehdyltä, rouhealta ja voimakkaalta. Skaalaa rae lopputulokseen: 1080×1350-julkaisu tarvitsee hienompaa raetta kuin 3508×4961-kokoinen A3-juliste, koska julistetta katsotaan kauempaa.

## Näin lisäät raetekstuurin suunnittelutyökalussa

1. **Luo kohinakerros** Täytä uusi taso keskiharmaalla (`#808080`) ja lisää kohinaa. Useimmissa ohjelmissa suodattimen nimi on Lisää kohinaa, Kohina tai Rae. Valitse aluksi Gaussin kohina ja yksivärisyys.
2. **Valitse sekoitustila** Vaihda tason tilaksi **Peittävä** tai **Pehmeä valo**. Harmaa katoaa, ja jäljelle jää vain pistekuvio, joka vaalentaa ja tummentaa alla olevia värejä.
3. **Vähennä peittävyyttä** Laske peittävyys yllä olevan taulukon tasolle. Tarkista 100 prosentin suurennuksella ja uudelleen puhelimella.
4. **Pidä rae päällimmäisenä** Rae kuuluu taustan ja valokuvien yläpuolelle. Jätä pieni teksti ja logot rakeen yläpuolelle, jos haluat niiden pysyvän terävinä, tai sen alle, jos tavoittelet painettua ilmettä.
5. **Vie huolellisesti** Vie PNG tai laadukas JPEG. Voimakas pakkaus levittää rakeen laikuiksi, mikä näyttää pahemmalta kuin rakeen puuttuminen.

Jos lisäät raetta nimenomaan väriliukuun, [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) sisältää sopivat asetukset ja [kohinaliukuvärit](https://gradiently.design/fi/guide/noise-background) valmiita toteutuksia.

## Raetekstuuri verkossa

Verkkosivulla rae ei tarvitse kuvatiedostoa. Sivuun upotettu SVG ja sen `feTurbulence`-suodatin piirtävät kohinaa selaimessa mihin tahansa kokoon, joten se pysyy terävänä jokaisella näytöllä ja vie hyvin vähän tilaa.

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

Kiinteä raekerros koko sivun päällä. Suurenna `baseFrequency`-arvoa hienompaa ja pienennä sitä karkeampaa raetta varten. Poista värimatriisi, jos haluat värillisen kohinan.

Pidä peittävyys matalana: koko sivun kattava rae on suuri pinta, ja 6 prosenttia riittää usein hyvin. [MDN:n feTurbulence-ohje](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence) luettelee kaikki asetukset.

## Rae videossa ja liikkeessä

Liikkuvassa kuvassa myös rakeen pitäisi liikkua. Yksi pysyvä raekerros videon päällä näyttää likaiselta linssiltä. Käytä joka ruudussa muuttuvaa animoitua raetta, pidä se hienona ja vie reilulla bittinopeudella, sillä videopakkaus käsittelee raetta pois heitettävänä yksityiskohtana. Lue [saumattomasti toistuva video](https://gradiently.design/fi/guide/seamless-loop-video) ennen tekstuurin lisäämistä.

Gradiently sisällyttää rakeen jokaisen Markin reseptiin värin, materiaalin, valon ja liikkeen rinnalle. Tekstuuri piirretään uudelleen jokaiseen suunnittelukokoon eikä venytetä yhdestä kuvasta. Jos haluat taustan, jolla on jo oma pintansa, selaa Markkinoita ja suunnittele millä tahansa lunastamattomalla Markilla.

## FAQ

### Mikä on raetekstuuri suunnittelussa?

Suunnitelman päälle lisättävä hieno satunnainen vaaleiden ja tummien pisteiden kuvio, joka saa tasaisen digitaalisen värin näyttämään filmiltä, paperilta tai painojäljeltä.

### Kuinka paljon raetta kuvaan pitäisi lisätä?

Sen verran, että rae näkyy 100 prosentin suurennuksella muttei käsivarren päästä. Somejulkaisuissa Peittävä-tilassa oleva kohinakerros noin 6-12 prosentin peittävyydellä on hyvä alku.

### Korjaako rae liukuvärin juovittumisen?

Yleensä kyllä. Satunnainen kohina rikkoo juovien välisiä teräviä reunoja, jolloin silmä näkee tasaisen häivytyksen.

### Miksi rae katoaa lataamisen jälkeen?

Alustat pakkaavat kuvat uudelleen ja käsittelevät hienoa raetta poistettavana yksityiskohtana. Lisää hieman raetta, vie PNG tai laadukas JPEG ja lataa kuva alustan täsmällisessä koossa.

### Pitäisikö filmirakeen olla värillistä vai mustavalkoista?

Yksivärinen rae säilyttää brändivärit tarkasti ja sopii useimpiin töihin. Värillinen rae muistuttaa enemmän analogista filmiä ja sopii valokuvallisiin tyyleihin.