Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Terça-feira, 19/07/2005 - 13:04 - Por Raphael Simas
Seções relacionadas:

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.

Todos os artigos de Raphael Simas

26 comentários publicados

  • 1. Legau

    Terça-feira, 19/07/2005, por Ivan Weber Barbosa

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

    Responder comentário

  • 2. Muito bom mesmo!

    Terça-feira, 19/07/2005, por 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!

    Responder comentário

  • 3. Ótimo!

    Terça-feira, 19/07/2005, por Edil

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

    Responder comentário

  • 4. Não entendi

    Quarta-feira, 20/07/2005, por Fillpe

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

    Responder comentário

  • 5. Show de bola!

    Quarta-feira, 20/07/2005, por João C. 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.

    Responder comentário

  • 6. Deletando os pontos

    Quarta-feira, 20/07/2005, por 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?

    Responder comentário

  • 7. parabéns

    Quarta-feira, 20/07/2005, por 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

    Responder comentário

  • 8. Bom te ver novamente..

    Quarta-feira, 20/07/2005, por 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
    www.vbadesign.com

    Responder comentário

  • 9. Arredondando as pontas da estrela

    Quarta-feira, 20/07/2005, por 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.

    Responder comentário

  • 10. Valeu!

    Quarta-feira, 20/07/2005, por Raphael Simas

    Valeu Vinicius! Obrigado pela atenção!

    Responder comentário

  • 11. VALEU

    Quarta-feira, 20/07/2005, por Glauber Braga

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

    Responder comentário

  • 12. Dá hora hein!

    Quinta-feira, 21/07/2005, por Jefferson Dias

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

    Responder comentário

  • 13. Mando bem!

    Sábado, 23/07/2005, por Fabio Lody

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

    abraço e continue sempre assim

    Responder comentário

  • 14. Mais colunas!

    Domingo, 24/07/2005, por Nilton Fernando Barbosa

    Cara,

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

    Valeu!

    Responder comentário

  • 15. Qto tempo hein

    Sexta-feira, 29/07/2005, por Fernando P.M

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

    Responder comentário

  • 16. Muito louco mas....

    Quinta-feira, 11/08/2005, por 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!

    Responder comentário

  • 17. Muito fera!!!!

    Quinta-feira, 20/10/2005, por 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!!!

    Responder comentário

  • 18. Parabéns

    Sexta-feira, 21/10/2005, por Fillpe

    Mas e os reflexos... estou penando aqui.

    Responder comentário

  • 19. Muito bom!!!

    Quinta-feira, 10/11/2005, por Emerson Alves

    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.

    Responder comentário

  • 20. boa matéria!!!!

    Quarta-feira, 28/12/2005, por Otton Carlos

    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.

    Responder comentário

  • 21. Da HORA!!!

    Quarta-feira, 16/08/2006, por David Junior

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

    Responder comentário

  • 22. Reflexo

    Segunda-feira, 26/03/2007, por Guilherme Negreiros

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

    Responder comentário

  • 23. Fazendo o reflexo

    Quarta-feira, 13/06/2007, por 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.

    Responder comentário

  • 24. Raphael Simas email

    Terça-feira, 18/03/2008, por Nilton Dias

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

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

    Responder comentário

  • 25. SOU SUPER LEIGA AINDA

    Terça-feira, 08/04/2008, por Enide Miranda

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

    Responder comentário

  • 26. ((( M A R A V I L H O S O )))

    Terça-feira, 13/05/2008, por 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!!!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Raphael Simas é Diretor de Arte da produtora Café Azul Mídia Digital e utiliza o Macromedia Fireworks como principal ferramenta para a criação para web.


Indique para um amigo

captcha


2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.