Criando um botão

Nesse tutorial, eu irei ensinar a fazer um botão que muda de cor ou tamanho quando o mouse passa pelo botão (onMouseOver)

Siga a página para ver o tutorial.
Comentários são bem-vindos 

O que eu vou precisar?
Você vai precisar do programa de edição de imagens Fireworks.

Vamos começar.

1° Passo:
Abra um novo documento, com o tamanho do botão.


Free Image Hosting at allyoucanupload.com
Precisa ser desse tamanho?
Não, você faz do tamanho que quiser, tudo depende da utilidade do seu botão. Você decide o tamanho.

2° Passo:
Pinte o fundo. Se você não esta acostumado com Fireworks, provavelmente vai tentar pintar o fundo com a “Lata de Tinta”, isso não funciona com fireworks. Você precisa criar um quadrado e pintá-lo.
Se quiser fazer um charme como um degradê, fique à vontade. Abuse da sua criatividade.


Free Image Hosting at allyoucanupload.com

Como eu faço esse tal de Degradê?
É bem simples: Selecione o seu quadrado, clicando nele, procure o menu em que está escrito “Nenhum”. Clique nele e selecione um modo de preenchimento.
Eu escolhi o modo linear, mas você pode escolher o que quiser. Novamente, depende da sua criatividade.

Free Image Hosting at allyoucanupload.com

3° Passo:
Escreva o texto do botão. Aqui você pode abusar de fontes, cores, tamanhos e efeitos.
Free Image Hosting at allyoucanupload.com

4° Passo:
Selecione o quadrado (clicando nele) e pressione o botão F8, selecione a opção “Botão” e clique em “OK”
Free Image Hosting at allyoucanupload.com

5° Passo:
Repare que o seu quadrado ficou verde! Não se preocuope, é assim mesmo. Clique duas vezes no quadrado.
Não mude nada nessa janela.
Clique na aba “sobre”.
Free Image Hosting at allyoucanupload.com
Depois, clique no botão “copiar grafico acima”
Free Image Hosting at allyoucanupload.com
Não encontrei a aba “Sobre”!
Procure no canto esquerdo acima.

Não encontrei o botão “Copiar Grafico Acima”!
Procure no canto direito, no lado de baixo da tela..

6° Passo:
Faça as edições que você quiser. sejam elas no tamanho, nas cores, no que for. O resultado aparecerá quando a pessoa passar o mouse por cima do botão.

Free Image Hosting at allyoucanupload.com

7° Passo:
Clique na aba “Abaixo”, do lado da aba “Sobre”.
Clique novamente em “Copiar Grafio Acima”.
faça novamente suas modificações. O resultado aparecerá depois que a pessoa clicar no botão, aconcelho você a deixar a imagem mais fraca, mexendo na sua opacidade.
Free Image Hosting at allyoucanupload.com

8° Passo:
Clique em “Concluído”.
Você voltará para a imagem inicial.
Para visualizar seu botão, pressione a tecla F12.

Se quiser, faça mais algumas alterações.
Então é isso.
Espero que seja útil.
Qualquer dúvida, entre em contato

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: