Tutorial Fireworks – Desenhando um MP3 Player – Parte 2

Olá a todos !

No primeiro tutorial de Fireworks dessa serie, mostrei como foi desenhado o painel do MP3 Player, agora o nosso objetivo vai ser desenhar o corpo e uni-lo ao painel. Caso tenham alguma duvida, ou queiram relembrar bastar dar uma olhada na parte 1 do tutorial:

Tutorial Fireworks – Desenhando um MP3 Player – Parte 1

Bem, então vamos começar !

Corpo do MP3 Player

Para desenhar a frente do corpo do MP3 Player use a ferramenta Rectangle e faça uma caixa de 150 por 225:

Desenhando o corpo do Player

Uma vez desenhado esse retangulo, para preenche-lo use o preenchimento Gradient->Bars do Fireworks, nesse preenchimento utilize as cores preta #333333 e branca #FFFFFF.

Preenchimento do corpo

O resultado deve ser esse:

Preenchimento do Corpo

Mas esse não o resultado final desejado do preenchimento, o proximo passo é clicar nesse retangulo com a ferramente Pointer Tool do e editar o preenchimento da seguinte maneira:

Editando o preenchimento

O resultado final agora será:

Corpo do MP3 Player

Lateral do MP3 Player

Já que o nosso desenho nesse tutorial de Fireworks será tridimensional, agora teremos de desenhar o lado do nosso player. Para isso basta desenhar com a ferramenta Elipse uma pequena bola de 30 x 30 ao lado do corpo do MP3, uma vez desenhada a bola, use a ferramenta Knife do Fireworks e corte esta bola ao meio, separando-a ficando uma metade do lado de cada extremidade do corpo do player:

Desenhando a lateral

Uma vez feito isso agora basta unir as 2 metades de circulo usando a pen. Tendo desenhado o lado do corpo do Player já podemos usar essas peças pra montar uma caixa 3D. Basta copiar e colar o lado do Player como na figura abaixo:

Finalizando a lateral do Player

Selecione as figuras marcadas em vermelho e aplique nelas a opção Modify->Combine Parts->Union do menu principal do Fireworks, obteremos então a nossa caixa 3D do corpo do MP3 Player.

Finalizando o Trabalho

Agora que o painel e o corpo do MP3 Player estão prontos basta uni-los e aplicar alguns efeitos para realçar o tridimensional. Como você deve ter notado, o painel do MP3 desenhado no primeiro tutorial está numa proporção maior que o corpo, eu acho interessante fazer os desenhos maiores e depois diminuir se for preciso, porque assim fica mais facil fazer os pequenos detalhes. Então para unir o painel ao corpo a primeira coisa é diminuir a proporção do painel, faça isso diminuindo a metade os atributos de tamanho do painel:

Ajustando o tamanho

Agora que estão proporcionais podemos unir os nossos dois desenhos:

Desenho finalizado

Pronto !! O player está pronto, mas podemos ir um pouco mais longe e criar um efeito tridimensional melhor, para isso basta selecionar o desenho inteiro, e aplicar a ferramenta Transform->Distort do Fireworks. Para acessar o menu com a ferramenta basta clicar no desenho selecionado com o botão direto do mouse.

Efeito 3D

Agora jogando um efeito de sombra no nosso desenho, ele está pronto !! Resultado final:

MP3 Player pronto !

Espero que tenham gostado do meu tutorial de fireworks tanto quanto eu gostei de te-lo escrito. Agradeço a todos.

Abraços e até a proxima !

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

4 respostas a Tutorial Fireworks – Desenhando um MP3 Player – Parte 2

  1. João Fernando

    Ficou legal,
    só não gostei do “Drop Shadow” sobre os botões do MP3 pois aparenta ser dois objetos distintos.
    mas fora isso tá legal ;D

  2. Bem, esse é o Ipod Shuffle. Bem, está simplesmente perfeito.
    E sobre o DropShadow nos botões, ele podia ser menor pra dar uma impressão de alto relevo sem o inner bevel.
    Tchau

  3. Naum consigo dexa a caixa tridimensional, qandu eu clicu union, fik assim:

    http://img50.imageshack.us/img50/5767/fireworks.jpg

  4. Amazing… I liked it!

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>