(No Ratings Yet)
Loading ...
|
Manjado, porém muito utilizado, o efeito da figura ao lado |
 |
O que me levou a pesquisar como se faz este tipo de background, foi ver a página
do game Far Cry 2. Reparem na imagem abaixo, no fundo das navegações
laterais.
PASSO I
Crie um novo documento (File > New). Ele deve ter as configurações
da Figura 1. Tamanho de 4 x 4 pixels, 72 dpi e fundo
transparente.
Figura 1
PASSO II
O novo documento aparecerá pequeno na tela. Para ampliá-lo utilize
o zoom. As duas maneiras que gosto de utilizar para isso são: indo na
barra no canto inferior esquerdo do software e digitando o valor desejado como
mostra a Figura 2. Neste caso o zoom seria de 1600%. Outra
maneira, que é o meu jeito preferido, é utilizando as teclas de
atalho CTRL + BARRA DE ESPAÇO + CLICK para ampliar ou
CTRL + ALT + BARRA DE ESPAÇO + CLICK para reduzir. OK,
parece complicado mas você se acostuma. Fora que é um ótimo
alongamento para as mãos. 
Figura 2
PASSO III
Com a ferramenta lápis selecionada (Pencil Tool – B)
e tendo preto como a cor de
Foreground, certifique-se que a espessura do lápis está configurada
como 1px. Basta olhar na barra de configuração. (Figura
3)
Figura 3
Crie pontos na imagem como mostra a Figura 4. Basta clicar
com o mouse na área de trabalho. Aparecerá um quadrado mas na
verdade é apenas um ponto. Não esqueça que estamos visualizando
a imagem com um zoom de 1600%.
Figura 4
Você pode utilizar outras cores ao invés de preto. Por exemplo
num fundo azul claro, utilizar um azul um pouco mais escuro. Mas você
verá mais adiante que trocando o Lenda Mode da camada no final conseguiremos
um efeito muito similar. Utilizando o preto, você poderá utilizar
esta textura para qualquer cor.
PASSO IV
Vamos transformar esta imagem em textura. A propósito, você pode
utilizar este método para qualquer imagem que criar.
Pressione CTRL + A para selecionar tudo e vá ao menu Edit >
Define Pattern… Abrirá uma janela como a Figura 5.
Dê um nome que seja fácil de lembrar depois.
Figura 5
PASSO V
Você pode fechar este documento, não será mais necessário.
Crie um novo documento. Não importa o tamanho, cor (embora recomende
que não seja preto), etc. Preencha o layer com uma cor qualquer. No meu
caso criei um gradiente como mostra a Figura 6.
Figura 6
Vá no menu Edit > Fill… Aparecerá a janela
da Figura 7. Indo na opção Custom Pattern
você verá além de outros Patterns (Padrões) que já
vem no Photoshop, a imagem que criamos nos passos anteriores. Escolha este padrão.
Clicando em OK já verá o efeito funcionando como mostra a Figura
8. Você pode desfazer este último passo clicando CTRL
+ Z e tentar novamente, desta vez mudando a opção Blending,
Mode.
Figura 7
Figura 8
Pronto. Tente aplicar esta textura no fundo de uma página web e faça
outras experiências. Não se contente apenas com as possibilidades
deste tutorial. Aplique a textura em imagens ou tente trocar a texturas de linhas
diagonais para outros padrões. As possibilidades são infinitas.
A imagem abaixo (Figura 9) criei utilizando o mesmo método mas aplicando
como textura a imagem da Figura 10 que foi construÃda em um documento
de 12 x 12 pixels (a imagem abaixo também está com zoom de 1600%).
Figura 9
Figura 10
Sobre o autor
Tiago Pimentel
Estudei design gráfico na EPA e por uma ironia do destino, me tornei diretor de arte digital. Também sou ilustrador e músico, trabalho na Jazz Digital e sou adicto a links interessantes e todas as coisas boas da vida: fotografia, moda, cinema, viagens, arte, cultura, internet. Além disso dedico meu tempo livre às artes plásticas. Entre em contatos através das redes sociais, Facebook, Twitter, etc. Os links estão no MeAdiciona: www.meadiciona.com.br/tiagopimentel
Você também deve curtir:
 |
 |
 |
 |
Uma respostapara ““Tutorial: Criando backgrounds utilizando padrões (patterns) no Photoshop”
Deixe uma resposta
parceiros
Adorei o Tuto de vcs. Me ajudou pacas !!!
Brigaduuuuuuuuuuu !!!
E pode ter certeza que vcs conseguiram mais uma fã do trabalho de vcs …