julho 05, 2010 from abduzeedo's blog
Em 2007 escrevi um tutorial para o PSDTUTS, um tutorial solicitado por um leitor - na verdade não apenas um mas vários leitores, eles queriam saber como criar o efeito do header MSNBC. Naquela época o design era novo e tinha no background um design muito colorido. Agora em 2010, eles fizeram um novo site e fui convidado para ajudar eles com uma imagem de background.
Fiquei muito feliz, especialmente porque eles queriam manter o efeito colorido mas queriam algo novo. Então tive a ideia de usar parte do símbolo deles para criar um pattern e aplicar sobre o símbolo do pavão com muito blur e light effects.
O processo todo é bastante simples, no entanto levou tempo até eu ter a ideia e ter o resultado que esperava. Felizmente eles gostaram da ideia e ela já está no ar no novo site MSNBC, então confiram.
Novo Website
Passo 1
Comecei com um documento com 1280x1024 pixels. Preenchi então a background layer com preto.
Passo 2
Coloquei então uma das imagens enviada pelo cliente no centro do documento.
Passo 3
Apliquei Gaussian Blur na imagem com 15 pixels para Radius.
Passo 4
Troquei um pouco Levels , troquei o Black input para 3.
Passo 5
Aqui eu dupliquei a imagem e troquei o Blend Mode para Overlay. Depois agrupei as duas imagens em um folder.
Passo 6
Aqui eu dupliquei o grupo e movi um pouco para baixo, depois troquei as Opacities para 80%.
Passo 7
Do símbolo de pavão do logo MSNBC peguei uma pena e 'fipped it vertically' para criar um pattern.
Passo 8
Aqui está o pattern que criei. Depois fui até Edit>Define Pattern para deixar o patttern disponível na Paint Bucket Tool(G).
Passo 9
Acima das outras layers eu adicionei uma nova layer e com a Paint Bucket Tool (G) usei Pattern para o tipo e preenchi a layer com o pattern que criei a partir do símbolo MSNBC.
Passo 10
Usando a Liquify Tool modifiquei o pattern para adicionar um pouco de movimento.
Passo 11
Para o Blend Mode do pattern usei Color Dodge com 30% Opacity. Também dupliquei a pattern layer para deixar o efeito um pouco mais claro.
Passo 12
Aqui eu selecionei e dupliquei todas as layers, depois disso fiz flip das layers copiadas e troquei o Blend Mode para Screen com 30% Opacity. Também apliquei mais Gausian Blur nessa layer para criar um efeito de reflexo de chão molhado.
Conclusão
O resultado final do efeito em um background preto. Depois disso testei alguns elementos pois a imagem seria usada como background de um novo site. Você pode ver que o processo em si foi bem simples depois que tive a ideia de usar o símbolo deles para criar o pattern.
