REFLEXO EM IMAGEM E TEXTO

 

Olá firemaníacos, preparados para mais um artigo turbinado? Espero que esteja tão entusiasmado quanto eu.

 

Preparei para este tutorial alguns efeitos que são show de bola e que dá um toque a mais no profissionalismo de seu layout.

 

Sites bem conceituados estão utilizando os recursos que serão aqui apresentados, portanto, vamos logo ao que interessa.

 

1) Crie um novo documento de 500 x 300 pixels.

 

 

2) Para exemplificar o efeito, utilizarei minha logomarca. Você poderá utilizar a sua ou uma imagem qualquer que desejar. Acesse o menu Arquivo, Importar e selecione a imagem.

 

 

3) Com a imagem selecionada, duplique-a (atalho: Ctrl+Alt+D) e a posicione-a logo abaixo da original.

 

 

4) Clique na imagem de baixo e acesse o menu Modificar, Transformar, Inverter Verticalmente.

 

 

5) Crie agora um retângulo do mesmo tamanho da logo. Insira o efeito gradiente Linear e defina-o nas cores preto e branco, como segue:

 

 

OBS: Movimente o Linear para que o mesmo fique posicionado ao centro do retângulo criado.

 

6) Vamos utilizar máscara para definirmos o efeito de reflexo.

 

7) Selecione a logomarca e o retângulo e vamos alinhá-los, tanto pela vertical como na horizontal. Para alinhar na vertical acesse o menu Modificar, Alinhar, Centralizado vertical (atalho: Ctrl+Alt+2) e para alinha na horizontal acesse o menu Modificar, Alinhar, Centralizado horizontal (atalho: Ctrl+Alt+5). Ao final terá a seguinte aparência:

 

 

8) Acesse o menu Modificar, Mascarar, Agrupar como máscara.

 

 

9) Teremos um efeito semelhante a este:

 

 

OBS: Caso após o agrupamento obter-se um resultado estranho, fique tranqüilo! Isso ocorre às vezes devido ao fato da organização das imagens, ou seja, pode ser que a imagem que deveria estar na frente esteja no fundo ou vice-versa. Para resolver esta questão basta clicar com o botão direito do mouse nas imagens e clicar em Organizar escolhendo se quer enviar a imagem selecionada para o fundo ou trazê-la para frente.

 

10) Finalizamos assim nosso efeito, bastando agora alinhá-lo novamente de acordo com o posicionamento da outra logomarca. Para alinhá-las, acesse o menu Modificar, Alinhar, Centralizado vertical (atalho: Ctrl+Alt+2). Veja o efeito final:

 

 

11) Vou ensinar agora a criar o efeito de reflexo para textos.

 

12) Digite um texto qualquer, utilizando a ferramenta Texto.

 

   

 

13) Duplique o texto criado (atalho: Ctrl+Alt+D), posicionando-o logo abaixo do texto copiado.

 

 

14) Selecione o texto de baixo e acesse o menu Modificar, Transformar, Inverter Verticalmente.

 

 

15) Com o segundo texto ainda selecionado, vá até suas propriedades de cor e localize um botão nomeado Opções de preenchimento. Esta opção serve para utilizar outros tipos de preenchimento. Clique neste botão.

 

 

16) Altere a propriedade Sólido para Linear.Veja:

 

 

17) Gire o posicionamento da propriedade Linear até que fique semelhante a seguinte:

 

 

18) Partimos agora para os ajustes finais. Acesse a cor do preenchimento do texto que estamos trabalhando (o do efeito).

 

 

19) Para a primeira paleta de opacidade, defina como 0%. Veja:

 

 

20) Arraste a paleta, que acabamos de definir sua opacidade como 0%, para o centro.

 

 

21) Prontinho! Veja o efeito final para o texto:

 

 

22) Nosso exemplo final, com logo e texto, ficou muito legal.

 

 

É isso aê firemaníacos! Espero que tenham gostado de mais este artigo.

 

Até a próxima!

 

Ah, confiram logo abaixo minha nova logomarca, totalmente desenvolvida utilizando Fireworks. Enviem suas críticas e/ou sugestões (e elogios) para meu e-mail:

 

webdesigner.pro@pop.com.br

 

Um cordial abraço,