SÉRIE EFEITOS – PARTE 1

 

Olá galera, tudo bem?! Iniciaremos esta semana uma nova série onde o foco é o aprendizado de efeitos avançados no Fireworks.

 

Nesta semana vamos aprender a criar um famoso modelo de botão, o botão aqua. Este tipo de botão impressiona pelo grau de realidade que transmite.

 

Está ansioso para aprender? Então vamos à prática!

 

Ao final deste tutorial teremos um resultado semelhante ao seguinte:

 

Figura 01: exemplo final.

 

Gostou?! Siga os passos a seguir e aprenda a fazer!

 

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

 

Figura 02: menu abrir.

 

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

 

Figura 03: ferramenta Rounded Rectangle.

 

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

 

3) Altere a propriedade Fill category para Gradient, Linear. Utilize as cores cinza (#CCCCCC) e branco (#FFFFFF). Veja:

 

Figura 05: menu Gradient, Linear.

 

Figura 06: configuração do efeito Linear.

 

4) Insira o efeito sombra interna através do menu + Shadow and Glow, Inner Glow. Configure da seguinte maneira:

 

Figura 07: configuração para o efeito Inner Glow.

 

Figura 08: botão após aplicação dos efeitos Linear e Inner Glow.

 

5) Duplique o retângulo criado através dos atalhos do teclado Ctrl + C e Ctrl + V.

 

Figura 09: camada duplicada.

 

6) Selecione a camada duplicada e acesse o menu Modify, Transform, Numeric transform ou acione o atalho do teclado Ctrl + Shift + T para abrir a janela Numeric Transform. Configure-a da seguinte maneira:

 

Figura 10: configuração para a janela Numeric Transform.

 

7) Remova o efeito Inner Glow da camada transformada e preencha a propriedade Fill category como Solid na cor branco. Veja:

 

Figura 11: camada transformada com suas propriedades alteradas.

 

8) Diminua o tamanho desta camada, de acordo com a figura:

 

 

Figura 12: tamanho da camada modificado.

 

Dica: Para obter os cantos do retângulo menor mais redondo, selecione a ferramenta Subselection tool (setinha branca) e nos pontos do retângulo acerte para a maneira que julgar melhor.

 

9) Mude a propriedade Fill category do retângulo menor para Gradient, Linear. E coloque a cor branca nas duas extremidades. Veja:

 

Figura 13: configuração para o efeito Linear.

 

10) Ainda com as propriedades do efeito Linear aberta, clique na opção Opacity e a defina como zero. Veja:

 

Figura 14: configuração propriedade Opacity do retângulo menor.

 

11) Selecione o retângulo maior e aplique o efeito Drop Shadow como segue:

 

Figura 15: configuração para o efeito Drop Shadow.

 

12) Para finalizar, digite um texto de sua preferência.

 

 

Prontinho! Está aí um lindo botão aqua para você inserir em seus projetos.

 

É 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