TRABALHANDO COM MÁSCARAS

 

Fala aí galera, tudo em ordem com vocês?!

 

Vamos ver neste tutorial como se trabalhar utilizando o conceito de máscara. Aqui irei ensinar a mascarar uma imagem, mas ao aprender o conceito você poderá aplicá-lo em qualquer projeto e idéia que tiver.

 

O conceito de máscara é bastante difundido na internet e freqüentemente encontrado em sites conceituados. Ao aprender mais esta técnica do Macromedia Fireworks, o amigo internauta terá mais possibilidades de inovar em suas criações.

 

Veja o exemplo que aprenderemos desenvolver neste tutorial:

 

Figura 01: exemplo final.

 

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

 

1) Abra a imagem ou foto que deseja mascarar, através do menu File, Open... ou pelo atalho do teclado Ctrl+O.

 

Figura 02: menu Arquivo, Abrir....

 

Figura 03: figura escolhida aberta.

 

2) Selecione a ferramenta Rounded Rectangle e desenhe sobre a imagem aberta um retângulo com as seguintes configurações:

 

» Tamanho: 105 x 100 pixels.

» Cor de preenchimento: sem cor de preenchimento.

» Cor de contorno: amarelo (#FFFF00).

» Tip size (tamanho do contorno): 3.

 

Figura  04: ferramenta Rounded Rectangle.

 

Figura 05: criação do primeiro retângulo.

 

3) Agora começam os segredos para a criação da máscara. Temos que criar os demais retângulos, para que preencha todo o espaço da imagem. Mas não podemos simplesmente copiar e colar ou duplicar o retângulo criado. Mas daí você me pergunta: “Mas Fábio, então terei que criar manualmente retângulo por retângulo?”. A resposta é que não precisará fazer isso. Uma vez criado o primeiro retângulo, podemos reaproveitá-lo para criar os demais, mas para isso devemos respeitar uma pequena regra para obtermos sucesso. Teremos que duplicar o retângulo criado segurando a tecla Alt do teclado. Desta forma, todos os retângulos criados ficarão agrupados em uma única layer (camada), que é o nosso objetivo. Ao final, teremos apenas duas layers (camadas), ou seja, uma para a imagem e outra para os retângulos.

 

4) Então, pressione a tecla Alt e duplique o retângulo até que sua imagem esteja completamente envolvida por tais. Veja:

 

Figura 06: imagem após a inserção de todos os retângulos.

 

5) Acesse o menu Window, Layers e perceba que teremos apenas duas layers (camadas).

 

Figura 07: menu Window, Layers.

 

Figura 08: painel Layers.

 

6) Acesse a layer que contém os retângulos criados e posicionados e tire a cor do contorno. A figura aparentará como se não tivesse nenhum objeto além da imagem. Isso é natural, pois tiramos tanto a cor de preenchimento como a cor de contorno. Veja:

 

Figura 09: imagem após a retirada da cor do contorno.

 

7) Selecione agora a outra layer (figura) e acesse o menu Edit, Cut ou o atalho do teclado Ctrl+X para recortar a imagem aberta. Teremos apenas o vazio da localização da imagem.

 

Figura 10: estágio após recortar a imagem.

 

8) Selecione novamente a layer onde criamos os retângulos e acesse o menu Edit, Paste Inside ou o atalho do teclado Ctrl+Shift+V para colar em. Desta forma, teremos o resultado esperado.

 

Figura 11: imagem após a colagem da imagem no layer dos retângulos.

 

9) Você ainda pode incrementar este maravilhoso resultado, modificando a cor do fundo para branco (#FFFFFF) e aplicando um efeito de sombra, através do menu efeitos (+), Shadow and Glow, Drop Shadow.

 

Figura 12: efeito de sombra aplicado.

 

Figura 13: configurações utilizadas no efeito.

 

10) Veja como ficou nosso resultado final:

 

Figura 14: efeito final aplicado a imagem utilizando o conceito de máscaras.

 

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