# Taustatekstuurit: rake, paperi, kangas ja lasi

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

Tekstuuri tekee litteästä näytön väristä pinnan tuntuisen. Hillitysti käytettynä se lisää lämpöä ja piilottaa raidoittumisen, voimakkaana se muuttuu kohinaksi. Tässä miten löydät rajan.

## The short version

- Taustatekstuuri on hienoa pinnan yksityiskohtaa, kuten rakeisuutta, paperin kuituja, kudottua kangasta tai himmeää lasia, värin tai liukuvärin päällä.
- Tekstuuri toimii parhaiten heikkona, tuntuvana eikä näkyvänä, jolloin se lisää lämpöä kilpailematta sen päällä olevan sisällön kanssa.
- Tekstuurin mittakaavan pitäisi vastata katselukokoa: hieno rake pienille näytöille ja läheltä katsottavaksi, karkeampi tekstuuri suurille muodoille, joita katsotaan kauempaa.
- Rakeen asettaminen liukuvärin päälle piilottaa raidoittumisen, koska satunnainen yksityiskohta rikkoo sävyjen väliset näkyvät portaat.
- Somealustat ja videokoodaajat pakkaavat kuvat uudelleen, mikä voi tahria hyvin hienon tekstuurin, joten tarkista tekstuuri latauksen jälkeen.

**Taustatekstuuri** on hienoa pinnan yksityiskohtaa värin tai liukuvärin päällä: filmirakeen pilkut, paperin kuidut, pellavan kudos, lasin huurre. Se saa taustan näyttämään materiaalilta eikä pikseleiltä. Tärkein sääntö on voimakkuus. Tekstuuri, jonka tunnet mutta et huomaa, tekee suunnitelmasta lämpimämmän ja arvokkaamman näköisen. Tekstuuri, jonka huomaat ensin, muuttuu aiheeksi ja taistelee kaikkea päällään olevaa vastaan.

Pystysuuntainen julkaisu, jossa otsikko ”Hitaat aamut, hyvää kahvia” on pehmeästi tekstuuroidulla liukuvärillä

Tekstuuroitu liukuväri pystysuuntaisessa julkaisussa: pinta näyttää materiaalilta, ja sanat johtavat yhä.

## Taustatekstuurien tyypit

| Tekstuuri | Tuntuu | Paras tähän |
| --- | --- | --- |
| Rake tai kohina | Filmi, paino, matta pinta | Liukuvärit, tummat taustat, kaikki, mikä raidoittuu |
| Paperi | Painettu, käsintehty, toimituksellinen | Sitaatit, päiväkirjat, kutsut, rauhalliset brändit |
| Kangas ja pellava | Pehmeä, kudottu, tuntuva | Muoti, sisustus, majoitus ja ravintola-ala |
| Himmeä lasi | Moderni, kerroksellinen, hohtava | Käyttöliittymät, kortit värin päällä, teknologiabrändit |
| Rasteri- ja riso-pisteet | Retro-paino, fanzinet, julisteet | Leikkisät ja toimituksellisen tyyliset somejulkaisut |
| Kivi ja betoni | Kiinteä, arkkitehtoninen, hiljainen | Ylellisyys, arkkitehtuuri, tuotekuvaus |

Yleisiä tekstuuriperheitä ja niiden mukanaan tuomat mielleyhtymät. Valitse yksi per suunnitelma.

Jokainen tekstuuri kantaa mielleyhtymän. Rake kertoo filmistä ja painosta, paperi käsityöstä, lasi käyttöliittymästä. Valitse se, joka sopii siihen, miltä brändisi pitäisi tuntua, ja käytä sitä kaikkialla. Paperin sekoittaminen yhteen julkaisuun ja lasin seuraavaan purkaa vaikutuksen. Jos et ole vielä päättänyt tunnelmaa, [brändin persoonallisuus](https://gradiently.design/fi/guide/brand-personality) sisältää yksinkertaisen tavan päättää.

## Mittakaava: tekstuurin sovittaminen katselukokoon

Tekstuuri näyttää erilaiselta eri kokoisena. Läheltä pidetty puhelimen näyttö paljastaa jokaisen pilkun, joten hieno rake riittää. Huoneen toiselta puolelta katsottava juliste tai projektorilla näytettävä dia tarvitsee karkeamman tekstuurin edes rekisteröityäkseen. Ja tekstuuri, joka näyttää oikealta 1080×1350-julkaisussa, voi kadota, kun alusta pienentää sen pikkukuvaksi, tai muuttua läiskiksi, kun se pakataan uudelleen.

- Tarina 1080×1920: hieno: 1080 × 1920
- Julkaisu 1080×1350: hieno: 1080 × 1350
- Dia 1920×1080: keskikarkea: 1920 × 1080
- A3-painotuote 3508×4961: karkeampi: 3508 × 4961

Sama tekstuuri tarvitsee eri mittakaavan kullekin muodolle ja katseluetäisyydelle.

Painotuotteissa rake selviää yleensä hyvin ja jopa auttaa sileitä liukuvärejä toistumaan puhtaasti. [Liukuvärien painaminen](https://gradiently.design/fi/guide/print-gradients) käsittelee yksityiskohdat.

## Tekstuurin kerrostaminen liukuvärien päälle

Hyödyllisin yhdistelmä on tekstuuri liukuvärin päällä. Rake rikkoo sileissä sekoituksissa näkyvät portaat, joita kutsutaan raidoittumiseksi, ja saa digitaalisen liukuvärin näyttämään painetulta. Tavallinen menetelmä on asettaa tekstuuri erillisenä kerroksena värin päälle ja sekoittaa se sisään tilalla, kuten Overlay tai Soft light, matalalla peittävyydellä, jotta se sävyttää väriä eikä peitä sitä.

1. **Aloita väristä** Saa liukuväri ensin kuntoon. Tekstuuri ei pelasta värejä, jotka eivät sovi yhteen.
2. **Lisää yksi tekstuurikerros** Aseta se liukuvärin päälle. Käytä harmaata tai neutraalia tekstuuria, jotta se ei sävytä väriä.
3. **Sekoita se sisään** Aseta kerros tilaan Overlay tai Soft light. Soft light on lempeämpi ja pitää värit puhtaina.
4. **Laske voimakkuutta** Vähennä peittävyyttä, kunnes huomaat tekstuurin vain sitä etsiessäsi, usein reilusti alle puolen.
5. **Tarkista tummin alue** Raidoittuminen piiloutuu tummiin, hitaisiin häivytyksiin. Varmista, että tekstuuri on liuottanut portaat siellä.

Verkossa sama lähestymistapa on muutama koodirivi, katso [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture). Miksi juuri rake näyttää niin hyvältä liukuväreillä, lue [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients).

## Tekstuuri ja luettavuus

### Vältä

- Voimakasta tekstuuria suoraan pienen tekstin takana
- Kontrastisia kuvioita, kuten rohkeaa pellavan kudosta leipätekstin alla
- Kahta tai kolmea eri tekstuuria yhdessä suunnitelmassa
- Niin hienoa tekstuuria, että siitä tulee sotkua latauksen jälkeen

### Tee näin

- Heikko tekstuuri tai rauhallisempi alue sanojen kohdalla
- Vähäkontrastinen tekstuuri yhden värin lähisävyillä
- Yksi tekstuuriperhe jokaisessa muodossa
- Tarkista ladattu versio, ei vain vienti

Tekstuuri lisää visuaalista kohinaa kirjainten lähelle, ja pieni teksti kärsii ensin. Pidä tekstuuri heikkona tekstin kohdalla tai anna sanoille rauhallinen, tasainen alue taustasta. [Teksti vilkkaalla taustalla](https://gradiently.design/fi/guide/type-on-busy-backgrounds) käsittelee tekniikat tarkemmin.

Neliönmuotoinen sitaattijulkaisu, jossa tekstuuroitu tausta kulkee muuttumattomana tekstin takana

Tekstuuri ja väri kulkevat suoraan sanojen läpi…

Sama neliönmuotoinen sitaattijulkaisu, jossa tausta on rauhallisempi ja kontrastisempi tekstin takana

…ja sama tausta, joka tekee rauhallisen tilan niiden taakse.

## Tekstuuri, joka pysyy yhtenäisenä

Tekstuuri on helppo hukata työkalujen välillä: rakekerros yhdessä tiedostossa, paperikuva toisessa, eri voimakkuus jokaisessa viennissä. Gradientlyssä tekstuuri on osa itse taustaa. Mark pinoaa jopa kolme materiaalia rakeen ja valon kanssa, joten sama pinta piirtyy jokaisen suunnitelman taakse jokaisessa koossa ja sen rauhallisin alue siirtyy sanojen taakse.

Mark: väri, materiaali ja rake piirrettyinä yhdessä, identtisenä jokaisessa muodossa.

## FAQ

### Mikä on taustatekstuuri?

Hienoa pinnan yksityiskohtaa, kuten rakeisuutta, paperin kuituja, kankaan kudosta tai himmeää lasia, värin tai liukuvärin päällä, jotta se näyttää fyysiseltä materiaalilta.

### Kuinka voimakas taustatekstuurin pitäisi olla?

Heikko. Sinun pitäisi huomata se vain, kun etsit sitä. Jos tekstuuri on ensimmäinen asia, jonka näet, vähennä sen peittävyyttä.

### Korjaako tekstuurin lisääminen liukuvärin raidoittumisen?

Rake yleensä korjaa. Satunnainen hieno yksityiskohta rikkoo sävyjen väliset näkyvät portaat, jolloin sekoitus näyttää sileältä.

### Mitä sekoitustilaa minun pitäisi käyttää tekstuurille?

Soft light lempeään vaikutukseen, joka pitää värit puhtaina, tai Overlay voimakkaampaan. Käytä neutraalia harmaata tekstuuria, jotta se ei sävytä väriä.

### Miksi tekstuurini näyttää läiskäiseltä somessa?

Alustat pakkaavat lataukset uudelleen, mikä voi tahria hyvin hienon tekstuurin. Käytä hieman karkeampaa tekstuuria ja tarkista ladattu tulos.