Fundo com textura de papel: design tátil na tela

Um fundo com textura de papel faz um design de tela parecer impresso, tátil e feito à mão. Funciona porque as pessoas leem o papel como cuidado: um convite, uma carta, um cardápio para o qual alguém escolheu um papel. Para acertar, três camadas precisam trabalhar juntas: uma cor de base quente ou tingida, uma fibra ou grão fino e uma luz um pouco irregular ao longo da folha. A maior parte do papel falso falha por exagerar na terceira.

Qual aspecto de papel combina com o seu design

Papel não é uma textura só. Algodão, kraft, papel-jornal e washi têm sensações completamente diferentes, e cada um combina com um tipo de marca. Comece nomeando o papel que você quer imitar.

Como fazer um fundo com textura de papel

Dá para criar um papel convincente do zero em qualquer editor com ruído e modos de mesclagem. Papel escaneado também funciona, mas uma textura criada escala bem para qualquer tamanho e nunca mostra a borda do scanner.

1. 1

   Preencha a base

   Preencha o canvas com a cor do papel da tabela, por exemplo #f3ead8 para o creme não revestido.

2. 2

   Adicione grão fino

   Crie uma camada cinza médio, aplique ruído monocromático e defina como Multiplicar ou Luz suave em cerca de 4 a 8%. É o grão de superfície que todo papel tem.

3. 3

   Adicione fibra

   Crie uma segunda camada de ruído, maior, e estique ou desfoque levemente em uma direção. Em opacidade bem baixa, ela parece fibras correndo pela folha.

4. 4

   Deixe a luz irregular

   Adicione um esmaecido radial suave, um toque mais claro em um canto e um toque mais escuro no oposto. O papel de verdade nunca é iluminado de forma perfeitamente uniforme.

5. 5

   Confira a tinta

   Coloque seu menor texto por cima e veja no celular. Se alguma palavra ficar mais difícil de ler, reduza a textura antes de qualquer outra coisa.

O grão fino do passo dois é a mesma técnica explicada em textura de grão. O papel só usa menos dela, com uma base mais quente.

Papel sutil vence papel falso

Os resultados de busca por fundos de papel estão cheios de folhas amassadas, bordas queimadas e marcas de xícara de café. Parecem uma versão de parque temático do papel e brigam com cada palavra colocada em cima. Uma boa textura de papel é discreta o bastante para ser sentida antes de ser vista.

Ideias de textura de papel para designs reais

O papel rende mais onde um objeto impresso existiria naturalmente. Estes são os lugares onde ele se paga.

• Cardápios de restaurante em creme não revestido, compostos com serifa. Veja design de cardápio de restaurante.
• Newsletters e diários, onde o papel deixa a leitura longa mais calma.
• Convites de casamento e de eventos; design de convite de casamento tem layouts.
• Marcas artesanais e feitas à mão, em kraft ou cinza reciclado.
• Cards de citação, onde uma única frase no papel parece um bilhete escrito por alguém.

Tipografia e tinta em fundos de papel

O papel muda a forma como a tipografia é lida. Fontes com serifa ficam em casa no creme e no algodão, porque foram desenhadas para impressão; uma sem serifa limpa sobre papel-jornal ou cinza reciclado parece moderna e levemente industrial. Serifa vs sem serifa explica a troca. Seja qual for a sua escolha, use uma tinta quase preta e quente, como #2b2420, em vez de preto puro, que parece digital sobre uma folha tingida.

Mantenha o texto corrido em um tamanho confortável e dê a ele mais peso do que daria no branco: a textura consome um pouco de contraste, principalmente no celular. Para linhas curtas no papel, como uma única frase em um card de citação, dá para usar um peso mais leve e mais espaço. Se você está pesando o papel contra outras superfícies, textura de fundo compara as principais famílias lado a lado.

Textura de papel em CSS

Para um site, coloque um degradê de luz irregular sobre a cor de base e depois uma camada de ruído bem leve com SVG. Um baseFrequency mais baixo do que o usado em grão de filme dá uma sensação mais suave e fibrosa.

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

O Gradiently tem materiais de papel e areia entre seus Marks: fibra artesanal, lavados suaves e grão fino à deriva, renderizados ao vivo em qualquer tamanho, com a parte mais calma da folha se movendo atrás das suas palavras. Pesquise “papel” no Mercado ou filtre por um fundo claro para achar um, e depois crie com ele de graça.