Fundos com textura de papel: designs tácteis no ecrã

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

Que aspeto de papel serve o teu design

O papel não é uma única textura. O algodão, o kraft, o papel de jornal e o washi sentem-se de maneira completamente diferente, e cada um serve um tipo de marca. Começa por dar nome ao papel que estás a imitar.

Como fazer um fundo com textura de papel

Podes construir papel convincente de raiz em qualquer editor que tenha ruído e modos de mistura. O papel digitalizado também funciona, mas uma textura construída escala sem falhas para qualquer tamanho e nunca mostra a borda do scanner.

1. 1

   Preenche a base

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

2. 2

   Acrescenta um relevo fino

   Acrescenta uma camada cinzenta média, aplica ruído monocromático e define-a em Multiplicar ou Luz suave a cerca de 4 a 8 por cento. É o grão de superfície que todo o papel tem.

3. 3

   Acrescenta fibra

   Acrescenta uma segunda camada de ruído, maior, e estica-a ou desfoca-a ligeiramente numa direção. Com opacidade muito baixa, lê-se como fibras a atravessar a folha.

4. 4

   Torna a luz irregular

   Acrescenta um esbatido radial suave, um toque mais claro num canto e um toque mais profundo no oposto. O papel verdadeiro nunca é iluminado de forma perfeitamente uniforme.

5. 5

   Verifica a tinta

   Coloca o teu texto mais pequeno por cima e vê-o num telemóvel. Se alguma palavra ficar mais difícil de ler, reduz primeiro a textura.

O relevo fino do segundo passo é a mesma técnica explicada em textura de grão. O papel usa simplesmente menos, com uma base mais quente.

Papel subtil vence papel falso

Os resultados de pesquisa para fundos de papel estão cheios de folhas amarrotadas, bordas queimadas e marcas de café. Parecem uma versão de parque de diversões do papel e lutam contra cada palavra que lá pões. Uma boa textura de papel é discreta ao ponto de as pessoas a sentirem antes de a verem.

Ideias de textura de papel para designs reais

O papel está no seu melhor onde um objeto impresso existiria naturalmente. São estes os sítios onde compensa.

• Menus de restaurante em creme não revestido, compostos numa serifa. Vê design de menus de restaurante.
• Newsletters e diários, onde o papel torna a leitura longa mais calma.
• Convites de casamento e de eventos; o design de convites de casamento tem composições.
• Marcas artesanais e feitas à mão, em kraft ou cinzento reciclado.
• Cartões de citação, onde uma só frase em papel parece uma nota que alguém escreveu.

Tipo de letra e tinta em fundos de papel

O papel muda a maneira como o texto se lê. As serifas sentem-se em casa no creme e no algodão porque foram desenhadas para impressão; uma sans limpa em papel de jornal ou cinzento reciclado parece moderna e ligeiramente industrial. Serifa vs sem serifa explica o equilíbrio. Seja qual for a tua escolha, define a tinta num quase preto quente, como #2b2420, em vez de preto puro, que parece digital contra uma folha tingida.

Mantém o texto corrente num tamanho confortável e dá-lhe mais peso do que darias sobre branco: a textura come um pouco de contraste, sobretudo em telemóveis. Para linhas curtas em papel, como uma só frase num cartão de citação, podes permitir-te um peso mais leve e mais espaço. Se estás a comparar o papel com outras superfícies, textura de fundo compara lado a lado as famílias principais.

Textura de papel em CSS

Para um site, sobrepõe um degradê de luz irregular à cor de base e depois acrescenta uma camada de ruído muito leve com SVG. Uma baseFrequency mais baixa do que usarias para grão de película dá um aspeto mais suave 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;
}

A Gradiently tem materiais de papel e areia entre os seus Marks: fibra artesanal, lavados suaves e grão fino à deriva, renderizados em direto a cada tamanho, com a parte mais calma da folha a mover-se por trás das tuas palavras. Procura “papel” no Mercado ou filtra por um fundo claro para encontrar um, e depois cria com ele gratuitamente.