Criando e Aplicando Texturas Naturais
Texturas fazem um site se sentir tangível.
Eles dão ao conteúdo uma relação com o mundo físico, um senso de lugar e uma realidade com a qual as pessoas podem se relacionar.
Infelizmente, a simulação de texturas físicas não é tão simples quanto tirar uma foto ou executar alguns filtros do Photoshop.
É preciso misturar ruídos aleatórios e padrões reconhecíveis, buscando semelhanças em vez de pura repetição.
Aqui, discutiremos o que dá às texturas uma qualidade orgânica e analisaremos técnicas para criar e aplicar texturas de aspecto natural e ladrilhos transparentes.
Senso de toque via visão
Uma "textura" é a superfície de uma substância ou objeto físico. Como a visão, nosso senso de toque nos ajuda a entender os objetos. Áspero, liso, liso e quebradiço, são texturas e dizem a alguém do que um objeto é feito, onde esteve e se está relacionado a outra coisa.
Na Web, o senso de toque de uma pessoa é limitado ao dispositivo de entrada. Mas nem todos os sites precisam "sentir" o mesmo. Com base em sua experiência de lidar com objetos do cotidiano, as pessoas associam determinadas aparências a certas texturas. Na arte digital, pode-se dizer que textura é como algo "sente" aos olhos.
Enquanto editores de imagem modernos facilitam a criação de texturas, nem toda textura é um vencedor infalível. Criar uma textura com aparência natural é uma tarefa complicada que mistura padrão, caos e uso para criar um personagem.
Texturas naturais têm uma medida de aleatoriedade
Muitas texturas estão entre dois extremos: padrões regulares e ruído aleatório. Texturas baseadas em padrões não pedem desculpas por parecerem artificiais. Eles podem ser feitos de um símbolo ou texto conhecido e sempre têm um arranjo previsível.
Acima, amostras de padrões lado a lado.
No outro extremo, texturas baseadas em ruído incorporam estática aleatória. Eles são fáceis de criar - o Photoshop tem seu próprio filtro "Add Noise" (Adicionar ruído) - e fácil de usar porque faltam recursos que pareçam estranhos quando cortados.
Acima, amostras de texturas barulhentas.
As texturas de aparência natural ficam em algum lugar entre os padrões regulares e o ruído aleatório.
Acima, uma gama de texturas mistura padrões e ruído em vários níveis.
Embora nada esteja errado em ambos os extremos, muitas boas texturas possuem características de ambos. Em texturas de aparência natural, as costuras são ausentes ou difíceis de detectar, e não podemos identificar padrões em peças repetidas. Seu visual é tão distinto e eficaz quanto qualquer padrão regular, mas menos evidente.
Texturas “orgânicas” têm a combinação certa de ruído e padrão.
Caos Racional, Ruído Ordenado
No contexto da textura, “ruído” refere-se a variações irregulares em um grupo de pixels. Grão de filme, artefatos de baixa luminosidade e dithering são três tipos comuns de ruído que, desejáveis ou não, são freqüentemente encontrados em imagens complexas.
Ruído de textura é o que faz com que as superfícies naturais pareçam naturais. Mas não é simplesmente estático. Em vez disso, o ruído da textura equilibra o caos e a ordem.
Acima, uma única forma geométrica repetida muitas vezes cria um padrão. À esquerda, a forma varia apenas no posicionamento: as linhas não são uniformes.
As outras fotos mostram mudanças no ângulo, densidade e tamanho da forma. Texturas feitas a partir dessas variações de forma pareceriam mais caóticas - mas todas as texturas manteriam o caráter único do original, porque as variações são baseadas na mesma forma básica.
Claro, o resultado ainda parece artificial. Repetições óbvias em texturas baseadas em ruído estragam o efeito porque as pessoas são muito boas em reconhecer padrões. Texturas no mundo real têm variação de forma, cor e profundidade.
Acima, as texturas do mundo real mostram tanto o ruído quanto a repetição. Serapilheira, granito rosa e papel de cera têm seus próprios padrões “regulares irregulares”, mas cada um ainda é distinto dos outros.
- Com suas linhas horizontais e verticais previsíveis, a serapilheira é a mais regular. Mas as linhas não são perfeitas. Pequenas variações de tom e direção impedem que o padrão pareça artificial.
- As marcas no granito não são distribuídas uniformemente. Ver o desnível de perto é difícil. A característica se torna mais aparente quando vista em uma área ampla.
- O papel de cera tem o menor contraste e a menor personalidade. Alguns aglomerados de tons escuros impedem que seja ruído aleatório.
Toda textura tem certas características - sejam pockmarks, listras, pontos ou linhas - que a tornam única. Variações nessas características fazem com que funcione.
Acima, uma textura metálica incorpora formas irregulares sobrepostas em nenhuma ordem particular, mas mantém seu caráter distinto. (Cortesia de textura O Design Mag .)
Profundidade e contraste variam de murmúrios a gritos
Uma variável chave de qualquer textura natural é a profundidade. A “irregularidade” de uma textura proporciona uma sensação de tato mais do que a cor ou o tamanho. Mas a profundidade também adiciona contraste, o que atrai a atenção e pode degradar a legibilidade.
Uma textura gritante no fundo aumentará o volume do conteúdo em si. Em que ponto é muito alto? Isso depende da força do conteúdo e da disposição do público.
Se uma textura alta se encaixa no assunto, então contribui para o humor. Mas se interferir na legibilidade, você tem um problema.
Qual dos escritos acima é mais fácil de ler? Qual textura reflete melhor a mensagem na escrita? Pode haver mais de uma resposta correta, mas há apenas uma diretriz: ao misturar texturas e conteúdo, especialmente conteúdo textual, verifique se as bordas do conteúdo permanecem visíveis.
Falando de bordas, para realismo extra, preste atenção para onde a textura termina. Texturas viscosas ou ásperas, por exemplo, não precisam terminar em uma linha perfeita. Em vez disso, deixe-os escorrer ou desmoronar na próxima superfície. O truque é pensar em tudo na página como uma superfície com textura, mesmo que seja uma cor sólida simples.
Texturas que se tornam aparentes com fontes de luz
Nem toda textura precisa de rachaduras profundas para parecer tangível. Considere a pintura brilhante. Sem sulcos ou solavancos, a sua sensação de esmalte liso vem do seu brilho.
As texturas acima mostram como a superfície de um objeto não precisa ser áspera. Eles podem não funcionar como mosaicos repetidos, mas brilho, reflexo e translucidez fornecem pistas visuais sobre como um objeto pode parecer no mundo real.
O ponto doce entre o caractere e o tamanho do arquivo
Um problema comum com qualquer textura natural é como repeti-lo. Quando as pessoas detectam a repetição, qualquer ilusão de realidade é destruída. A solução mais fácil é usar blocos maiores - e, portanto, menos -. Com mais variação, a repetição de manchas se torna mais difícil.
Como mostrado acima, quanto mais largas as peças, menor a chance de as pessoas detectarem a repetição. Infelizmente, ladrilhos maiores também criam arquivos maiores, o que diminui o carregamento da página. Para muitas pessoas, um sinal de carregamento pairando mata o humor tanto quanto ver a borda de um ladrilho.
Outra solução é tornar as formas no bloco individual menores.
Como vemos, a repetição de texturas mais refinadas tem menos chance de ser localizada. Mas quanto mais fina a textura, menos caractere você pode dar. A melhor textura seria puro ruído, mas isso não ajuda você. Texturas naturais sempre evocam uma superfície conhecida.
Em suma, as texturas naturais devem:
- Tem personalidade suficiente para que eles não sejam apenas ruídos aleatórios. Isso significa que formas, ou "aglomerados" de pixels, devem ser semelhantes, mas não idênticas.
- Tenha personalidade suficiente para que uma cena ou clima seja estabelecido, mas não tanto que os usuários se distraiam do conteúdo. Isso significa que nenhum “aglomerado” ou outra característica deve se destacar quando visto de longe.
- Seja aleatório o suficiente para evitar a repetição. As características da textura não devem formar um padrão que as pessoas possam identificar sem se focarem.
Como fazemos tudo isso?
Criando Texturas no Photoshop
Muitos programas permitem que os designers criem suas próprias texturas naturais. E a web não tem escassez de texturas para download. Criar sua própria textura pode ser uma experiência gratificante, sem violar os direitos autorais, que contribui para um design realmente único.
1. Crie um novo documento do Photoshop com um fundo branco. Para este exemplo, criaremos 600 x 300 pixels.
2. Preencha o fundo com preto.
3. Desenhe traços brancos aleatórios apontados na mesma direção geral. Neste exemplo, estamos usando um pincel simples com arestas duras. Pontas de pincel diferentes criarão resultados diferentes. 
4. Use a ferramenta smudge para manchar os traços em bordas borradas aleatórias. Uma ponta de ponta difusa (com uma dureza menor que 30) funciona melhor. Por mais distorcida que a textura se torne, os melhores resultados terão muitos tons de cinza. 
5. Vá para Filter> Noise> Add Noise , e adicione static de acordo com seu gosto. Então Filter> Other> High Pass . Juntos, eles adicionam mais tons de cinza (vital para o passo 6) e um pouco de grão. 
6. Crie uma camada de mapa de gradiente. Essa camada especial aplica cor às camadas subjacentes com base em seu tom. Ao contrário dos gradientes normais, que colorem em pixels com base na localização, os mapas de gradiente são coloridos em realces, tons médios e sombras. Use cores com pouca saturação, especialmente verde, marrom e azul, para simular as cores da natureza. 
Acima, o resultado da aplicação de um mapa gradiente marrom e amarelo.
7. Corte uma parte interessante da textura. Tente não usar mais da metade da imagem inteira. Vamos usar o resto em breve. 
8. Importante: Salve o bloco cortado como um arquivo separado. Você precisará do arquivo original depois.
Os detalhes mostrados aqui são deliberadamente grandes para demonstrar a técnica, mas o resultado não é ruim para uma textura. Veja como o processo funciona em geral:
- Qualquer tamanho que você achar apropriado fará. As peças maiores terão traços mais realistas, mas serão maiores no tamanho do arquivo. Sempre comece muito maior do que o necessário, porque as bordas de uma textura feita do zero raramente correspondem às bordas da tela.
- Crie uma série de marcas com a mesma ferramenta ou ferramentas. A essência de uma textura é estabelecida escolhendo uma técnica similar ou duas e usando-as muitas vezes.
- Adicione um pouco de caos com filtros do Photoshop.
- Adicionar cor: mapas de gradiente para enfatizar a profundidade e pontos de cor aleatória para respingos. Use cores com pouca saturação, especialmente verde, marrom e azul, para simular as cores da natureza.
Faça telhas sem emenda
De aparência natural ou não, a maioria das texturas e padrões deve ser perfeita. Ou seja, os visitantes não devem conseguir ver as bordas do bloco repetido. Como vamos fazer isso? O próprio bloco fornece a solução.
9. Acima, a imagem é dividida ao longo das linhas azul e vermelha. Como os pixels ao longo da divisão já correspondem, movê-los para qualquer um dos lados garante que as bordas esquerda e direita coincidam. Claro, o problema ainda existe, mas é mais fácil de corrigir.
10. Este ladrilho quadrado vem de uma imagem maior. Acima, a divisão da peça é preenchida com material da imagem inteira. Repita o passo 8 para fixar a costura horizontal (na parte superior e inferior da imagem).
A propriedade final
A textura simples criada acima tem uma falha gritante: porque foi projetada para demonstrar o processo, suas características repetem com muita freqüência.
As características de uma textura natural são geralmente menores que um décimo de todo o ladrilho. Ou seja, para um ladrilho que mede 500 x 100 pixels, a maior marca de rugas, rill ou outras medirá 50 x 10 pixels ou menos.
Texturas bem trabalhadas exigem mais um recurso: o tempo. Curta de baixar um brinde, você tem que ter tempo para desenvolver e refinar uma ótima textura. Mas não pense nisso como uma tarefa. Faz parte do processo, naturalmente.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben é um freelancer web designer quem resolve problemas de comunicação com melhor design.
Como você cria texturas com aparência natural? Compartilhe suas idéias nos comentários abaixo.