Seções iMasters
Fireworks

Fireworks Aqua

Olá
pessoal! Depois de um tempo parado com os artigos, volto hoje
trazendo pra vocês tudo sobre o Macromedia Fireworks.

Vocês vão ver que esse software é
muito poderoso. Se existe o Photoshop em sua
ação máxima para mídia impressa, existe
o Fireworks para a mídia online. E vamos
começar nossas matérias semanais com um tema que
sempre dá aquele toque especial nos trabalhos: o efeito
Aqua.

Utilizaremos em nossas matérias o Fireworks
MX 2004
.

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:

Essa ferramenta muda o ângulo da sombra,
fazendo com que ela fique para qualquer lado.
Veja a aplicação desse efeito na estrela:

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:

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

Você deverá ver a seguinte imagem:

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:

(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":

Dessa forma chegamos ao final dessa etapa.

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

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

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:

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:

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:

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:

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 vc vai criar uma
bola com o degradê do branco para preto e aplicar o modo
Screen. Você chegará nesse preview:

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:

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

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:

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:

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:

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

Assim, finalizamos a aplicação para
Texto:

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:

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

Espero que todos tenham curtido esse tema e que
ele possa ser útil! Mandem sugestões e dúvidas!
As matérias são feitas pra vocês! Obrigado
e até a próxima semana.

Comente também

38 Comentários

Ivan Weber Barbosa

Apesar de ser em fireworks, mas é muito bom…..

Pedro

cara.. sem palavras.. o fireworks é um ótimo programa, cehio de recursos, porém sempre pude notar q as colunas era mto fracas (mto fracas msm!) perto da gama de opções q este porgrama te dá!
meus parabnes por mostrar como utilizar realmente ao máximo os recusros q cada ferramenta oferece!
E q venham + colunas deste nível!

Edil

Realmente muito bom.. Na minha opinião fireworks é um dos melhores..

Fillpe

Não entendi a parte que deleta uns pontos na estrela que pontos são esses?

João Aguirre

Gostei mto da coluna. Eu por exemplo acabei de concluir o curso oficial Macromedia – Fast Track to Fireworks, e n fazia idéia da possibilidade de se criar esse efeito colocando o objeto como screen. Gostei mto, parabens.
Abs, João Aguirre.

Raphael Simas

Willian, pra deletar os pontos você deve selecionar a Subselection Tool (a setinha branca), e aí clicar nos pontos da estrela (ou nós).. com esses pontos selecionados, delete até ficar como no exemplo. ok?

Camila G de Araújo

e ai rafael blz. muito bom ter vc de volta ao imasters, acompanho suas materias desde 2002, pelo dreamweaver, gostaria só que me expicasse como arredondar as pontas da estrela.um abraço

Emerson

Grande Simas, nossa, acompanhava sempre suas matérias de dreamweaver, eram excelentes. Muito bom ter vc de volta a sessão de colunas…. ótima matéria..

Um abraço,

Vinicius – VBA
http://www.vbadesign.com

Raphael Simas

Muito obrigado José!
Respondendo sua dúvida.. para arredondar as pontas da estrela, você tem que utilizar um daqueles “poligonos amarelos” que citei na matéria… um deles é o Rounded e é nesse que você altera.

Raphael Simas

Valeu Vinicius! Obrigado pela atenção!

Glauber Silva Braga

Sima, fiz aqui não ficou identica, mas ficou show de bola. Valeu pelo artigo.

Jefferson Dias

Pô cara se é bom hein! parabens muito bom seu trabalho.

Fabio Lody

Salve Raphael ! mando bem meu brother..esta de parabens

abraço e continue sempre assim

Nilton Fernando Barbosa

Cara,

Parabéns mesmo pela boa qualidade das imagens… espero que venham mais colunas como esta!

Valeu!

Fernando P.M

Ola Raphael qto tem po hein? è bom ter vc de volta. Parabens pela suas colunas…

Flavio Machado

Muito bom velho! Aprendi rapidão! agora ensina a fazer esse reflexo que tu fez nos exemplos finais porque eu pelei aqui e num consegui!

Sergio Barilari Marques

Muito bom e muito bem explicado…
vc esta de parabéns…
Agora vc poderia fazer um tutorial de como se faz o efeito de reflexo que ficou abaixo dos exemplos deste tutorial???? Isso iria me ajudar muito..
valeu!!!

Fillpe

Mas e os reflexos… estou penando aqui.

Emerson Alves da Silva

Muito bem feito, mas e os reflexos??? Me ensina aí, pois não asimilei muito bem….Mesmo assim está de parabéns!!!!!! Manda pro meu mail o passo-a-passo se possível.

Um abraço,

Ana Paula.

Otton Carlos Ferreira de Souza

Olá, estava procurando este efeito a muito tempo, só que não consegui assimilar a sua explicação, irei passar um e-mail, e se podesse mim dizer passo-a-passo, agradeceria bastante! Até mais.

David Junior

Muito doido mermo, valeu apena cara parabéns!!!

Guilherme Negreiros

Parabéns rafael, muito bom, mas gostaria que você explicasse como fazer aqueles reflexos.
Valeu,

Bruno Farias Farias

Pessoal, pra fazer o reflexo não é dificil, depois de concluir o trabalho agrupe toda a imagem que você quer que seja refletida (crtl g), depois copie e cole a imagem (crtl C , crtl V), selecione a imagem copiada aperte o botão direito do mouse em Transform > Flip Vertical, depois posicione a nova imagem em baixo da original selecione e va em Commands > Creative > Fade Image e escolha a que melhor lhe agradar, para editar é só dar um duplo click na figura.. é isso. falou.. e Parabéns pela materia.

Nilton Dias

raphael@cafeazul.com.br (NÃO TA FUNCIONANDO!!)

ALGUÉM TEM O E-MAIL DO Raphael Simas ??

Enide Miranda

Ola Raphael…estou adorando as dicas….mas coitadinha de mim ainda to boiando….kkkk, mas tenho certeza que vou conseguir…beijokinhas

vitor hugo silva

Valeu mesmo, fiquei mais de uns 6 meses procurando esse efeito, tentei fazer, mas nao ficou tão bom assim, agora meus sites vão ficar com uma cara mais moderninha,HEHEHE… ‘estilo iphone’… valeu mesmooooooo!!!

Carlos Alberto Carvalho

Olá Raphael

Eu tenho o Fireworks MX 6.0 e não estou conseguindo o mesmo efeito que você, é por causa da versão ou é porque não estou conseguindo mesmo?

Até mais…

Carlos

José Afonso dos Santos

Brilhante e esclarecedor tutorial.
O tempo de trabalho foi reduzido em significativas horas..

Aproveito para solicitar uma informação.
Posso aplicar em cliparts? Dá certo ?
Ciente da atenção,
Karibé

José Afonso dos Santos

Estes efeitos só se aplica em vetores ?

DEMASIADO BUENO SOY NOVATO EN FIREWORS :D GRACIAS X LA AYUDA Q NOS BRINDAN…

Que pendejadas son estas? Al descargar la carpeta Zip y al quererla descomprimir marca error de Compatibilidad. Ya han pasado 6 años desde que descarque estos archivos. Lamentablemente los perdi y queria descargarlos nuevamente, pero me encuentro con esta estupida novedad de que la carpeta Zip está dañada.

Espero y repares pronto el Vinculo para que pueda descargar los archivos.

OGT…

    Rina Noronha

    O arquivo zip aqui funcinou perfeitamente, profe. victor…

Não funciona o Zip, diz que esta corrompido.

Rina vc pode me mandar o arquivo zipado para o meu email, luiz@giachini.com

Luiz Giachini

Rina Noronha, não funciona o ZIP, pode me mandar luiz@giachini.com.

Grato.

mauriho

genio¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡

Gunnar Correa

Tipo assim neh…

Qual a sua opinião?