Dois Cliques

Vou dar uma dica para quem quer saber como se cria um banner animado para blogs e flogs. Os banners animados podem ser criados no formato GIF ou em Flash. Para quem chegou tarde, GIF é o formato de um ficheiro de imagem assim como o JPEG ou PNG mas o GIF pode ser também usado para imagens animadas.

Com este formato podem ser usadas várias imagens "paradas" para criar uma animação, ou seja as imagens são mostradas em sequência contínua de forma a criar a animação. Bem, eu estou a falar em Gifs animados mas para este post vou usar banners em flash, mas não se preocupe, não é tão assustador como parece…

Criar banners online

Há duas formas de criar banners: usando um programa de edição de imagem no seu computador, ou usando algum site que lhe permita fazer o trabalho online e de forma mais fácil, e de preferência grátis! Vou falar apenas na segunda opção.

Então um site para criar banners online em flash é o Banner Snack, as únicas desvantagens são que para o usar é necessário fazer login com a conta do Google ou Facebook o que algumas pessoas poderão não gostar, e o site está em inglês, mas como "a cavalo dado não se olha o dente" tudo bem.

Por outro lado, as vantagens são que não precisa de fazer download de nenhum software eliminando assim os riscos de vírus e afins, e a facilidade de uso, já que qualquer pessoa pode criar banners mesmo que nunca tenha mexido num editor de imagens.

Antes de criar o seu banner online pode ser boa ideia navegar pela galeria de banners deles e ver os óptimos exemplos de coisas que se podem fazer, bom para quem está com pouca criatividade. Por outro lado algumas são tão boas que se podem tornar desmotivadoras…

Como se cria um banner animado no Banner Snack

É fácil criar banners animados no Banner Snack: Comece por clicar no botão "make a banner" ("faça um banner") que está na página inicial:

Depois clique na opção para criar novo banner, caso já tenha usado o site antes os seus banners anteriores aparecem na sua conta, como na imagem abaixo:

Adicione a imagem que quer usar no banner a partir do seu próprio computador navegando até à pasta onde ela está e seleccionando-a:

De seguida pode adicionar texto ao banner usando os botões no topo da janela, editá-lo e arrastá-lo para qualquer área da imagem:

Também pode adicionar botões e animações a partir do menu no lado direito do editor, há centenas de efeitos por onde escolher, na imagem abaixo pode ver alguns dos botões disponíveis:

Pode adicionar novas imagens, efeitos, cores de fundo, etc. Quando terminar, o banner ficará disponível na sua página no Banner Snack, e pode escolher onde quer usá-lo, pode ser em blogs, flogs, redes sociais, fóruns, etc. Clique na opção pretendida para obter o código que deve usar para mostrar o seu novo banner animado:

Como é de esperar num serviço como este os banners animados grátis ficam com uma marca d'água (watermark) com o nome do site, creio que para desactivar isto só pagando.

Ah, e o site ainda oferece um e-book grátis em PDF para download que ensina as melhores práticas para fazer publicidade usando banners!

Agora que sabe como criar banners animado online e grátis já pode começar a fazer os seus GIFs animados com imagens engraçadas de animais, de pessoas a caírem de bicicletas, e fotos da sua prima no banheiro (ops!).

Veja como fazer para pôr um banner no blog Sapo: Entre no painel de administração dos blogs sapo, clique em "Personalização", e "Intermédia".

Depois clique no separador "Imagens" e procure por "Imagem de cabeçalho". Indique o endereço do banner que quer usar como cabeçalho no blog. Pode em qualquer momento voltar a usar o banner original do template do blog clicando em "Repor original". Também podem definir se quer que o banner se repita (pode ser útil no caso de imagens pequenas), e ainda o alinhamento dele (à esquerda, centrado, etc).

Pôr banner no blog - Personalização Avançada. Em alternativa a este método, também pode criar o banner indo a Personalização > Avançada > Opções avançadas > Editor CSS, e alterar a referência ao url onde está o banner que quer colocar no blog.

Para fazer isto, procure pelo código "#header {background:url" (deve estar no início) e altere o endereço pelo que quer usar para mostrar o banner no topo do blog.

Fiz esta vídeo aula mostrando como editar banners de blogs usando o editor de imagens MS Paint do Windows. As dicas dadas na aula são básicas mas podem ser úteis para quem quer aprender a criar banners para sites e blogs ou editar o banner do seu blog.

No vídeo editei o banner de um blog wordpress que tinha instalado localmente mas também poderia ter usado um blog num servidor remoto, e claro, isto pode ser usado para banners em qualquer plataforma, blogs sapo, blogspot, etc.

Ah, e não se surpreenda quando ouvir a voz que narra o vídeo… Não, eu não fiz uma operação de mudança de sexo… Usei uma voz artificial de um programa que converte texto em voz. ;)

Vídeo Aula - Editando um banner para blog

(Clique na imagem para abrir a página com o vídeo)

Texto da video aula

Segue o texto usado no vídeo pela "Madalena":

Olá, eu sou a Madalena e neste vídeo vamos aprender a adicionar imagens a um banner com o programa MS Paint.
Vamos começar por ir ao menu Iniciar e abrir o programa ms paint que está na pasta Acessórios que fica dentro da pasta Todos os Programas.

Depois vamos abrir o nosso blog com o banner que queremos modificar. Neste exemplo estamos a usar um blog instalado localmente no nosso computador.

Guardamos a imagem no Ambiente de Trabalho usando a opção "Guardar Imagem Como" do navegador. Neste  vídeo estamos a usar o navegador Firefox.

De volta ao Ambiente de Trabalho vamos procurar a imagem que acabamos de guardar e vamos arrastá-la para dentro da janela do Paint.

De seguida podemos começar a editá-la. Neste exemplo vamos modificar a barra inferior seleccionando uma pequena área com a ferramenta de selecção e  esticá-la para o lado direito de forma a esconder uma parte branca do banner que não queremos mostrar no nosso blog.

Depois vamos ao menu Editar e seleccionamos a opção "Colar de..." para adicionar uma imagem ao banner a partir do nosso computador. Podemos redimensionar as imagens e arrastá-las para onde queremos que  fiquem.

Também podemos fazer outras modificações nas imagens como por exemplo, alterar ou inverter cores, ampliar ou reduzir as imagens, rodá-las, ou invertê-las vertical ou horizontalmente. Para refazer acções podemos a qualquer momento usar o atalho de teclado ctrl + z.

Neste exemplo vamos ainda inserir uma segunda imagem a partir do menu Editar e Colar. Como apenas queremos usar uma parte da imagem, seleccionamos a área que vamos manter e depois a opção Cortar ou Copiar a partir do menu do botão direito do rato. Usamos o atalho ctrl + z para fazer desaparecer a parte da imagem que não vamos usar, e clicamos em Colar a partir do menu direito do rato. Vamos clicar nos contornos da imagem e arrastar o rato para reduzir a imagem e vamos inseri-la no espaço disponível.

Quando uma imagem estiver como queremos podemos clicar com o rato fora dela para que seja colada ao banner.

Neste exemplo vamos ainda mudar a cor da barra superior. Para isto usamos a ferramenta de selecção para seleccionar a área a alterar e depois o menu Imagem, seleccionando a opção "Inverter cores".

Neste exemplo vamos clicar no contorno direito da área seleccionada e esticá-la de forma a abranger todo o banner. Quando uma imagem estiver como queremos podemos clicar com o rato fora dela para que seja colada ao banner.

Quando o banner estiver pronto, podemos guardá-lo no Ambiente de Trabalho através do menu Ficheiro e da opção "Guardar como". Podemos escolher entre vários formatos de ficheiro.

Agora já podemos enviar o novo banner para o nosso blog.
Note que neste exemplo não estamos a usar um servidor externo, por este motivo as pastas com os ficheiros do blog estão no nosso próprio computador.

De seguida vamos procurar a pasta com os ficheiros do blog que estamos a usar e abrir a pasta de imagens.  Renomeamos o banner antigo para o caso de o querermos voltar a usar e copiamos o novo banner para dentro da pasta. Ele deve  ficar com o mesmo nome do banner antigo.

Já podemos voltar ao navegador e recarregar a página para vermos o nosso blog com o novo banner.