Ir para conteúdo

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


Andy

Recommended Posts

Adobe® Fireworks® CS4

fwcs4.jpg

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.

Link para o comentário
  • 1 mês depois...

Explorando o ambiente gráfico

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

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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).

Clique para exibir

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).

Clique para exibir

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.

Clique para exibir

Mude para a elipse.

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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 para exibir

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.

Clique para exibir

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

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

Bevel and Emboss => Inner Bevel.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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”.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

Escolha uma cor preta para a borda.

Clique para exibir

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...).

Clique para exibir

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).

Clique para exibir

Distorça um pouco o retângulo.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

Com o corte o objeto passa a ser aberto.

Clique para exibir

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

Clique para exibir

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á).

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

Vamos deixar um azul claro onde estava o preto.

Clique para exibir

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

Clique para exibir

Escolha um azul mais escuro.

Clique para exibir

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

Clique para exibir

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”.

Clique para exibir

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).

Clique para exibir

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 para exibir

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.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

Clique no ponto do meio.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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).

Clique para exibir

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 para exibir

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.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

Exporte como “Sarah.jpg”.

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 para exibir

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.

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

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

Clique para exibir

Mude para 150 pixels de altura e pode dar OK.

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

Faça um teste.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

E exporte como “Calvin.gif”.

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”.

Clique para exibir

Mude o “Canvas color” para Transparent.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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”.

Clique para exibir

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).

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

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

batman-1.gif

Batman em Gif transparente.

batman.png

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”.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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 para exibir

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.

Clique para exibir

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 para exibir

Clique em Fit Canvas para ajustar.

Clique para exibir

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

Esse aqui é o resultado:

cone.gif

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.

Clique para exibir

Importe a imagem “liv_tyler.tif”.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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 para exibir

Clique no ícone Position para ativar o alinhamento.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

Aumente o ultimo delay para 200 (dois segundos).

Preciso dizer que deve exportar como Animated GIF?

fashion.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.

Clique para exibir

Aperte L para o “Lasso tool”.

Clique para exibir

Contorne em volta da modelo, incluindo o nome dela.

Clique para exibir

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

Clique para exibir

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 para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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 para exibir

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

Clique para exibir

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).

Clique para exibir

Insira o quadrado arredondado entre as linhas guias.

Clique para exibir

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 para exibir

Clique em Current Document e mude para Text Corporate Styles.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

Bevel and Emboss => Inner Bevel.

Clique para exibir

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).

Clique para exibir

Adjust Color => Curves…

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

Siga as configurações.

Clique para exibir

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

Clique para exibir

Novamente siga as configurações.

Clique para exibir

Agora é só ajustar a logomarca.

cfuch.png

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”.

Clique para exibir

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

Clique para exibir

Escolha o fade sugerido e clique em Apply.

Clique para exibir

Clique na extremidade com o ícone quadrado.

Clique para exibir

Suba um pouco para deixar mais transparente a parte inferior.

Clique para exibir

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

Clique para exibir

Escolha uma textura de sua preferência.

Clique para exibir

Feito as configurações, dê OK.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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.

framebat.png

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.

Clique para exibir

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.

Clique para exibir

Selecione a imagem dos super-heróis.

Clique para exibir

Nas propriedades da Slice, renomeie para “image_top”.

Clique para exibir

E mude para JPEG.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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).

Clique para exibir

Deixe-o em JPEG, renomeando em seguida.

Clique para exibir

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”.

Clique para exibir

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

Clique para exibir

Outra parte do topo.

Clique para exibir

Mais uma parte.

Clique para exibir

E a última parte do topo.

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

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”.

Clique para exibir

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

Clique para exibir

Apague o retângulo reservado para o banner.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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).

Clique para exibir

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

Clique para exibir

Vamos diminuir sua altura.

Clique para exibir

Reduza para um pixel e dê OK.

Clique para exibir

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

Clique para exibir

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.

Clique para exibir

Crie um novo estilo, de nome “bg_menu”.

Clique para exibir

Localize a imagem “bg_menu.gif”.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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”.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

F12 para visualizar na web.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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 para exibir

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

Clique para exibir

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.

Clique para exibir

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”.

Clique para exibir

E definir um estilo.

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

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

Clique para exibir

O Texto 1 está em rollover.

O resto é com você.

Clique para exibir

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.

Clique para exibir

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.

Clique para exibir

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

Clique para exibir

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.

Link para o comentário
Visitante
Este tópico está impedido de receber novos posts.
×
×
  • Criar Novo...