[ Curso Fireworks]- Conhecendo o programa e criando um simples menu. | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

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

Por Philipe Cardoso
Categoria: Tecnologia
jun 2nd, 2009
3 Comments
3324 Views

logofireworks

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.

tela

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.

menupronto

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:

novodocumento

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 :

foto2

foto3

Terceiro passo:

Crie um retângulo do tamanho exato do arquivo.

foto5

Configure a textura conforme a tela abaixo.

Textura: foi usado o Piano Keys com o valor 11

foto6

Quarto passo:

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

foto7

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

foto8

Quinto passo:

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

foto9

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

foto10

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

foto11

Sexto passo :

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

foto12

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

foto13

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

fotto14

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.

foto15

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:

foto16

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.


foto17


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.

foto18

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.

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

foto20

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!

About "" Has 2042 Posts

23 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

3 Responses to “[ Curso Fireworks]- Conhecendo o programa e criando um simples menu.”

  1. Bruno Natal disse:

    💡 Photoshop ROX 💡

  2. Nayara disse:

    Eu já tentei baixar esse programa varias vezes mas nunca consigo se vc tiver um link que possa mim ajudar a resolver o meu problema eu ficarei muito grata.
    beijos e obrigada.

  3. Yes! Finally someone writes about microsoft windows.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *