[ Curso Fireworks]- Conhecendo o programa e criando um simples menu.

Salve galera do ZoomDigital, aqui quem escreve é Tiago Rolim do VisãoDigital para mais um tutorial só que agora  de Fireworks.

Neste tutorial vamos conhecer as telas do programa e criar um simples menu onde os usuários ao passarem o mouse o botão mudara de cor.

Tutorial 1 :

Primeiramente numerei as telas para que você possa localizar as opções mais facilmente no decorrer dos tutoriais. É sempre bom você conhecer os nomes pois vejo muitas pessoas que trabalham com informática mais não tem interesse de conhecer nome das telas.  Para começarmos vamos ao número 1.

Tópico 1:  Aqui estão as  ferramentas usadas no Firework, para quem usa Photoshop vai perceber que existem muitas ferramentas parecidas. O que é legal no Firework é que diferente do Photoshop ele separa as ferramentas por seções.  Por exemplo : Select , Bitmap , Vector etc….

Tópico 2 : Não é preciso nem entrar muito em detalhes pois vcoês devem ter percebido que é a área onde se trabalha no Fireworks ( stage).

Tópico 3:  No photoshop você chama de paletas no Fireworks chamamos de painéis.Lembrando que os painéis são adicinados pelo menu Window.

Tópico 4 : Chamamos de propriedades pois mostram os recursos da ferramenta que está sendo utilizada naquele momento.

Criando um menu semelhante ao da foto abaixo.

Primeiro passo :

O primeiro passo é criar um novo documento lembrando que não existe um tamanho especifico para se criar um menu isso vai depender muito da sua página.

No nosso exemplo vamos criar um com 170 de largura por 220 de altura somente como exemplo.

Clique sobre o menu File( arquivo ) opção New (Novo documento).Vai aparecer a seguinte tela. Configure conforme a tela abaixo:

Agora teremos que criar um fundo, farei um fundo bem simples utilizando uma textura.

Segundo passo:

A sua esquerda procure na caixa de ferramentas a ferramenta Rectangle tool (retângulo). Clique nela e antes de criar um retângulo, procure na parte inferior da tela uma lata de tinta e coloque as mesmas configurações de cor da imagem abaixo :

Terceiro passo:

Crie um retângulo do tamanho exato do arquivo.

Configure a textura conforme a tela abaixo.

Textura: foi usado o Piano Keys com o valor 11

Quarto passo:

Procure a sua esquerda a ferramenta texto ( text tool ).

E digite Conforme a imagem a seguir: utilizei a fonte tamanho 12, arial black e cor branca.

Quinto passo:

Procure a ferramenta Pointer tool e clique nela , selecione o texto que você digitou .

Agora temos que transformar esse texto em um botão. Aperte a tecla F8 ou se preferir você pode ir pelo menu :

Vai aparecer está tela e você vai marcar a opção Button e colocar o nome do botão conforme a tela abaixo.

Sexto passo :

Clique no menu Janela ( Windows opção Library ).

A sua direita vai aparecer uma opção chamado Library. Repare que essa opção vai mostrar o botão que você criou.

Provavelmente seu botão tenha ficado igual a foto abaixo.

Quando você cria um botão o Fireworks coloca uma seleção verde indicando uma fatia. Para ficar mais agradável vamos ocultar essa fatia. Clique no botão indicado na imagem abaixo. Lembrando que este botão encontra-se na caixa de ferramentas.

Sétimo passo:

Vamos colocar no botão página principal uma mudança de cor quando o usuário passar o mouse.

Clique duas vezes no botão Página principal e vai aparecer a seguinte tela:

Clique na guia Over, vamos fazer com que o botão troque de cor quando o mouse passar por ele.

Mais primeiro você precisa copiar o botão que se encontra na UP. Para isso clique no botão copy Up Graphic.

Depois disso basta escolher a cor na parte inferior da tela. Fique a vontade lembrando que é sempre bom escolher uma cor que combine com seu site. Depois clique em done.

Oitavo passo:

Caso você queira testar o menu no navegador basta apetar a tecla F12 ou se preferir Menu file opção Preview in Browser.

Quando você estiver criando um menu e necessário que ao clicar apareça uma outra página, por isso teremos que criar os links. No nosso caso vamos imaginar que meu link seja esse.

Nono passo:

Agora termos que criar os outros botões mais você não vai precisar repetir todo esse processo.

Basta você clicar a sua direita na opção Library e arrastar para o arquivo.

Mude o nome do botão, veja a foto abaixo.

Agora o restante e com vocês.

Caso você queira salvar o menu que você criou em html. Clique sobre o menu File opção Export.

Qualquer dúvida entre em contato.

Um abraço a todos e fica com Deus!