You are on page 1of 25

Exercícios Práticos do Macromedia Fireworks 4.

Exercício para o capítulo 04

Criação de um relógio de parede
Nesse procedimento, nós vamos estar montando um relógio analógico de parede. 1) Abra o fireworks e crie um documento de 300x300. 2) Vamos fazer primeiramente a borda do relógio. 3) Selecione a ferramenta Elipse [ ] e trace um círculo perfeito. Para você traçar um círculo perfeito, trace o círculo com a tecla SHIFT pressionada. 4) Selecione a ferramenta Elipse [ ] novamente e trace um novo círculo sobre o círculo criado anteriormente. 5) Selecione os dois círculos 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 círculo no espaço 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 números que compõe o relógio. Lembrando que cada número que compõe o relógio, deve ser um objeto, ou seja, faça-os separadamente. 16) Aplique a cor de contorno em vinho (#990000) para cada número. 17) Arrume os números como no relógio comum. 18) Seu relógio deve estar com essa aparência.

Anderson do Val Carneiro Brunhera

1

Exercícios Práticos do Macromedia Fireworks 4.

19) Agora nós vamos desenhar os ponteiros do nosso relógio. 20) Abra um documento em separado com tamanho de 100x200. Nesse documento vamos desenhar os ponteiros. 21) Pegue a ferramenta [ ] e desenhe um retângulo 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 Relógio

Anderson do Val Carneiro Brunhera

2

30) O seu desenho deverá ficar com a seguinte aparência final. 27) Copie o ponteiro e diminua um pouco o seu tamanho. Anderson do Val Carneiro Brunhera 3 . como mostra a figura acima. 28) Organize-o de forma a marcar a hora em que você está fazendo esse exercício. 29) Pegue a ferramenta elipse [ ] e desenhe um circulo pequeno de modo a marcar o centro do relógio e servirá de ponto de referência para os ponteiros. 26) Selecione o ponteiro desenhado e arraste para a janela onde se encontra o relógio.Exercícios Práticos do Macromedia Fireworks 4.

Aprendeu também a trabalhar com o painel Stroke. Anderson do Val Carneiro Brunhera 4 . comandos em todos os menus da barra de menus.Exercícios Práticos do Macromedia Fireworks 4. O resultado final deve ser esse que está logo abaixo. Fill. barra de ferramenta Main e barra de ferramenta Modify. Baseado nesses conceitos vamos estar construindo a parte frontal de um celular modelo antigo. Effect e Info. Exercício para o capítulo 05 Construindo a parte frontal de um celular A té o momento você aprendeu a reconhecer as ferramentas.

2. Vamos desenvolver o visor do celular. 5 Anderson do Val Carneiro Brunhera . Caso esteja difícil de trabalhar. Pegue novamente a ferramenta retângulo com cantos arredondados e trace outro retângulo de menor tamanho sobre o retângulo anterior. 1. vamos seguir os passos que estão logo abaixo.Exercícios Práticos do Macromedia Fireworks 4. Pegue a ferramenta retângulo. 5. pegue a ferramenta Zoom e aplique no local onde nós estamos trabalhando. Começaremos pela bateria. Abra o Fireworks e crie um documento de 500x600. aplique cor preta para a linha de deixe sem preenchimento e trace o retângulo com o tamanho de 30x10. Use o preenchimento de cor (#00CCFF) nesse retângulo. O celular está dessa aparência. Mas para ter um resultado. 4. 3. Pegue a ferramenta retângulo com cantos arredondados e trace um retângulo com a medida de 215x440 no canvas. 6.

11. 7. Feito isso. Pegue a ferramenta retângulo e trace um quadrado de 15x15. montar a parte onde indica que o nosso celular possui uma mensagem recebida via SMS ( Short Message Service). Pegue a ferramenta texto e digite D para mostrar a parte digital do celular na cor branca. vamos desenvolver a parte onde mostra se o nosso celular está no modo digital ou analógico. Feito isso. Vamos. vamos estar montando os níveis da bateria.Exercícios Práticos do Macromedia Fireworks 4. O resultado deve estar dessa maneira: 9. com preenchimento preto e sem contorno. e aplicando cor de preenchimento preto e sem 8. agora. O resultado deve estar dessa maneira: 12. 10. pegando a ferramenta contorno. Anderson do Val Carneiro Brunhera 6 .

Exercícios Práticos do Macromedia Fireworks 4. 15. Feito isso. 17. O resultado deve ser esse: 16. é só traçar de modo que fique parecendo um envelope. Pegue a ferramenta retângulo sem preenchimento e com contorno em preto e trace um quadrado de 15x15. O resultado deve ser o seguinte: Anderson do Val Carneiro Brunhera 7 . Pegue a ferramenta e trace uma linha logo abaixo do triangulo. 13. 14. Agora vamos montar o nível de sinal que o nosso celular recebe. Pegue a ferramenta preenchimento preto. e trace um triangulo com 18. Depois aproveitaremos para traçar os níveis. Pegue a ferramenta polígono. abra o painel Options e configure para opção Polígono e de 3 lados.

Pegue a ferramenta retângulo e trace um retângulo sem preenchimento de 40x15. 19. Pegue a ferramenta de texto e digite MENU e AGENDA e posicione dentro de cada retângulo que você criou no passo anterior. Pegue a ferramenta de texto maneira que indicamos abaixo e digite a hora e a data da 20.Exercícios Práticos do Macromedia Fireworks 4. Duplique o retângulo e coloque do outro lado do visor. 21. Um retângulo ficará do lado esquerdo e o outro do lado direito e ambos na parte inferior. O resultado do visor é o seguinte: Anderson do Val Carneiro Brunhera 8 .

23. Pegue a ferramenta Elipse e trace um oval de medida de 39x23 e com preenchimento cinza (#999999) e contorno em preto. duplique-o 3 vezes e organize como mostra a figura.Exercícios Práticos do Macromedia Fireworks 4. Deve estar com essa aparência o nosso celular. Vamos agora desenvolver a parte do teclado do nosso celular. 25. 24. 22. Anderson do Val Carneiro Brunhera 9 . Pegue a ferramenta Elipse e trace um oval de medida de 50x30 e com preenchimento e contorno preto. Depois de feito esse objeto de forma oval. Pegue a ferramenta Elipse e trace um oval de medida de 66x40 e com preenchimento cinza (#999999) e contorno em cinza (#333333). 26.

duplique-o 11 vezes e organize igual a um teclado de celular. 28. vamos formatar o nosso celular. 30. Feito isso. Pegue a ferramenta retângulo de cantos arredondados e trace um retângulo de 20x55 e coloque na parte superior e no lado direto. Pegue a ferramenta Elipse e trace um oval de medida de 39x23 e com preenchimento e contorno preto. Duplique-o 3 vezes e organize como mostra a figura abaixo.Exercícios Práticos do Macromedia Fireworks 4. Como o retângulo ficará sobre o celular. 27. Depois de feito esse objeto de forma oval. Ficará dessa forma. Vamos fazer a antena do nosso celular. Veja a figura Anderson do Val Carneiro Brunhera 10 . 31. colocando a identificação em cada tecla. Pegue a ferramenta Polígono e trace um triangulo. 29. você deverá usar a ferramenta Enviar para trás (Send Back) .

Exercícios Práticos do Macromedia Fireworks 4. o efeito é por sua conta. 32. Anderson do Val Carneiro Brunhera 11 . Faça parecer o mais próximo possível do modelo da página 1. A partir de agora.

Exercícios Práticos do Macromedia Fireworks 4. 6. Exercício para o capítulo 06 Há uma empresa fabricante de placas de computador e quer colocar o seu anúncio em uma revista conceituada de informática. 1. vamos desenvolver um anuncio para a empresa Valley Tecnologia. 3. O nosso anúncio deve estar dessa maneira Anderson do Val Carneiro Brunhera 12 . Pegue a ferramenta incline [ retângulos desenhados. Para isso. Alinhe-o do lado esquerdo. pegue a ferramenta elipse [ ] e trace um círculo perfeito (use a tecla SHIFT pressionada para sair perfeito) na medida de 30x30. Pegue a ferramenta retângulo [ ] e trace na medida de 150x400. 4. Abra o Fireworks e crie um documento de 600x400 2. Pegue a ferramenta retângulo com bordas arredondadas [ trace dois retângulos. Dentro desse retângulo. ] e incline levemente os ]e 5.

Agrupe os dois objetos.Exercícios Práticos do Macromedia Fireworks 4. 7. 13. Selecione o retângulo juntamente com o texto e agrupePegue a ferramenta elipse [ ] e desenhe uma oval ] e digite o seguinte ] 14. Pegue a ferramenta retângulo [ ] e trace um na medida de 475x40. 11. Pegue a ferramenta texto [ dentro do retângulo desenhado: ] e escreva o seguinte texto 12. Aplique transparência de 50%. 17. 16. Selecione todos os objetos e agrupe-os (Ctrl+G). Pegue a ferramenta Scale [ Coloque-os no canto superior direito. Vamos montar a faixa que irão os dados da empresa. 15. Pegue a ferramenta de texto [ texto: Cadastre sua Revenda. 9. Você poderá aplicar esse efeito no painel Layer. 10. 8. A aparência e organização deve ser essa. os. Anderson do Val Carneiro Brunhera 13 .

Pegue a ferramenta de sub-seleção [ ] e selecione. 19. vá ao menu Text > Convert to Patch. você tem que chegar a esse resultado: 22. 20. Pegue a ferramenta texto [ ] e digite a letra V em maiúsculo com fonte Arial Black e tamanho 96pt.Exercícios Práticos do Macromedia Fireworks 4. Feito isso. Depois de terminado os efeitos. você poderá copiar e colar no anúncio logo em seguida. Feito isso. 21. Vamos desenvolver o fundo do anuncio. Trabalhando nos nós certos. pegue a ferramenta retângulo [ ] e desenhe retângulos sobre a letra V deixando pequenos espaços de no máximo 3 pixels. Você poderá perceber que os nós de cada ponto da letra V estão prontos para serem editados. Anderson do Val Carneiro Brunhera 14 . 18. Abra um filme de 200x200 em separado.

28.ind. Foward [ Confira: 24. Lembrando que você encontrará transparência no painel Layer. Use a ferramenta Send Back [ ] para colocar como fundo. Aplique 20% de transparência. Copie e cole dentro do anuncio. Vá até o site http://www. O modelo se encontra logo abaixo: Placa Multisserial Placa de Rede 10/100 Anderson do Val Carneiro Brunhera 15 . Depois disso.valley. Uma foto de uma placa de rede e outra do tipo placa multisserial.Exercícios Práticos do Macromedia Fireworks 4. Selecione toda a figura e vá ao Menu Modify > Mask > Group as Mask. O resultado é o seguinte: 26. selecione a letra V e use a ferramenta Bring ] para que a letra V fique sobre os retângulos.br e pegue duas fotos. 25. 23. 27.

Adicione.Exercícios Práticos do Macromedia Fireworks 4. usando a ferramenta texto[ ]. o restante dos textos. Aplique todos os efeitos possíveis que você aprendeu no capítulo anterior. 31. 30. 29. O resultado final deve ser esse: Anderson do Val Carneiro Brunhera 16 . sem deixar o anúncio muito carregado e sim com uma aparência profissional.

Pegue a ferramenta texto e digite 10% na parte de baixo do retângulo grande. Em cada frame. Seu desenho deve ficar dessa maneira 6. vamos esta duplicando o quadrado amarelo até atingir 100%. 7. Exercício para o capítulo 07 Montando um Preloading falso no Fireworks Vamos montar um falso preloading no fireworks e exibirá a mensagem de CARREGADO quando terminar. Pegue a ferramenta retângulo novamente e desenhe um pequeno retângulo dentro do retângulo desenhado anteriormente de tamanho 20x40 com preenchimento amarelo e sem contorno. vá ao painel Frame e duplique o frame 13 vezes. 4. 1. Deverá ficar como mostra o resultado abaixo Anderson do Val Carneiro Brunhera 17 . Após isso. Abra o fireworks e crie um filme de 300x300 2. Pegue a ferramenta retângulo e desenhe um retângulo de 250x50 sem preenchimento e com contorno na cor vinho (#990000).Exercícios Práticos do Macromedia Fireworks 4. 5. conforme mostra a figura abaixo 3. 8.

às vezes o que fazemos não é uma parte importante do mesmo -. 3. 6. Alinhe os dois objetos de modo que uma ponta toque na outra. 1. 8. Faça um Clone do círculo através do menu Edit > Clone ou use a combinação [Ctrl]+[Shift]+[C]. Pegue a ferramenta Elipse e faça um círculo tão grande quanto o disco que deseja criar. É realmente fácil e o resultado é muito bonito. No painel Stroke. arraste 3 ou 5 pixels para a direita. e vá ao menu Modify > Align > Flip Horizontal.o que importa é como o fazemos. Ajuste a janela Numeric Transform para as seguinte medida: Anderson do Val Carneiro Brunhera 18 . Abra o fireworks e crie um filme de 400x400 2. Criação de um Disco de Vinil – LP (Long Play) N este tutorial veremos como criar um disco de vinil no Fireworks. Ajuste o Traço=Nenhum e Agrupe. Usando a seta do teclado. Como ocorre com todo tutorial. Selecione ambos os círculos e vá para Modify>Combine>Punch. Faça um clone do Grupo e aplique a seguinte transformação neste último: Transform > Numeric Transform > Scale. 7. 5.Exercícios Práticos do Macromedia Fireworks 4. Preencha os dois objetos com Preenchimento=Sólido e cor=Preto. formate o contorno conforme é mostrado logo a seguir. Clone o objeto. 4.

Vamos fazer o acabamento. 10. 11. Anderson do Val Carneiro Brunhera 19 .Exercícios Práticos do Macromedia Fireworks 4. Para fazer isso use a tecla [Shift] e clique em Reproduzir (Play). Vale lembrar que esse logotipo é apenas uma idéia e você pode inventar o seu. O seu Disco ficará da seguinte maneira. Repita esse passo quantas vezes for necessário para criar a superfície do disco. Traga o painel History (Windows > History) e selecione simultaneamente os dois últimos comandos. (Caso seu aplicativo esteja em inglês. a opção será Scale) 9.O logotipo pode ser feito dessa maneira.Feito isso. ou seja "Clonar" e "Transformar". o nosso disco está quase pronto. 12.

15. 13. Anderson do Val Carneiro Brunhera 20 . Vá ao menu File > Export Preview e configure a janela da seguinte maneira. Vá ao menu Modify > Trim Canvas 16. alinhe o ponto vermelho com o ponto verde de modo que o vermelho sobreponha o verde. Clique em Play para testar. Feito isso. 14.Exercícios Práticos do Macromedia Fireworks 4. Agrupe os dois objetos e vá até o menu modify > Animation > Animate Selection e aparecerá um painel. Configure da maneira como aparecerá.

5. vá para Modifiy>Combine>Union e o contorno do botão estará criado. Todos os nomes Apple.Exercícios Práticos do Macromedia Fireworks 4. branco. Em seguida use as setas do teclado para mover a cópia em direção à extremidade oposta. 6. e mantendo pressionada a tecla [Shift]. Posicione o cursor na guia superior. arraste o círculo até a guia inferior. 3. 2. Macintosh. Copie o primeiro [Ctrl] + [C] e cole [Ctrl] + [V]. Abra o Fireworks e crie um documento de 420 x 220 pixels. Mantenha a tecla [Shift] pressionada enquanto estiver movendo o novo círculo para que este se desloque mais rapidamente. Anderson do Val Carneiro Brunhera 21 . desenhe um retângulo branco entre os círculos. 4. Selecione ambos os círculos e o retângulo. 1. Defina o preenchimento para "Sólido". usando as guias. Agora. Torne visíveis as réguas com o comando Exibir>Réguas (View>Rulers) e arraste 2 guias horizontais para definir as extremidades superior e inferior do botão e em seguida desenhe um círculo. Mac OS são marcas registradas da Apple Computers. Exercício para o capítulo 08 Botão Acqua Neste tutorial criaremos um botão semelhante aos usados no site da Apple. Veja o que deve ser feito nesses três passos que executamos.

e chamando-a REFLEXO SUP. ou usar o painel Informações (Info) definindo os valores de largura para 289 e altura para 43. 9. Para criar o reflexo superior. Configure a cor #283C78 no painel Mixer. você tanto pode deformar a forma na camada REFLEXO SUP usando a ferramenta Transformar [Ctrl] + [T] e modificá-la à vontade. Selecione a Layer 1 . 8.(BASE). Agora crie uma nova camada (layer).Exercícios Práticos do Macromedia Fireworks 4. e preencha o objeto com uma cor próxima àquela do botão Aqua (mas você pode usar outros tons). duplicando a primeira. E renomeando a existente com o nome de BASE. 7. Anderson do Val Carneiro Brunhera 22 .

Modifique as cores para #B4E6FA e para #283C78. altere o preenchimento do retângulo para Linear (Black/White). abra o painel Fill e escolha a opção radial. cada uma para uma das extremidades do botão. Selecione tanto o retângulo quanto o reflexo e Modify>Mask Group>Mask to Image. 10. Com a camada REFLEXO SUP selecionada. Com o círculo selecionado. Faça um círculo entre as guias. Anderson do Val Carneiro Brunhera 23 . ative a ferramenta Faca e corte-o em duas metades (de cima para baixo).Exercícios Práticos do Macromedia Fireworks 4. Crie uma nova camada denominada REFLEXO INF. 11. 13. Usando as setas do cursor mova as duas metades. Através do Painel Fill. crie um retângulo branco que será a máscara. vá até 12.

Exercícios Práticos do Macromedia Fireworks 4. 18. Em seguida usando a Ferramenta de seleção retangular crie uma seleção de aproximadamente uns 2 pixels de largura sobre a extremidade cortada de um dos círculos. Pressione a tecla [V]. Posicione o grupo cerca de 1/3 abaixo do contorno principal. 17. 15. e em seguida [Alt] e com a seta horizontal (seta para a direita) repetidamente até atingir a outra metade do círculo. 14. Selecione uma das metades e vá ao menu Modify > Convert to Bitmap. Anderson do Val Carneiro Brunhera 24 . Use o painel Info para ajustar os valores da largura para 310 e os valores da largura para 87. 16. Selecione todos os elementos existentes na camada REFLEXO INFO e vá ao menu Modify>Group ou use a opção [Ctrl] + [G].

21. 20. Adicione um texto a esse botão de sua preferência. 19. Selecione o texto e aplique transparência de 80% 22.Exercícios Práticos do Macromedia Fireworks 4. Vá ao menu Xtras>Blur>Gaussian Blur com o raio do blur definido para 18. Agora já está começando a ficar parecido com o botão da Apple. O resultado final deve ser a figura que está sendo mostrado abaixo. Anderson do Val Carneiro Brunhera 25 .