05/03/13

[Tutorial] 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: 


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? Não precisa ;)

Saiba que o Photoshop tem um filtro chamado Offset que pode resolver essa questão.

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).



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.

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 falha 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.



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.


Gostaram? Se quiserem ver mais tutoriais como esse deixe seu recado nos comentários abaixo. Se quiserem um tutorial sobre algo específico, deixe também!


← Postagem mais recente Postagem mais antiga → Página inicial

0 comentários: