Efeito Aqua

[Rodrigo Resende 1]

E ai galera ,

Como eu sei que tem muita gente que adora aquele efeito aqua irei postar uma materia la do imasters ensinando a fazer.

Espero que gostem.

Veja abaixo as imagens que vamos trabalhar nessa matéria:

 

 

Esse efeito tem resultados muito impressionantes. Repare pelas imagens acima o poder da cor e o clima que o Aqua cria.

 

O principal componente do Aqua é o degradé. Com ele, conseguimos ajustar as cores para que, junto com o reflexo, dê uma impressão de vidro. Sem degradé, o aqua não é aqua...

 

Vamos para a parte prática. Inicialmente com a estrela, que vai nos dar uma boa impressão sobre como trabalhar com formas diversas e irregulares.

 

Para criar essa estrela, vamos passar por cinco estágios:

 

 

Em cada estágio, a forma vai ficando com um visual mais detalhado até completarmos o efeito. Daqui para frente, você verá que a intensão para qualquer geometria é a mesma, mas que para chegar ao resultado final, passamos por diferentes experiências. Faremos tudo manualmente, sem utilizar nenhum plugin.

 

O primeio estágio é simples. Criamos uma estrela utilizando a ferramenta "Star" do Fireworks:

 

Após selecionar essa ferramenta, clicamos e arrastamos o mouse no palco até criarmos a geometria no tamanho desejado, que no caso do efeito aqua, pode ser qualquer tamanho. Tudo é feito com vetores.

Repare que com as ferramentas para geometrias prontas têm pequenos polígonos amarelos em alguns pontos. Veja:

Esses pontos servem para que você altere certas características da geometria. No caso da estrela, podemos alterar a quantidade de pontos, arredondar as extremidades e as curvas internas, além de aumentar os braços da geometria.

 

Para nosso caso, arredondamos as extremidades e as curvas internas e colocamos 5 pontos.

 

Como acabamento, deletamos o preenchimento e deixamos apenas a borda laranja no tamanho 2 (o tamanho da borda depende do tamanho da sua geometria. Não deixe que ela fique nem muito apagada nem muito chamativa).

 

Após a criação dessa geometria, tiramos uma cópia da mesma, enviamos para trás da original, excluímos a borda e aplicamos um preenchimento sólido na cor #FFB907.

 

 

No terceiro passo, iniciaremos uma combinação de efeitos. Além de ter o reflexo, precisamos criar uma espécie de relevo, onde teremos um glow mais escuro que o laranja do preenchimento e uma sombra em apenas um dos lados da estrela, com uma cor bem forte e derivada do laranja.

 

O primeiro efeito será um Inner Glow, que você encontra na área "Effects" no painel de Propriedades.

 

Selecione a geometria com o preenchimento, clique no ícone "+" da área Effects e selecione Shadow and Glow > Inner Glow.

 

Explicando cada uma dessas ferramentas:

 

= Tamanho do Glow

 

= Cor do Glow

 

= Transparência do Glow. Se você escolheu a cor preta, colocando 100% o glow ficará totalmente preto. Quanto menor a transparencia, mais suave fica.

 

= Suavização do glow

 

Offset = Afasta o glow da borda da geometria

 

Para nosso exemplo, configuramos um Inner Glow bem suave, apenas para demarcar um relevo de leve, mas o suficiente para o efeito.

 

Ainda nessa terceira etapa, aplicaremos outro efeito na mesma geometria, complementando o primeiro efeito.

 

É o Inner Shadow. As opções são quase as mesmas, com excessão da ferramenta de ângulo:

 

http://conteudo.imasters.com.br/3417/11.gif

 

Essa ferramenta muda o ângulo da sombra, fazendo com que ela fique para qualquer lado.

Veja a aplicação desse efeito na estrela:

 

http://conteudo.imasters.com.br/3417/12.jpg

 

Repare que já temos um relevo na estrela, e que o Inner Shadow deu um aspecto muito interessante nas cores.

 

Nesse momento, inciamos o trabalho com os reflexos que terá 2 etapas. A primeira trará o seguinte efeito:

 

http://conteudo.imasters.com.br/3417/13.jpg

 

Para isso, criamos outra cópia da estrela sem borda e aplicamos o degradê como a imagem abaixo:

 

http://conteudo.imasters.com.br/3417/14.jpg

 

Você deverá ver a seguinte imagem:

 

http://conteudo.imasters.com.br/3417/15.jpg

Esse degradê indo do branco para o preto vai servir para colocar o efeito do reflexo na estrela.

 

Porém, antes de aplicar o efeito final, vamos editar essa forma para que você chegue naquele efeito de curva do reflexo.

 

Delete alguns pontos da estrela e teremos uma curva como a de baixo:

 

http://conteudo.imasters.com.br/3417/16.jpg

 

(Para criar a curva, utilize a Pen Tool - Nas próximas matérias, veremos todos os detalhes dessa ferramenta).

 

Agora, para que o degradê fique transparente, aplicaremos o modo "Screen":

 

http://conteudo.imasters.com.br/3417/17.gif

 

Dessa forma chegamos ao final dessa etapa.

 

Para finalizar, criaremos duas novas geometrias como na imagem abaixo:

 

http://conteudo.imasters.com.br/3417/18.jpg

 

Aplicamos o mesmo efeito e finalizamos a estrela. Com um trabalho para fazer o fundo e o reflexo, fechamos com essa imagem:

 

http://conteudo.imasters.com.br/3417/19.jpg

 

Vimos nessa estrela o conceito básico da criação do Aqua. Os tipos de efeitos e suas aplicações. No próximo exemplo, veremos o Aqua aplicado em uma bola, que tem alguns detalhes diferenciados da estrela.

 

Veja abaixo:

 

http://conteudo.imasters.com.br/3417/20.jpg

 

A necessidade dos efeitos é a mesma, porém, no caso da bola, temos que aplicá-los de outra forma pra ter um resultado realmente legal.

 

Inciamos o processo, criando um círculo apenas com borda e outro embaixo, na cor sólida. Você terá esse resultado:

 

http://conteudo.imasters.com.br/3417/21.gif

 

Em seguinda, crie outro círculo como os outros, coloque-o abaixo da borda e acima do preenchimento e aplique um degradê "Ellipse" como mostra a imagem abaixo:

 

http://conteudo.imasters.com.br/3417/22.jpg

 

Agora, aplique o modo "Multiply" nessa bola (No mesmo lugar onde você aplicou o modo "Screen"). Você terá o relevo como o Inner Glow fez na Estrela. Veja:

 

http://conteudo.imasters.com.br/3417/23.jpg

 

Se aplicássemos o Inner Glow, não chegariamos nesse efeito pelas limitações que essa ferramenta possui. Então, como solução, utilizamos um degradê com a mistura Multiply.

 

Agora faremos o reflexo, onde você vai criar uma bola com o degradê do branco para preto e aplicar o modo Screen. Você chegará nesse preview:

 

http://conteudo.imasters.com.br/3417/24.jpg

 

Estamos quase terminando. Falta apenas o efeito que, para a estrela, foi o Inner Shadow.

 

Para a bola, novamente, será uma aplicação diferenciada. Você deverá criar uma geometria como essa imagem:

 

http://conteudo.imasters.com.br/3417/25.jpg

 

Detalhe que ela não precisa ser toda certa pois aplicaremos o Edge Feather:

 

http://conteudo.imasters.com.br/3417/26.jpg

 

A geometria então, ficará com as bordas suavizadas. Para concluir o efeito, passaremos essa geometria para trás do degradê Ellipse e finalizamos este exemplo com a seguinte imagem:

 

http://conteudo.imasters.com.br/3417/27.jpg

 

Todos os efeitos que foram aplicados na estrela foram novamente aplicados na bola, porém, com outras ferramentas.

 

As aplicações também não mudam para letras. Começamos criando a borda e o preenchimento:

 

http://conteudo.imasters.com.br/3417/28.jpg

 

Dica: Para trabalhar melhor com as fontes, você pode convertê-las em vetor... vá no menu Text > Convert to Path (Ctrl+Shift+P).

 

Aplicaremos agora os efeitos Inner Glow e Inner Shadow como na estrela. (Baixe o arquivo com o png no fim da coluna para ver as configurações de cada um dos efeitos). Ficamos com a seguinte imagem:

 

http://conteudo.imasters.com.br/3417/29.jpg

 

O próximo passo é criar os reflexos que serão três:

 

http://conteudo.imasters.com.br/3417/30.jpg

 

Assim, finalizamos a aplicação para Texto:

 

http://conteudo.imasters.com.br/3417/31.jpg

 

Pra fechar nossa matéria falaremos sobre os ícones.

 

É sempre muito legal utilizar ícones nos sites, em gerenciadores de conteúdo. Enfim, em muitas ocasiões, os ícones tornam o trabalho muito mais detalhado e, claro, explicativo.

 

Criar os ícones Aqua é com certeza sinônimo de um resultado final muito bom. Para nosso exemplo, aplicamos aqua apenas na parte de fora da pasta. O processo é exatamente mesmo dos outros casos, porém, não utilizaremos os efeitos Inner Glow e Inner Shadow. Apenas o degradê e o reflexo já são suficientes para deixar o ícone legal.

 

Finalizamos ele assim:

 

http://conteudo.imasters.com.br/3417/32.jpg

 

Bom, assim chegamos ao final da nossa matéria. Baixe AQUI os arquivos PNG de cada uma dessas imagens finais.

 

FONTE

[João Prado 64]

Muito bom cara obrigado por compartilhar :)

 

Vou postar aqui uns links de outros tutos que ensinam a fazer objetos com efeito aqua ;)

 

Esse aqui é bem parecido com a estrela que você postou :P

Icone para favoritos

 

Botão Aqua

 

Botão Aqua 2

 

É isso. Quem souber de outros tutos podta ai ;)

[Jackson Dias 68]

Muito bom!

Já vi algumas logomarcas em vídeos tutoriais através do efeito aqua.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif