Como criar Banners/Buttons para seu blog!

Pessoal, essa é uma grande dúvida, ou melhor, dificuldade, que muitos têm, por isso, vim explicar o passo-a-passo com essa pequena aulinha, que não é de HTML, mas merece estar entre os tutoriais (que eu parei de fazer já faz um bom tempo).

Bom, primeiro, vamos dividir a aula em etapas...

1 - Criando a imagem:

Vamos usar o programa PhotoFiltre, que é bem fácil de mexer!

Ao abrir o programa, clique em Arquivo e uma janela se abrirá. Nela vc pode escolher o tamanho da imagem que quer criar. Coloque 88 pixeis de largura por 31 pixeis de altura.

Pronto! Agora é com vc! Ao lado, em verde, temos a paleta de cores, que é "personalizável". Ao clicar em uma das setas, dá pra "pular" de paleta em paleta. Vc pode escolher as mais diversas cores e tonalidades para fazer o fundo de seu button.

Agora que preencheu o fundo com uma cor de sua preferência (ou não), clique em Camada > Novo > Abrir como camada e selecione uma imagem para colocar em cima da imagem atual, ou seja, o button.

A imagem irá aparecer centralizada, mas ao segurar com o mouse em cima dela, é possível arrastá-la.

Se colocar mais de uma, a telinha em laranja, na imagem, vai mostrar a nova camada e vc pode arrastá-las pra cima ou pra baixo, definindo qual vai se sobrepor à outra.

E por último, mas não menos importante, o texto. Para colocar um texto na sua imagem, é só clicar na ferramenta em destaque na imagem. Uma janelinha vai se abrir e ali vc pode personalizar como quiser o seu texto, colocando vários efeitos... Fique à vontade para criar o seu "logo".

Se o seu banner não for animado, ele estará pronto aqui,
mas, se vc quiser fazer uma animação, terá de criar várias imagens para torná-las frames das animações. Portanto, siga nossa próxima etapa!

2 - Criando a animação:

Para criar a animação, vamos precisar de outro programa, o PhotoScape...

Ao abrir a interface do programa, escolha a opção "Animação GIF", como na imagem:

Ao clicar ali, uma nova tela se abrirá. No canto direito, uma janelinha com as pastas de seu computador se abrirá. Ache sua imagem, clique em cima dela e arraste-a para a área que diz "Solte sua foto aqui"

Coloque as imagens que formarão sua animação em ordem, uma atrás da outra e elas já começarão a "piscar". Está tudo pronto, mas vc ainda pode trocar o efeito da animação, o tempo, entre outros...

Clique em salvar e seu banner está pronto! Agora é só hospedar em algum site de fotos (no blog é mais fácil) e pegar o código HTML da imagem e colocar no seu site, para que os "parceiros" possam distribuir por seus sites/blogs.

----------------------------------------------

Os programas que foram utilizados para fazer essa aula são:

*PhotoScape
*PhotoFiltre (Antigo PhotoFiltre Studio X)

Ambos podem ser baixados facilmente pela internet!

Aliás, vcs podem, clicar nos nomes dos programas acima que serão redirecionado para suas páginas de Download no Baixaki! Só tem um porém: as versões dos programas parecem estar bem mais atualizadas que as minhas versões, por isso, vai ser um pouco mais complicado mexer, mas é basicamente a mesma coisa ((se vc baixar os programas corretos, é claro))!

Então, boa sorte na criação de seus Banners e até a próxima!

----------------------------------------------

Créditos a baixaki.com.br pelos downloads
e
Créditos aos  desenvolvedores dos programas que foram utilizados nesta aula !!!