Resumindo
- Uma textura de fundo é um detalhe fino de superfície, como grão, fibra de papel, trama de tecido ou vidro fosco, aplicado sobre uma cor ou um gradiente.
- A textura funciona melhor com pouca intensidade, sentida mais do que vista, para dar calor sem competir com o conteúdo por cima.
- A escala da textura deve combinar com o tamanho de visualização: grão fino para telas pequenas e visão de perto, textura mais grossa para formatos grandes vistos de longe.
- Aplicar grão sobre um gradiente esconde o banding, porque o detalhe aleatório quebra os degraus visíveis entre os tons.
- Redes sociais e codificadores de vídeo recomprimem as imagens, o que pode borrar texturas muito finas, então confira a textura depois do upload.
Nesta página
Uma textura de fundo é um detalhe fino de superfície aplicado sobre uma cor ou um gradiente: o pontilhado do grão de filme, as fibras do papel, a trama do linho, a geada do vidro. É o que faz um fundo parecer um material, e não pixels. A regra que mais importa é a intensidade. Uma textura que você sente, mas não nota, deixa o design mais acolhedor e com cara de mais caro; uma textura que você nota primeiro vira o assunto e briga com tudo o que está por cima.
Um gradiente texturizado num post em retrato: a superfície parece um material, e as palavras continuam mandando.
Tipos de textura de fundo
| Textura | Parece | Melhor para |
|---|---|---|
| Grão ou ruído | Filme, impressão, acabamento fosco | Gradientes, fundos escuros, qualquer coisa que faz banding |
| Papel | Impresso, artesanal, editorial | Frases, diários, convites, marcas calmas |
| Tecido e linho | Macio, tecido, tátil | Moda, interiores, hospitalidade |
| Vidro fosco | Moderno, em camadas, luminoso | Interfaces, cards sobre cor, marcas de tecnologia |
| Meio-tom e pontos riso | Impressão retrô, zines, pôsteres | Posts divertidos e editoriais para redes sociais |
| Pedra e concreto | Sólido, arquitetônico, silencioso | Luxo, arquitetura, fotografia de produto |
Cada textura carrega uma associação. O grão diz filme e impressão, o papel diz artesanal, o vidro diz interface. Escolha a que combina com o que a sua marca deve transmitir e use em todo lugar; papel num post e vidro no seguinte desfaz o efeito. Se você ainda não definiu essa sensação, a personalidade da marca tem um jeito simples de decidir.
Escala: combinando a textura com o tamanho de visualização
A textura se lê de forma diferente em tamanhos diferentes. Uma tela de celular vista de perto mostra cada pontinho, então um grão fino basta. Um pôster do outro lado da sala ou um slide num projetor pedem uma textura mais grossa para aparecer. E uma textura que fica certa num post de 1080×1350 pode sumir quando a plataforma o reduz a uma miniatura, ou virar manchas quando é recomprimida.
Story 1080×1920: fina
1080 × 1920
Post 1080×1350: fina
1080 × 1350
Slide 1920×1080: média
1920 × 1080
Impressão A3 3508×4961: mais grossa
3508 × 4961
Na impressão, o grão em geral sobrevive bem e até ajuda gradientes a saírem limpos; o guia de impressão de gradientes trata dos detalhes.
Textura sobre gradientes
A combinação mais útil é textura sobre um gradiente. O grão quebra os degraus visíveis que aparecem nas misturas lisas, o chamado banding, e faz um gradiente digital parecer impresso. O método usual é colocar a textura numa camada separada acima da cor e misturá-la com um modo como Sobreposição ou Luz suave, com baixa opacidade, para que ela sombreie a cor em vez de cobri-la.
- 1
Comece pela cor
Acerte primeiro o gradiente. A textura não salva cores que não combinam.
- 2
Acrescente uma camada de textura
Coloque-a acima do gradiente. Use uma textura cinza ou neutra para que ela não tinja a cor.
- 3
Misture
Defina a camada como Sobreposição ou Luz suave. A Luz suave é mais delicada e mantém as cores limpas.
- 4
Diminua a intensidade
Reduza a opacidade até que você só perceba a textura quando procura por ela, muitas vezes bem abaixo da metade.
- 5
Confira a área mais escura
O banding se esconde em fades escuros e lentos. Garanta que a textura dissolveu qualquer degrau ali.
Na web, a mesma abordagem leva poucas linhas de código; veja textura de ruído em CSS. Para entender por que o grão em especial fica tão bom em gradientes, leia gradientes com grão.
Textura e legibilidade
Evite
- Textura forte bem atrás de texto pequeno
- Padrões de alto contraste, como uma trama de linho marcada, sob o texto corrido
- Duas ou três texturas diferentes num mesmo design
- Textura tão fina que vira borrão depois do upload
Faça
- Textura discreta, ou uma área mais calma onde as palavras ficam
- Textura de baixo contraste em tons próximos de uma cor
- Uma família de textura em todos os formatos
- Confira a versão enviada, não só a exportação
A textura acrescenta ruído visual perto das letras, e o texto pequeno sofre primeiro. Mantenha a textura discreta onde o texto fica, ou dê às palavras uma região calma e uniforme do fundo. O guia de texto sobre fundos carregados trata das técnicas em detalhe.
Textura e cor passando direto pelas palavras…
…e o mesmo fundo abrindo um espaço calmo atrás delas.
Textura que se mantém coerente
É fácil perder a textura entre ferramentas: uma camada de grão num arquivo, uma imagem de papel em outro, uma intensidade diferente em cada exportação. No Gradiently, a textura faz parte do próprio fundo. Um Mark empilha até três materiais com grão e luz, então a mesma superfície é renderizada atrás de todo design em todo tamanho, e a região mais calma dele se move para trás das palavras.
GR·N4D7·V5
Evening Station
Ver este MarkPerguntas frequentes
O que é uma textura de fundo?
Um detalhe fino de superfície, como grão, fibra de papel, trama de tecido ou vidro fosco, aplicado sobre uma cor ou um gradiente para parecer um material físico.
Qual deve ser a intensidade de uma textura de fundo?
Discreta. Você deve notá-la só quando procura por ela. Se a textura é a primeira coisa que você vê, reduza a opacidade.
Acrescentar textura resolve o banding em gradientes?
O grão em geral resolve. O detalhe fino e aleatório quebra os degraus visíveis entre os tons, e a mistura parece lisa.
Que modo de mesclagem devo usar para a textura?
Luz suave para um efeito delicado que mantém as cores limpas, ou Sobreposição para um mais forte. Use uma textura cinza neutra para que ela não tinja a cor.
Por que a minha textura fica manchada nas redes sociais?
As plataformas recomprimem os uploads, o que pode borrar texturas muito finas. Use uma textura um pouco mais grossa e confira o resultado depois de enviado.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
