EFEITO PARA TÍTULOS E TEXTOS

 

Fala aí galera, tudo bem com vocês?! Espero que sim.

 

Para este artigo turbinado ensino a criar um efeito muito legal para ser utilizado em títulos e textos. Vejo muitos sites bons na web que pecam nesta parte – o texto. Muitas das vezes possuem layouts atraentes e bonitos, porém seus textos não passam um efeito legal ao internauta.

 

Acompanhe este tutorial e aprenda a desenvolver um modelo bem bacana para ser utilizado em seus textos, mais especificamente em títulos.

 

Ao final teremos um efeito maravilhoso, porém este tutorial será um pouco mais complexo, mas nada que você não dará conta de fazer. Surgindo qualquer dúvida, basta entrar em contato comigo através do e-mail webdesigner.pro@pop.com.br.

 

1) Crie um novo documento de 400 x 300 pixels.

 

 

2) Com a Ferramenta Texto, digite seu nome. Neste exemplo irei escrever o meu – FABIO ALMEIDA. Utilize as seguintes configurações:

 

» Letras maiúsculas

» Fonte: Arial Black

» Tamanho: 40

» Cor: #0000A0

 

 

3) Duplique o texto que acabou de digitar ( atalho: Ctrl+Alt+D ). Mantenha uma certa distância entre os dois, pois iremos trabalhar em separado com cada um deles.

 

 

4) Selecione o texto superior e clique no botão Opções de preenchimento... existente na opção de preenchimento. Logo após escolha a opção Linear.Veja:

 

 

 

5) Seu texto deverá ter a seguinte aparência após esta configuração:

 

 

6) Mude a orientação do efeito para a vertical, deixando da seguinte forma:

 

7) Ainda com o texto superior selecionado, acesse o menu Texto, Converter para traçados( atalho: Ctrl+Shift+P ).

 

 

8) Acesse a Ferramenta Caneta. Veja sua localização:

 

 

9) Chegamos na etapa do tutorial que mais exigirá de nossas habilidades, em especial com o mouse. Com esta a Ferramenta Caneta selecionada, tente desenhar uma forma, com preenchimento na cor “#8F8F8F”, que envolva o texto. Siga o exemplo abaixo:

 

 

10) Acesse a Ferramenta selecionar secundário( atalho: A ) e com a tecla Shift pressionada dê um clique sobre cada letra de seu nome e também sobre a forma que criamos, para selecioná-los.

 

 

11) Selecione o menu Modificar, Combinar traçados, Perfurar.

 

 

12) Veja o efeito após ter acessado o comando supra citado:

 

 

13) Acesse a Ferramenta Ponteiro (atalho: V) e posicione o texto que acabamos de recortar sobre o texto inferior, de maneira a se encaixarem perfeitamente.

 

Dica: Para certificar-se de que irá posicionar corretamente o texto recortado sobre o texto inferior, trabalhe utilizando o ZOOM. Para aumentar o zoom, utilize o comando “Ctrl +” e para diminuir o zoom, utilize o comando “Ctrl –“.

 

 

14) Continuando, altere a Opacidade do texto recortado para 70%.

 

 

15) Selecione o texto inferior e clique no botão Opções de preenchimento..., escolhendo a opção Linear. Escolha um tom de azul mais claro para uma das extremidades e permaneça com a cor original para a outra extremidade.

 

    

 

 

17) Gire o posicionamento da propriedade Linear até que fique semelhante a seguinte:

 

 

18) Estamos acabando galera! Falta apenas inserirmos alguns efeitos. Clique no sinal de “+” em Efeitos,localizado em seu Inspector de Propriedades escolhendo a opção Sombra e brilho, Sombra interna. Configure da seguinte maneira:

 

» Distância: 2

» Opacidade: 100%

» Suavidade: 4

» Ângulo: 90

» Cor: #000084

 

 

19) Teremos um efeito semelhante ao seguir:

 

 

20) Acesse novamente o sinal de “+” no Inspector de Propriedades e selecione o menu Sombra e brilho, Aplicar sombra. Configure suas propriedades de acordo com os valores abaixo:

 

» Distância: 2

» Opacidade: 100%

» Suavidade: 4

» Ângulo: 315

» Cor: #9191FF

 

 

21) Prontinho! Veja o efeito final para o texto:

 

 

Muito bem, por hoje finalizamos por aqui! Espero que tenham gostado de aprender mais esta maravilhosa técnica do Fireworks.

 

Agora sim poderá dar início a um desenvolvimento bem elaborado para os títulos e textos de seu site.

 

Até a próxima!

 

Em casos de dúvidas, sugestões, elogios, críticas entre outros, mande um e-mail para:

 

webdesigner.pro@pop.com.br

 

Um cordial abraço,