Blog do Multiuso: Efeito Vidro com Fireworks

Olá galera, hoje vou postar aqui mais uma dica bem legal pra quem já trabalha, ou está começando agora a trabalhar com Fireworks. Trata-se do efeito vidro.

Esse efeito é bastante usado para dar mais personalidade a suas criações, e simula na imagem a impressão de um reflexo da luz. Você pode aplicá-lo em um botão, um banner, uma foto, um texto, enfim, qualquer imagem que desejar.

Nesse tutorial vamos montar um botão simples.

1º - Abra o Fireworks

Abra o seu Fireworks, eu estou usando a versão CS4 em inglês. No menu Crate New, clique em Fireworks Document (PNG).

2º - Defina o tamanho para o botão

O Fireworks irá abrir a janela New Document, onde serão inseridas as informações iniciais, como tamanho, resolução e cor do fundo (canvas).

Seja você um profissional ou iniciante, procure sempre trabalhar dentro dos padrões (as vezes não dá, eu sei). Nosso botão será criado com 88x31 px, que é medida divulgada pela ABRAWEB - http://www.abraweb.com.br/site/home.php

A resolução será 72 px/inch e nosso canvas será Transparent.

3º - Montando o botão

Para criar a base do botão, vamos usar a ferramenta Rectangle. Pra facilitar seu trabalho, selecione o Rectangle, desenhe de qualquer jeito no canvas e redimensione no menu Properties, aplicando as mesmas medidas que foram usadas para o canvas. Na caixa W:, coloque 88, e na caixa H:, coloque 31 (Altura e Largura, respectivamente).

Para centralizar o retângulo, coloque o valor 0 nas caixas X: e Y: respectivamente.

Agora vamos personalizar as cores, usando um degradê. Com o retângulo selecionado, vá até o menu Properties, e altere a opção marcada como Solid - coloque Gradient > Linear.

Agora iremos alterar a cor do nosso degradê. Para isso, basta clicar no botão a esquerda da opção Linear. No menu que se abre, temos a opção de alterar as cores e a opacidade das mesmas. Basta clicar ou arrastar os sliders para notar a diferença.

Feito isso, vamos arredondar os cantos do retângulo. No menu Properties, procure a opção Roundness e marque-a com 50%. Feito isso, o botão já começa a tomar forma.

4º - Criando o efeito vidro.

Selecione o retângulo e duplique-o, através de CTRL+C e CTRL+V.

Vamos Alterar a cor do novo retângulo para Solid e usaremos branco.

Redimensionaremos sua altura (H:) para15, e o manteremos alinhado na parte de cima do canvas.

Alteraremos o slider de Opacity para 40%.

Agora vamos desenhar uma elipse com as medidas do canvas (88x31 px). Reparem que eu desenhei uma elipse vermelha, mas a cor dela não fará nenhuma diferença, pois ela servirá pra quebrar um pedaço do retângulo, conforme veremos mais adiante.