SÉRIE EFEITOS – PARTE 4

 

E aí galera, tudo em ordem?!

 

Neste tutorial vamos dar seqüência à série Efeitos. Para esta semana preparei um material explicando como desenvolver um outro modelo de botão muito utilizado na internet e muito bonito também.

 

Ao final deste tutorial você será capaz de obter o seguinte efeito final:

 

Figura 01: exemplo final.

 

Gostaram?! Siga os passos abaixo e faça você mesmo seus botões neste estilo.

 

1) Crie um novo documento com as seguintes configurações:

 

Figura 02: novo documento.

 

2) Selecione a ferramenta Rounded Rectangle e desenhe no palco um retângulo  medindo 218 x 64 pixels.

 

Figura 03: ferramenta Rounded Rectangle.

 

Figura 04: criação do retângulo.

 

3) Acesse a propriedade Fill category, escolha a opção Gradient, Radial e configure-a da seguinte maneira:

 

Figura 05: propriedade Fill category.

 

Figura 06: configuração da propriedade Radial.

 

4) Movimente a direção do efeito Radial como na figura abaixo:

 

Figura 07: movimentação do efeito Radial.

 

5) Insira o efeito Inner Shadow no retângulo. Para isso, acesse o menu de efeito +, Shadow and Glow, Inner Shadow.

 

Figura 08: efeito Inner Shadow.

 

Figura 09: configurações para o efeito Inner Shadow.

 

Figura 10: botão após aplicação do efeito.

 

6) Duplique o retângulo através do atalho do teclado Ctrl+C, Ctrl+V.

 

Figura 11: retângulo duplicado.

 

7) Selecione o menu Modify, Transform, Numeric Transform... (ou o atalho do teclado Ctrl+Shift+T) e siga a configuração da figura abaixo:

 

Figura 12: menu Numeric Transform.

 

Figura 13: configurações da janela Numeric Transform.

 

Veja como ficou:

 

Figura 14: resultado do retângulo.

 

8) Configure as propriedades do retângulo Fill category e Stroke category da seguinte forma:

 

Figura 15: efeito configurações das propriedades Fill category e Stroke category.

 

9) Copie e cole a layer criada.

 

Figura 16: layer duplicada.

 

10) Modifique as propriedades Fill category e Stroke category da layer duplicada da seguinte forma:

 

Figura 17: propriedades da layer duplicada.

 

11) Selecione a ferramenta Subselection tool e modifique a layer duplicada da seguinte forma:

 

Figura 18: ferramenta Subselection tool.

 

Figura 19: layer modificada com a ferramenta Subselection tool.

 

12) Para finalizar, insira o texto desejado:

 

Figura 20: botões após inserção dos textos.

 

Prontinho galera! Está aí mais um fenomenal botão para web.

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

Estou à disposição de todos! Envie suas críticas e/ou sugestões para o e-mail webdesigner.pro@pop.com.br. Terei todo prazer em atendê-lo.

 

Pessoal, trago uma boa notícia a todos os que acompanham os tutoriais da série Fireworks, aqui no site do Júlio Battisti. Já estão à venda os cursos Fireworks Básico – Passo a Passo e Fireworks – Aprenda na Prática, ambos de minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design em geral. Clique aqui para saber mais sobre o curso Fireworks Básico – Passo a Passo e acesse o site https://juliobattisti.com.br para saber mais sobre o curso Fireworks – Aprenda na Prática.

 

Galera, participem do Fórum de Fireworks no site https://juliobattisti.com.br/ e troque conhecimentos com diversas pessoas. Acesse já!

 

Caso tenha dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br.

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, enviem e-mail para: webdesigner.pro@pop.com.br e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida