Pré-Requisitos
- Facilidade quanto ao manuseio do Fireworks CS3
Objetivo
- Criar um papel de parede para desktop nas dimensões 1024×768 pixel
Conteúdo
1º Passo – Criação do Background (fundo)
De início, vamos criar um novo documento no Fireworks com as dimensões 1024×768 pixel e com fundo branco (Canvas color)
Em seguida, criaremos um retângulo com as mesmas dimensões, sem borda e com preenchimento Gradient Radial de acordo com a imagem a seguir:
Fig. 01: Fundo Gradient Radial
2º Passo – Criação da Textura para o Background
Agora vamos criar um efeito realístico inserindo uma textura grungy ao nosso background. A imagem está disponível para download clicando AQUI!
Feito o download, vamos importá-la e colocá-la sobre o fundo verde com as mesmas dimensões, 1024×768 pixel.
Com a imagem selecionada, vamos aplicar um filtro para deixá-la em escala de cinza. Para isso, acessemos a opção Filters > Adjust Color > Hue/Saturation… e configuremos da seguinte maneira:
Fig. 02: Efeito Gray Scale (Escala de Cinza)
Em seguida, aplicaremos 70% de opacidade e com o Bland Mode Overlay.
Fig. 03 – Aplicação do filtro Overlay
Vamos agora aumentar a sensação de “peso” da imagem, duplicando-a, rotacionando em 180º e colocando sua opacidade em 20% para chegarmos a este resultado:
Fig. 04: Rotação e aplicação de opacidade
Para termos um resultado mais aprimorado, podemos inserir outras texturas e trabalhando-as com sua opacidade e filtros.
Tomei como base outra textura. Clique AQUI e faça o download.
Fig. 05: Inserção de nova textura
O importante aqui é ir duplicando as camadas, rotacionando, aplicando opacidades até que cheguemos a um ponto que nos agrade.
Baixe AQUI o background com todas ações aplicadas acima.
3º Passo – Criação de Textura para o Texto
Bom, vamos criar um texto diferente com uma textura de grama. Então, clique AQUI, baixe a imagem que utilizaremos e a importe para o palco.
Em seguida, utilizando uma fonte “cheia” como Arial Black, Swis721 BlkEx BT ou alguma similar, escrevamos 2009 (cada número em uma camada) sobre a grama com 50% de opacidade e cor branca.
Fig. 06: Texto sobre a grama
Agora vem a parte mais trabalhosa. Para ficar um efeito bacana, precisamos contornar com a ferramenta Pen tool, todos os números de uma maneira não-uniforme.
4º Passo – Organizando os Layers (Camadas)
Para entendermos melhor, a idéia é a seguinte: estilizar cada numeral para que possamos fazer uma colagem da grama sobre cada um e aplicarmos alguns efeitos de sobra, 3D, etc. Portanto, precisamos criar no painel Layers (Camadas), pastas individualizadas para cada número, onde deverão conter 1 número e uma cópia da grama, como na imagem abaixo:
Fig. 07: Organização das camadas
Perceberam que eu gosto de organizar, dando nomes às camadas. Assim fica mais fácil de trabalhar.
5º Passo – Utilizando a Ferramenta Pen Tool
Vamos à transpiração agora…hehehe
Selecionando a camada Nº 2, o layer 2, com a ferramenta Pen tool iremos criar um contorno “pontiagudo”, ou seja, fazer uma vetorização do numeral, mas criando algumas pontas, o que fará com que pareça mais real. Veja como ficou na imagem abaixo:
Fig. 08: Contorno com Pen tool
Agora vem a mágica, rsrsrs…
Primeiramente, devemos ocultar o numeral 2 (clicando no olho ao lado da camada); em seguida, recortar a imagem da grama; posteriormente, selecionar o vetor criado com a Pen tool e fazer uma colagem especial (CTRL+SHIFT+V).
Para podermos visualizar o efeito, é preciso ocultar as outras imagens de grama nas outras camadas, ok?!
E teremos isto:
Fig. 09: Resultado do contorno
Agora, na camada foi criada um junção entre o contorno e a imagem. Sendo assim, para retirarmos a borda deste contorno, devemos clicar na grama (que ficará com um contorno verde) e acessar o Painel Properties e retirarmos a cor da borda.
Fig. 10: Retirando a borda
6º Passo – Aplicando Efeitos
Pessoal, precisamos agora, criar um efeito tridimensional e começaremos com a aplicação de uma sombra e outros efeitos, ok?!
Primeiro, dupliquemos a camada que contém o número com a grama. Esta deverá ficar sobre a original e exatamente na mesma posição sobre ela.
Agora, vamos aos efeitos. Com a cópia selecionada, no Painel Properties, acionemos em Filters, a opção Photoshop Live Effects e façamos os ajustes a seguir:
Fig. 11: Aplicação de filtros do Photoshop
Duplicando novamente a camada original, vamos aplicar mais alguns efeitos. Esta nova cópia deve ficar sobre as demais.
Fig. 12: Aplicação de novos filtros
E pra fecharmos esta etapa, no Painel Properties, vamos colocar a opacidade em 55%. O resultado até agora é este:
Fig. 13: Resultado até aqui
7º Passo – Criando um Efeito 3D
Nesta etapa, faremos um efeito tridimensional. Então, novamente, vamos duplicar a camada original e colocá-la abaixo de todas as outras. Com ela selecionada, vamos desagrupar a imagem (CTRL+SHIFT+G), apagando a grama e deixando o contorno.
Com o contorno selecionado, vamos preenchê-lo com a cor preta e, com as teclas direcionais do teclado, vamos movendo-o para a direita e para baixo até ficar como a imagem a seguir:
Fig. 14: Deslocamento de sombra
Agora, vamos aplicar um filtro especial acessando Filters > Blur > Motion Blur e aplicar a seguinte formatação: Angle: 135º | Distance: 30.
E pra encerrar esta etapa, coloquemos a opacidade em 50%.
Fig. 15: Efeito Motion Blur
E pra finalizarmos esta etapa, devemos fazer mais duas cópias da sombra e para cada cópia, devemos deslocá-la mais para “dentro”, isto é, para esquerda e para cima. Deixando a opacidade em 40% e 30%, respectivamente para cada cópia e uma Blend Mode > Multiply.
Fig. 16: Resultado até aqui
8º Passo – Aprimorando o Efeito 3D
Até aqui nosso trabalho está indo bem, mas logicamente que dá pra melhorar ainda mais um “cadim”…rsrs
Vamos duplicar então, a camada que recebeu o último efeito (ela está sobre todas as outras) de Drop Shadow e Bevel and Emboss, lembram? Com a cópia dela, vamos posicioná-la abaixo de todas as sombras e aplicar o filtro em Filters > Adjust Color > Color Fillna cor Preta e Blend Mode > Multiply.
Feito isso, fazendo alguns deslocamentos para direita e para baixo, teremos, finalmente, um belo exemplo imagem 3D.
Fig. 17: Resultado final
9º Passo – Aplicação da Técnica Novamente
Trabalhoso? Que nada!
Agora só falta aplicar a mesma técnica para os outros números…hehehe
Mãos à obra!
O resultado final é este:
