Coluna da Semana - Tutorial! Como fazer gifs animados!

Olá galera! Em primeiro lugar, para as mulheres, parabéns!

Como vcs viram nossa enquete foi encerrada!

Obrigado pelos 39 votos:

69% das pessoas acharam o novo TotalMJ! Super! Demais! \o/

15% Nota 10!

10% Exagerado.

5%   Bom.

Pelo visto vcs pessoas gostaram da nosssa repaginada! ;D

Agora uma nova enquete foi lançada! O que vc mais gosta no calendário do TotalMJ? Responda pra gente ali ao lado! ^^

E agora sim... vamos a Coluna da Semana, algumas pessoas perguntam como fazemos esses gifs animados.

Então resolvi fazer um tutorial!  

Esse tutorial será composto de 2 etapas, como fazer imagens personalizadas, e como fazer imagens animadas!

1. Como fazer imagens personalizadas

Em primeiro lugar vá a este endereço: (atualizado!) http://download.macromedia.com/pub/fireworks/esd/fireworks_mx_trial_br.exe E baixe o programa MACROMEDIA FIREWORKS 8. É o editor que eu uso, que acho mais fácil que o Photoshop.

Depois de instalar o programa abra um novo arquivo..

Vamos começar fazendo um avatar.

1.1- TAMANHO DA TELA

Quando abrir a tela de tamanho coloque: largura:100 e altura:100

Vamos fazer um avatar com a Mônica e o Cebola escrito TotalMJ!

Na parte inferior da tela está a barra Propriedades, lá clique no quadradinho ao lado de tela, e escolha a cor #99CC00, que é verde meio abacate, ou uma cor sua preferência.

1.3- ESCREVENDO O TEXTO

Agora vamos escrever... na barra ferramentas... clique na ferramenta texto (o A, igual no paint), depois clique no avatar, vai aparecer uma caixa de texto, então digite o texto, que nesse caso é "TotalMJ". Deve ficar assim:

Não está muito legal ainda, né?
Então vamos arrumar essa fonte...

1.4- MUDANDO A FONTE

Clique no seu texto para selecioná-lo, repare que a barra propriedades agora mudou, fala do seu texto... e é ali que você encontra tudo o que precisa pra deixar a letra da sua plakinha demais!

a) MUDANDO O TIPO E O TAMANHO DA FONTE:
A fonte contribui muito para o visual... se vc não tem muitas fontes legais, vá a esse site, lá vc encontrará a ideal! www.dafont.com

Agora, clique no nome da fonte, que agora está Arial... vai aparecer todas as fontes q vc tem, escolha clique nela e pronto! Vamos usar a Comic Sans MS, no tamanho 22.

b) MUDANDO O ESTILO E A COR DA FONTE

Escolher o estilo de uma fonte é dizer se vc quer ela em negrito, itálico, sublinhado, etc... no nosso caso escolha negrito, na barra propriedades.

E para mudar a cor da fonte, é só clicar no quadradinho ao lado do tamanho da fonte, escolha Verde Escuro (#006600). Já está melhorando mas, vamos fazer o contorno de outra cor... clique no quadradinho ao lado de um lápis na barra propriedades e escolha branco (#FFFFFF).

1.5 - COLOCANDO UMA IMAGEM NO AVATAR

a) Se a imagem estiver no seu computador:
Clique em EDITAR => BIBLIOTECAS => OUTRO...

Isso vai abrir uma janela, escolha a imagem e clique em abrir.

b) Se a imagem estiver na internet

Apenas clique com o botão direito, copie e depois vá em seu avatar e digite ctrl + V.

USE ESSA IMAGEM:

Essa imagem está no tamanho certo, é só posicioná-la, mas se a imagem que vc for usar estiver muito grande siga estes passos para diminuí-la:

1 - Clique na imagem.
2 - Na barra de ferramentas clique na ferramenta dimensionar que fica abaixo da setinha preta.
3 - Diminua a imagem até que fique do tamanho desejado.

1.6 - MODIFICANDO A IMAGEM

a) vamos tirar o branco, na barra de ferramentas selecione a ferrramenta varinha mágica (é sério :D ). E com a varinha clique em uma área branca e aperte delete. Pronto!

b) Vamos por um brilho BRANCO na imagem: clique na figura, veja que a barra PROPRIEDADES mudou mais uma vez. Nessa barra clique no + que tem ao lado de efeitos, depois clique em SOMBRA E BRILHO => BRILHO.

Vai aparecer um quadrinho: Troque a cor do brilho de vermelho para azul.

c) Agora vamos enviar a imagem para o fundo, para que o texto apareça: Aperte Ctrl + Seta p/ baixo, até que fique onde vc deseja.

d) Coloque o brilho branco no texto, seguindo os passos da letra b)

Sua imagem deve estar assim:

1.7 - SALVANDO A IMAGEM (IMPORTANTE)

Se vc for em arquivo -> salvar, a imagem será salva em arquivo PNG, que só abre em FIREWORKS, e alguns sites da internet não aceitam. Salve em PNG, como um projeto, pois vc poderá editar depois. Então, pra salvar sua imagem em gif siga esses passos:

a) Clique em Arquivo => VISUALIZAR EXPORTAÇÃO

irá aperecer um quadro:

Escolha o formato GIF OU JPG, e depois clique em EXPORTAR...
SALVE O ARQUIVO, hospede em algum site...como por exemplo o http://photobucket.com/ ou no seu próprio blog! E mostre pra todo mundo!!

Pronto! Eu fiz uma bem simples, para ficar mais fácil de aprender!
Mas agora é com vcs!! Mudem as cores, as frases e as imagens!

2. COMO FAZER IMAGENS ANIMADAS

IMPORTANTE! Antes de começar leia o tutorial como fazer imagens personalizadas!

Precisaremos destes conceitos para esse nível!!!

Vamos usar a imagem do tutorial anterior, ok?

2.1) ANIMANDO A IMAGEM

a. Abra a sua imagem .png criada antes.

b. Duplique a moldura, seguindo esses passos, mostrados abaixo:

EDITAR => INSERIR => MOLDURAS

c. A nova moldura estará em branco, então selecione tudo na outra moldura (Ctrl + A), e cole na nova moldura, para criar a animação... Posicione a imagem, Mude a cor da fonte, e o brilho, como no exemplo:

Está pronto, agora é só salvar como gif animado!

:!: IMPORTANTE :!:

2.2. ANIMANDO O AVATAR

1. Agora vá em ARQUIVO -> VISUALIZAR EXPORTAÇÃO
Aparecerá um quadro, escolha o formato GIF ANIMADO.

2. Clique em animação e escolha o tempo de cada moldura. Selecione as duas molduras e digite 20 no quadradinho embaixo do cronômetro. Clique em exportar! 

3. Pronto! Agora sua imagem deve ter ficado assim:

Agora é com vc, use a criatividade e faça várias animações!
Espero q tenham gostado e aprendido, Dúvidas? Comente! :D :D