Bakgrunn med papirtekstur: taktile design på skjerm

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.

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

   Fyll grunnen

   Fyll lerretet med papirfargen fra tabellen, for eksempel #f3ead8 for ubestrøket krem.

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

Den fine strukturen i steg to er den samme teknikken som forklares i korntekstur. 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.

Ideer med papirtekstur for ekte design

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

• Restaurantmenyer på ubestrøket krem, satt i en seriff. Se design av restaurantmeny.
• Nyhetsbrev og journaler, der papir får lang lesing til å føles roligere.
• Bryllups- og arrangementsinvitasjoner; design av bryllupsinvitasjon 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 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, har du råd til en lettere vekt og mer luft. Veier du papir mot andre overflater, sammenligner bakgrunnstekstur 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.

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

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.