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