Novidades100 - Dicas de Internet e Computador

Criar Banners para Sites e Blogs

Veja Como Criar e Adicionar Seus Próprios Banners no Seu Site e/ou Blog

Os banners são ferramentas fortíssimas para anunciar, direcionar usuários para uma determinada página, ou mesmo enfeitar seu site ou blog. Se você ainda não sabe como criar banners, siga esta dica e aprenda rapidamente o básico, depois você improvisa à sua maneira.
→ Para começar, baixe e instale o programa Microsoft GIF Animator, que você encontra aqui: Gif Animator Download
→ Baixe e instale também FastStone Photo Resizer, deste endereço www.fastsone.org
Não se preocupe, pois são dois programinhas muito bons, confiáveis, leves e gratuitos.
As imagens que serão usadas para a criação dos famosos banners, você vai pode utilizar o próprio editor de imagens do windows: o paint. Se você usa outro sistema operacional, com certeza deve haver um editor de imagens. Basta apenas fazer funcionar a sua criatividade, colocando boas imagens e textos, não esquecendo de utilizar a ferramenta de textos dos editores de imagens.

Veja dois exemplos de Banners

Atenção: Estas imagens foram reeditadas utilizando um importante aplicativo para edição de imagens, você pode ver sobre ele AQUI

banners tamanho 468x60px - apenas link a imagem para o url do destino desejado.
Atenção! Estas imagens foram criadas no paint rapidamente, são apenas duas imagens com cores invertidas, ou utilizando text0s sobre imagem. Você pode incrementa-las muito mais, deixando-as mais atraentes.
É fundamental criar a imagem exatamente com a mesma altura e largura que vai ser o banner. Para fazer isto, quando abrir o paint (se for fazer nele), coloque o mouse sobre o canto inferior direito do quadro do paint aonde ficará a imagem e vá aumentando largura e altura, observando no canto inferior direito de todo o paint (próximo à barra de notificação do windows) e deixe-as exatamente como vai ser a imagem (largura e altura).

Depois que tiver editadas as suas imagens, que para melhor aproveitamento deverão estar em tamanho padrão de banners: altura e largura. São vários formatos. Veja os mais utilizados:
Horizontais: 125x125, 300x250, 468x60, 728x90, etc.
Verticais: 150x350, 160x600, etc.
Agora vamos a criação propriamente dita dos banners.
Escolha as imagens que você deseja para produzir o banner e converta-as para o formato gif (é sempre conveniente utilizar poucas imagens, para que fique leve) e com um tamanho, como já foi dito, padrão de banners.

Abra o programa faststone photo resizer e escolha o diretório aonde estão suas imagens, click sobre elas (as imagens) sombreando-as, e click em add, na janelinha à direita. Logo abaixo da janelinha estão suas opções de configuração. Click em Setting e marque gif. Agora escolha a pasta aonde você quer salvar suas imagens já convertidas. Ex: Meus Documentos\minhas imagens.
Para indicar o tamanho da imagem, marque use advanced options, e marque a primeira guia, resize, escolha então a largura e a algura da imagem, depois click em convert.
Pronto. A parte das imagens já estão completadas. Agora vamos a criação propriamente dita do banner.
Abra o Microsoft Gif Animator, click na segunda guia na barra de ferramentas e escolha suas imagens para adicionar.
Obs: tem que ser uma a uma. Depois de adicionar a primeira a partir daí click na quarta guia da barra de ferramentas, o sinal de +.
Quando tiver adicionadas todas as imagens, abra a segunda guia da janela da direita animation, marque a caixa looping e repeat forever.
Agora na terceira guia na mesma janela, image, em duration (1\100s) marque o valor que você deseja que permaneça em exibição cada imagem.
Agora, para testar se está de acordo com o que você quer, click no pequeno botãozinho de play, no canto superior direito. Se ficou boa, basta clicar em salvar e pronto. Está concluído banner.
Para inserir o banner no seu site ou blog, basta apenas que você hospede o arquivo da imagem em algum servidor (Se for site, pode ser no próprio servidor) e chame-o com o seguint script:

<a href="http://www.nome-do-seu- site.com.br"> <img src="http://www.site_ onde_hospedou_a_imagem/diretorio_da_ imagem/nome_da_imagem.gif"> </a>

Observação: Não esqueça sua extensão .gif

Atenção: Fiz algumas alterações nos banners de exemplos, adicionei a propriedade background às imagens. Você pode fazer isto também no FastStone, em Advanced Options, na guia Watermarker. Para alterar a visibilidade da imagem de fundo, côrra o botão Opacity, depois clique em ok.

| | HomePage | Relatar Problema |