Coluna Fireworks – Efeito Lupa

Introdução

Olá Comunidade MXStudio! Através da dúvida de um usuário do nosso fórum, fiz esta coluna sobre o efeito lupa, pois além de sanar a dúvida dele, pode sanar dúvidas de outros usuários, além de mostrar algumas dicas que muitos ainda não conhecem.

Pré-requisitos

O tutorial foi desenvolvido no Macromedia Fireworks 8 mas é compatível com qualquer versão do software Macromedia Fireworks.

É de grande importância que todos tenham conhecimento básicos sobre a criação de formas no Fireworks:

Apesar desta coluna ser escrita de modo simples e claro serão necessários conhecimentos razoáveis das ferramentas Pen Tool, Rectangle Tool, Rounded Rectangle e Filters do Fireworks:

Ainda que nesta coluna explico passo-a-passo a criação da máscara utilizada, seria interessante que você tenha conhecimento sobre máscaras:

Segue abaixo os arquivos necessários para o tutorial

Objetivos

Criaremos um efeito de uma lupa sobreposta a uma imagem, através da construção de uma máscara.

Criando o efeito lupa através de máscaras

1) Abra a nossa imagem base, no caso o mapa do estado de Minas Gerais.

2) Faça uma cópia do mapa, pressionando Ctrl + Shift + D. Repare na sua guia de layers que agora você terá dois mapas identicos e na mesma posição(X e Y).

3) Oculte um dos layers clicando na posição marcada abaixo:

4) Diminua o mapa que está visivel em cerca de 60% do tamanho original, através da ferramenta Scale Tool(Q).

Dica: Pressione a tecla Shift enquanto diminui o tamanho da imagem, isto faz com que você mantenha a proporção da imagem.

5) Retire do modo oculto o segundo layer de mapas, clicando na posição onde deveria estar o “olho”:

Nosso palco ficará preenchido com o mapa grande.

6) Importe a nossa imagem de lupa para o centro do palco.

7) Crie na área centra da lupa(onde fica a lente) um círculo de mesmo tamanho.

Atenção: Deixe a cor deste círculo em preto(#000000) para que a máscara funcione corretamente.

Selecione o círculo, pressione Ctrl + X para recortar. Selecione o mapa grande. Vá na guia de layers e nas opções selecione “Add Mask”. Pressione Ctrl + V para colar o círculo na camada de máscara.

9) Você deve estar se perguntando onde está o que criamos. Ele está escondido abaixo do layer da Lupa. Para movermos um layer para cima, devemos selecioná-lo e pressionar Ctrl + Seta para cima.

Dica: Para mover um layer para cima de todos os outros layers de uma só vez, pressione Ctrl + Page Up. O reverso também funciona. Para mover um layer abaixo pressione Ctrl + Seta para baixo e para movê-lo para baixo de todos os outros layers, pressione Ctrl + Page Down.

10) Posicione a lupa em um local do seu agrado. Para adequar a posição que aparecerá dentro da máscara, você deverá selecionar o layer do mapa grande e clicar no ponto azul que aparecerá na sua tela, movendo-o. Veja o flash abaixo para entender melhor o processo.

11) Selecione a nossa máscara(mapa grande), vá na guia de layers e coloque o layer no modo Multiply. Veja que agora demos uma impressão de lupa na nossa máscara.

12) Se você quiser, ainda pode colocar um efeito de sobra na lupa, dando uma impressão melhor.

Considerações finais

Vimos nesta coluna a simulação de uma lupa através de efeitos de máscara e layers. É um efeito bem simples onde muitos sites o utilizam em mapas de várias formas. Segue aí a sugestão para vocês utilizarem nos seus sites.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem o meu portfolio online: http://www.fabioricotta.com

Espero que vocês tenham gostado desta coluna e até a próxima.

Autor: fabioricotta – Colunista de Fireworks do MXStudio

Qualquer dúvida envie um email para fabioricotta@mxstudio.com.br ou acesse o nosso fórum.