Pappersbakgrund: taktil design på skärmen

En papperstextur som bakgrund får en skärmdesign att kännas tryckt, taktil och handgjord. Den fungerar eftersom folk läser papper som omsorg: en inbjudan, ett brev, en meny där någon valt papperskvalitet. För att lyckas behöver du tre lager som samverkar: en varm eller tonad grundfärg, en fin fiber eller ett korn och ett ljus som är lite ojämnt över arket. De flesta falska papper misslyckas genom att överdriva det tredje.

Vilken papperskänsla passar din design

Papper är inte en enda textur. Bomullspapper, kraftpapper, tidningspapper och washi känns helt olika, och vart och ett passar olika slags varumärken. Börja med att namnge papperet du efterliknar.

Så gör du en pappersbakgrund

Du kan bygga övertygande papper från grunden i vilket program som helst med brus och blandlägen. Skannat papper funkar också, men en byggd textur skalar rent till vilken storlek som helst och visar aldrig kanten på en skannerglasskiva.

1. 1

   Fyll grundfärgen

   Fyll ytan med din pappersfärg från tabellen, till exempel #f3ead8 för obestruket kräm.

2. 2

   Lägg på fin struktur

   Lägg till ett mellangrått lager, applicera monokromt brus och sätt det på Multiplicera eller Mjukt ljus vid cirka 4 till 8 procent. Det är ytkornet som allt papper har.

3. 3

   Lägg på fibrer

   Lägg till ett andra, större brusskikt och töj eller sudda det lätt i en riktning. Med mycket låg opacitet läses det som fibrer som löper genom arket.

4. 4

   Gör ljuset ojämnt

   Lägg till en mjuk radiell gradient, aningen ljusare i ett hörn och aningen djupare i det motsatta. Äkta papper är aldrig perfekt jämnt belyst.

5. 5

   Kontrollera svärtan

   Lägg din minsta text ovanpå och titta på den i en mobil. Är något ord svårare att läsa, minska texturen före allt annat.

Den fina strukturen i steg två är samma teknik som förklaras i kornig textur. Papper använder bara mindre av den, med en varmare bas.

Subtilt papper slår falskt papper

Sökresultaten för pappersbakgrunder är fulla av skrynkliga ark, brända kanter och kafferingar. De ser ut som en nöjesparksversion av papper och kämpar mot varje ord du lägger på dem. En bra papperstextur är tyst nog för att folk ska känna den innan de ser den.

Idéer för papperstextur i riktiga designer

Papper är som bäst där ett tryckt föremål naturligt skulle finnas. Här gör det sig bäst.

• Restaurangmenyer på obestruket kräm, satta med serif. Se design av restaurangmeny.
• Nyhetsbrev och dagböcker, där papper gör långläsning lugnare.
• Bröllops- och eventinbjudningar; design av bröllopsinbjudan har layouter.
• Hantverks- och handgjorda varumärken, på kraft eller återvunnet grått.
• Citatkort, där en enda rad på papper känns som en lapp någon skrivit.

Typsnitt och svärta på pappersbakgrunder

Papper ändrar hur text läses. Serifer känns hemma på kräm och bomull eftersom de ritades för tryck, medan en ren sans på tidningspapper eller återvunnet grått känns modern och lite industriell. Serif eller sans serif förklarar avvägningen. Vilket du än väljer, sätt svärtan i ett varmt nästan svart som #2b2420 i stället för ren svart, som ser digital ut mot ett tonat ark.

Håll brödtexten i en bekväm storlek och ge den mer tyngd än du skulle ge på vitt: texturen äter lite kontrast, särskilt på mobiler. För korta rader på papper, som en enda mening på ett citatkort, har du råd med en lättare vikt och mer luft. Om du väger papper mot andra ytor jämför bakgrundstextur de viktigaste familjerna sida vid sida.

Papperstextur i CSS

För en webbplats lägger du ett ojämnt ljus i form av en gradient över grundfärgen och sedan ett mycket lätt brusskikt med SVG. Ett lägre baseFrequency än du skulle använda för filmkorn ger en mjukare, mer fibrig känsla.

.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 papper och sand bland sina Marks: handgjord fiber, mjuka lasyrer och fint drivande korn som renderas live i varje storlek, med arkets lugnaste del i rörelse bakom dina ord. Sök i Marknaden på ”papper” eller filtrera på en ljus botten för att hitta en, och designa sedan med den gratis.