Você está na página 1de 5

Criando um Banner Animado no Gimp tipo GIF (12060)

Neste tutorial vou explicar passo a passo como construir um banner animado 12060 (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 linkhttp://www.gimp.org/

Exemplo deste Tutorial Para quem no 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 opes, clique em Advanced Options (Opes Avanadas) e a seguir configure: X Resolution:72 e Y Resolution:72 e em Fill With: escolhas Transparent (Transparncia) e clique em OK.

imagem 1

2 Com a nova imagem criada, iremos desenhar o rectngulo 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(Seleco Rectngulo)[b], desenhe um rectngulo

menor que a nossa rea de trabalho. 2.3 Agora vamos preencher o nosso rectngulo com a cor branca, para isso seleccionamos a ferramenta Bucket Fill Tool (preenchimento)[c] e alteramos a posio das cores em Foreground & Background clicando na Seta de inverso de cores [d], de forma que o branco fique por cima, com isto feito clique dentro da nosso rectngulo 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 rectngulo 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 rectngulo branco, para alinhar clique em: Align Center of Target[b] e Align Middle of Target[c], j temos o nosso rectngulo 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 no 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 preferncia, 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 opes de texto [c], efectue alteraes de forma que o texto se encaixe na sua rea de trabalho..

imagem 4 J temos o nosso Banner bsico pronto. Agora vamos a animao 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 boto Duplicate Layer[b]. 5.2 Vamos alterar a nossa nova layer, mas antes temos de ocultar a layer de texto anterior para no 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 opo Allow Resizing e clique em OK. Teste todos os efeitos que quiser, s assim aprendemos a utilizar um programa, para desfazer o efeito que no esteja ao seu gosto use o CTRL+Z para voltar atrs ou para refazer CTRL+Y. - voc tambm pode movimentar as layers, mudando as posies, matenha a layer segura com o botoo 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 boto direito do rato em cima da layer que tem o contedo a ficar fixo, a seguir escolha a opo Merge Down ele fixa com o frame que estiver logo abaixo dela (geralmente fixamos com o fundo).

imagem 5

6 Salvar no formato padro do GIMP e exportar nosso banner gif . (imagem 6a e 6b)

6.1 Como todo programa tem sua extenso por padro, exemplo: Fireworks (png), no GIMP sua extenso por padro 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 animao 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 transio do seu gif.

imagem 6a

imagem 6b