Photoshop: Criando uma textura de background para seu site

Você encontrou “aquela” textura pela internet e deseja usá-la como background no seu site. Mas a imagem não é grande o suficiente para cobrir a tela toda. Ao perceber que quando a textura se multiplica pela página (formando um pattern), as bordas dessa imagem ficam visíveis “quebrando” a homogeneidade da textura.

Tomemos o exemplo abaixo (clique na imagem para ampliar).

Ao multiplicar a imagem pelo eixo X vemos que as vigas de madeira não se “encaixam” horizontalmente.

Você descarta essa textura e parte pra outra? Melhor não!

Saiba que o Photoshop tem um filtro chamado Offset que pode resolver essa questão. Eu, particularmente, confesso que nunca tinha encontrado uma aplicação pra ele (e olha que existem várias) até que comecei a mexer com webdesign.

Além do filtro Offset você vai precisar da ferramenta Rubber Stamp (aquela de clonagem) e isso pode requerer um pouco de prática.

Preparação

Abra no Photoshop a textura que você quer trabalhar e veja suas dimensões (largura e altura) no menu Image > Image Size. Memorize o valor da largura. Vamos precisar dele nesse exemplo prático.

Agora selecione o menu Filter > Other > Offset.

No campo Horizontal coloque o valor da metade* da largura da sua imagem. Tanto faz ser positivo (para a direita) ou negativo (para a esquerda), não importa. E deixe selecionado a opção “Áreas indefinidas” marcada como Wrap Around.

Isso faz com que a metade da imagem seja deslocada dentro de sua própria área, exibindo sua outra parte do outro lado.

Essa é exatamente a “transição” que não queremos. E é aí que entra a ferramenta de clonagem (Rubber Stamp).

Retoque

Comece a suavizar a aresta que apareceu no meio da imagem. Aconselho a usar a ferramenta de clonagem variando o diâmetro do pincel. Áreas de muitos detalhes use um pincel menor. Varie também sua opacidade, dependendo do caso uso entre 30~50%. (Dica: com a ferramenta selecionada – e somente com ela selecionada – tecle de 0 a 9 pra variar sua opacidade; sendo 0 para 100%, 1 para 10%, 2 para 20% e assim por diante. Teclando dois dígitos rapidamente você altera para números não rasos)

Aqui fiz movimentos mais lineares, acompanhando as frestas das vigas da madeira. Evite usar uma mesma referência (origem) para diferentes áreas do retoque (destino). Outra dica é começar pelas áreas mais lisas. Aquelas que você “completa” o retoque mais rapidamente. Isso acelera o trabalho (bom, pelo menos funciona comigo).

O resultado final fica muito parecido com o original, pois sem a aresta e sem alguns elementos de repetição que sempre aparecem em retoques desse tipo fica difícil perceber o antes e depois.

Tudo bem que pode ter uma falhazinha ou outra. Nada impede de retocarmos até que fique quase perfeito. E lembre-se que talvez o conteúdo do seu site pode sobrepor grande parte da textura.

Mesmo comparando o original e o retocado, a diferença não é tão perceptível.

O resultado

O filtro Offset é o pai desse retoque e você pode voltar a textura a sua “posição original” reaplicando o filtro com o mesmo valor (caso você tenha seguido minha orientação de usar a metade da largura). Ou fazer todo esse procedimento também pro eixo Y. Se for esse o caso, aplique o filtro Offset simultaneamente na horizontal e vertical e retoque as arestas em “cruz” que se formaram. Evite retocar um eixo por vez para um não interferir no outro.

Se tiver qualquer dúvida, comente! Ou entre em contato.