SÉRIE EFEITOS – PARTE 6

 

Tudo bem galera?! Estão aprendendo muito com esta série? Espero que eu possa estar agregando algum conhecimento para vocês.

 

Neste tutorial, continuando a série Efeitos, vou ensinar a criar um efeito de botão em alto relevo de grande apelo visual.

 

Abaixo apresento o resultado final do efeito a ser ensinado:

 

Figura 01: exemplo final.

 

Gostaram?! Basta seguir os passos para criar botões semelhantes a estes.

 

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 (mantenha a tecla Shift pressionada para isso) medindo 151 x 151 pixels. Veja abaixo:

 

Figura 03: círculo desenhado no palco.

 

3) Defina o círculo criado com as configurações abaixo:

 

Figura 04: propriedades a serem definidas para o retângulo criado.

 

Figura 05: círculo após configuração estabelecida.

 

4) Usando a ferramenta Pointer tool (ponteiro preto), mude a direção do efeito como na figura abaixo:

 

Figura 06: alteração da direção do efeito radial.

 

5) A partir deste passo iniciaremos a aplicação dos efeitos de sombra. Para inserir o primeiro efeito, acesse o menu efeitos (+), Shadow and Glow, Inner Shadow e defina-o como segue:

 

Figura 07: efeito Inner Shadow.

 

Figura 08: configuração do efeito Inner Shadow.

 

O botão ficará assim:

 

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

 

6) Acesse o menu efeitos (+), Shadow and Glow, Drop Shadow. Neste passo vamos aplicar duas vezes este efeito, mas com configurações diferentes. Observe as configurações utilizadas:

 

Figura 10: configuração do efeito Drop Shadow para a primeira aplicação.

 

Figura 11: configuração do efeito Drop Shadow para a segunda aplicação.

 

O botão ficará assim:

 

Figura 12: botão após a dupla aplicação do efeito Drop Shadow.

 

7) Repita o passo 6 e crie mais duas aplicações do efeito Drop Shadow para o botão. A diferença será a direção do efeito. Abaixo listo as configurações utilizadas:

 

Figura 13: configuração do efeito Drop Shadow para a terceira aplicação.

 

Figura 14: configuração do efeito Drop Shadow para a quarta aplicação.

 

O resultado, após a terceira e quarta aplicação do efeito Drop Shadow, será o seguinte:

 

Figura 15: botão após a terceira e quarta aplicação do efeito Drop Shadow.

 

8) Para finalizar o botão, insira o texto ou algum outro detalhe de seu interessante:

 

Figura 16: efeito final após inclusão do texto.

 

Prontinho galera!

 

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

 

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