Sfondi con texture di carta: design tattili sullo schermo

Uno sfondo con texture di carta fa sembrare un design stampato, tattile e fatto a mano. Funziona perché la carta viene letta come cura: un invito, una lettera, un menu per cui qualcuno ha scelto una grammatura. Per farlo bene servono tre livelli che lavorano insieme, un colore di base caldo o tinto, una fibra o grana fine e una luce un po’ irregolare sul foglio. Gran parte della carta finta sbaglia esagerando con la terza.

Quale aspetto di carta si addice al tuo design

La carta non è una sola texture. Cotone, kraft, carta da giornale e washi si sentono in modo completamente diverso, e ognuna si adatta a un tipo di brand diverso. Comincia dando un nome alla carta che imiti.

Come creare uno sfondo con texture di carta

Puoi costruire una carta convincente da zero in qualsiasi editor con rumore e modalità di fusione. Funziona anche la carta scansionata, ma una texture costruita scala bene a qualsiasi misura e non mostra mai il bordo del piano dello scanner.

1. 1

   Riempi la base

   Riempi la tela con il colore della carta dalla tabella, per esempio #f3ead8 per la crema non patinata.

2. 2

   Aggiungi una grana fine

   Aggiungi un livello grigio medio, applica rumore monocromatico, impostalo su Moltiplica o Luce soffusa al 4-8 per cento circa. È la grana superficiale che ha ogni carta.

3. 3

   Aggiungi la fibra

   Aggiungi un secondo livello di rumore, più grande, e allungalo o sfocalo leggermente in una direzione. A opacità molto bassa sembra fibre che attraversano il foglio.

4. 4

   Rendi irregolare la luce

   Aggiungi una morbida dissolvenza radiale, un tocco più chiara in un angolo e un tocco più scura in quello opposto. La carta vera non è mai illuminata in modo perfettamente uniforme.

5. 5

   Controlla l’inchiostro

   Metti il tuo testo più piccolo sopra e guardalo su un telefono. Se una parola è più difficile da leggere, riduci la texture prima di ogni altra cosa.

La grana fine del secondo passaggio è la stessa tecnica spiegata in la texture a grana. La carta ne usa solo meno, con una base più calda.

La carta sottile batte la carta finta

I risultati di ricerca per gli sfondi di carta sono pieni di fogli accartocciati, bordi bruciati e aloni di caffè. Sembrano una versione da parco giochi della carta e combattono ogni parola che ci scrivi sopra. Una buona texture di carta è abbastanza silenziosa da essere sentita prima di essere vista.

Idee di texture di carta per design reali

La carta dà il meglio dove un oggetto stampato esisterebbe naturalmente. Questi sono i posti in cui si guadagna il posto.

• Menu di ristoranti su crema non patinata, composti in un serif. Vedi il design dei menu per ristoranti.
• Newsletter e diari, dove la carta rende più calma una lettura lunga.
• Inviti di nozze e di eventi; il design degli inviti di nozze ha dei layout.
• Brand artigianali e fatti a mano, su kraft o grigio riciclato.
• Card con citazioni, dove una sola riga su carta sembra un biglietto scritto da qualcuno.

Caratteri e inchiostro sugli sfondi di carta

La carta cambia il modo in cui si legge il testo. I serif stanno a casa loro su crema e cotone perché sono stati disegnati per la stampa; un sans pulito su carta da giornale o grigio riciclato sembra moderno e un po’ industriale. Serif contro sans serif spiega il compromesso. Qualunque tu scelga, componi l’inchiostro in un quasi nero caldo come #2b2420 invece del nero puro, che sembra digitale su un foglio tinto.

Tieni il testo corrente a una misura comoda e dagli più peso di quanto faresti sul bianco: la texture mangia un po’ di contrasto, soprattutto sui telefoni. Per righe brevi su carta, come una sola frase su una card con citazione, puoi permetterti un peso più leggero e più spazio. Se stai valutando la carta rispetto ad altre superfici, la texture di sfondo confronta le principali famiglie affiancate.

Texture di carta in CSS

Per un sito web, sovrapponi un gradiente di luce irregolare al colore di base, poi aggiungi un livello di rumore molto leggero con SVG. Un baseFrequency più basso di quello che useresti per la grana della pellicola dà un effetto più morbido e fibroso.

.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 ha materiali carta e sabbia tra i suoi Mark: fibra artigianale, morbide velature e grana fine che si sposta, renderizzati dal vivo a ogni misura, con la parte più calma del foglio che si sposta dietro alle tue parole. Cerca «carta» nel Mercato o filtra per un fondo chiaro per trovarne uno, poi progetta con lui gratis.