EFEITO GRID EM 3D

 

Fala comunidade, tudo bem com vocês?!

 

Neste tutorial vou apresentar mais um efeito magnífico do Macromedia Fireworks. Trata-se do efeito Grid em 3D.

 

De fácil criação e de grande carga visual. Esta definição resume este efeito.

 

Ao final teremos um resultado semelhante ao seguinte:

 

Figura 01: exemplo final.

 

Gostou?! Então, mão ao mouse!

 

1) Crie um novo documento medindo 340 x 290 pixels, através do menu File, New ou simplesmente pelo atalho do teclado Ctrl+N.

 

Figura 02: configurações utilizadas na criação do arquivo.

 

2) O primeiro passo a ser tomado é editar a grid. Para isso, acesse o menu View, Grid, Edit Grid....

 

Figura  03: menu de acesso a edição da grid.

 

3) Será exibida a janela Edit Grid. Configure-a da maneira que segue:

 

Figura 04: configurações utilizadas na edição da grid.

 

Nosso palco ficará da seguinte forma:

 

Figura 05: palco após editar a grid.

 

4) Para facilitar nosso trabalho, trabalharemos com o zoom aumentado. Pressione Ctrl + de seu teclado para aumentar o zoom. É recomendável que se trabalhe com um zoom a 400%.

 

5) Selecione a ferramenta Line tool e desenhe no palco uma linha reta (use a tecla Shift para te auxiliar) medindo 130 x 1 pixels, de cor branca (#FFFFFF) e espessura do contorno em 2. Veja as configurações empregadas e o resultado gerado:

 

Figura 06: configurações da linha criada.

 

6) Temos agora que criar uma linha idêntica a primeira porém na vertical. Seguindo os mesmos passos descritos anteriormente, desenhe a nova linha na vertical fazendo com que se forme um ângulo de 90º. A criação desta segunda linha será bem simples, pois a ferramenta Line tool já estará configurada corretamente. Veja o resultado:

 

Figura 07: inserção da segunda linha (vertical).

 

7) A partir deste ponto iniciaremos o efeito em si. Selecione novamente a ferramenta Line tool e permaneça com as configurações definidas. Agora o grid nos ajudará bastante a nos orientar na criação de todas as demais linhas. A primeira linha será criada a partir do ponto inicial da reta vertical até o primeiro quadrado da reta horizontal. Veja no exemplo abaixo como deverá fazer:

 

Figura 08: criação da primeira linha do efeito.

 

Após soltar o clique do mouse, teremos como resultado a figura abaixo:

 

Figura 09: primeira linha do efeito.

 

8) O processo se repetirá agora até chegar na última linha. Vou exemplificar a criação de mais duas retas para que fique bem claro nosso exemplo. Para criar a segunda reta, você deverá pegar um ponto abaixo do que foi criado a primeira reta e puxá-lo até o quadrado posterior ao primeiro criado. Acompanhe os exemplos abaixo para facilitar o entendimento:

 

Figura 10: criação da segunda linha do efeito.

 

Figura 11: criação da terceira linha do efeito.

 

Figura 12: todas as linhas criadas.

 

9) Acesse o atalho do teclado Crtl+A para selecionar todas as linhas criadas. Após selecionar todas as linhas, acesse o atalho do teclado Ctrl+G para agrupar tais linhas. Este processo facilitará a aplicação dos efeitos desejados.

 

10) Acesse o menu View, Grid, Show Grid ou o atalho do teclado Ctrl+Alt+G para remover as linhas de grade. Ocultamos estas grades para verificar como ficou nosso trabalho.

 

Figura 13: menu Ocultar Grades.

 

Figura 14: visualização do trabalho sem as linhas de grade.

 

11) Depois disto, você poderá duplicar este objeto e invertê-lo horizontalmente e verticalmente para obter os resultados que deseja. Cada um poderá customizá-lo de acordo com suas necessidades.

 

12) A aplicação dos efeitos disponíveis no Fireworks produz visualizações agradáveis. Segue mais um exemplo:

 

Figura 15: exemplo de customização da grid criada.

 

Finalizo assim este tutorial, na certeza de ter ajudado o amigo(a) a aguçar sua criatividade para criar com mais vida.

 

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 a série de tutoriais da série Fireworks aqui no site do Júlio Battisti. Já está a venda o curso de Fireworks Básico – Passo a Passo, 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 este curso. Veja também o lançamento Fireworks – Aprenda na Prática, ebook este também de minha autoria.

 

Galera, participem do Fórum de Fireworks no site https://juliobattisti.com.br/ e troque conhecimentos com diversas pessoas. Acesse já!

 

Chegamos ao final de mais um tutorial da série Fireworks. 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,  envie 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