SÉRIE EFEITOS – PARTE 45

 

Olá galera!

 

Vamos aprender neste tutorial a criar um menu interativo através de nosso fiel amigo Fireworks. O resultado final é surpreendente.

 

Acompanhe os passos abaixo e aprenda na prática.

 

O tutorial será dividido em duas etapas para um melhor aproveitamento. Na primeira parte vamos criar o layout do menu e na segunda parte vamos aplicar as interações.

 

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

 

Figura 01: propriedades do novo documento.

 

2) Importe para o palco duas imagens de sua preferência e as posicione da seguinte forma:

 

Figura 02: importação das imagens selecionadas para o palco.

 

3) Selecione as duas imagens e altere a propriedade Opacity para 20.

 

Figura 03: alteração da propriedade Opacity para 20.

 

4) Digite seu nome ou da empresa à direita das imagens ou importe sua logomarca.

 

Figura 04: logomarca importada para o palco.

 

5) Com todas as imagens e logomarcas importadas para o palco, vamos criar os botões. Selecione a ferramenta Rounded Rectangle e desenhe no palco um retângulo medindo 156 x 32 pixels, com contorno preto (#000000).

 

Figura 05: ferramenta Rounded Rectangle.

 

Figura 06: criação do retângulo com contorno preto.

 

6) Aplique o efeito Gradient - Linear no retângulo de forma que fique semelhante a figura abaixo:

 

Figura 07: aplicação do Gradient Linear no retângulo.

 

7) Altere a propriedade Opacity do retângulo para 50.

 

Figura 08: alteração da propriedade Opacity do retângulo.

 

8) Duplique três vezes o retângulo criado e os posicione da seguinte forma:

 

Figura 09: retângulos duplicados.

 

09) Para finalizar a criação do menu, insira a descrição de cada.

 

Figura 10: inserção das descrições.

 

Finalizamos assim a primeira parte de nosso tutorial. Espero que tenham gostado! Enviem suas sugestões e críticas para o e-mail webdesigner.pro@pop.com.br.

 

Clique aqui para acessar a segunda parte deste tutorial!

 

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

 

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!

 

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. Clique Aqui para saber mais sobre o curso Fireworks Básico – Passo a Passo ou Clique Aqui para saber mais sobre o curso Fireworks – Aprenda na Prática.

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida

 

webdesigner.pro@pop.com.br