SÉRIE EFEITOS – PARTE 2

 

E aí galera, tudo bem com vocês?! O que acharam do primeiro tutorial da série efeitos? Quem tiver alguma sugestão para esta série ou tenha alguma curiosidade de como se faz determinado efeito, envie-me um e-mail (webdesigner.pro@pop.com.br) e registre sua sugestão.

 

Neste tutorial vamos aprender a criar um outro modelo de botão do estilo aqua. Este estilo é caracterizado por botões que impõe sua presença de forma marcante no layout. Muitos sites utilizam esta técnica para transmitir uma imagem de profissionalismo.

 

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 do estilo aqua.

 

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

 

Figura 02: menu abrir.

 

2) Selecione a ferramenta Rectangle tool e desenhe no palco um retângulo medindo 146 x 57 pixels.

 

Figura 03: ferramenta Rectangle tool.

 

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

 

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

 

Figura 05: retângulo duplicado.

 

4) Altere as cores dos retângulos para #EBEBEB (o retângulo acima) e #939393 (o retângulo abaixo).

 

Figura 06: alteração das cores dos retângulos.

 

5) Com o retângulo de cor #EBEBEB (o que está por cima), acesse o ícone de efeitos e aplique o efeito de Inner Shadow, através do menu efeitos, Shadow and Glow, Inner Shadow.

 

Figura 07: efeito Inner Shadow.

 

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

 

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

 

6) Selecione os dois retângulos e configure a propriedade Rectangle roundness para 30. Isso é feito para arredondar um pouco as bordas do retângulo.

 

Figura 10: retângulos com bordas arredondadas.

 

7) Selecione o outro retângulo (de cor escura) e aplique o efeito Drop Shadow, através do menu Efeitos, Shadow and Glow, Drop Shadow. Veja como deverá configurar este efeito:

 

Figura 11: propriedades do efeito Drop Shadow.

 

Figura 12: resultado após aplicação do efeito Drop Shadow.

 

8) Duplique novamente o retângulo de cima (cinza claro) através do atalho Ctrl + C e Ctrl+ V. Altere sua propriedade Rectangle roundness para 100 e posicione-o da seguinte forma:

 

Figura 13: retângulo duplicado e posicionado conforme orientação.

 

9) Selecione a ferramenta Subselection tool e molde o retângulo até que o mesmo admita o seguinte formato:

 

OBS: altere a cor de preenchimento para branco (#FFFFFF) e remova o efeito Inner glow.

 

Figura 14: retângulo duplicado moldado de acordo com o botão.

 

10) Agora basta inserir o texto de sua preferência e pronto. Está aí um belíssimo botão do estilo aqua.

 

Figura 15: botão final.

 

É 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