A versão curta
- Uma textura de fundo é um pormenor fino de superfície, como grão, fibra de papel, tecido ou vidro fosco, sobreposto a uma cor ou a um gradiente.
- A textura funciona melhor com pouca intensidade, sentida em vez de vista, para dar calor sem competir com o conteúdo por cima.
- A escala da textura deve corresponder ao tamanho de visualização: grão fino para ecrãs pequenos e visão de perto, textura mais grossa para formatos grandes vistos de mais longe.
- Pôr grão sobre um gradiente esconde as bandas, porque o pormenor aleatório quebra os degraus visíveis entre tons.
- As plataformas sociais e os codificadores de vídeo voltam a comprimir as imagens, o que pode esborratar texturas muito finas, por isso verifica a textura depois de carregar.
Nesta página
Uma textura de fundo é um pormenor fino de superfície sobreposto a uma cor ou a um gradiente: o granulado da película, as fibras do papel, a trama do linho, a geada do vidro. É o que faz um fundo parecer um material e não píxeis. A regra que mais importa é a intensidade. Uma textura que sentes em vez de notares torna um design mais quente e com ar mais caro; uma textura que notas primeiro torna-se o assunto e luta com tudo o que está por cima.
Um gradiente texturado numa publicação vertical: a superfície lê-se como um material e as palavras continuam a liderar.
Tipos de textura de fundo
| Textura | Lembra | Ideal para |
|---|---|---|
| Grão ou ruído | Película, impressão, um acabamento mate | Gradientes, fundos escuros, tudo o que faz bandas |
| Papel | Impresso, artesanal, editorial | Citações, diários, convites, marcas calmas |
| Tecido e linho | Suave, tecido, tátil | Moda, interiores, hotelaria |
| Vidro fosco | Moderno, em camadas, luminoso | Interfaces, cartões sobre cor, marcas de tecnologia |
| Meios-tons e pontos riso | Impressão retro, zines, cartazes | Publicações sociais divertidas e editoriais |
| Pedra e betão | Sólido, arquitetónico, silencioso | Luxo, arquitetura, fotografia de produto |
Cada textura traz uma associação. O grão diz película e impressão, o papel diz artesanal, o vidro diz interface. Escolhe a que se ajusta ao que a tua marca deve transmitir e usa-a em todo o lado; misturar papel numa publicação e vidro na seguinte desfaz o efeito. Se ainda não decidiste a sensação, a personalidade da marca tem uma forma simples de decidir.
Escala: ajustar a textura ao tamanho de visualização
A textura lê-se de forma diferente em tamanhos diferentes. Um ecrã de telemóvel de perto mostra cada grão, por isso o grão fino chega. Um cartaz do outro lado da sala ou um diapositivo num projetor precisa de textura mais grossa para se registar. E uma textura que parece certa numa publicação de 1080×1350 pode desaparecer quando a plataforma a encolhe para miniatura, ou virar borrões quando é comprimida de novo.
Story 1080×1920: fina
1080 × 1920
Publicação 1080×1350: fina
1080 × 1350
Diapositivo 1920×1080: média
1920 × 1080
Impressão A3 3508×4961: mais grossa
3508 × 4961
Na impressão, o grão geralmente sobrevive bem e até ajuda a reproduzir gradientes com limpeza; a impressão de gradientes trata dos pormenores.
Pôr textura sobre gradientes
A combinação mais útil é a textura sobre um gradiente. O grão quebra os degraus visíveis que surgem nas misturas lisas, a que se chama bandas, e faz um gradiente digital parecer impresso. O método habitual é pôr a textura como uma camada separada acima da cor e misturá-la com um modo como Sobrepor ou Luz suave a baixa opacidade, para que sombreie a cor em vez de a cobrir.
- 1
Começa pela cor
Acerta primeiro o gradiente. A textura não salva cores que não funcionam em conjunto.
- 2
Junta uma camada de textura
Põe-na acima do gradiente. Usa uma textura cinzenta ou neutra para não tingir a cor.
- 3
Mistura-a
Define a camada como Sobrepor ou Luz suave. A Luz suave é mais delicada e mantém as cores limpas.
- 4
Baixa a intensidade
Reduz a opacidade até só notares a textura quando a procuras, muitas vezes bem abaixo de metade.
- 5
Verifica a zona mais escura
As bandas escondem-se em esbatimentos escuros e lentos. Garante que a textura dissolveu lá os degraus.
Na web, a mesma abordagem são poucas linhas de código; vê a textura de ruído em CSS. Para saber porque é que o grão em particular fica tão bem em gradientes, lê os gradientes com grão.
Textura e legibilidade
Evita
- Textura forte mesmo atrás de texto pequeno
- Padrões de alto contraste, como uma trama de linho marcada sob texto corrido
- Duas ou três texturas diferentes num só design
- Textura tão fina que vira papa depois de carregada
Faz
- Textura ténue, ou uma zona mais calma onde ficam as palavras
- Textura de baixo contraste em tons próximos de uma só cor
- Uma família de textura em todos os formatos
- Verifica a versão carregada, não só a exportação
A textura acrescenta ruído visual junto às letras, e o texto pequeno sofre primeiro. Mantém a textura ténue onde há texto, ou dá às palavras uma zona calma e uniforme do fundo. O texto sobre fundos carregados trata as técnicas em detalhe.
Textura e cor a passarem mesmo pelas palavras…
…e o mesmo fundo a abrir um espaço calmo por trás delas.
Uma textura que se mantém coerente
A textura perde-se facilmente entre ferramentas: uma camada de grão num ficheiro, uma imagem de papel noutro, uma intensidade diferente em cada exportação. Na Gradiently, a textura faz parte do próprio fundo. Um Mark sobrepõe até três materiais com grão e luz, por isso a mesma superfície é desenhada por trás de cada design em cada tamanho, e a sua zona mais calma desloca-se para trás das palavras.
GR·N4D7·V5
Evening Station
Ver este MarkPerguntas frequentes
O que é uma textura de fundo?
Um pormenor fino de superfície, como grão, fibra de papel, tecido ou vidro fosco, sobreposto a uma cor ou a um gradiente para se ler como um material físico.
Que intensidade deve ter uma textura de fundo?
Ténue. Só a deves notar quando a procuras. Se a textura é a primeira coisa que vês, reduz a opacidade.
Acrescentar textura resolve as bandas dos gradientes?
O grão costuma resolver. O pormenor fino e aleatório quebra os degraus visíveis entre tons, e a mistura parece lisa.
Que modo de mistura devo usar para a textura?
Luz suave para um efeito delicado que mantém as cores limpas, ou Sobrepor para um mais forte. Usa uma textura cinzenta neutra para não tingir a cor.
Porque é que a minha textura parece manchada nas redes sociais?
As plataformas voltam a comprimir os carregamentos, o que pode esborratar texturas muito finas. Usa uma textura um pouco mais grossa e verifica o resultado carregado.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
