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/

Banner no Gimp
Exemplo deste Tutorial

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


Gimp Janelas

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 - Gimp

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 - Gimp

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 - Gimp

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 - Gimp

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 - Gimp

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 - Gimp

imagem 6a


Imagem 6b - Gimp

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

Tagged on:     

3 thoughts on “Criando um Banner Animado 120×60 – Gimp 2.4.6

  • 18 de Abril de 2009 at 19:58
    Permalink

    Realmente,esse é mais um dos ótimos tutoriais que contribuem para o entendimento de iniciantes como eu.A didática é excelente e não houve nenhum contra tempo na realização do mesmo.Meu banner ficou bem legal graças às sua explicações passo-a-passo.Parabéns e até o próximo tutorial.

  • 14 de Março de 2009 at 13:41
    Permalink

    Aew! Muito bom o tutorial. Vlw!

  • 10 de Julho de 2008 at 2:01
    Permalink

    Oi Priminhu, tava olhando seu site, coisas complicadas para mim! hauhauahua, Mas como ultimamente ando mechendo muito com banner’s por causa de trabalhos escolares, me interresei por esse tópico! Muito legal e bem explicativo! Bjos Continue sempre sendo este vencedor! Amo te

Comments are closed.