# Paperitekstuuri taustana: käsinkosketeltava ilme näytölle

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

Paperi on vanhin taustamateriaali, ja siihen luotetaan yhä. Näin tuot sen lämmön, kuidut ja epätasaisen valon näytölle ilman skannatun lautasliinan vaikutelmaa.

## The short version

- Paperitekstuuri taustana yhdistää kolme asiaa: sävytetyn pohjavärin, hienot kuidut tai rakeisuuden sekä hieman epätasaisen valon.
- Aito paperi ei ole koskaan puhtaan valkoista. Uskottava digitaalinen paperi alkaa kerman, kauran, harmaan tai voimapaperin ruskeasta pohjasta.
- Hienovarainen pintakarheus tuo mieleen laadukkaan paperin. Voimakkaat rypyt, kahvitahrat ja revityt reunat näyttävät nopeasti vanhenevalta leikekuvitukselta.
- Paperitekstuurit sopivat kutsuihin, ruokalistoihin, päiväkirjoihin, paperituotebrändeille ja leipomoille sekä kaikkeen, minkä halutaan tuntuvan käsintehdyltä.
- Tumma teksti paperilla tarvitsee saman kontrastin kuin muuallakin. Tarkista pieni teksti ennen kuin lisäät tekstuuria.

**Paperitekstuuri** tekee näytöllä näkyvästä designista painetun, käsinkosketeltavan ja käsintehdyn oloisen. Se toimii, koska paperi viestii huolenpidosta: kutsusta, kirjeestä tai ruokalistasta, jolle joku on valinnut sopivan paperin. Tarvitset kolme yhteen toimivaa kerrosta: lämpimän tai sävytetyn pohjavärin, hienoja kuituja tai rakeisuutta sekä hieman epätasaisesti arkille osuvan valon. Useimmat epäaidot paperitaustat epäonnistuvat liioittelemalla viimeistä kerrosta.

## Valitse designiin sopiva paperi-ilme

Paperi ei ole yksi tekstuuri. Puuvillapaperi, voimapaperi, sanomalehtipaperi ja washi tuntuvat aivan erilaisilta, ja jokainen sopii eri brändille. Aloita nimeämällä paperilaatu, jota jäljittelet.

| Paperi | Pohjaväri | Tekstuuri | Sopii |
| --- | --- | --- | --- |
| Puuvillapaperi | `#f6f1e7` | Pehmeä, tasainen pintakarheus | Hääkutsut, todistukset, laadukkaat paperituotteet |
| Päällystämätön kermanvärinen | `#f3ead8` | Hienot kuidut, lämmin sävy | Ruokalistat, päiväkirjat, kirjankannet |
| Voimapaperi | `#c8a57a` | Näkyvät kuidut ja pilkut | Kahvi, leipomot, pakkaukset, torit |
| Sanomalehtipaperi | `#e9e5dc` | Harmaa, hieman karkea | Pienlehdet, toimituksellinen sisältö, protestijulisteet |
| Harmaa kierrätyspaperi | `#dcd8d0` | Pilkutettu pinta | Vastuulliset brändit, studiot |
| Washi | `#f4efe4` | Pitkät, läpikuultavat kuidut | Tee, keramiikka, kukkakaupat, kylpylät |

Kuusi paperilaatua ja niiden pohjavärit. Kopioi hex-koodi ja lisää tekstuuri sen päälle.

- Puuvilla: #f6f1e7
- Kermanvärinen paperi: #f3ead8
- Sanomalehtipaperi: #e9e5dc
- Voimapaperi: #c8a57a
- Kohopainomuste: #2b2420
- Leimasinpunainen: #8a2b1f

Neljä paperipohjaa, lämmin musta muste ja leimasinpunainen, paperidesignin klassinen korostusväri. Käytä punaista kerran kussakin designissa.

## Näin teet paperitekstuuritaustan

Voit rakentaa uskottavan paperipinnan alusta asti missä tahansa editorissa, jossa on kohina ja sekoitustilat. Skannattu paperikin toimii, mutta itse rakennettu tekstuuri skaalautuu siististi joka kokoon eikä paljasta skannerin reunoja.

1. **Täytä pohja** Täytä työalue taulukon paperivärillä, esimerkiksi päällystämättömän kermanvärisen paperin sävyllä `#f3ead8`.
2. **Lisää hieno pintakarheus** Lisää keskiharmaa kerros ja yksiväristä kohinaa. Käytä Multiply- tai Soft Light -sekoitustilaa noin 4-8 prosentin peittävyydellä. Tämä on jokaiselle paperille ominainen hieno pintarae.
3. **Lisää kuituja** Lisää toinen, karkeampi kohinakerros ja venytä tai sumenna sitä hieman yhteen suuntaan. Hyvin pienellä peittävyydellä se näyttää arkin läpi kulkevilta kuiduilta.
4. **Tee valosta epätasainen** Lisää pehmeä säteittäinen häivytys, hieman vaaleampi yhteen kulmaan ja syvempi vastakkaiseen. Aito paperi ei valaistu täysin tasaisesti.
5. **Tarkista tekstin väri** Aseta pienin tekstisi taustalle ja katso sitä puhelimella. Jos jokin sana on vaikeampi lukea, vähennä ensin tekstuuria.

- Kermanvärinen paperi, ikkunavalo: `radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, #f3ead8 50%, #e8dcc4 100%)`
- Voimapaperi, lämmin lamppu: `radial-gradient(ellipse at 75% 25%, #d6b78f 0%, #c8a57a 45%, #b08c60 100%)`
- Sanomalehtipaperi, päivänvalo: `linear-gradient(170deg, #f1eee7 0%, #e9e5dc 55%, #ddd7cb 100%)`

Epätasainen valokerros yksinään. Kussakin paperin pohjaväri vaalenee yhdessä kohdassa ja syvenee toisessa ennen rakeisuuden lisäämistä.

Toisen vaiheen hieno pintakarheus syntyy samalla tekniikalla kuin [rakeisuustekstuuri](https://gradiently.design/fi/guide/textured-background). Paperissa sitä käytetään vain vähemmän ja lämpimämmällä pohjalla.

## Hienovarainen paperi näyttää aidommalta

Paperitaustojen hakutulokset ovat täynnä rypistyneitä arkkeja, palaneita reunoja ja kahvirenkaita. Ne näyttävät paperin teemapuistoversiolta ja kilpailevat jokaisen taustalle kirjoitetun sanan kanssa. Hyvä paperitekstuuri on niin hiljainen, että se tuntuu ennen kuin se näkyy.

### Vältä

- Voimakkaat taitokset tekstin läpi
- Kahvitahrat ja palaneet reunat
- Revityt reunukset digijulkaisussa
- Skannattu arkki näkyvine varjoineen
- Pieni harmaa teksti kermanvärisellä pohjalla

### Tee näin

- Hieno pintakarheus, joka juuri näkyy täydessä koossa
- Kuidut hyvin pienellä peittävyydellä
- Pehmeästi epätasainen valo
- Lämmin muste puhtaan mustan sijaan
- Yksi leimasin- tai korostusväri kerran käytettynä

## Paperitekstuurin käyttöideoita

Paperi toimii parhaiten siellä, missä painettu esinekin olisi luonteva. Näissä käyttökohteissa se tuo arvoa.

Hääkutsu pehmeällä kermanvärisellä paperitekstuuritaustalla, mukana nimet ja päivämäärä

5×7 in kutsu koossa 1500×2100. Puuvillapaperin pinta ja lämmin muste tuntuvat kortilta, jota voisi pitää kädessä.

Leipomon somejulkaisu lämpimällä voimapaperitaustalla ja lyhyellä otsikolla

Leipomon julkaisu voimapaperilla. Tekstuuri kertoo käsityöstä ennen ensimmäisen sanan lukemista.

- **Ravintolan ruokalistat** päällystämättömällä kermanvärisellä paperilla, antiikvafontilla. Katso [ruokalistan suunnittelu](https://gradiently.design/fi/guide/restaurant-menu-design).
- **Uutiskirjeet ja päiväkirjat**, joissa paperi rauhoittaa pitkän tekstin lukemista.
- **Hää- ja tapahtumakutsut**; [hääkutsun suunnittelu](https://gradiently.design/fi/guide/wedding-invitation-design) tarjoaa asetteluja.
- **Käsityöbrändit** voimapaperilla tai harmaalla kierrätyspaperilla.
- **Sitaattikortit**, joissa yksi rivi paperilla tuntuu jonkun kirjoittamalta viestiltä.

## Typografia ja muste paperitaustoilla

Paperi muuttaa tekstin vaikutelmaa. Antiikvat tuntuvat kotoisilta kermanvärisellä ja puuvillapaperilla, koska ne on piirretty painotuotteisiin. Selkeä groteski sanomalehtipaperilla tai harmaalla kierrätyspaperilla näyttää modernilta ja hieman teolliselta. [Antiikva ja groteski](https://gradiently.design/fi/guide/serif-vs-sans-serif) auttaa valinnassa. Kumman tahansa valitsetkin, käytä lämmintä lähes mustaa, kuten `#2b2420`. Puhdas musta näyttää digitaaliselta sävytettyä arkkia vasten.

Pidä leipäteksti mukavan kokoisena ja käytä hieman vahvempaa leikkausta kuin valkoisella pohjalla: tekstuuri syö kontrastia etenkin puhelimessa. Lyhyessä tekstissä, kuten yhdessä lauseessa [sitaattikortilla](https://gradiently.design/fi/guide/quote-card-design), voit käyttää kevyempää leikkausta ja väljempää asettelua. Jos vertaat paperia muihin pintoihin, [taustatekstuurien opas](https://gradiently.design/fi/guide/background-texture) esittelee tärkeimmät ryhmät rinnakkain.

## Paperitekstuuri CSS:llä

Verkkosivulla voit kerrostaa epätasaisen valoliukuvärin pohjavärin päälle ja lisätä sitten hyvin kevyen SVG-kohinakerroksen. Filmirakeisuutta pienempi `baseFrequency` luo pehmeämmän ja kuitumaisemman tunnun.

```css
.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}
```

Kermanvärinen paperi, ikkunavalo ja pehmeä kuitukerros. Multiply säilyttää paperin lämmön. Voimapaperille voit nostaa peittävyyttä hieman.

Gradientlyn Markeissa on paperi- ja hiekkamateriaaleja: käsintehdyn oloisia kuituja, pehmeitä laveerauksia ja hienoa liikkuvaa rakeisuutta, jotka renderöityvät elävinä joka koossa. Arkin rauhallisin kohta siirtyy sanojesi taakse. Etsi Markkinoilta sanalla ”paper” tai suodata vaaleita pohjia, ja suunnittele valitsemallasi Markilla maksutta.

## FAQ

### Mikä on paperin hex-väri?

Aito paperi on harvoin puhtaan valkoista. Päällystämätön kermanvärinen on noin `#f3ead8`, puuvillapaperi `#f6f1e7`, sanomalehtipaperi `#e9e5dc` ja voimapaperi `#c8a57a`.

### Miten teen paperitekstuurin Photoshopissa tai Canvassa?

Täytä pohja paperivärillä, lisää yksivärinen kohinakerros pienellä peittävyydellä Multiply- tai Soft Light -tilassa ja lopuksi pehmeä epätasainen valo. Jos työkalussa ei ole kohinaa, lisää hienovarainen paperikuva pienellä peittävyydellä värin päälle.

### Sopiiko paperitekstuuri tekstin taustalle?

Kyllä, kun se on hienovarainen. Pidä pintarae hienona, käytä tummaa lämmintä mustetta ja tarkista pieni teksti puhelimella ennen tekstuurin lisäämistä.

### Mihin voimapaperitausta sopii?

Kahville, leipomoille, toreille, pakkauksiin ja käsityöbrändeille. Voimapaperi tuntuu luonnolliselta ja käytännölliseltä, joten yhdistä siihen yksinkertainen, vahva typografia.