Criando um Banner Animado 120×60 – Gimp 2.4.6

Criando um Banner Animado no Gimp tipo GIF (120×60)

Neste tutorial vou explicar passo a passo como construir um banner animado 120×60 (gif), como já fizemos este mesmo banner no Fireworks 8 en, agora vamos utilizar uma alternativa gratuita, o Gimp 2.4.6 . O Download pode ser feito neste link http://www.gimp.org/

Exemplo deste Tutorial

Para quem não conhece o Gimp ele tem um sistema de janelas independentes. (imagem GIMP 2.4.6)

Gimp 2.4.6

• 1 – Criando uma nova imagem.(imagem 1)

1.1 – Criamos uma nova imagem, no menu principal “File->New” (Ctrl+N) e configuramos com width:120, height:60 (pixels), para ver todas as opções, clique em “Advanced Options” (Opções Avançadas) e a seguir configure: “X Resolution:72” e “Y Resolution:72” e em “Fill With:” escolhas “Transparent” (Transparência) e clique em “OK”.

imagem 1

• 2 – Com a nova imagem criada, iremos desenhar o rectângulo como fundo do banner.(imagem 2)

2.1 – A nova janela deve estar em tamanho pequeno, você pode esticar[a] a janela para o tamanho que te der mais jeito.
2.2 – Seleccionamos a ferramenta “Rectangle Select Tool”(Selecção Rectângulo)[b], desenhe um rectângulo menor que a nossa Área de trabalho.
2.3 – Agora vamos preencher o nosso rectângulo com a cor branca, para isso seleccionamos a ferramenta “Bucket Fill Tool” (preenchimento)[c] e alteramos a posição das cores em “Foreground & Background” clicando na Seta de inversão de cores [d], de forma que o branco fique por cima, com isto feito clique dentro da nosso rectângulo e já devemos ter ele a branco.
2.4 – Para ajustar o tamanho clicamos no “Scale Tool” (Ferramenta Escala)[e], a seguir clicas em cima do rectângulo branco e irá abrir uma nova janela [f], altere os valores para Width:120 e Height:60 e clique em escala.

imagem 2

• 3 – Posicionando a imagem no centro da Área de trabalho.(imagem 3)

3.1 – Seleccione a ferramenta “Alignment Tool”[a] e clique novamente em cima do nosso rectângulo branco, para alinhar clique em: “Align Center of Target”[b] e “Align Middle of Target”[c], já temos o nosso rectângulo alinhado dentro da área de trabalho, esta ferramenta será útil para alinhar textos e outras imagens.

imagem 3

• 4 – Adicionando imagem ou texto. (imagem 4)

4.1 – (Se não quiser adicionar uma imagem, salte para o passo 4.3) Para adicionar uma imagem, clique em “File > Open as Layers…” escolha a imagem de sua preferência, pode redimensionar e alinhar a imagem conforme explicado nos passos 2.4 e 3.1.
4.2 – Para mover a imagem ou texto utilize a ferramenta “Move Tool”[a], pode mover os objectos pela sua área de trabalho livremente.
4.3 – Adicionar o texto – clique na ferramenta “Text Tool”[b], clique na área de trabalho e uma nova janela irá abrir, digite o seu texto nesta na caixa, para fazer os ajustes no texto(fonte, cor, tamanho, alinhamento), você pode utilizar a janela de opções de texto [c], efectue alterações de forma que o texto se encaixe na sua área de trabalho..

imagem 4

Já temos o nosso Banner básico pronto. Agora vamos a animação do banner.

• 5 – Trabalhando com Layers. (imagem 5)

5.1 – Com o nosso texto criado anteriormente, agora iremos duplicar a layer texto[a], com a layer texto seleccionada, clique em cima do botão “Duplicate Layer”[b].
5.2 – Vamos alterar a nossa nova layer, mas antes temos de ocultar a layer de texto anterior para não modificarmos a layer errada, clique em ocultar/mostrar[c], em seguida seleccione a nova layer, clicando em cima dela, vamos fazer um efeito bem simples no texto, um fade, regule a opacidade para 30 [d] e já temos um efeito simples para perceber este tutorial.
5.3 – Dica:
– se quiser adicionar uma sombra no seu texto, seleccione o texto(layer do texto), depois “Filters>Light and Shadow>Drop Shadow…” na janela que abrir desmarque a opção “Allow Resizing” e clique em OK. Teste todos os efeitos que quiser, só assim aprendemos a utilizar um programa, para desfazer o efeito que não esteja ao seu gosto use o “CTRL+Z” para voltar atrás ou para refazer “CTRL+Y”.
– você também pode movimentar as layers, mudando as posições, matenha a layer segura com o botãoo esquerdo do rato, mova e solte (layer acima ou abaixo).
– quando você quiser que um texto ou imagem fiquem fixos no seu banner, clique com o botão direito do rato em cima da layer que tem o conteúdo a ficar fixo, a seguir escolha a opção “Merge Down” ele fixa com o frame que estiver logo abaixo dela (geralmente fixamos com o fundo).

imagem 5

• 6 – Salvar no formato padrão do GIMP e exportar nosso banner gif . (imagem 6a e 6b)

6.1 – Como todo programa tem sua extensão por padrão, exemplo: Fireworks (png), no GIMP sua extensão por padrão é xcf.
6.2 – Para podermos editar nosso banner sempre que precisarmos, salve este exemplo como banner.xcf “File>Save As…”.
6.3 – Exportando para o formato gif, clique em “File>Save As… ” dê o nome banner.gif e clique em gravar, seguirá uma nova janela, escolha gravar como animação e clique em “exportar”(imagem 6a), a seguir mais uma janela se abrirá, altere o valor “Delay Between Frames…” para 300 milissegundos (imagem 6b), esse é o tempo de transição do seu gif.

imagem 6a

imagem 6b

Com isso já tens o seu banner a funcionar, para quem está a iniciar no Gimp, deu para perceber que esse não é o programa mais fácil de trabalhar com banners, mas é gratuito e com muitas funcionalidades, um excelente programa para trabalhar fotos e imagens diversas.

* Vou acrescentar esta dica para as pessoas que estão a iniciar no Gimp. Em uma pesquisa pela rede encontrei um vídeo tutorial em português muito bem explicado, para ver o artigo acesse: vídeo curso completo de GIMP nível iniciante por LedStyle. *1

Até a próxima.

Editado:
*1 – 30/07/2008 – Dicas Iniciantes Gimp