Papirtekstur som baggrund: taktilt design på skærm

En papirtekstur som baggrund får et skærmdesign til at føles trykt, taktilt og lavet i hånden. Den virker, fordi folk læser papir som omsorg: en invitation, et brev, et menukort, hvor nogen har valgt papiret. For at ramme rigtigt skal tre lag arbejde sammen: en varm eller nuanceret grundfarve, en fin fiber eller et fint korn og et lys, der er en smule ujævnt hen over arket. De fleste falske papirer fejler, fordi de overdriver det tredje.

Hvilket papirudtryk passer til dit design

Papir er ikke én tekstur. Bomuldspapir, kraft, avispapir og washi føles helt forskellige, og hver passer til sin slags brand. Start med at navngive det papir, du efterligner.

Sådan laver du en papirtekstur som baggrund

Du kan bygge et overbevisende papir fra bunden i enhver editor med støj og blandingstilstande. Indscannet papir virker også, men en bygget tekstur skalerer rent til enhver størrelse og viser aldrig scannerens kant.

1. 1

   Fyld bunden

   Fyld lærredet med din papirfarve fra tabellen, for eksempel #f3ead8 til ubestrøget creme.

2. 2

   Tilføj fint tooth

   Læg et mellemgråt lag, tilføj monokrom støj, og sæt det til Multiplicer eller Blødt lys på omkring 4 til 8 procent. Det er den overfladekorn, alt papir har.

3. 3

   Tilføj fibre

   Tilføj et andet, større støjlag, og stræk eller slør det let i én retning. Ved meget lav dækning ligner det fibre, der løber gennem arket.

4. 4

   Gør lyset ujævnt

   Tilføj en blød radial overgang, en tand lysere i det ene hjørne og en tand dybere i det modsatte. Rigtigt papir er aldrig belyst helt jævnt.

5. 5

   Tjek skriften

   Læg din mindste tekst ovenpå, og se den på en telefon. Er ét ord sværere at læse, så skru ned for teksturen, før du gør andet.

Det fine tooth i trin to er samme teknik som i kornet tekstur. Papir bruger bare mindre af den, med en varmere bund.

Diskret papir slår falsk papir

Søgeresultater for papirbaggrunde er fulde af krøllede ark, brændte kanter og kafferinge. De ligner en forlystelsesparks udgave af papir og kæmper mod hvert ord, du lægger på dem. En god papirtekstur er så stille, at folk mærker den, før de ser den.

Idéer til papirtekstur i rigtige designs

Papir er bedst, hvor et trykt objekt naturligt ville findes. Det er her, det gør sin nytte.

• Restaurantmenuer på ubestrøget creme, sat i en serif. Se design af restaurantmenu.
• Nyhedsbreve og journaler, hvor papir får lang læsning til at føles roligere.
• Bryllups- og eventinvitationer; design af bryllupsinvitation har layouts.
• Håndværks- og håndlavede brands, på kraft eller genbrugsgrå.
• Citatkort, hvor én linje på papir føles som en seddel, nogen har skrevet.

Typografi og skrift på papirbaggrunde

Papir ændrer, hvordan skrift læses. Serifskrifter føles hjemme på creme og bomuld, fordi de er tegnet til tryk; en ren sans på avispapir eller genbrugsgrå virker moderne og lidt industriel. Serif vs. sans serif forklarer afvejningen. Uanset hvad du vælger, så sæt skriften i en varm næsten-sort som #2b2420 frem for ren sort, der ser digital ud mod et nuanceret ark.

Hold brødteksten i en behagelig størrelse, og giv den mere vægt, end du ville på hvid: tekstur æder lidt kontrast, især på telefoner. Til korte linjer på papir, som én sætning på et citatkort, kan du tillade dig en lettere vægt og mere luft. Hvis du vejer papir op mod andre overflader, sammenligner baggrundstekstur de vigtigste familier side om side.

Papirtekstur i CSS

På en hjemmeside lægger du en gradient med ujævnt lys over grundfarven og tilføjer så et meget let støjlag med SVG. En lavere baseFrequency, end du ville bruge til filmkorn, giver en blødere, mere fibret fornemmelse.

.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 blandt sine Marks: håndlavede fibre, bløde toner og fint drivende korn, gengivet live i enhver størrelse, med arkets roligste del i bevægelse bag dine ord. Søg i Markedet efter »papir«, eller filtrér på en lys bund for at finde en, og design så med den gratis.