SÉRIE EFEITOS – PARTE 3

 

Tudo bem galera?! Estão gostando desta série? Preparem-se pois tem muito mais efeitos a ensinar a todos vocês.

 

Nesta semana vamos aprender a criar botões cromados. Estes proporcionam efeitos interessantes para inserir em páginas web, newsletter, e-mail, entre outros.

 

Veja o efeito final que obteremos ao final deste tutorial:

 

Figura 01: exemplo final.

 

Muito legal o efeito final, não é mesmo? Acompanhe os passos a seguir e faça você mesmo os seus botões cromados.

 

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

 

Figura 02: novo documento.

 

2) Selecione a ferramenta Ellipse tool e desenhe no palco um círculo perfeito (pressione a tecla Shift enquanto desenha para obter o círculo perfeito) medindo 127 x 127 pixels.

 

Figura 03: ferramenta Ellipse tool.

 

Figura 04: criação do círculo.

 

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

 

Figura 05: propriedade Fill category.

 

Figura 06: configuração da propriedade Ellipse.

 

OBSERVAÇÃO:

 

As cores utilizadas na configuração acima foram, respectivamente, da esquerda para direita: Branco (#FFFFF), cinza (#9B9B9B), cinza (#4D4D4D), cinza (#666666) e cinza (#CCCCCC).

 

4) Movimente a direção do efeito Ellipse e aumente sua extensão de acordo com o exemplo abaixo:

 

Figura 07: movimentação e aumento das extremidades do efeito Ellipse.

 

5) Insira o efeito Inner Shadow no círculo criado. 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) Acesse o menu de efeitos +, opção Sharpen, Unsharp Mask... e defina-a como abaixo:

 

Figura 11: opção Unsharp Mask....

 

Figura 12: configuração para a opção Unsharp Mask....

 

7) Acesse o menu de efeitos +, opção Adjust Color, Hue/Saturation... e defina-a da seguinte forma:

 

Figura 13: efeito Hue/Saturation....

 

Figura 14: configurações para o efeito Hue/Saturation....

 

Veja como ficou:

 

Figura 15: resultado do botão após aplicação do efeito Hue/Saturation....

 

8) Para finalizar, basta você inserir o texto que precisar. No exemplo deste tutorial utilizei os textos “OK” e “Cancel” para representar as ações de confirmar e cancelar. Você poderá utilizar qualquer texto que precisar. Veja:

 

Figura 16: efeito final após a inserção dos textos.

 

É isso aí galera, chegamos ao final de mais um tutorial da série Design – Fireworks.

 

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

 

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