Os melhores tutoriais e efeitos de Fireworks

Fireworks é um ótimo editor de imagens para criação de layout web. Durante muito tempo usei o Photoshop e em 2000 mudei para o Fireworks pois na época era o software mais otimizado para criação web. Tanto que depois o Photoshop incorporou algumas ferramentas do FW finalizando então na aquisição da Macromedia.

Porém, quem acha que o Fireworks só faz retângulo, circulos, linhas e curvas, está enganado. Podemos criar inúmeros efeitos, não deixando nada a dever ao Photoshop e outros programas. Aqui listo 15 efeitos interessantes que irão ajudar você na criação de seus layouts.

Linhas Brilhantes
fw01.jpg
Aprenda a desenhar linhas brilhantes no Fireworks.

Criando ícone 3D
fw2.jpg
Neste tutorial você vai aprender a criar um ícone 3D no FireWorks. A partir desse processo você poderá criar muitos outros.

Estilo Apple Air
fw3.jpg
Veja como fazer de forma simples uma bela maça no estilo Apple Air, através do Fireworks

Sombra em Foto
fw5.jpg
Aprenda a criar aquele efeito realístico de sombra em fotos com Fireworks

Criando uma cena noturna
fw6.jpg
Tem coisa que esse Fireworks faz que você só pensava que só o Photoshop era capaz. Um exemplo é esse cenário noturno com direito a nuvens e lua cheia.

Uma bela gota
fw7.jpg
Efeito real de uma gota d’água feito no Fireworks

Motion Blur
fw8.jpg
O motion blur, quando bem aplicado, rende boas imasgens no Fireworks

Criando o papel de parede do Vista
fw9.jpg
Olha aí, quem diria que o bonito papel de parede do Vista pode ser feito no Fireworks

Suavização de imagem
fw10.jpg
Juntando uma imagem com a cor de fundo. Essa é simples, com Fireworks

Efeitos Aqua
fw11.jpg
Tutorial de efeitos aqua para ser utilizado em vários ícones, feito no Fireworks

Criando Ilustrações
fw12.jpg
Veja nesse tutorial como criar belas ilustrações com Fireworks

Efeito Vidro
fw13.jpg
Um tutorial que irá mostrar como dar aquele efeito de letras em vidro.

Efeito Durex
fw14.jpg
Durex é a marca, poderiamos dizer efeito fita crepe ou algo assim. Mas olha que interessante essas técnicas de colagem com Fireworks

Usando Distorção 3D
fw15.jpg

http://www.adobe.com/devnet/fireworks/articles/3d_rotate_command.html

Quando utilizado com bom senso pode ficar legal.

Entrelace de letras
fw16.jpg
Entrelaçando letras facilmente com Fireworks, tutorial em vídeo.

Bruno Ávila é publicitário e pós-graduando em Marketing com ênfase em ambiente digital pela FGV Brasília. Abriu sua própria agência em 1997, atendendo grandes clientes brasileiros. De 2001 a 2003 foi diretor de criação web do Grupo de Comunicação O Povo. Foi ganhador de três prêmios IBest, maior prêmio da Internet brasileira. Há 10 anos dirige a Ávila EAD, empresa voltada para soluções em educação a distância. Ministra cursos específicos sobre Design, Publicidade e Empreendedorismo por onde já passaram mais de 10 mil alunos. Bruno é autor do livro "Quero ser um Web Designer", um guia para os que desejam iniciar no mercado de web design.

28 Comentários

  • Cristiano Santos

    24/03/2008 às 2:05 am

    Sem dúvidas, o Fireworks é tão bom que fez Photoshop se adaptar alguns pontos em relação ao seu concorrente (hoje irmão mais novo!). Mas hoje acredito que é questão de detalhe para cada designer optar por um ou por outro. O Fireworks tem muitas particularidades que são bem absorvidas por muitos designers e não por outros e vice-versa. Mas acho que o principal ponto em q

  • Cristiano Santos

    24/03/2008 às 2:07 am

    (continua…) Mas acho que o principal ponto em que o Fireworks leva vantagem é a integração com o Dreamweaver já no desenvolvimento da produção do site em si! É uma mão na roda!

  • gabriel

    25/03/2008 às 4:39 pm

    integração com o dreamweaver??? como assim, um é código outro layout, ou vc anda usando o “exportar html” do fireworks hehehe

  • Cristiano Santos

    25/03/2008 às 9:19 pm

    Oi Gabriel, na verdade não curto esses recursos automáticos não! Trabalho no DW com o código aberto para ir limpando a sujeira que ele deixa; mas quando falei da integração me referi à situações onde você precisa corrigir alguma imagem abrindo o PNG referente, é a maior mão na roda!
    Abraços!

  • Lia

    31/03/2008 às 1:46 pm

    Eu já disse que amo esse blog?? :D

  • Paulo Henrique

    22/02/2009 às 3:04 pm

    Cara, parabéns, muito bom estes tutoriais, parabéns mesmo, continue assim que este site é cada vez melhor visto!
    parabéns!

    abraço

  • wagner

    09/03/2009 às 3:07 am

    cara! sou novo no ramo de design em web, terminei um curso há puco tempo, aprendi o básico de fireworks, estes tutoriais estão me tirando muitas dúvidas…
    Valeu!!

  • Michael Doni

    03/06/2009 às 4:58 pm

    YAHOOOOOOOO

    Muito bom!!
    D+

  • Antonio MArcos

    13/07/2009 às 3:52 am

    Olá Bruno como sempre tirando as duvidas dos web design.
    Tenho utilizado muito o fireworks e tenho um projeto de um site que vou ter que utilizar imagens .png
    Queria saber qual a melhor forma de ixibir estas imagens .png com transparência no navegador IE6 ?
    Obrigado
    Marcos

  • Michael Doni

    17/08/2009 às 11:00 am

    Bom dia Antonio

    Uma forma de usar a transparencia em IE6 seria colocar este comando no CSS, em um arquivo separado de formatação. Exemplo “ie-6.css”

    Dentro dele fazer a chamada com a transparência: {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/bordabaner1.png’,sizingMethod=’image’)}

    Para maiores informações, mande um email para softdoni@terra.com.br

    Atenciosamente,
    Michael Doni

  • Andre Lopes

    16/09/2009 às 4:59 pm

    Legal!

  • reginaldo

    01/11/2009 às 12:24 am

    MUITO BOM HEIN.. NEM ENTENDO NADA DE FIREWORKS… E GOSTEI MUITO, PARABENS PELO SITE E PELOS TUTORIAIS.. 200%
    ESPERO QUE EU APRENDA.. HEHEHE É A 1ª VEZ Q VENHO NO SITE E GOSTEI BASTANTE. VLW ABRAÇOS…

  • joão barros

    06/01/2010 às 12:03 am

    caaara!… de mais mesmo, seus tutoriais tem sido cruciais pro meu crescimento no meu estágio de web design.
    poderia te chamar de messias ou coisas do genero xD mas deixo apenas o meu ‘muito obrigado’ de verdade pra vc brother, continue dando essas dicas e tutoriais , pois hj em dia , o ensino anda tão escasso. as pessoas já não tem esse espirito de compartilhar sua sabedoria com as de mais, e por isso, é q estamos no mundo em q estamos xD
    abração brother,fique com Deus =)

  • Douglas

    15/01/2010 às 2:02 pm

    Oi Bruno D’ávila, vc tá de Parabéns!
    Continue assim!

  • Leticia

    24/02/2010 às 2:44 pm

    Muito legal,mais eu õ sei mecher =C

  • Rafael Carvalho

    08/09/2010 às 5:46 pm

    Bruno,

    Muito bom os tutoriais.
    Eu trabalho no mercado imobiliário e vez por outra envio para clientes informações sobre produtos que estou negociando, via email.
    A principio faço no indesign cs5, tranformo em pdf, e depois em tiff e envio como figura.Uso tambem, quando precisa, o Photoshop
    Tem sido um diferencial.
    Conheci o Fireworks recentemente e estou testando, pois sou autodidata.
    Aproveitando seus conhecimentos pergunto: qual é a melhor maneira de enviar material dos produtos que trabalho, para os cliente via emai?
    Vai ser necessario aprender programação?
    Qual dos programas da adobe, na sua opinião, é melhor para fazer isso?

    obrigado

    Rafael Carvalho

  • Bruno Ávila

    09/09/2010 às 7:29 pm

    Olá Rafael,

    Prefira o PDF ou JPG. São arquivos que hoje todo mundo consegue abrir e que não ficam tão grandes.

    Abraços,

    Bruno

  • Lucas Peperaio

    24/02/2011 às 4:32 pm

    Rapaz, parabéns pelo excelente conteúdo, continue assim

  • Rose

    23/03/2011 às 1:34 pm

    as páginas já nã estão mais acessiveis, espero que em breve podemos visualizá-las novamente

  • Daniel

    31/03/2011 às 11:50 pm

    Oi Bruno, cara faço as palavras do amigo João Barros,meus parabens pela sua bondade e paciencia em disponibizar seus conhecimentos,
    Tenho 56 anos, fui layoutman, pastup, e por fim produtor grafico,tdo no tempo da pranchet, não existia nada parecido com fireworks, photoshop,corel, freehend etc.
    Mas, to ai tentando, conheço um poucode alguns programas, como corel e photoshop.
    Quando encontro sites ou blogs como o seu, nosaaaa, sem palavras.
    que Deus te abençõe e muito obrigado, parabens

  • Paulo Ric

    11/07/2011 às 2:42 pm

    Bruno,
    primeiramente parabens pelo conteudo.
    tenho uma duvida:

    com o fireworks eu consigo fazer o efeito constante do link abaixo:

    http://www.whitesnake.com/

    me referi a palavra ao fonte e efeito usado na palavra “WHITESNAKE”

    Grato,
    se possivel me avise por email.

  • Victor Alves

    12/08/2011 às 3:17 pm

    Parabéns pelo site, gostaria de aprender a fazer isso: http://ag-imoveis.sites.uol.com.br/img/logo_ag.jpg

  • JEFERSON

    23/09/2011 às 12:03 pm

    Parabéns, vc recomenda alguma apostila ou tutorial pra que esta começando com dream e fireworks
    Grato.

  • Leonardo

    27/01/2012 às 5:29 pm

    O Bruno . no fireworks quando eu faço um layout , depois quando eu vou visualizá-lo na página pra ver como ficou o trabalho sempre sobra um espaço em branco ! em vez dos layouts ocuparem a tela toda como toda página normal de internet , sempre sobra um espaço em branco ! o que eu faço ? Obrigado desde já , Abraço

  • Bruno Ávila

    30/01/2012 às 5:30 pm

    Leonardo, vc utiliza a ferramenta de criação de página HTML automático do Fireworks? Não recomendo, o melhor seria vc estudar e se aprofundar no HTML. É de fácil entendimento e fundamental para todo web designer. Tendo conhecimento sólido em HTML vc resolveria esse e outros problemas facilmente.

  • Victor

    26/08/2012 às 2:01 am

    Porque o uso do FIREWORKS aumenta a velocidade montagem de um pequeno site ?

  • Victor

    26/08/2012 às 2:14 am

    Quem manja no DREAMWEAVER me explique qual são as pricipal finalidade do DREAMWEAVER para a montagem de um site ?

  • sthefany

    02/09/2013 às 2:42 pm

    Onde posso baixar o firework? Não consegui baixar pelo baixaki.

  • Comente

    *
    *

    counter

    O Significado das Cores

    Receba gratuitamente o eBook "O Significado das Cores" onde Bruno Ávila mostra os sentimentos positivos e negativos transmitidos pelas cores, auxiliando você a eleger a melhor opção para o seu projeto.

    Coloque seu email e receba gratuitamente: