Tutorial Fireworks – Desenhando um MP3 Player

• Tweet
• Sharebar

• Tweet

Olá a todos !

Meu nome é Luis Matos e esse é o meu primeiro tutorial de Fireworks que escrevo aqui no MXStudio.

Meu objetivo é mostrar o uso básico de algumas ferramentas do Fireworks e demonstrar que é possivel criar um desenho no fireworks bem interessante de modo bem simples. Nesse tutorial vou ensinar como desenhar um MP3 Player do tipo iPod em 3D.

A primeira coisa a ser feita é o painel do nosso Player.

Painel do MP3 Player

Para desenha-lo inicie usando a ferramenta Doughnut do Fireworks e faça “uma rosquinha” de 260 por 260.

O ideal é que a nossa doughnut fique bem fina para isso ajuste o circulo central:

Agora que o painel foi desenhado, é hora de pinta-lo. Para obter um bom efeito 3D, clique no combo box de preenchimentos do Fireworks e escolha o tipo Gradient -> Radial. Após escolher o preenchimento Gradient->Radial selecione as cores que você vai usar na pintura, no nosso caso as cores Cinza #CCCCCC e branca #FFFFFF.

Como resultado você deve obter:

Botão de Play do MP3 Player

Agora que o painel está desenhado, é hora de fazer o botão de play que fica no meio do painel. Para desenha-lo basicamente usaremos a mesma ideia do painel. Só que dessa vez usaremos a ferramenta Elipse do Fireworks. O botão será feito por um circulo de 180 por 180. E ficará posicionado bem no meio do painel.

Para o preenchimento utilize o mesmo que foi utilizado no painel.

Simbolos nos Botões

O proximo passo agora é desenhar os simbolos dos botões. Para desenha-los basta usar a ferramenta as Pen ( caneta ) e Rectangle do Fireworks. Para o botão play desenhe um triangulo com a Pen:

Agora complete inserindo o botão Pause, desenhando 2 retangulos com a ferramenta Rectangle:

Os botões que passam e voltam a musica podem ser feitos aproveitando o botão play que já fizemos, basta usar algumas tecnicas simples de manipulação. Primeiramente copie e cole o botão play 2 vezes um na frente do outro e selecione os 2 juntos:

Manipule agora esta figura diminuindo o tamanho a metade, nesse exemplo passamos de 38×32 para 19×16. Temos agora o botão que vai uma musica pra frente, para desenhar o botão que vai uma musica pra trás, basta pegar o desenho obtido e girar pra trás usando a ferramenta do Fireworks Transform->Flip Horizontal, ela aparece no menu clicando com o botão direito na figura:

Agora pra finalizar os botões faltam os botões que sobem e abaixam o volume. Mais uma vez usando o Rectangle fica facil desenhar, basta fazer os simbolos de + e -. Como resultado final temos o conjunto de símbolos:

Unido com o primeiro desenho que fizemos temos:

O painel do MP3 player agora está completo !! A próxima parte será o corpo. Mas sobre isso falarei no próximo artigo. Espero que tenham entendido e gostado desse meu tutorial de desenho no Fireworks pois esse é o objetivo, obrigado a todos.

Até a próxima !!!

Link para a parte 2 do tutorial:

Tutorial Fireworks – Desenhando um MP3 Player – Parte 2

Escrito por Luis Matos on abril 23, 2008. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo