Exerccios Prticos do Macromedia Fireworks 4.

Exerccio para o captulo 04

Criao de um relgio de parede

Nesse procedimento, ns vamos estar montando um relgio analgico de parede. 1) Abra o fireworks e crie um documento de 300x300. 2) Vamos fazer primeiramente a borda do relgio. 3) Selecione a ferramenta Elipse [ ] e trace um crculo perfeito. Para voc traar um crculo perfeito, trace o crculo com a tecla SHIFT pressionada. 4) Selecione a ferramenta Elipse [ ] novamente e trace um novo crculo sobre o crculo criado anteriormente. 5) Selecione os dois crculos e v ao menu MODIFY > COMBINE > PUNCH. Dessa forma a borda estar pronta. 6) Aplique a cor de preenchimento de laranja (#FF9900) e contorno em vinho (#990000). 7) Selecione a ferramenta Elipse [ ] e trace um crculo no espao em branco que foi deixado pela borda. 8) Aplique cor de preenchimento amarelo (#FFFF99) e sem borda. 9) Pegue a ferramenta texto [ ] e escreva MM. 10) Aplique a cor de preenchimento de branco (#FFFFFF) e contorno em vinho (#990000). 11) Pegue a ferramenta texto [ ] e escreva COMPANY. 12) Aplique a cor de preenchimento de branco (#FFFFFF) e contorno em vinho (#990000). 13) Pegue a ferramenta texto [ ] e escreva 232-8900. 14) Aplique a cor de preenchimento de vinho (#990000) e contorno em laranja (#FFCC00). 15) Pegue a ferramenta texto [ ] e escreva os doze nmeros que compe o relgio. Lembrando que cada nmero que compe o relgio, deve ser um objeto, ou seja, faa-os separadamente. 16) Aplique a cor de contorno em vinho (#990000) para cada nmero. 17) Arrume os nmeros como no relgio comum. 18) Seu relgio deve estar com essa aparncia.

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

19) Agora ns vamos desenhar os ponteiros do nosso relgio. 20) Abra um documento em separado com tamanho de 100x200. Nesse documento vamos desenhar os ponteiros. 21) Pegue a ferramenta [ ] e desenhe um retngulo fino e comprido. Esse ser o corpo do ponteiro. 22) Vamos desenhar a ponta do ponteiro. 23) Pegue a ferramenta [ seguinte maneira. ] e configure o painel OPTIONS da

24) Desenhe um triangulo sobre o corpo do ponteiro. Selecione os dois objetos e agrupe-os [CTRL + G]. 25) Alinhe as duas janelas lado a lado como mostra a figura.

Janela do Ponteiro

Janela do Relgio

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

26) Selecione o ponteiro desenhado e arraste para a janela onde se encontra o relgio, como mostra a figura acima. 27) Copie o ponteiro e diminua um pouco o seu tamanho. 28) Organize-o de forma a marcar a hora em que voc est fazendo esse exerccio. 29) Pegue a ferramenta elipse [ ] e desenhe um circulo pequeno de modo a marcar o centro do relgio e servir de ponto de referncia para os ponteiros. 30) O seu desenho dever ficar com a seguinte aparncia final.

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

Exerccio para o captulo 05

Construindo a parte frontal de um celular

t o momento voc aprendeu a reconhecer as ferramentas, comandos em todos os menus da barra de menus, barra de ferramenta Main e barra de ferramenta Modify. Aprendeu tambm a trabalhar com o painel Stroke, Fill, Effect e Info. Baseado nesses conceitos vamos estar construindo a parte frontal de um celular modelo antigo. O resultado final deve ser esse que est logo abaixo.

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

Mas para ter um resultado, vamos seguir os passos que esto logo abaixo. 1. Abra o Fireworks e crie um documento de 500x600. 2. Pegue a ferramenta retngulo com cantos arredondados e trace um retngulo com a medida de 215x440 no canvas. 3. Pegue novamente a ferramenta retngulo com cantos arredondados e trace outro retngulo de menor tamanho sobre o retngulo anterior. Use o preenchimento de cor (#00CCFF) nesse retngulo. 4. O celular est dessa aparncia.

5. Vamos desenvolver o visor do celular. Comearemos pela bateria. 6. Pegue a ferramenta retngulo, aplique cor preta para a linha de deixe sem preenchimento e trace o retngulo com o tamanho de 30x10. Caso esteja difcil de trabalhar, pegue a ferramenta Zoom e aplique no local onde ns estamos trabalhando. 5

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

7. Feito isso, vamos estar montando os nveis da bateria, pegando a ferramenta contorno. e aplicando cor de preenchimento preto e sem

8. O resultado deve estar dessa maneira:

9. Feito isso, vamos desenvolver a parte onde mostra se o nosso celular est no modo digital ou analgico. 10. Pegue a ferramenta retngulo e trace um quadrado de 15x15, com preenchimento preto e sem contorno. 11. Pegue a ferramenta texto e digite D para mostrar a parte digital do celular na cor branca. O resultado deve estar dessa maneira:

12. Vamos, agora, montar a parte onde indica que o nosso celular possui uma mensagem recebida via SMS ( Short Message Service).

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

13. Pegue a ferramenta retngulo sem preenchimento e com contorno em preto e trace um quadrado de 15x15. 14. Pegue a ferramenta polgono, abra o painel Options e configure para opo Polgono e de 3 lados.

15. Feito isso, s traar de modo que fique parecendo um envelope. O resultado deve ser esse:

16. Agora vamos montar o nvel de sinal que o nosso celular recebe. 17. Pegue a ferramenta preenchimento preto. e trace um triangulo com

18. Pegue a ferramenta e trace uma linha logo abaixo do triangulo. Depois aproveitaremos para traar os nveis. O resultado deve ser o seguinte:

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

19. Pegue a ferramenta de texto maneira que indicamos abaixo

e digite a hora e a data da

20. Pegue a ferramenta retngulo e trace um retngulo sem preenchimento de 40x15. Duplique o retngulo e coloque do outro lado do visor. Um retngulo ficar do lado esquerdo e o outro do lado direito e ambos na parte inferior. 21. Pegue a ferramenta de texto e digite MENU e AGENDA e posicione dentro de cada retngulo que voc criou no passo anterior. O resultado do visor o seguinte:

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

22. Vamos agora desenvolver a parte do teclado do nosso celular. 23. Pegue a ferramenta Elipse e trace um oval de medida de 39x23 e com preenchimento cinza (#999999) e contorno em preto. Depois de feito esse objeto de forma oval, duplique-o 3 vezes e organize como mostra a figura.

24. Pegue a ferramenta Elipse e trace um oval de medida de 66x40 e com preenchimento cinza (#999999) e contorno em cinza (#333333). 25. Pegue a ferramenta Elipse e trace um oval de medida de 50x30 e com preenchimento e contorno preto. 26. Deve estar com essa aparncia o nosso celular.

Anderson do Val Carneiro Brunhera

Exerccios Prticos do Macromedia Fireworks 4.

27. Pegue a ferramenta Polgono e trace um triangulo. Duplique-o 3 vezes e organize como mostra a figura abaixo.

28. Pegue a ferramenta Elipse e trace um oval de medida de 39x23 e com preenchimento e contorno preto. Depois de feito esse objeto de forma oval, duplique-o 11 vezes e organize igual a um teclado de celular. 29. Vamos fazer a antena do nosso celular.

30. Pegue a ferramenta retngulo de cantos arredondados e trace um retngulo de 20x55 e coloque na parte superior e no lado direto. Ficar dessa forma. Como o retngulo ficar sobre o celular, voc dever usar a ferramenta Enviar para trs (Send Back) .

31. Feito isso, vamos formatar o nosso celular, colocando a identificao em cada tecla. Veja a figura
Anderson do Val Carneiro Brunhera

10

Exerccios Prticos do Macromedia Fireworks 4.

32. A partir de agora, o efeito por sua conta. Faa parecer o mais prximo possvel do modelo da pgina 1.

Anderson do Val Carneiro Brunhera

11

Exerccios Prticos do Macromedia Fireworks 4.

Exerccio para o captulo 06

H uma empresa fabricante de placas de computador e quer colocar o seu anncio em uma revista conceituada de informtica. Para isso, vamos desenvolver um anuncio para a empresa Valley Tecnologia.

1. Abra o Fireworks e crie um documento de 600x400 2. Pegue a ferramenta retngulo [ ] e trace na medida de 150x400. Alinhe-o do lado esquerdo. 3. Pegue a ferramenta retngulo com bordas arredondadas [ trace dois retngulos. 4. Pegue a ferramenta incline [ retngulos desenhados. ] e incline levemente os ]e

5. Dentro desse retngulo, pegue a ferramenta elipse [ ] e trace um crculo perfeito (use a tecla SHIFT pressionada para sair perfeito) na medida de 30x30. 6. O nosso anncio deve estar dessa maneira

Anderson do Val Carneiro Brunhera

12

Exerccios Prticos do Macromedia Fireworks 4.

7. Selecione todos os objetos e agrupe-os (Ctrl+G). 8. Vamos montar a faixa que iro os dados da empresa. 9. Pegue a ferramenta retngulo [ ] e trace um na medida de 475x40. 10. Aplique transparncia de 50%. Voc poder aplicar esse efeito no painel Layer. 11. Pegue a ferramenta texto [ dentro do retngulo desenhado: ] e escreva o seguinte texto

12. os. 13.

Selecione o retngulo juntamente com o texto e agrupePegue a ferramenta elipse [ ] e desenhe uma oval ] e digite o seguinte ]

14. Pegue a ferramenta de texto [ texto: Cadastre sua Revenda. 15. 16. 17.

Agrupe os dois objetos. Pegue a ferramenta Scale [ Coloque-os no canto superior direito. A aparncia e organizao deve ser essa.

Anderson do Val Carneiro Brunhera

13

Exerccios Prticos do Macromedia Fireworks 4.

18.

Vamos desenvolver o fundo do anuncio.

Abra um filme de 200x200 em separado. Depois de terminado os efeitos, voc poder copiar e colar no anncio logo em seguida. 19. Pegue a ferramenta texto [ ] e digite a letra V em maisculo com fonte Arial Black e tamanho 96pt. 20. Feito isso, v ao menu Text > Convert to Patch. 21. Pegue a ferramenta de sub-seleo [ ] e selecione. Voc poder perceber que os ns de cada ponto da letra V esto prontos para serem editados. Trabalhando nos ns certos, voc tem que chegar a esse resultado:

22. Feito isso, pegue a ferramenta retngulo [ ] e desenhe retngulos sobre a letra V deixando pequenos espaos de no mximo 3 pixels.
Anderson do Val Carneiro Brunhera

14

Exerccios Prticos do Macromedia Fireworks 4.

23.

Depois disso, selecione a letra V e use a ferramenta Bring ] para que a letra V fique sobre os retngulos.

Foward [ Confira:

24. Selecione toda a figura e v ao Menu Modify > Mask > Group as Mask. 25. O resultado o seguinte:

26. Copie e cole dentro do anuncio. 27. Use a ferramenta Send Back [ ] para colocar como fundo. Aplique 20% de transparncia. Lembrando que voc encontrar transparncia no painel Layer. 28. V at o site http://www.valley.ind.br e pegue duas fotos. Uma foto de uma placa de rede e outra do tipo placa multisserial. O modelo se encontra logo abaixo:

Placa Multisserial

Placa de Rede 10/100

Anderson do Val Carneiro Brunhera

15

Exerccios Prticos do Macromedia Fireworks 4.

29. Adicione, usando a ferramenta texto[ ], o restante dos textos. 30. Aplique todos os efeitos possveis que voc aprendeu no captulo anterior, sem deixar o anncio muito carregado e sim com uma aparncia profissional. 31. O resultado final deve ser esse:

Anderson do Val Carneiro Brunhera

16

Exerccios Prticos do Macromedia Fireworks 4.

Exerccio para o captulo 07

Montando um Preloading falso no Fireworks
Vamos montar um falso preloading no fireworks e exibir a mensagem de CARREGADO quando terminar. 1. Abra o fireworks e crie um filme de 300x300 2. Pegue a ferramenta retngulo e desenhe um retngulo de 250x50 sem preenchimento e com contorno na cor vinho (#990000), conforme mostra a figura abaixo

3. Pegue a ferramenta retngulo novamente e desenhe um pequeno retngulo dentro do retngulo desenhado anteriormente de tamanho 20x40 com preenchimento amarelo e sem contorno. 4. Pegue a ferramenta texto e digite 10% na parte de baixo do retngulo grande. 5. Seu desenho deve ficar dessa maneira

6. Aps isso, v ao painel Frame e duplique o frame 13 vezes. 7. Em cada frame, vamos esta duplicando o quadrado amarelo at atingir 100%. 8. Dever ficar como mostra o resultado abaixo

Anderson do Val Carneiro Brunhera

17

Exerccios Prticos do Macromedia Fireworks 4.

Criao de um Disco de Vinil LP (Long Play)

este tutorial veremos como criar um disco de vinil no Fireworks. realmente fcil e o resultado muito bonito. Como ocorre com todo tutorial, s vezes o que fazemos no uma parte importante do mesmo -- o que importa como o fazemos. 1. Abra o fireworks e crie um filme de 400x400 2. Pegue a ferramenta Elipse e faa um crculo to grande quanto o disco que deseja criar. 3. No painel Stroke, formate o contorno conforme mostrado logo a seguir.

4. Faa um Clone do crculo atravs do menu Edit > Clone ou use a combinao [Ctrl]+[Shift]+[C]. Usando a seta do teclado, arraste 3 ou 5 pixels para a direita. 5. Selecione ambos os crculos e v para Modify>Combine>Punch. 6. Clone o objeto, e v ao menu Modify > Align > Flip Horizontal. Alinhe os dois objetos de modo que uma ponta toque na outra.

7. Preencha os dois objetos com Preenchimento=Slido e cor=Preto. Ajuste o Trao=Nenhum e Agrupe. Faa um clone do Grupo e aplique a seguinte transformao neste ltimo: Transform > Numeric Transform > Scale. 8. Ajuste a janela Numeric Transform para as seguinte medida:
Anderson do Val Carneiro Brunhera

18

Exerccios Prticos do Macromedia Fireworks 4.

(Caso seu aplicativo esteja em ingls, a opo ser Scale)

9. Traga o painel History (Windows > History) e selecione simultaneamente os dois ltimos comandos, ou seja "Clonar" e "Transformar". Para fazer isso use a tecla [Shift] e clique em Reproduzir (Play). Repita esse passo quantas vezes for necessrio para criar a superfcie do disco. 10.Feito isso, o nosso disco est quase pronto. Vamos fazer o acabamento. 11.O logotipo pode ser feito dessa maneira. Vale lembrar que esse logotipo apenas uma idia e voc pode inventar o seu.

12.

O seu Disco ficar da seguinte maneira.

Anderson do Val Carneiro Brunhera

19

Exerccios Prticos do Macromedia Fireworks 4.

13. Agrupe os dois objetos e v at o menu modify > Animation > Animate Selection e aparecer um painel. Configure da maneira como aparecer.

14. Feito isso, alinhe o ponto vermelho com o ponto verde de modo que o vermelho sobreponha o verde. 15. Clique em Play para testar. V ao menu Modify > Trim Canvas 16. V ao menu File > Export Preview e configure a janela da seguinte maneira.

Anderson do Val Carneiro Brunhera

20

Exerccios Prticos do Macromedia Fireworks 4.

Exerccio para o captulo 08

Boto Acqua
Neste tutorial criaremos um boto semelhante aos usados no site da Apple. Todos os nomes Apple, Macintosh, Mac OS so marcas registradas da Apple Computers. 1. Abra o Fireworks e crie um documento de 420 x 220 pixels. 2. Torne visveis as rguas com o comando Exibir>Rguas (View>Rulers) e arraste 2 guias horizontais para definir as extremidades superior e inferior do boto e em seguida desenhe um crculo. 3. Posicione o cursor na guia superior, e mantendo pressionada a tecla [Shift], arraste o crculo at a guia inferior. Defina o preenchimento para "Slido", branco. 4. Veja o que deve ser feito nesses trs passos que executamos.

5. Copie o primeiro [Ctrl] + [C] e cole [Ctrl] + [V]. Em seguida use as setas do teclado para mover a cpia em direo extremidade oposta. Mantenha a tecla [Shift] pressionada enquanto estiver movendo o novo crculo para que este se desloque mais rapidamente. 6. Agora, usando as guias, desenhe um retngulo branco entre os crculos. Selecione ambos os crculos e o retngulo, v para Modifiy>Combine>Union e o contorno do boto estar criado.
Anderson do Val Carneiro Brunhera

21

Exerccios Prticos do Macromedia Fireworks 4.

7. Agora crie uma nova camada (layer), duplicando a primeira, e chamando-a REFLEXO SUP. E renomeando a existente com o nome de BASE.

8. Selecione a Layer 1 - (BASE), e preencha o objeto com uma cor prxima quela do boto Aqua (mas voc pode usar outros tons). Configure a cor #283C78 no painel Mixer. 9. Para criar o reflexo superior, voc tanto pode deformar a forma na camada REFLEXO SUP usando a ferramenta Transformar [Ctrl] + [T] e modific-la vontade, ou usar o painel Informaes (Info) definindo os valores de largura para 289 e altura para 43.

Anderson do Val Carneiro Brunhera

22

Exerccios Prticos do Macromedia Fireworks 4.

10. Com a camada REFLEXO SUP selecionada, crie um retngulo branco que ser a mscara. Atravs do Painel Fill, altere o preenchimento do retngulo para Linear (Black/White).

11. Selecione tanto o retngulo quanto o reflexo e Modify>Mask Group>Mask to Image.

v at

12. Crie uma nova camada denominada REFLEXO INF. Faa um crculo entre as guias, abra o painel Fill e escolha a opo radial. Modifique as cores para #B4E6FA e para #283C78. 13. Com o crculo selecionado, ative a ferramenta Faca e corte-o em duas metades (de cima para baixo). Usando as setas do cursor mova as duas metades, cada uma para uma das extremidades do boto.

Anderson do Val Carneiro Brunhera

23

Exerccios Prticos do Macromedia Fireworks 4.

14. Selecione uma das metades e v ao menu Modify > Convert to Bitmap. 15. Em seguida usando a Ferramenta de seleo retangular crie uma seleo de aproximadamente uns 2 pixels de largura sobre a extremidade cortada de um dos crculos. 16. Pressione a tecla [V], e em seguida [Alt] e com a seta horizontal (seta para a direita) repetidamente at atingir a outra metade do crculo.

17. Selecione todos os elementos existentes na camada REFLEXO INFO e v ao menu Modify>Group ou use a opo [Ctrl] + [G]. 18. Use o painel Info para ajustar os valores da largura para 310 e os valores da largura para 87. Posicione o grupo cerca de 1/3 abaixo do contorno principal.

Anderson do Val Carneiro Brunhera

24

Exerccios Prticos do Macromedia Fireworks 4.

19. V ao menu Xtras>Blur>Gaussian Blur com o raio do blur definido para 18. Agora j est comeando a ficar parecido com o boto da Apple.

20. 21.

Adicione um texto a esse boto de sua preferncia. Selecione o texto e aplique transparncia de 80%

22. O resultado final deve ser a figura que est sendo mostrado abaixo.

Anderson do Val Carneiro Brunhera

25