VISUALIZADOR DE IMAGENS – PARTE 1

 

Olá galera, tudo bem com vocês?!

 

Neste tutorial vamos aprender a criar o famoso visualizador de imagens, que tanto encontramos na web atualmente. O desenvolvimento deste visualizador é super tranqüilo e fácil de executar.

 

Dividi este tutorial em duas etapas para que sejam explicados nos mínimos detalhes os procedimentos corretos para a criação de nosso visualizador de imagens.

 

Temos também uma novidade. Trata-se dos Comportamentos. Através destes podemos desenvolver inúmeros efeitos em nossos projetos. E mais, os comportamentos nos permitem arrojar nossos layouts e os efeitos finais.

 

Para os que não sabem o que é um visualizador de imagens, segue uma breve explicação. Visualizador de imagens são “mini aplicações” onde temos imagens em tamanho reduzido, que ao passar o mouse sobre estas obtemos como resultado a apresentação da imagem em seu tamanho real em uma forma pré-definida. No nosso exemplo utilizaremos um círculo como forma, ou seja, onde a imagem será exibida em seu tamanho original.

 

Mãos ao mouse!

 

1) Crie um novo documento de 500 x 400 pixels, Resolução: 72 dpi e Cor da tela em Branco.

 

 

2) Vamos criar 04 (quatro) imagens do mesmo tamanho, porém com as cores diferentes. No exemplo que darei, utilizarei os botões no estilo XP, já apresentado em tutoriais anteriores. Veja:

 

» Forma: Círculo.

» Tamanho: 70 x 70 pixels.

» Cor: a que desejar.

 

Obs.: Cada imagem criada deverá ser salva separadamente, em qualquer diretório, para que nosso visualizador de imagens funcione corretamente. No exemplo que aplico neste tutorial, salvei as imagens acima mostradas como bt_xp_laranja.png, bt_xp_verde.png, bt_xp_prata.png e bt_xp_azul_e_verde.png, respectivamente.

 

3) Após a criação das imagens, importe-as para o palco através do comando Arquivo, Importar... ou se preferir o atalho do teclado Ctrl+R.

 

 

As imagens deverão tomar a proporção e localização conforme mostrado a seguir:

 

 

4) Agora vamos criar o círculo onde a imagem será visualizada em seu tamanho real. O círculo deverá ter as seguintes configurações:

 

» Tamanho: 250 x 250 pixels.

» Cor do preenchimento: vazio (sem cor).

» Cor do contorno: preto.

 

Para a criação, deverá utilizar a Ferramenta Elipse.

 

 

Obs.: Para se criar um círculo perfeito, pressione a tecla Shift enquanto arrasta o ponteiro do mouse.

 

5) Para que as imagens fiquem suspensas no palco, vamos criar molduras para tais. Neste caso temos que criar esta moldura um pouco maior do que a imagem. Confira as configurações a serem utilizadas:

 

» Forma: Quadrado.

» Tamanho: 86 x 86 pixels.

» Cor do preenchimento: amarelo claro (#FFFFEA).

» Cor do contorno: preto (#000000).

 

 

Caso a moldura criada sobreponha a imagem, ou seja, fique um nível acima da imagem, o que deve ser feito é o seguinte: dê um clique com o botão direito do mouse sobre o retângulo criado. Acesse a opção Organizar e logo após a opção Enviar para trás ou mesmo através do atalho do teclado Ctrl+Shift+Down, uma vez com a moldura selecionada.

 

 

Desta forma, nosso visualizador está criado. Na próxima etapa vamos criar as funcionalidades para o visualizador utilizando o novo conceito – comportamentos.

 

É isso aí galera! Chegamos ao final de mais um tutorial da série Fireworks. Espero que tenham gostado e que acompanhe a segunda etapa, na qual concluiremos o desenvolvimento de nosso visualizador de imagens. Se tiver 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, acesse: http://www.fabio.trampos.net/ e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

Fábio Almeida