Como criar um efeito vidro no Fireworks

Olá, nesse rápido tutorial, iremos aprender a criar um efeito vidro em textos.

Quem é web designer na hora de criar um site, precisa utilizar alguns efeitos de imagens na criação ou até na melhoria de algum logotipo ou parte em destaque do site.

Nesse tutorial irei mostrar como criar um texto com efeito usando o Adobe Fireworks CS4.

Abrindo o fireworks, iremos criar um novo documento de 500 x 250px e fundo de cor #E4E4E4

Para esse tutorial iremos usar a fonte "Brush Script" que deve vir nativa no fireworks CS4 com a cor #003366.

Agora vamos escrever a palavra Hollywood com fonte no tamanho 96, não esqueça de sempre usar um anti-alias, pode ser o smooth mesmo.

Agora vamos duplicar essa imagem.

Clicando sobre ela com o botão direito, em seguida em EDIT e logo em DUPLICATE

Com as duas copias do mesmo texto, iremos bloquear nosso texto que ficará mais ao fundo, para isso iremos trabalhar com as layers da imagem:

No menu lateral direito, selecione a opção LAYERS, selecione a layer mais a baixo e clique no cadeado.

Ok, com isso nenhuma alteração sera feita nessa parte da imagem. Para melhorar nosso trabalho, vamos clicar no "olho" ao lado do cadeado, deixando assim a imagem invisivel também.

Concluída essa etapa, iremos converter o texto em uma imagem, para que possamos começar a criar o efeito vidro sobre ela.

Para converter o texto em uma imagem, vamos clicar com o botão direito sobre o texto e logo em seguida em CONVERT TO PATHS

Ok, nesse momento nosso texto foi transformado em uma imagem, ou melhor, num conjunto de imagens como você pode ver abaixo:

Mas para que o efeito vidro seja executado no conjunto das imagens igualmente, precisamos formar uma imagem única. Para isso você vai selecionar todas as imagens clica no menu lateral em PATH e em seguida em UNION PATHS.

Pronto, nós temos todas as imagens unidas como uma imagem única, agora vamos criar um recorte usando a PEN TOOL.

Crie um retangulo usando a PEN TOOL começando do ponto mais baixo a esquerda e terminando no ponto mais baixo a direita, como na imagem abaixo:

Passo 1 - Comece do ponto mais baixo a esquerda, em seguida marque o 2º ponto acima e vá para o ponto a direita.





Passo 2 - Quando marcar o ponto a direita, segure o botão do mouse e arraste para cima para criarmos uma curva no texto. Com o ponteiro branco (subselection) defina a curvatura da linha superrior.




Passo 3 - Após definida a curvatura, clique novamente sobre o ponto superior esquerdo para fechar o nó e assim faça os demais pontos para fechar o retangulo.


Importante: o retângulo deve ter o PREENCHIMENTO BRANCO e SEM BORDA

Nesse momento vamos usar a ferramenta PUNCH PATHS para cortar fora a parte de baixo do texto coberta pelo retângulo branco.


Passo 1 - Selecione a imagem do texto e o retangulo branco.





Passo 2 - Clique em PATHS e em PUNCH PATHS




Pronto, agora nós temos uma das copias do texto transformada em imagem e com a parte inferior recortada em curva, vamos voltar para o primeiro texto, ocultando essa imagem no menu layers como fizemos anteriormente.

No texto original é mais simples, vamos apenas criar um gradiente de tons de azul diferentes.





Apenas com o gradiente, já podemos perceber uma luminosidade na parte superior do texto, agora vamos finalizar o efeito vidro.



















Vamos deixar a imagem e o texto visíveis, você verá que um fica exatamente sobre o outro, se caso não estiver, posicione os dois exatamente um sobre o outro.

Selecione a imagem e vamos criar um gradiente de branco e transparência.

Para criarmos nossa transparencia com efeito vidro, os graus de opacidade devem transitar de 70% para 0% como mostra a figura, usando aquela linha preta sobre a imagem.

Você pode determinar qual o grau de luminosidade e contraste que você vai aplicar sobre a imagem.

No nosso tutorial o resultado final ficou assim:

Espero que tenham gostado, fiquem ligados nos nossos próximos tutoriais.