[Tutorial] Adobe® Fireworks® CS4 - Básico

[Andy]

Adobe® Fireworks® CS4

Importante

Para que a página não fique extensa visualmente, cada capítulo estará dentro de um spoiler.

Em função das enúmeras imagens no decorrer do tutorial, todas elas estarão escondidas por trás de um botão clicável, bem como, evitar a quebra de layout.

O Fireworks é um editor de imagens desenvolvido pela Macromedia, posteriormente adquirido pela Adobe. Suas funcionalidades focam a publicação gráfica na Internet, por isso inclui suporte a GIF animado, PNG e imagens fatiadas, além de possuir ótima compressão de imagens. A partir da versão MX, ganhou integração com outros produtos da mesma linha, Dreamweaver, Flash e Freehand (uma extinta concorrente do Corel Draw, da Corel, e do Adobe Illustrator, da Adobe).

Com a aquisição da Macromedia em 2005 pela Adobe, houve um choque entre os seus programas, Fireworks e ImageReady, Dreamweaver e GoLive, Freehand e Illustrator. Assim, o objetivo da Adobe foi em criar um conjunto mais poderoso de soluções para a criação, gerenciamento e entrega de conteúdo e experiências atraentes em múltiplos sistemas operacionais, dispositivos e mídias.

O desenvolvimento do ImageReady foi cancelado prevalecendo o Fireworks como editor gráfico para Internet.

FONTE WIKIPÉDIA

Índice

Explorando o ambiente gráfico

Bordas e preenchimentos

Importando e exportando imagens

Cropando imagens

Fundo transparente

Animando uma figura

Tempo por quadro

Máscaras

Estilos

Comando criativo

Fatiando o design

Exportando para o Dreamweaver

Comportamentos

Clique aqui para baixar o Adobe® Fireworks® CS4, faça o seu cadastro gratuitamente na Adobe para ter acesso aos downloads gratuitos para testes, e usufrua desse produto por 30 dias.

[Andy]

Explorando o ambiente gráfico

Iremos conhecer o editor de imagens e designs para a web, abra o Fireworks.

Clique em Create New [ou menu New => File (Ctrl N)] para criar um novo arquivo PNG (Portable Network Graphics).

660 pixels de largura por 440 de altura, com a resolução de 72 pixels por polegada. Em cor de fundo está marcada como branca (White), mas pode escolher também o fundo transparente (Transparent) ou escolher a sua própria cor de fundo (Custom). Enfim, dê OK.

Antes de prosseguir, crie uma pasta “projetos” onde deverá ficar os seus arquivos PNG (nunca deixe de manter o arquivo original, pois ele será o responsável pela continuação e/ou alteração do seu projeto).

Voltando ao Fireworks, menu: File => Save (Ctrl S), e salve na sua nova pasta como “projeto1.png”.

Para quem nunca viu o Fireworks, deve ter sido uma novidade as propriedades ficarem embaixo da área de trabalho (ao contrário do Corel e Photoshop, que vimos que elas ficam em cima).

As barras de ferramentas estão divididas em: seleção, bitmap (ou raster), vetores, web, cores e exibição. Clique na ferramenta retângulo (Rectangle tool, o atalho é U) para ver as outras opções de formas vetoriais.

Mude para a elipse.

Para fazer um círculo perfeito, pressione o Shift. Para o ponto de partida vir do centro do objeto (raio), pressione também o Alt. Chame a ferramenta de seleção (Pointer tool, os atalhos são: V e 0) e mude o preenchimento para a cor #33FFFF, usando o balde de tinta (Paint Bucket tool, o atalho é G).

Dupliquemos o nosso círculo, menu: Edit => Duplicate (Ctrl Alt D).

Deixe um círculo sobre o outro, mas deixando aparecer uma parte do círculo que está atrás. Feito isso vá em: Modify => Combine Paths => Punch.

O Punch funciona como o Soldar do Corel, duplique a “lua” que fizemos. Vamos para as camada, clique ao lado na aba Layers.

Uma novidade no estilo de camadas do Fireworks é que ele cria as pastas automaticamente, ao contrário do Photoshop que criamos as pastas manualmente quando precisamos organizar os objetos. Enfim, selecione a camada superior (que será o objeto que está na frente de todos) e chame a ferramenta de escala (Scale tool, o atalho é Q).

Clique no ponto de rotação do objeto selecionado e leve para baixo. A ponta inferior da lua será o novo ponto de rotação.

Passe com o cursor do mouse no objeto selecionado até virar um arco e rotacione 90º no sentido horário.

Duplique o objeto rotacionado e repita o procedimento até completar quatro luas formando um “cata-vento”. Vamos unir os quatro objetos, vá ao menu: Modify => Combine Paths => Union (Ctrl Alt U).

Agora iremos dar uma aparência 3D, selecione o objeto e em propriedades vá em Filters (filtros), clicando no + para abrir um mini-menu.

Bevel and Emboss => Inner Bevel.

E agora vamos colocar uma sombra, voltando aos filtros e: Shadow and Glow => Drop Shadow.

Faça a pré-configuração indicada.

Agora iremos ajustar a área de trabalho ao objeto, clicando em qualquer lugar da área de trabalho e em propriedades clicando em “Fit Canvas”.

Mais prático que o Trim do Photoshop, que é mais complexo.

Bordas e preenchimentos

Vamos continuar explorando suas funcionalidades para quando chegarmos nos capítulos voltados à criação de designs para o site, não precisar detalhar tudo novamente.

Salve o arquivo anterior e crie um novo arquivo “projeto2.png”.

Bom habilitarmos as réguas, pois mais pra frente ela será útil. Menu: View => Rulers (Ctrl Alt R).

Faça um retângulo e selecione-o para inserirmos uma borda (que deverá estar em 0).

Escolha uma cor preta para a borda.

Vamos deixar sem preenchimento por enquanto.

Procure sempre salvar o projeto para evitar surpresas futuras (queda de energia, computador reiniciando sozinho antes de ter salvado, entre outros...).

Agora nós iremos distorcer o retângulo, clique em “Scale tool” e mude para “Distort tool” (ou aperte a letra Q três vezes).

Distorça um pouco o retângulo.

Selecione o novo objeto distorcido e ative a faca, indo em Knife tool (o atalho é Y).

Atravesse com a faca em uma área qualquer do objeto, com o botão do mouse pressionado.

Chame a ferramenta de subseleção, indo em Subselection tool (os atalhos são: A, 1).

Com o corte o objeto passa a ser aberto.

Vamos mudar o estilo da borda, clique abaixo em 1-Pixel Soft e mude para: Air Brush => Textured.

E aumente para 6 pixels.

Aprendemos a colocar um preenchimento degradê de um jeito no AutoCAD, de outro jeito no Corel Draw, de outro jeito no Photoshop; agora aprenderemos a colocar no Fireworks, que na minha opinião é a melhor de todas. Pois além de oferecer várias opções, também é possível mover a posição de um gradiente já inserido no objeto.

Isto é, digamos que eu tenha inserido um gradiente linear na vertical e queria deixar na diagonal, é possível rotacioná-lo. Se eu quisesse fazer isso no Photoshop (por exemplo) eu teria que inserir o degradê novamente (embora seja fácil fazer isso lá).

Para isso vá até onde estava o preenchimento (que está como None) e mude para: Gradient => Linear.

Na extremidade com o ícone quadrado você rotaciona o degradê com o mouse, na extremidade com o ícone redondo você muda o degradê de posição.

Clicando no preenchimento do degradê, nos ícones de preenchimento é possível chamar a paleta de cores, clicando no ícone desejado.

Vamos deixar um azul claro onde estava o preto.

Também é possível inserir mais cores, clique em qualquer lugar entre os ícones de preenchimento.

Escolha um azul mais escuro.

Mova o novo ícone para um pouco mais perto do ícone da direita (só um pouco).

Salve mais uma vez o “projeto2.png” e crie o “projeto3.png”.

Importando e exportando imagens

Continuaremos a explorar suas funcionalidades, mas a partir deste capítulo iremos aprender a editar as imagens para a web.

Clique aqui para baixar algumas imagens no formato TIFF (Tagged Image File Format), e iremos trabalhar com boa parte dessas imagens ao longo do tutorial.

Descompacte dentro da pasta “projetos”.

Com o “projeto3.png” aberto, vá ao menu: File => Import (Ctrl R) para importarmos uma imagem (similar ao Corel, já que no Photoshop a gente tinha que abrir uma imagem, duplicar a camada, fechar a imagem original, e arrastar para um projeto PSD existente).

Vá até a nova pasta “imagens” e importe a imagem “Sarah.tif” (que está com 549 KB nesse formato).

Clique na área de trabalho para a imagem importada ser inserida no tamanho original, e Fit Canvas para ajustar a área de trabalho com a imagem [ou menu: Modify => Canvas => Trim Canvas (Ctrl Alt T); ou Modify => Canvas => Fit Canvas (Ctrl Alt F)].

Clique em “Text tool” (o atalho é T) para inserirmos um texto e digite o nome da Sarah.

Ctrl D para concluir o texto e V para chamarmos a ferramenta de seleção.

Selecione o texto por fora e nas propriedades aumente a largura do texto, clicando em “Horizontal scale”. Aumente para 168%. Se o texto saiu da área, mova com a ferramenta de seleção.

Vamos chamar a caneta, clique em “Pen tool” (o atalho é P).

Faça três pontos abaixo do nome e Ctrl D.

Clique no ponto do meio.

Deixe a linha ondulada e selecione o nome com a linha.

Vá ao menu: Text => Attach to Path (Ctrl Shift Y).

O nome acompanha a linha curva (mais prático do que no Corel). Vamos ver como ficará a qualidade da imagem no formato GIF e que tamanho vai ficar, para isso clique em 2-Up (Two Up).

O GIF é indicado para desenhos de até 256 cores (se não estiver como GIF em Optimize, mude no segundo Drop-Down), a foto da Sarah tem milhões de cores, com isso a qualidade caiu bastante já que o máximo de cores no GIF é de 256. Vai ficar com um pouco mais de 98 KB, clique em 4-Up (Four Up).

Clique no terceiro quadro e em Optimize mude para JPEG. Está com qualidade 80, idêntica a imagem original, e só com um pouco mais de 37 KB.

No quarto quadro, deixando em GIF mas diminuindo para 128 cores, obviamente a qualidade cairá mais ainda, mas diminuiu só para um pouco mais de 81 KB.

Sem dúvida a melhor opção nesse caso foi o JPEG, ative o quadro que está com o formato JPEG.

Vamos exportar a imagem para JPEG, indo em: File => Export (Ctrl Shif R).

Exporte como “Sarah.jpg”.

Esse é o resultado.

Cropando imagens

Crie um novo arquivo “projeto4.png” e importe a imagem “calvin.tif”, ajustando a área de trabalho com a imagem em seguida.

Em Optimize deixe em JPEG para ver qual será o novo tamanho da imagem, que está com 450 KB no formato TIFF.

Clique em Preview (após Original e antes de 2-Up) e o tamanho previsto para essa imagem em JPEG é de um pouco mais de 50 KB. Mude para GIF para ver o novo tamanho.

Deu um pouco mais de 26 KB e não houve perda de qualidade (afinal, essa tirinha está em preto e branco). Reduza para 8 cores (menos do que isso vai deixar o branco menos branco).

Para reduzir a escala da imagem em propriedades clique em “Image Size...”, ou indo em: Modify => Canvas => Image Size... (Ctrl J).

Com a opção “Constrain proportions” marcada, alterando a largura a altura vai junto e vice-versa (a proporção será mantida).

Mude para 150 pixels de altura e pode dar OK.

Já vimos a ferramenta Crop Tool (de atalho C) no Photoshop, quando escaneamos uma foto (a propósito, se tiver um scanner conectado, é possível fazer isso pelo Fireworks também) e a foto estava torta, selecionamos a área que continuaria a ser exibida, ignorando as falhas.

Não muda nada no Fireworks, basta selecionar a área e dar um clique duplo (nas propriedades você está vendo a largura e a altura da área do Crop, além da posição em X e Y).

Nós aprendemos que os números positivos em X a partir do ponto 0 (zero) é da esquerda para a direita, e em Y de baixo para cima. Pois bem, na web os números positivos em Y é de cima para baixo e não de baixo para cima (pois a página na web começa de cima e não de baixo...), por isso que a posição do Crop em Y está em 0.

A novidade em relação ao Photoshop é o “Export Area tool”, que fica na mesma localização do “Crop tool”. Com ele ao cropar uma imagem, a imagem na área de trabalho não será cropada, mas será exportada com o Crop atribuído.

Faça um teste.

Foi aberto um preview da exportação, onde você pode configurar, caso não o tenha feito na área de trabalho.

Também pode alterar a escala por aqui. Enfim, clique em “Export...”.

E exporte como “Calvin.gif”.

O resultado final.

Fundo transparente

Você com certeza já deve ter visto na web figuras com fundo transparente, ou seja, sem cor ou imagem de fundo. São os chamados “GIFs transparentes” e é o que iremos aprender a fazer agora, crie um novo arquivo no Fireworks de nome “projeto5.png”.

Mude o “Canvas color” para Transparent.

Importe a figura “batman.tif” e ajuste a área de trabalho.

Deixe em 2-Up e escolha GIF. Acima da paleta de cores da figura importada há os tipos de transparências, clique nela.

Por padrão está “No Transparency” (sem transparência), mas temos as opções “Index Transparency” (transparência pelo índice) e “Alpha Transparency” (transparência com o alfa). Escolha o “Index Transparency” e o preview da área de trabalho tirará todo o fundo branco da figura.

Mas se não é o fundo branco que você queria que deixasse transparente (ou desejar que mais uma cor ficasse no transparente), basta clicar no “+” abaixo da paleta de cores do GIF e clicar em uma cor da figura, para deixá-la transparente. Para remover a transparência inserida, basta clicar no “-” ao lado e na transparência inserida anteriormente.

Vamos simular a figura transparente em uma página da web, para isso vá ao menu: File => Preview in Browser => Preview in o seu navegador de internet (F12).

Se bem que com o fundo da página sendo branco, não dá para notar o fundo transparente...

Vamos mudar a cor de fundo para checar a qualidade da transparência.

Quantos serrilhados em volta, heim.

Pois é, o GIF transparente tem duas grandes desvantagens: a primeira são as cores limitadas do GIF que é até 256, a segunda são de que geralmente deixam serrilhados em volta da figura (se for uma figura criada no Fireworks, deixando o fundo já transparente, as chances de aparecer os serrilhados são mínimas em relação a uma figura existente que já tinha cor de fundo). No entanto o PNG não tem cores tão limitadas como o GIF e uma figura transparente criada no Fireworks fica com menos serrilhados ainda. O único problema é que os navegadores mais antigos não exibe o fundo transparente do PNG, um fundo (geralmente branco) é criado automaticamente, parecendo um JPEG.

Volte para a área de trabalho Original e mude para “PNG 32”.

A maneira que iremos deixar o fundo do PNG transparente é a mesma do GIF em “Alpha Transparent”.

Essa ferramenta nós já vimos no Photoshop, mas para quem está começando o Tutorial agora, vamos conhecer a ferramenta varinha mágica (Magic Wand tool, o atalho é W).

Ela seleciona uma área da mesma cor e/ou cores semelhantes se estiverem próximas (veja em propriedades que está com a tolerância de 32, mas você pode aumentar ou reduzir a tolerância das cores semelhantes). Clique no branco da figura do Batman e todo o fundo será selecionado (se desejar inverter a seleção, deixando o Batman selecionado, use o Ctrl Shift I).

Para selecionar o vão fechado entre a capa do Batman e sua bat-bota, sem tirar a seleção do restante do fundo, mantenha o Shift (com isso também é possível selecionar cores diferentes).

Aperte a tecla Delete e tudo o que tiver selecionado será apagado.

F12. Quem tiver um navegador recente, não vai dever nada ao Gif transparente.

Batman em Gif transparente.

Batman em PNG transparente, disponível para os navegadores recentes.

Animando uma figura

Animação: refere-se ao processo segundo o qual cada fotograma de um filme é produzido individualmente, podendo ser gerado quer por computação gráfica quer fotografando uma imagem desenhada quer repetidamente fazendo-se pequenas mudanças a um modelo, fotografando o resultado.

Com isso, todos os movimentos visto em desenhos ou filmes são ilusões de óticas. Nada se move, tudo está parado. O movimento de um desenho animado comum são de 12 quadros por segundos, ou seja, 12 desenhos diferentes simula um movimento em um segundo.

Em um filme geralmente são 29 quadros por segundos, ou seja, uma câmera filmadora captura mais ou menos 29 fotos por segundo para simular um movimento registrado na filmagem.

Nós iremos nos aprofundar mais nos quadros quando estivermos explorando o Flash, mas aqui no Fireworks tem alguns recursos de animações, resultando em um Gif Animado.

Com certeza você já viu algumas figuras na web com animação, se você acompanhou o meu tutorial do Photoshop, já deve ter uma noção de como se faz uma animação em GIF. Mas se você não viu, iremos aprender a animar nesses dois capítulos começando com este.

Abra o Fireworks e escolha o fundo transparente antes de salvar como “projeto6.png”.

Dessa vez não será exportado como GIF, por ser um GIF Animado será exportado como “Animated GIF”, que é a mesma extensão do GIF comum, mas com todos os quadros incluídos na animação.

Faça um círculo azul e mude o tipo de fundo para degradê Cone.

Selecione o seu “cone” e vá no menu: Modify => Animation => Animate Selection (Alt Shift F8). Vamos às legendas da figura seguinte:

States: número de quadros a ser utilizado na animação;

Move: distância do movimento;

Direction: para que direção a figura se movimentará;

Scale to: se durante a animação você deseja que a figura aumente ou diminua a sua escala, nesse exemplo será desnecessário, deixe em 100;

Opacity: alterar a opacidade, por exemplo: fazer a figura desaparecer lentamente durante a animação (teria que ser 100 na da esquerda e 0 na da direita), desnecessário nesse exemplo, deixe ambas em 100;

Rotate: se deseja que a figura rotacione na animação. No CW será no sentido horário, no CCW o anti-horário.

Faça as configurações indicadas e dê OK.

Obviamente não criamos novos quadros e definimos 30 em States. Irá perguntar se deseja adicionar novos quadros automaticamente, dê OK.

Ao lado da aba Layers tem a aba States, clique nela e verá que foram adicionados mais 29 quadros. Você está no quadro inicial.

O quadro 30 é o quadro final e será onde o cone irá parar, volte para o “State 1”.

Clique no ícone da setinha rotacional, no mesmo painel do States, na parte inferior.

Por padrão está no Forever (para sempre), ou seja, quando chegar ao último quadro voltará para o primeiro e a animação será ilimitada. Em No Looping a animação encerrará no último quadro, sem repetir a animação. E os números abaixo desse será de quantas vezes a animação será repetida. Deixemos no Forever.

Clique no ícone do play abaixo da área de trabalho para simular a animação, para parar basta clicar no ícone do stop que será exibido após ter dado o play.

Essa “centopéia” que aparece no quadro 1 é a distância dos quadros. Clicando na última bolinha da centopéia, que é o último quadro dessa animação, você pode esticar para alterar a distância (aumentar a distância por exemplo).

Clique em Fit Canvas para ajustar.

Não se esqueça de atribuir o fundo transparente.

Esse aqui é o resultado:

Agora você já sabe como um desenho é animado.

Tempo por quadro

Em um desenho animado (em um desenho mais simples, geralmente aqueles que os personagens têm quatro dedos em cada mão) o número de quadros varia entre 12 quadros por segundo até 24 quadros por segundo (em desenhos profissionais).

Mas nem em todas as animações será necessário esse número de quadros por segundo, como um banner animado por exemplo, onde em um quadro pode durar um (ou mais) segundo (s).

Abra o Fireworks e salve como “projeto7.png” de fundo branco, com 468 de largura por 60 de altura.

Importe a imagem “liv_tyler.tif”.

Reduza a escala da imagem de modo que seja exibida na área de trabalho boa parte da face da modelo, como indica à figura acima. Feito isso vá à aba States (onde ficam concentrados todos os quadros de animação) e duplo clique em 7.

Abriu o “delay” (atraso) do quadro, aumente para 100 (que equivale a um segundo).

Clique em New / Duplicate State para inserir um novo quadro (automaticamente vai estar o último delay definido) e copie para lá a imagem do quadro anterior.

Digite o texto indicado com a letra e cor de sua preferência, desde que fique visível de se ler. Feito isso, clique na aba Align (alinhamento), fica duas abas após a Optimize.

Clique no ícone Position para ativar o alinhamento.

Clique no ícone “Align vertical center” para o texto selecionado ser alinhado verticalmente.

Insira um novo quadro e copie para lá a imagem do segundo quadro, acompanhando a figura acima.

Insira um novo quadro e copie a imagem do quadro anterior, não se esquecendo de alinhar o texto quando for necessário (dica: insira um retângulo de preenchimento vermelho).

Insira um novo quadro e copie o que for necessário.

Aumente o ultimo delay para 200 (dois segundos).

Preciso dizer que deve exportar como Animated GIF?

O seu banner está pronto.

Máscaras

Assim como uma máscara de rosto tem a função de cobrir o rosto, uma máscara no editor de imagens (seja para fotografia ou para web) tem a função de cobrir algumas áreas da imagem ou do layout.

Vamos conhecer algumas dessas máscaras no Fireworks. Crie um novo arquivo e salve como “projeto8.png”. Feito isso importe a imagem “elsabenitez.tif” e deixe o Optimize como JPEG.

Aperte L para o “Lasso tool”.

Contorne em volta da modelo, incluindo o nome dela.

Com a aba Layers ativa, clique em Add Mask (adicionar máscara).

Tudo o que estiver fora da seleção foi escondido por uma máscara (só lembrando que o atalho para inverter a seleção é Ctrl Shift I), vamos remover essa máscara clicando em Delete Selection (excluir seleção).

Clique em Discard (descartar) para a máscara ser excluída, se escolher o Apply (aplicar) a seleção será aplicada e tudo o que estiver escondido pela máscara irá embora com ela.

Vamos a outro tipo de máscara, aperte M para o “Marque tool” e selecione toda a face da modelo.

Vá ao menu: Modify => Selective JPEG => Save Selection as JPEG Mask. Clique em 2-Up para dividir a tela.

Reduzindo a Quality (qualidade) do JPEG, o nome da modelo ficou em baixa qualidade mas o rosto dela está protegido pela máscara.

Vamos mover um pouco a tela, aperte H para a “Hand tool” (ferramenta mão) e arraste a imagem para a esquerda, de modo que dê para trabalhar com a face e o nome da modelo.

Remova a mascara, para isso vá em: Modify => Selective JPEG => Remove JPEG Mask.

Volte à “Lasso tool” e mude para “Polygon Lasso tool”.

Faça uma seleção pegando novamente a face e o nome da modelo, volte para: Modify => Selective JPEG => Save Selection as JPEG Mask.

Diminuindo a qualidade o nome também está protegido.

E não se percebe perda de qualidade no fundo preto porque o preto é a ausência de cores. A máscara JPEG está aí para isso: diminuir a qualidade do que for desnecessário, como esse fundo preto da foto. Só mostrei essa máscara para ter conhecimento da função, pois ninguém a usa (eu muito menos). Que aliás é uma função totalmente desconhecida (e desnecessária) para vários professores de webdesign. Então: o que a equipe do Fireworks espera para depreciar essa função?

Remova essa máscara e vamos a outra forma de usar a máscara, por meio de figuras geométricas.

Insira uma forma qualquer (um polígono por exemplo) na face da modelo. Ative a camada da modelo e clique novamente em Add Mask.

Selecione o polígono e vai ao menu: Edit => Cut (Ctrl X), para recortar.

Clique na mascara inserida, ao lado da camada da modelo, e Edit => Past (Ctrl V), para colar.

O polígono virou uma máscara.

Estilos

Crie um novo arquivo de 200 pixels de largura por 200 pixels de altura e salve como “projeto9.png”, de fundo transparente e o Optimize como PNG32.

Clique na ferramenta das formas básicas e mude para Rounded Rectangle (retângulo arredondado).

Leve duas linhas verticais e horizontais de modo que ao centro da área de trabalho tenha um espaço suficiente para um quadrado de mais ou menos 150 pixels (é só clicar nas réguas e arrastar para a área de trabalho, se estiver sem as réguas, menu: View => Rulers, o atalho é Ctrl Alt R).

Insira o quadrado arredondado entre as linhas guias.

Este quadrado será uma logomarca de uma pasta de dente famosa (pelo menos aqui no fórum): Close-FUCH. Após inserido o nome da marca, deixe o texto selecionado e ative a aba Styles.

Clique em Current Document e mude para Text Corporate Styles.

Escolha o mais bonito (eu acho que já vi esses estilos em algum programa que começa com PH...).

O efeito escolhido no meu texto contou com os efeitos do Photoshop, vá em Filters e clique em Photoshop Live Effects para conferir.

Isso mesmo, desde a versão CS3 o Fireworks faz integração com o Photoshop. Feche os efeitos do Photoshop e selecione o “dente” para voltarmos ao Filters.

Bevel and Emboss => Inner Bevel.

Acompanhe as configurações, se não aparecer as propriedades do filtro escolhido, é só dar dois cliques nele.

Mantenha o “dente” selecionado e vamos agora deixar-lo prateado, afinal, é uma marca FUCHiana (bom diminuir a escala do nome da marca).

Adjust Color => Curves…

Faça as configurações indicadas e dê OK, mantenha o “dente” selecionado e volte aqui outra vez.

Faça as configurações indicadas e dê OK.

Vamos colocar uma sombra em volta do dente prateado, volte a Filters e: Shadow and Glow => Inner Shadow.

Siga as configurações.

Agora uma sombra por detrás do dente prateado: Shadow and Glow => Drop Shadow.

Novamente siga as configurações.

Agora é só ajustar a logomarca.

Exporte-o e esse será o resultado

Comando criativo

Crie um novo arquivo “projeto10.png” de fundo transparente com o Optimize em PNG32 e importe um dos seus projetos exportados: “batman.png”.

Selecione o Batman e vá ao menu: Commands => Criative => Auto Vector Mask (ex-Fade Image).

Escolha o fade sugerido e clique em Apply.

Clique na extremidade com o ícone quadrado.

Suba um pouco para deixar mais transparente a parte inferior.

Vamos pôr uma moldura em volta, vá ao menu: Commands => Criative => Add Picture Frame.

Escolha uma textura de sua preferência.

Feito as configurações, dê OK.

Para desbloquear a moldura, clique no cadeado ao lado da pasta “frame” na camada.

Agora você pode personalizar o quadro ou colocar um texto. Bloqueie a moldura novamente.

Agora o texto inserido vai junto com a moldura, adicionando um novo State por exemplo.

Isso é muito útil para quem vai importar várias fotos, em vários quadros, e não vai precisar colocar a assinatura do site quadro por quadro.

Resultado.

Fatiando o design

A ferramenta que exploraremos a seguir é a ferramenta chave para jogar toda a sua criatividade do Fireworks para uma página da web.

Se você criou o arquivo “projeto11.png”, antes de começar este capítulo, criou em vão. Pois eu já disponibilizei um design para trabalharmos no Fireworks, clique aqui para baixar o design. Crie uma pasta “liga” e leve o design para lá. Abra-o com o Fireworks.

Vá nas ferramentas de Web e escolha a “Slice tool” (o atalho é K).

Essa ferramenta irá fatiar o seu design para ser jogado para uma página da web.

Selecione a imagem dos super-heróis.

Nas propriedades da Slice, renomeie para “image_top”.

E mude para JPEG.

Selecione o nome e o restante dessa parte do topo, renomeie para “logo_top” e deixe em JPEG.

Selecione o retângulo vertical que funcionará como menu e renomeie para “bg_menu”, deixe como GIF.

Selecione o Batman, renomeie-o e deixe como JPEG.

Selecione o conteúdo, deixe como GIF e renomeie para “conteudo” (sem acento).

Selecione o conteúdo de destaque e renomeie para “destaque”, deixe como GIF.

O Super-Homem será selecionado de uma forma diferente, clicando na imagem com o botão direito do mouse em Insert Rectangular Slice (Alt Shift U).

Deixe-o em JPEG, renomeando em seguida.

Da mesma forma que selecionamos o Super-Homem, selecionaremos o retângulo branco do topo, onde ficará o banner de publicidade. Deixe como GIF e renomeie para “banner_top”.

Agora vamos selecionar o restante do topo, sempre como JPEG.

Outra parte do topo.

Mais uma parte.

E a última parte do topo.

Os textos-modelos na página não irão com a fatia, pois os mesmos serão inseridos no próprio Dreamweaver, então deixe os dois textos ocultos. Só vamos precisar do espaço onde ficará os textos.

As partes que não foram selecionadas com a Slice serão nomeadas automaticamente, o Optimize desses vai estar como GIF, pois tinha sido escolhido esse formato antes de fatiar.

Ctrl Shift R para exportar o seu design para uma página HTML, marque a opção “Put images in subfolder” para que seja criada uma pasta para todas as imagens da nova página HTML.

Por padrão é criada uma pasta “images”, mas você pode mudar o caminho para onde as imagens irão. Clique em Options para dar uma checada rápida nas opções.

Esse é o Setup do HTML, temos algumas opções, dentre elas, mudar a extensão (mude para .html). Clique em OK (depois a gente volta) e finalmente em Salvar.

Exportando para o Dreamweaver

As fatias foram convertidas em tabelas quando foram exportadas para a página da web, abra o Dreamweaver e crie um site de nome “liga”, obviamente o diretório será o da pasta “liga”.

Tendo criado o site, abra o “index.html” (criado com o Fireworks).

Apague o retângulo reservado para o banner.

O mesmo no conteúdo e mude na célula o alinhamento vertical de Default para Top.

Essa imagem é uma das que não selecionamos com a Slice.

Clique na imagem “bg_menu” e clique no programa de edição (ou o Fireworks ou o Photoshop, nesse exemplo será o Photoshop para matar a saudade, como estamos matando a do Dreamweaver).

Antes de editar o “bg_menu”, apague ele dessa célula. Passe para o editor.

Vamos diminuir sua altura.

Reduza para um pixel e dê OK.

Ele agora terá um pixel de altura, volte para o Dreamweaver.

O objetivo e fazer do “bg_menu” ser imagem de fundo, já que no menu vai ser inserido links em textos para as seções, e isso só vai ser possível se a imagem estiver como imagem de fundo.

Crie um novo estilo, de nome “bg_menu”.

Localize a imagem “bg_menu.gif”.

Nem parece que a imagem do menu está só com um pixel de altura, pois bem, ele fica se repetindo verticalmente. E se repetirá quando o menu for ampliado se for criado novas seções. Inseri um banner, que não deve ultrapassar a resolução determinada (no caso 468 pixels por 60 pixels, nesse exemplo) senão o layout do topo vai ficar destroçado.

Reabra o projeto do design e oculte a camada da fatia sobre o Batman.

Vamos reduzir a opacidade para 70 e desoculte a fatia do Batman.

Clique com o botão direito do mouse e vá em “Export Selected Slice...” para exportar somente a fatia selecionada.

Deixe a nova imagem do Batman sobrescrever a imagem antiga da pasta “images” do seu novo site.

F12 no Dreamweaver para ver como está ficando. Ficou faltando só os textos e as seções no menu, mas aí já é com você.

Comportamentos

Sim, também é possível atribuir Behaviors (comportamentos) a partir do Fireworks, nós iremos aprender os dois mais comuns: botão rollover e menu pop-up.

Para isso crie um arquivo “rollover.png”.

Faça um retângulo cinza escuro, com 130 de largura por 25 de altura. Ajuste a área de trabalho ao retângulo e aplique um texto “ENTRAR” de cor preta. Feito isso insira um novo quadro em New / Duplicate State.

Copie e cole para lá o retângulo e o texto, modifique suas cores e volte para o primeiro quadro.

Slice em toda a área de trabalho e clique com o botão direito sobre ela, escolhendo Add Simple Rollover Behavior.

F12 para visualizar na web.

Passe o cursor sobre o botão para testar o rollover.

Feche esse projeto e crie um novo de “menu_popup.png”, importe a imagem “vampi.tif” e ajuste a área de trabalho a ela.

Ao lado da Slice tem as ferramentas de mapeamento, que já vimos no Dreamweaver, escolha a “Polygon Hotspot tool” (o atalho é J).

Do mesmo jeito que você aprendeu a mapear com o Dreamweaver, faça o mesmo com o Fireworks nas “seções” (Ctrl D sempre que desejar finalizar um mapeamento).

Clique com o botão direito no primeiro mapeamento e vá em Add Pop-up Menu...

Em Text estarão os nomes das subseções a serem exibidas com o menu pop-up, ao lado de cada texto ficarão os links para onde as subseções irão redirecionar. Na Target se desejar que seja exibida uma frase em tarja (como fizemos com as imagens em referência absoluta, no Dreamweaver). Por enquanto vamos deixar somente os textos.

Em Appearance você irá personalizar a aparência do menu pop-up, por padrão as células estão como HTML, mas você pode mudar para “image”.

E definir um estilo.

Essas são as configurações no modo Advanced (avançado... não me diga?).

Em Position você vai escolher a posição do seu menu pop-up, esse eu prefiro fazer manualmente. Clique em Done para concluir.

Aqui um layout do menu pop-up, irei mover manualmente com o mouse para não ficar muito em cima da seção.

Assim ele vai aparecer bem antes da seção selecionada. F12 para visualizar e passe o mouse na seção Textos.

O Texto 1 está em rollover.

O resto é com você.

Quando for exportar para a web, no HTML Setup você pode definir se esse comportamento estará em um arquivo CSS (lembra do CSS externo?). Se desmarcar essa opção será criado um arquivo “.js”, uma extensão do JavaScript.

O Fireworks também faz integração com o FTP, no caso dessa imagem o ícone do FTP está travado porque não está em nenhum site com conexão via FTP.

É o caso dessa imagem, um ícone deste fórum. A pasta, onde está a imagem desse site, está conectado com o FTP.

Isso te dá a opção de baixar a imagem para a sua pasta ou mandar a imagem para o FTP do seu site.

Este tutorial foi baseado no programa Adobe Fireworks CS4, de modo que, nas próximas versões a serem lançadas, eu postarei aqui o que mudou.

Sempre que surgir uma dúvida com o que eu ensinei, poste aqui.

Quem quiser colaborar e ensinar algo que eu não coloquei (posteriormente não aprendi) fique a vontade e dê a sua participação.

Quem for colaborar, não importa a versão do Fireworks que esteja usando. Se houver algum diferencial, eu postarei onde e como é feito na versão atual.

Quando eu tiver um tempo livre, procurarei aprender mais coisas para ensinar aqui futuramente.

A gente se vê no tutorial básico do Adobe Flash, para aprendermos a fazer animações de uma forma mais eficiente.