Textura em gradientes: grão, papel, vidro e seda explicados

A textura de um gradiente é a superfície que pões sobre uma mistura de cores para que se leia como um material e não como uma predefinição de ecrã: um grão fino como o da película, a textura do papel, a clareza e a refração do vidro ou as dobras suaves da seda. As cores dizem qual é o ambiente; a textura diz de que é feita a coisa. É por isso que dois gradientes com cores idênticas podem parecer completamente diferentes, e que a textura é das partes mais distintivas de uma identidade visual.

As quatro famílias de texturas

Grão: película e impressão

O grão é a textura mais versátil e a mais fácil de acrescentar. Uma camada fina de ruído monocromático faz uma mistura parecer fotografada ou impressa, e esconde também o banding que os gradientes digitais lisos costumam mostrar. Funciona com quase qualquer paleta, e é por isso que se tornou o toque final por defeito. Quanto usar, e como, está em gradientes com grão.

Papel: artesanato e calma

A textura de papel traz uma base de branco quente, fibras suaves e uma ligeira irregularidade, como se o gradiente tivesse sido impresso ou pintado. Combina naturalmente com cores claras, tintas suaves e letra com serifa. Mantém as manchas de cor pequenas e deixa o papel aparecer; um gradiente pastel ou terroso sobre papel parece feito à mão como um fundo de branco puro nunca parece. Vê gradientes pastel para paletas que lhe assentam.

Vidro: tecnologia e profundidade

As texturas de vidro são de dois tipos. O vidro fosco desfoca o que está por trás, e é a base do glassmorphism. O vidro claro ou canelado refrata a cor em faixas e acrescenta realces nítidos onde a luz apanha um limite. Ambos sugerem precisão e hardware moderno. O segredo está no realce: uma linha fina e brilhante colocada onde a luz bateria, e cor mais escura em todo o lado.

Seda: luxo e suavidade

A seda e o cetim parecem dobras lisas de tecido: sombras largas e suaves, e realces brilhantes e estreitos onde o pano se vira para a luz. No ecrã, isso significa um gradiente com faixas nítidas de luz entre tons mais profundos, muitas vezes num só tom. As cores profundas de joia, como vinho, esmeralda e meia-noite, lêem-se como traje de gala; as claras, como champanhe e rubor, lêem-se como noiva ou cuidados de pele. A seda funciona lindamente em câmara lenta, onde os realces podem derivar.

Como empilhar texturas

Os materiais reais combinam texturas: a seda tem brilho e trama, o papel impresso tem fibras e grão de tinta. Os gradientes podem fazer o mesmo, desde que cada camada tenha uma função clara. Uma ordem fiável é cor, depois estrutura, depois superfície, depois luz.

1. 1

   Campo de cor

   A própria mistura: o teu gradiente, malha ou brilho. Acerta isto primeiro; a textura não corrige uma paleta embaciada.

2. 2

   Estrutura

   A forma em grande escala do material: dobras de seda, caneluras de vidro, a suave irregularidade do papel. Muda a forma como a cor flui.

3. 3

   Superfície

   O detalhe fino: grão ou textura de papel. Fica por cima de tudo e faz a superfície parecer física.

4. 4

   Luz

   Realces e sombras que dizem ao olhar de onde vem a luz. Uma única fonte de luz consistente faz todas as camadas lerem-se como um só objeto.

.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}

Textura e legibilidade

A textura acrescenta detalhe, e o detalhe por trás de letras pequenas torna-as mais difíceis de ler. Mantém a textura mais leve por trás do texto e mais forte nas zonas abertas, e mantém o texto e os logótipos acima de todas as camadas de textura para os contornos ficarem nítidos. Os realces fortes de seda e os reflexos de vidro são o maior risco, porque criam linhas brilhantes que podem cortar uma palavra. Vê texto sobre fundos movimentados.

A textura como identidade

As cores podem ser recolhidas de uma captura de ecrã em segundos. Uma textura, e a forma como se comporta com a luz e o movimento, é muito mais difícil de reproduzir. Isso faz da textura uma das formas mais fortes de tornar teu um gradiente. Cada Mark da Gradiently empilha até três materiais sobre as suas cores, com luz e grão próprios, e a Forge deixa-te escolhê-los controlo a controlo.

GR·75X1·NM

February Quay

Ver este Mark