Escola Profissional Dom Bosco

INTERNET

FIREWORKS

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

....................................................................................................................................................2 INTRODUO..........................................................................................................................3 Treinamento de Fireworks orientado a exemplos.......................................................................4 Efeito Matrix ..........................................................................................................................4 "THE MATRIX".................................................................................................................4 LETRAS .............................................................................................................................8 Trabalhando com curvas.......................................................................................................15 Recortes ................................................................................................................................19 Criando seu banner animado.................................................................................................25 Criando efeitos transparentes usando mscaras ...................................................................33

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

INTRODUO
O Fireworks simplifica o processo de criao e otimizao de imagens para a Web. Tradicionalmente, projetistas da Web utilizavam uma ferramenta de bitmap como o Photoshop para criar imagens, um programa de desenho baseado em vetores para criar texto e uma combinao de filtros, utilitrios e shareware para aplicar efeitos e criar mapas de imagem e animaes, DeBabelizer para otimizar imagens JPEG e GIF, e um navegador para visualizar. Revisar uma imagem freqentemente forava os desenvolvedores a apagar tudo e iniciar novamente. O Fireworks possibilita a combinao de vetores e bitmaps, a aplicao de efeitos Live Effects, a otimizao de paletas e a visualizao da qualidade da imagem. No h necessidade de alternar para outros aplicativos e utilitrios com o Fireworks. Ele a soluo para a criao e otimizao de imagens da Web. Utilizando o Fireworks, voc pode dividir imagens da Web para mesclar tipos de compactao e formatos de arquivos para transferncias muito rpidas. Tambm possvel incorporar efeitos de rollover em imagens divididas, definir blocos de texto como GIFs, colocar fotos como JPEGs totalmente coloridos e gerar automaticamente uma tabela HTML para reorganizar suas imagens divididas. Ele tambm gera o JavaScript para efeitos de rollover, incluindo pr-carregamentos de imagens para ao rpida quando o mouse se move sobre o boto. Neste curso prtico, voc ir aprender como utilizar os recursos do Fireworks para criar imagens incorporando elementos de bitmap e vetoriais, utilizando uma caixa de ferramentas interessante cheia de efeitos especiais. Voc criar botes, adicionar efeitos de rollover e criar uma animao GIF. Tambm ir aprender a otimizar imagens e utilizar Export Preview para comparar formatos e opes de paletas antes de tomar uma deciso final e a utilizar o Fireworks para criar mapas de imagem e imagens divididas. O Fireworks vem com um sistema extensivo de Ajuda on-line que pode ser consultado em casos de dvida. A maioria das paletas de ferramentas tambm tem Screen Tips que descrevem funes de cones quando o cursor fica sobre elas. Alm disso, um manual do Fireworks no formato PDF est localizado em Arquivos de programas/macromedia/fireworks/using fireworks para a plataforma Windows e na pasta de aplicativos Fireworks, usando a pasta do Fireworks para o Macintosh. Voc tambm pode visitar o site da Macromedia na Web no endereo www.macromedia.com para atualizaes de software, novidades e dicas para tornar o seu trabalho mais produtivo. Voc descobrir que o Fireworks uma ferramenta verstil e til para facilitar seus esforos para design da Web e torn-los mais agradveis.

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Treinamento de Fireworks orientado a exemplos

Efeito Matrix
Os temas dos exemplos foram escolhidos especialmente para mostrar algumas potencialidades do Fireworks, com ferramentas de timo manuseio com aplicaes diversas. A primeiro exemplo ser sobre o filme "THE MATRIX". Mostraremos vrias combinaes de efeitos para chegar o resultado final, como mscaras, degrads, Blur dentre outros. OBS: Os exemplos so baseados nas ferramentas e possibilidades existentes no Fireworks MX.

"THE MATRIX"
The Matrix j sucesso total. O Filme foi veiculado com o seguinte "tema visual":

Veremos ento, como reproduzir estes efeitos usando o Fireworks MX. O primeiro passo a ser feito baixar as fontes utilizadas: - Fonte Matrix (Fabricante : Apostrophic Lab) Download em: http://unix.wmonline.com.br/fireworks/artigos/matrix/miltown.zip - Fonte Battlefield (Fabricante: Iconian) Download em: http://unix.wmonline.com.br/fireworks/artigos/matrix/battlefield.zip Iniciaremos o exemplo trabalhando com o texto "The Matrix Reloaded". Abra um documento novo, utilizando Preto como cor de fundo.Com a fonte instalada, digite o texto "The Matrix Reloaded" (cada palavra dever ser digitada em uma caixa de texto diferente), seguindo esta disposio:

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

A partir da, comeamos a usar o Fireworks. Selecione a caixa de texto "Reloaded", crie uma cpia e a cole exatamente em cima da original (Ctrl+C - Ctrl+V). Agora, converta essa cpia em uma imagem (Converter em Bitmap), pressionando o comando Ctrl + Alt + Shift + Z. Com essa cpia, faremos um efeito que imita movimento:

Para atingir este resultado, simples. Utilizando o painel "Properties", voc atribuir ao valor horizontal da imagem um valor baixo. Esse valor poder variar de acordo com o efeito desejado.

Para um efeito mais definido, use um valor mais alto, como 10 por exemplo. Para um efeito menos definido, use valores como 1 ou 2.

Aps confirmar a reduo de tamanho, voc aumentar o valor para um valor grande, que ultrapasse o tamanho da fonte original:

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Dessa forma, temos o efeito de movimento. Voc agora, deve mandar esta imagem para trs do texto original, pressionado Ctrl+Seta para baixo. Ao comprimir a imagem e esticar, as bordas ficar retas, sem uma suavizao. Para corrigir, usaremos a Ferramenta "Polygon Lasso Tool" para recortar as bordas com suavidade.

Com a ferramenta selecionada, configuraremos a suavidade do recorte atravs da opo "Feather". Ao selecionar esta opo, uma caixa de texto de abrir logo ao lado, com uma escala de 0 a 100... quanto maior o valor, mais suave o recorte. Veja abaixo:

Para usar a ferramenta, voc utilizar cliques para marcar os pontos de cada curva.

Como nosso tipo de recorte usa "Feather", o Fireworks arredondar o recorte automaticamente.

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Com a forma do recorte definida, basta deletar a parte da figura, com o boto "Del" do teclado. Agora, voc deve repetir este recorte no outro lado da imagem. O Resultado ser:

Para concluir, precisamos mudar a cor deste desfoque para verde, como no cartaz de "The Matrix". Isso ser feito usando o filtro "Hue/Saturation...". Veja abaixo a tela:

Para deixar a imagem com a tonalidade de verde da figura abaixo, as configuraes so as mostradas nesta imagem, lembrando que voc deve ativar a opo "Colorize".(os detalhes da ferramenta Hue/Saturation sero vistos com detalhes ainda nesta apostila de exemplos. Por este motivo, no falaremos detalhadamente sobre ela agora). O Resultado final da imagem ser:

Agora, voc dever repetir este processo para as outras duas caixas de texto ("The" e "Matrix"):

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Finalizamos assim o efeito no texto principal. Passaremos adiante, trabalhando nos efeitos visuais das letras ao fundo.

LETRAS
Um efeito bastante curioso, que precisa de uma boa anlise antes de comearmos. A Primeira coisa que se nota que existem muitos tipos de caracteres, como letras, nmeros, simbolos etc. Estes caracteres ficam em cascata, alguns ao contrrio. O principal efeito a forma com que se trabalha o degrad da cor que aplicaremos e principalmente o brilho na ponta das carreiras de letras... Vamos prosseguir: No incio do exemplo, voc baixou a fonte Battlefield, que usaremos a partir de agora. O primeiro passo criar uma carreira de texto. Para isso, voc deve digitar um texto qualquer e diminuir o tamanho da caixa de texto de forma a ficar apenas uma letra por linha. Veja abaixo:

Mudaremos agora as cores da caixa de texto, pela opo "Fill Options", acessada pela caixa de cores no painel de propriedades:

Clicando em Fill Options, voc ser levado uma nova tela, na qual, o tipo de preenchimento dever ser "Linear". Para mudar as cores, clique em "Edit". Veja abaixo o resultado:

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Como padro, o Fireworks fornece 2 cores para o degrad linear. Para adicionar um terceiro ponto de cor, basta clicar no local em que deseja adicionar a mesma. As cores usadas so as seguintes: Primeiro e segundo pontos de cor: #006633 Para o terceiro ponto de cor: #73BE94 Quarto ponto: #378C57 Feito isso, teremos o seguinte efeito na fonte:

Devemos agora rotacionar o preenchimento para a forma vertical. Para isso, voc deve selecionar o texto com a ferramenta "Pointer Tool":

Ao selecionar a caixa de texto com essa ferramenta, uma guia aparecer. Voc dever gir-la como na imagem abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Essa variao de cores voc poder mudar de acordo com a montagem final da imagem... pode ser mais escuro para fazer um fundo ou mais clara para dar um brilho.. enfim, fica a gosto. Com as letras prontas, temos que fazer a ponta brilhar. Isso ser feita com uma cpia do texto. Veja abaixo como ficou nosso texto final antes de trabalharmos no brilho.

Para fazer o brilho na ponta, voc deve criar uma cpia deste texto e converter em Bitmap como j citado acima. Com essa cpia criada exatamente em cima do texto original, voc vai mudar o tipo de Layer para Screen. Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

10

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Teremos o seguinte resultado:

Faa mais 2 cpias desta imagem com a camada "Screen". Ficar assim:

Escola Profissional Dom Bosco Poos de Caldas MG

11

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Agora, selecione as 3 cpias e converta em 1 bitmap s. O resultado continua o mesmo. O prximo passo cortar suavemente o incio do texto, comeando pela parte de cima. Veja o resultado.:

Com a imagem selecionada, aplique 3 vezes a opo Filters>Blur>Blur para desfocar um pouco a ponta.:

Escola Profissional Dom Bosco Poos de Caldas MG

12

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Agora, voc pode criar quantas cpias quiser desta imagem, tomando o cuidado para no deixar tudo branco.. veja abaixo com uma duplicao apenas:

Para finalizar o brilho do texto, adicionamos um glow com as seguintes opes:

O resultado final do texto ser:

Escola Profissional Dom Bosco Poos de Caldas MG

13

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Pronto. Nosso texto modelo est pronto. Agora, voc pode trabalhar multiplicando este exemplo! Veja abaixo.

Multiplicando vrias vezes estas linhas, e adicionando nosso primeiro texto "The Matrix reloaded", teremos o resultado final. Veja AQUI!

Escola Profissional Dom Bosco Poos de Caldas MG

14

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Trabalhando com curvas

Veremos como trabalhar com curvas que no sejam simplesmente a geometria redonda que pronta. Voc aprender a trabalhar com curvas, modificando qualquer outra geometria. Comearemos trabalhando com o retangulo abaixo:

Veja que ao criar uma forma qualquer, ela classificada como Rectangle (quadrados e retngulos) ou Path (circulos, polgonos etc). Para poder modificar a forma de um Rectangle, voc deve transform-lo em um Path. Para isso, basta dar um clique em qualquer um dos 4 pontos que o formam com a ferramenta "Subselection Toll", ou desagrupar.

Subselection Tool Convertido em path, o retngulo j pode ser editado. Para editar normalmente os 4 pontos, basta clicar e arrastar um dos 4 pontos que o formam. Porm, com a ferramenta Subselection, voc no poder criar curvas. Para isso, existe outra ferramenta: "Free Form Tool".

Selecionando esta ferramenta, o painel de propriedades mostrar as seguintes opes:

Para usar a ferramenta, voc dever ajustar a caixa "Size". Valores baixos fazem uma curva pequena (usando 1, voc cria uma curva na diagonal)... usando valores altos, voc cria curvas abertas. Na prtica, podemos conseguir inmeras formas, todas sendo configuradas pelo tamanho da curva. Prosseguindo com o uso, basta clicar com essa ferramenta em qualquer parte da geometria que vamos mudar e arrastar. Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

15

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

(Size: 137) Na parte superior, usaremos o size 400. Veja:

Para o lado direito, faremos com size 1:

E assim por diante. A FreeForm Tool ainda possui mais um tipo de uso. Basta clicar perto da rea que voc deseja modificar. Ela far um corte redondo, proporcional ao tamanho definido em Size.

Escola Profissional Dom Bosco Poos de Caldas MG

16

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Em questes de uso, voc tem vrias aplicaes. Por exemplo:01 - Uma barra com um recorte diagonal.: A primeira coisa a se fazer usar a freeform tool com size 1:

Logo depois, deletar um dos pontos que foram criados:

Agora, s mover os pontos como na imagem abaixo:

So vrias as utilidades dessa ferramenta para as geometrias retas.... Porm, podemos us-la tambm em geometrias redondas.. Veja abaixo algumas modificaes com um crculo:

Escola Profissional Dom Bosco Poos de Caldas MG

17

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

So vrias as aplicaes para as curvas e depender da forma que voc precisar us-las. A Ferramenta voc tem. Basta pesquisar, ler, criar. Tenha as idias... o resto, o Fireworks d conta do recado!

Escola Profissional Dom Bosco Poos de Caldas MG

18

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Recortes
Falaremos sobre recortes de imagens com todas as ferramentas de recorte que o fireworks possui. O Fireworks tem basicamente 4 ferramentas para corte/recorte: - Marquee/Oval Marquee Tool: Duas ferramentas que fazem recortes definidos por uma forma: Quadrado/Retngulo ou crculo.

- Lasso Tool/Polygon Lasso Tool: Duas ferramentas que fazem recortes livres, baseados em cliques do mouse para fazer curvas.

- Magic Wand Tool: Ferramenta que elimina um pedao da imagem baseada nas cores e na tolerncia em cima dessas cores.

- Knife Tool: Ferramenta para recorte reto de vetores.

Essas 4 ferramentas so timas, com uma potencialidade que pode ser muito bem extraida. Cada ferramenta tem suas propriedades. Veremos cada uma delas agora com casos de prtica. Marquee/Oval marquee Tool: Como dito acima, so ferramentas que cortam um bitmap com formas definidas pelo Fireworks. Veja abaixo a ferramenta utilizada para recortar uma imagem:

Escola Profissional Dom Bosco Poos de Caldas MG

19

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Para usar esta ferramenta, basta clicar e arrastar o mouse sobre a rea que se deseja selecionar. Fazer este movimento pressionando a tecla Shift, faz com que um circulo seja um crculo exato ou com que um quadrado seja um quadrado exato. As propriedades que essa ferramenta nos oferece so:

A Opo Style possui trs subopes: - Normal: deixa o recorte livre, sem manter propores. - Fixed Ratio: Fixa uma proporo para a ferramenta... por exemplo 3:2. Sempre que voc arrastar o mouse para usar essa ferramenta, ela ficar sempre dentro desta proporo (a cada 3 unidades que

Escola Profissional Dom Bosco Poos de Caldas MG

20

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

aumenta em uma direo, aumenta 2 na outra... aumentando 6, a outra vai para 4 e assim por diante). - Fixed Size: Fixa um tamanho. Nesta opo, basta clicar na imagem que uma forma, baseada no tamanho definido por voc j aparecer sem ter que arrastar o mouse. A Opo Edge tambm possui 3 opes: - Anti-Alias: Recorta deixando as bordas o suficiente suaves. No deixa um recorte seco onde as curvas aparecem como pontos. - Hard: Recorte seco. No suaviza a borda. - Feather: Esse recorte suaviza de acordo com o nmero selecionado na caixa de texto logo ao lado. Para suavizaes leves, use valores menores... para suavizaes que fazem as bordas desaparecerem, use valores altos. Veja abaixo o mesmo recorte feito pelos 3 tipos de Edge:

Recorte Anti-Alias

Recorte Hard

Recorte Feather 30 A diferena de um recorte para o outro fica bem clara com estes 3 exemplos. Anti-Alias recorta suave o suficiente para uma forma definida. O Hard no suaviza a borda. J o Feather suaviza o quanto for desejado. Estas so as opes para este tipo de recorte. Prosseguindo, veremos outro tipo: - Lasso Tool/Polygon Lasso Tool: Essa ferramenta recorta imagens em qualquer forma... Ela se divide em duas:

Escola Profissional Dom Bosco Poos de Caldas MG

21

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Lasso Tool: Abre o recorte atravs de um clique.. porm, voc deve clicar e arrastar o mouse, contornando o objeto que deseja e fechando um "circuito" de recorte. Veja:

Ao fechar o "circuito", voc ter a forma selecionada, pronta para o recorte ser concluido com um "Ctrl+C"ou mesmo com um "Ctrl+X". Lasso Polygon Tool: Esse recorte feito atravs de polgonos, ou seja, possui vrios "lados".. Para usar a ferramenta, voc deve clicar a primeira vez e soltar. Coloque o ponteiro do mouse em outro ponto, clique e solte novamente at completar o circuito ou clicar duas vezes rapidamente. Veja abaixo a forma de um recorte para o telefone:

Essa ferramenta a forma mais perfeita de recortar uma imagem. Ela tem todo suporte para te ajudar no recorte. Basta ter pacincia e um Mouse que no agarre no Pad. Para fazer um recorte perfeito, necessrio que voc tenha concentrao no que est fazendo, pacincia para recortar devagar e com cuidado e o mais importante que a quantidade de pontos que voc marca! Quanto mais pontos, mais arredondado seu recorte ficar. Veja abaixo um exemplo:

Escola Profissional Dom Bosco Poos de Caldas MG

22

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Um recorte feito com pressa... ficou quadrado

Um recorete feito com calma, fica bem mais perfeito. Quando fizer um recorte, sempre o teste em vrias cores de fundo para ter certeza de que nenhuma sobra de cor ficou na imagem recortada. De propriedades, temos os mesmos trs tipos de Edge: Anti-Alias, Hard e Feather que funcionam como na Marquee/Oval marquee Tool: Essa ferramenta perfeita para recortes de formas variadas, porm, deve-se ficar atento formas redondas, pois o nmero de pontos no recorte dever ser de acordo com a curva. Prximo tipo de recorte: - Magic Wand Tool: a famosa varinha mgica! Ela funciona da seguinte maneira: Ao clicar em algum lugar, essa ferramenta selecionar tudo que estiver colado este ponto e que tenha a mesma cor. Porm, este "mesma cor" ser definido pelo nvel de tolerncia definido no painel propriedades. Quanto menor a tolerncia, mais exato o recorte ser basenado na cor clicada. Quanto maior a tolerncia, mais cores que estiverem perto do local sero selecionadas.. Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

23

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Tolerncia 10

Tolerncia 80 Essa ferramenta tambm possui os tipos de recorte Anti-alias, Hard e Feather. Finalizando as ferramentas de recorte: - Knife Tool: Traduzindo seria "Ferramenta Faca". Ela corta apenas vetores (paths, retangulos, linhas, etc), mas no corta nenhum tipo de bitmap. Para us-la, voc deve clicar e arrastar sobre o vetor. uma ferramenta muito simples, pela qual voc pode dividir um crculo em duas partes etc.

Escola Profissional Dom Bosco Poos de Caldas MG

24

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Criando seu banner animado

Falaremos agora sobre um tema que muito importante: A criao de um banner animado, totalmente pelo Fireworks. Isso se torna possvel devido ao trabalho com frames que o Fireworks apresenta. Mos-a-obra! Comearemos criando um novo documento com as medidas padro de um Full Banner: 468pxX60px. (Neste exemplo, trabalharemos com um banner pouco menor, de 440X60 px). sempre interessante adicionar uma borda preta de 1px ao banner... isso faz com ele fique sempre definido. Veja abaixo nosso exemplo:

Para aplicar essa borda, voc dever criar um retngulo e ajust-lo com as seguintes coordenadas e caractersticas:

Passada essa parte, comearemos a criar o banner em animaes e contedo. Nosso tema ser "Escola Dom Bosco", seguindo a logo da Escola. Faremos 4 Frames: 01 - "EDB 02 - Curso de microinformtica 03 - Explore sua potencialidade 04 - Clique aqui e acesse agora! Iniciamos ento com a logo. Esta a logo:

Para criar o segundo frame da animao, duplicando o frame 1 ( bom que se duplique o frame pois assim, no teremos que repetir a criao da borda e de outros eventuais detalhes que venham a se repetir), siga as seguintes imagens:

No Painel "Frames and History", voc dever estar na guia "Frames". Para duplicar o frame, clique no cone da parte superior direita.

Escola Profissional Dom Bosco Poos de Caldas MG

25

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Este menu surgir:

Clique em "Duplicate Frame". Outra tela se abrir para voc especificar o nmero de vezes que voc duplicar o frame 1.

Em nosso exemplo, duplicaremos 3 vezes para ter um total de 4 frames. As opes de "Insert new frames" indicam: No incio, antes do frame atual, aps o frame atual e no fim respectivamente. Marcamos "After current frame". Veja a duplicao no painel "Frames":

Clicando no Frame 2, poderemos modific-lo. E faremos isso.

Neste quadro, mantemos o mesmo fundo, excluindo a logo do Fireworks e o primeiro texto. Adicionamos o segundo texto e trabalhamos com 2 "7" girados e maiores. Veja que tudo muito simples. Aps criar o primeiro frame com bordas, fundo etc voc encaminha mais rpido... logicamente se voc for usar sempre o mesmo tema em todos os frames. Prosseguindo para o prximo frame, faremos o mesmo esquema, mantendo o visual e trocando apenas o texto:

Escola Profissional Dom Bosco Poos de Caldas MG

26

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Repita os passos para o ultimo frame:

Pronto. Temos os quatro frames do Banner prontos. Temos agora que acertar o tempo de cada frame, e isso feito no painel "Frames e History". Veja abaixo:

Ao clicar em cima do nmero "7", um campo aparecer e voc digitar o valor que deseja. Valores baixos definem um frame muito rpido... valores altos deixam um frame com maior durao. Um bom valor para um frame normal de 150 a 250. Mais abaixo, veremos um caso para usarmos valores muito baixos. Prosseguindo, aplicaremos nossos frames o tempo de 200 (2 segundos). Com toda criao e configurao pronta, hora de exportar... Utilizaremos o "Export Preview" (Ctrl+Shift+X). Uma nova tela ser exibida, deixando a sua disposio todas as opes de export. As configuraes padro so:

Na caixa "Format", voc dever selecionar "Animated Gif". As outras opes variam de acordo com a configurao de qualidade. A paleta que oferece mais fidelidade de cores a "Exact" e a "WebSnap Adaptive", porm, a Exact tem um limite de cores para deix-las exata. Ao passar desse limite, a paleta mudada para WebSnap Adaptive com 256 cores (256 cores o limite de cores que o Formato Gif Suporta). Na guia "Animation", temos a lista de todos os frames do arquivo. Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

27

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Ao selecionar, o frame ser exbido na rea de exibio ao lado destas configuraes. Exportamos nosso banner com 32 cores. Assim, finalizamos a construo de um banner pelo Fireworks. Porm, vamos um pouco mais afundo e falaremos agora de uma animao que faa o banner correr de lado, descer ou subir... trata-se de animaes usando 3 frames: O primeiro mostra o estgio normal. O Segundo mostra o estgio da animao e o terceiro mostra o estgio final. Voc dever adicionar mais frames entre o estgio normal e o resultado final de acordo com sua animao. Veja abaixo um exemplo em que o texto andar do lado direito para o lado esquerdo, usando 3 frames:

Para fazer esta animao, usamos os seguintes frames:

O primeiro e o ltimo frame possuem o tempo de 150, enquanto o segundo frame, que faz a sensao de movimento, tem tempo de 3. Este tipo de animao pode ser muito til, com textos, imagens e a prpria borda preta do banner.... vale a imaginao. Finalizando, lembramos de que a animao pode ser rodada dentro do prprio fireworks. Veja abaixo:

No p das janelas do documento, voc tem as opes de voltar frame, ir para prximo, iniciar animao etc.

Escola Profissional Dom Bosco Poos de Caldas MG

28

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Criando logomarcas
No se trata de um mtodo, pois no existe um "Manual para criao da boa logomarca".. vamos mostrar como o Fireworks lida com textos e smbolos. Esse exemplo mostra apenas o comportamento do Fireworks com situaes de uma logomarca. Inciando ento, falaremos sobre o texto. O Fireworks trabalha muito bem com pequenos textos. Para criar uma logomarca, voc geralmente usa poucas palavras, garantindo assim a rapidez e agilidade que o fireworks tem. Se tratando de textos para Logomarcas, voc pode imaginar infinitas idias de formas, perspectivas, cores, bordas etc. No Fireworks, voc possui inmeras ferramentas que ficam a seu dispor. Falaremos agora de algumas caractersticas dos textos do Fireworks. A primeira ser: Bordas: Como os vrios programas existentes para trabalho com imagens, o fireworks possui um painel com todas as opes de bordas. Veja abaixo:

O painel pode ser acessado pela caixa de cores do painel propriedades, e em seguida, "Stroke Options":

No primeiro Box, voc tem o tipo de borda... so vrios tipos... desde a borda simples at as bordas com bolhas etc. No campo do lado, voc escolhe a cor. Em "1-pixel Soft" (valor padro) voc far a caracterstica da borda... se ser suave, se ser seca... se ter quadrados, folhas etc.. As caractersticas disponveis mudaro de acordo com o tipo da Borda selecionada...

Escola Profissional Dom Bosco Poos de Caldas MG

29

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

A Opo "Tip" define a suavidade do efeito. Ao lado, voc define o tamanho da borda. Em "Texture", voc tem vrias imagens prontas que podem ser utilizadas nas bordas. Para importar sua prpria textura, basta selecionar a ltima opo: "Other", dentro do menu Texture. No Campo do lado, voc define a porcentagem que essa textura ser aplicada (valores altos, mais visvel... valores baixos, menos visvel). No campo debaixo, voc tem as opes Inside Path, Centered on Path e Outside path que significam "Partindo da parte de dentro da forma", "Centralizado na forma" e "partindo da parte de fora da forma" respectivamente. Marcando a opo "Fill Over Stroke", voc define que a borda ficar sempre atrs do texto ou da forma. A Opo Advanced possui inmeros recuros para deixar sua borda mais perfeita.... vale a pena dar uma conferida nas opes. As aplicaes para bordas em logomarcas so diversas. s vezes so fundamentais. Elas podem ser usadas tanto em um texto como em um eventual smbolo que a logo marca venha a ter. No podemos exemplificar uma logomarca porque no se pode criar uma que seja um padro. Mostrei acima algumas aplicaes para as bordas. Veremos agora, noes de perspectiva. Nas 3 imagens acima usamos perspectiva. Perspectiva: Perspectiva um tipo de viso angular... que tenha um certo ngulo. Todo texto que voc cria no fireworks, nasce "chapado" na tela. Em vrios casos, vemos na angulao do texto uma boa opo. Para dar uma perspectiva um texto, podemos usar duas ferramentas:

"Skew Tool" e "Distort Tool". A Ferramenta "Scale" diminui proporcionalmente, sem diferenciar as pontas. Para utilizar essas ferramentas, voc dever selecion-las e ento arrastar os pontos da imagem. Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

30

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

A ferramenta Skew modifica os lados igualmente, ou seja, tudo o que voc fizer com o ponto superior direito ser feito automaticamente com o ponto superior esquerdo. A ferramenta Distort trabalha com formas totalmente soltar, ficando cada ponto solto. a melhor ferramenta para fazer uma perspectiva livre. Sando destes dois temas, temos o tema de combinao. O que fazer para ter um visual legal. Cada trabalho ter seu conjunto, porm, podemos estabelecer alguns parmetros bsicos para fazer uma logomarca legal. So eles: 01 - Trabalhe com mais de 2 variaes de formas e cores. muito importante voc criar vrios modelos para uma logomarca e ir eliminando cada uma delas at chegar na melhor que voc fez at aquele momento. Se voc tiver uma idia, trabalhe com vontade em cima dela... depois, saia... tome um caf e volte... faa outro modelo com outras cores, formas etc. O importante voc ter certeza de que aquele trabalho o melhor resultado final que voc pode fazer. Logicamente, se voc tiver uma idia realmente inovadora de primeira, fique com ela... isso no regra... so alguns parmetros que ajudam na qualidade final do projeto. 02 - O estudo do tema da logomarca muito importante. Utilizar temas que sejam de acordo com o assunto do referido cliente extremamente bsico.. Por exemplo... se o produto for direcionado crianas, faa uma arte visual alegre, colorida que chame a ateno dela. No adianta voc fazer algo super tcnico, cheio de detalhes e o produto for para uma criana de 2 a 3 anos... o trabalho se perder. Cada segmento dever ter seu estudo para as cores a serem utilizadas, formas, smbolos etc. 03 - Existem casos de logomarca em que necessrio criar apenas o nome e outros onde voc deve criar um smbolo + o nome.. ou ainda aqueles que o simbolo a logo. Isso se torna importante, na medida em que a logomarca tende a ser gravada e fidelizada pelos clientes/usurios. Quando estiver criando, pense como quem cria e tambm pense como usurio que deve guardar a marca.. Mostrar para pessoas que tambm trabalham com visual importante. Quando se trabalha em equipe, o resultado final sempre um consenso entre vrios pontos de vista. Isso faz a diferena. Voltando ao Fireworks, voc tem inmeras opes. Para preenchimentos, voc pode trabalhar com degrads simples, dando um visual metlico para a pea. Veja que da segunda forma, voc pode mudar cada ponto de lugar, fazendo at mesmo uma fonte prpria. Para fazer isso, basta selecionar o texto e pressionar Ctrl+Shift+P. Outros detalhes que podem ajudar na criao de formas para um eventual smbolo a opo "Join".. Veja abaixo a ferramenta e um exemplo:

Antes da aplicao da ferramenta Join.

Escola Profissional Dom Bosco Poos de Caldas MG

31

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

As duas formas se juntam, formando apenas uma. A parte comum s duas, excluida. Concluindo falaremos sobre os Effects. O painel effects fica integrado ao painel de propriedades. Veja abaixo:

Ao Clicar no boto "+", uma lista de effects aparecer. Voc tem desde relevo para deixar seu texto ou forma 3D (3D = Base, altura e Profundidade) at sombras reguladas em todos os sentidos (suavidade, tamanho, direo, fora)... interessante dar uma olhada nestes effects.

Escola Profissional Dom Bosco Poos de Caldas MG

32

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Criando efeitos transparentes usando mscaras

Falaremos agora sobre uma ferramenta com muitas aplicaes. So as mscaras. Com ela, voc pode criar vrios novos efeitos. Comearemos um um exemplo simples para explicar como fazer uma mscara e como elas funcionam. Para fazer uma mascar, voc precisar de dois ou mais objetos selecionados. A Ordem em que estes objetos estiverem (acima ou abaixo do outro) influi diretamente no resultado final. Mostraremos isso passo a passo abaixo: Abra um novo documento com fundo preto. Crie duas geometrias. Uma quadrada e a outra redonda como na figura abaixo. Aplique tambm estas cores:

Para criar uma mscara, voc deve selecionar as duas formas, ir ao menu Modify>Mask>Group as Mask. Fazendo isso, voc criar uma mscara. Veja abaixo a imagem:

Veja que a forma redonda da bola fez uma mscara no quadrado azul. Invertendo a ordem das geometrias:

Escola Profissional Dom Bosco Poos de Caldas MG

33

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Teremos o seguinte resultado:

Os resultados de mscaras vo variar de acordo com a ordem de layers. Bom.. agora voc j sabe como criar uma mscara... Mostrarei agora algumas aplicaes muito boas para elas. A primeira ser "Mscaras em imagens". Utilizaremos a seguinte imagem:

Escola Profissional Dom Bosco Poos de Caldas MG

34

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Nossa mscara tornar a estrada em imagem transparente... Este o resultado:

Para obter este resultado, precisamos fazer uma forma que seja igual a forma da estrada para que a mscara seja possvel. Modele uma geometria em cima da pista (veja como modelar uma geometria AQUI) como na imagem abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

35

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Veja que a forma margeia a estrada e est com um Feather 4. Aps este passo, devemos aplicar um degrad. Utilizaremos sempre o degrad do Branco para Preto quando quisermos deixar algo totalmente transparente. Quando usar o Branco e o Preto? A cor branca no subtrai. J a cor preta, quando adicionada mscara subtrai na imagem, deixandoa transparente. Resumindo: Onde a cor da mscara for branca, no haver transparncia. Onde a cor for preta, haver a transparncia. Veja como aplicamos a cor em nosso exemplo:

Deste jeito, a mscara ainda no est pronta. Se voc fizer a mscara selecionando a imagem e a geometria, conseguir este resultado:

Escola Profissional Dom Bosco Poos de Caldas MG

36

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Veja que todo o resto da imagem sumiu... Apenas a parte onde a mscara era branca apareceu. Para que toda a imagem aparea, voc dever fazer uma geometria branca em cima da foto. Mantendo a geometria em cima de tudo, selecione-a junto com o quadrado branco e converta tudo em um bitmap (Ctrl+Alt+Shift+Z). Veja abaixo:

Escola Profissional Dom Bosco Poos de Caldas MG

37

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Com os dois convertidos em apenas um Bitmap, voc pode fazer a mscara com a imagem, obtendo o seguinte resultado:

Repare que o degrade que vai do branco ao preto vai fazendo uma transparncia gradual, at ficar totalmente sem preenchimento. Isso pode se tornar muito til quando se necessita trocar a textura de uma determinada rea e em vrias outras situaes que surgem com o dia a dia. Faremos agora uma mscara com tracejados em cima de imagem. Faremos agora uma mscara com tracejados em cima de imagem. Utilizaremos a seguinte imagem:

Escola Profissional Dom Bosco Poos de Caldas MG

38

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

O Resultado final desta mscara sera:

Escola Profissional Dom Bosco Poos de Caldas MG

39

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Para chegar a este resultado, utilizamos um retngulo preto preenchido com uma textura padro do Fireworks. Veja abaixo:

Selecionando a Textura "Line-Horiz 3" com fator 100, voc ter o seguinte resultado no retngulo:

Escola Profissional Dom Bosco Poos de Caldas MG

40

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Fique atento para um detalhe! Se voc marcar no painel de propriedades a opo "Transparent", a parte branca entre as linhas pretas ficaro transparentes e no ser possvel fazer a mscara como j mostrado acima no caso da estrada. Com o retngulo pronto, basta selecionar a foto que deve estar em baixo e agrupar como mscara. O resultado ser:

Escola Profissional Dom Bosco Poos de Caldas MG

41

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Voc poderia tambm fazer esta mscara utilizando um texto por exemplo, desde que o texto seja preto e seja convertido em imagem junto com um retngulo branco. Veja a imagem feita com texto:

Escola Profissional Dom Bosco Poos de Caldas MG

42

Professor Eduardo Jos do PradoCurso Microinformtica

APOSTILA INTERNET FIREWORKS

Ano 2005 Reviso 00

Digitado o texto com cor preta e convertido em bitmap junto com um retngulo branco, voc poder agrupar como mscara e ter o resultado acima.

Escola Profissional Dom Bosco Poos de Caldas MG

43