# Bakgrunn med papirtekstur: taktile design på skjerm

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

Papir er den eldste bakgrunnen som finnes, og folk stoler fortsatt på den. Slik får du varmen, fibrene og det ujevne lyset over på en skjerm uten at det ser ut som en skannet serviett.

## The short version

- En bakgrunn med papirtekstur kombinerer tre ting: en tonet grunnfarge, fine fibre eller korn og litt ujevnt lys.
- Ekte papir er aldri helt hvitt, så et overbevisende digitalt papir starter fra en grunnfarge i krem, havre, grått eller kraftbrunt.
- En diskret overflatestruktur leses som kvalitetspapir; kraftige bretter, kaffeflekker og revne kanter leses som utklipp og går fort ut på dato.
- Papirteksturer passer til invitasjoner, menyer, journaler, merkevarer for brevpapir, bakerier og alt som vil føles laget for hånd.
- Mørkt blekk på papir trenger den samme kontrasten som overalt ellers, så test liten tekst før du legger på mer tekstur.

En bakgrunn med **papirtekstur** får et skjermdesign til å føles trykt, taktilt og laget for hånd. Det virker fordi folk leser papir som omtanke: en invitasjon, et brev, en meny noen har valgt papirkvalitet til. For å få det til trenger du tre lag som spiller sammen: en varm eller tonet grunnfarge, fine fibre eller korn, og lys som er litt ujevnt over arket. Det meste av falskt papir mislykkes ved å overdrive det tredje.

## Hvilket papiruttrykk passer designet ditt

Papir er ikke én tekstur. Bomullspapir, kraftpapir, avispapir og washi føles helt forskjellige, og hver av dem passer en annen type merkevare. Start med å sette navn på papiret du etterligner.

| Papir | Grunnfarge | Tekstur | Passer til |
| --- | --- | --- | --- |
| Bomullspapir | `#f6f1e7` | Myk, jevn struktur | Bryllupsinvitasjoner, diplomer, eksklusivt brevpapir |
| Ubestrøket krem | `#f3ead8` | Fine fibre, varm | Menyer, journaler, bokomslag |
| Kraftpapir | `#c8a57a` | Synlige fibre, flekker | Kaffe, bakerier, emballasje, markeder |
| Avispapir | `#e9e5dc` | Grått, litt ru | Fanziner, redaksjonelt, protestplakater |
| Resirkulert grått | `#dcd8d0` | Spettet | Bærekraftige merkevarer, studioer |
| Washi | `#f4efe4` | Lange, gjennomskinnelige fibre | Te, keramikk, blomsterbutikker, spa |

Seks papirtyper og en grunnfarge å starte fra. Kopier hex-koden, og legg så teksturen oppå.

- Bomull: #f6f1e7
- Kremhvitt papir: #f3ead8
- Avispapir: #e9e5dc
- Kraftpapir: #c8a57a
- Boktrykkblekk: #2b2420
- Stempelrød: #8a2b1f

Fire papirgrunner med et varmt svart blekk og én stempelrød, den klassiske aksenten i papirdesign. Bruk den røde én gang per design.

## Slik lager du en bakgrunn med papirtekstur

Du kan bygge overbevisende papir fra bunnen av i et hvilket som helst redigeringsprogram med støy og blandingsmoduser. Skannet papir fungerer også, men en bygget tekstur skalerer rent til alle størrelser og viser aldri kanten av en skannerplate.

1. **Fyll grunnen** Fyll lerretet med papirfargen fra tabellen, for eksempel `#f3ead8` for ubestrøket krem.
2. **Legg til fin struktur** Legg til et mellomgrått lag, bruk monokrom støy, og sett det til Multipliser eller Mykt lys på rundt 4 til 8 prosent. Dette er overflatekornet alt papir har.
3. **Legg til fibre** Legg til et andre, større støylag og strekk eller gjør det litt uskarpt i én retning. Med svært lav dekkevne leses det som fibre som går gjennom arket.
4. **Gjør lyset ujevnt** Legg til en myk radiell overgang, litt lysere i ett hjørne og litt dypere i det motsatte. Ekte papir er aldri helt jevnt belyst.
5. **Sjekk blekket** Plasser den minste teksten din oppå og se på den på en mobil. Er noe ord vanskeligere å lese, reduserer du teksturen før alt annet.

- Kremhvitt papir, vinduslys: `radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, #f3ead8 50%, #e8dcc4 100%)`
- Kraftpapir, varm lampe: `radial-gradient(ellipse at 75% 25%, #d6b78f 0%, #c8a57a 45%, #b08c60 100%)`
- Avispapir, flatt dagslys: `linear-gradient(170deg, #f1eee7 0%, #e9e5dc 55%, #ddd7cb 100%)`

Laget med ujevnt lys alene. Hver av dem er papirets grunnfarge løftet ett sted og fordypet et annet, før noe korn er lagt på.

Den fine strukturen i steg to er den samme teknikken som forklares i [korntekstur](https://gradiently.design/nb/guide/textured-background). Papir bruker bare mindre av den, med en varmere grunn.

## Diskret papir slår falskt papir

Søkeresultatene for papirbakgrunner er fulle av krøllete ark, brente kanter og kaffeskjolder. De ser ut som en fornøyelsesparkversjon av papir og kjemper mot hvert ord du setter på dem. En god papirtekstur er så stille at folk kjenner den før de ser den.

### Unngå

- Kraftige bretter som går gjennom teksten
- Kaffeflekker og brente kanter
- Revne kanter på et digitalt innlegg
- Et skannet ark med synlige skygger
- Grå tekst på krem i små størrelser

### Gjør

- Fin struktur som så vidt synes i full størrelse
- Fibre med svært lav dekkevne
- Lys som er forsiktig ujevnt
- En varm blekkfarge, ikke helt svart
- Én stempel- eller aksentfarge, brukt én gang

## Ideer med papirtekstur for ekte design

Papir gjør seg best der et trykt objekt naturlig ville finnes. Her fortjener det plassen sin.

Et design for bryllupsinvitasjon på en myk, kremhvit bakgrunn med papirtekstur, med navn og dato

En invitasjon på 5×7 tommer i 1500×2100. Strukturen fra bomullspapir og et varmt blekk føles som et kort du kan holde.

Et bakeriinnlegg til sosiale medier på en varm bakgrunn i kraftpapirstil med en kort overskrift

Et bakeriinnlegg på kraftpapir. Teksturen sier håndlaget før noen har lest et ord.

- **Restaurantmenyer** på ubestrøket krem, satt i en seriff. Se [design av restaurantmeny](https://gradiently.design/nb/guide/restaurant-menu-design).
- **Nyhetsbrev og journaler**, der papir får lang lesing til å føles roligere.
- **Bryllups- og arrangementsinvitasjoner**; [design av bryllupsinvitasjon](https://gradiently.design/nb/guide/wedding-invitation-design) har oppsett.
- **Håndverks- og håndlagde merkevarer**, på kraftpapir eller resirkulert grått.
- **Sitatkort**, der én enkelt linje på papir føles som en lapp noen har skrevet.

## Skrift og blekk på papirbakgrunner

Papir endrer hvordan skrift leses. Seriffer føles hjemme på krem og bomull fordi de ble tegnet for trykk; en ren sans på avispapir eller resirkulert grått føles moderne og litt industriell. [Seriff vs sans serif](https://gradiently.design/nb/guide/serif-vs-sans-serif) forklarer avveiningen. Uansett hva du velger, sett blekket i en varm nesten-svart som `#2b2420` i stedet for helt svart, som ser digitalt ut mot et tonet ark.

Hold brødteksten i en behagelig størrelse og gi den mer tyngde enn du ville gjort på hvitt: tekstur spiser litt kontrast, særlig på mobil. For korte linjer på papir, som én enkelt setning på et [sitatkort](https://gradiently.design/nb/guide/quote-card-design), har du råd til en lettere vekt og mer luft. Veier du papir mot andre overflater, sammenligner [bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture) hovedfamiliene side om side.

## Papirtekstur i CSS

På et nettsted legger du en gradient med ujevnt lys over grunnfargen, og deretter et veldig lett støylag med SVG. En lavere `baseFrequency` enn du ville brukt til filmkorn gir et mykere, mer fibrøst preg.

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

Kremhvitt papir med vinduslys og et mykt fiberlag. Multiply holder papiret varmt; øk dekkevnen litt for kraftpapir.

Gradiently har papir- og sandmaterialer blant sine Marks: håndlagde fibre, myke laveringer og fint, drivende korn gjengitt live i alle størrelser, med den roligste delen av arket som flytter seg bak ordene dine. Søk etter «papir» i Markedet eller filtrer på en lys bunn for å finne en, og design med den gratis.

## FAQ

### Hvilken farge har papir i hex?

Ekte papir er sjelden helt hvitt. Ubestrøket krem ligger rundt `#f3ead8`, bomullspapir rundt `#f6f1e7`, avispapir rundt `#e9e5dc` og kraftpapir rundt `#c8a57a`.

### Hvordan lager jeg en papirtekstur i Photoshop eller Canva?

Fyll med en papirfarge, legg til et monokromt støylag i Multipliser eller Mykt lys med lav dekkevne, og deretter et mykt, ujevnt lys. I verktøy uten støy legger du et diskret papirbilde med lav dekkevne over fargen.

### Er en papirtekstur bra for tekst?

Ja, hvis den er diskret. Hold strukturen fin, bruk et mørkt, varmt blekk og sjekk liten tekst på mobil før du legger på mer tekstur.

### Hvilke design passer til en bakgrunn i kraftpapir?

Kaffe, bakerier, markeder, emballasje og håndlagde merkevarer. Kraftpapir leses som naturlig og praktisk, så kombiner det med enkel, kraftig skrift.