Tutorial: Imagem que se movimenta!!!

Oi gente!!!

Bom, no último post prometi contar pra vocês como fazer a foto que se movimenta sozinha igual essa aqui:

Nessa foto usei somente 2 imagens formando 2 quadros...

Como sou uma alma boa, vou tentar explicar diretinho como fazer...

Nunca fui e ainda não sou "pró" em computador, por isso, considero esse tutorial super fácil...

Eu usei como referência nesse post o Dicas Blogger, que é onde eu sempre aprendo coisas bacanas pra fazer meu bloginho um "must"! As imagens também foram retiradas de lá...

Vamos ao que interessa!!! 

•  Primeiro passo é ter uma conta num site que hospede imagens (porque você vai precisar do código HTML da imagem)...Eu uso o Photobucket...Você também precisa ter no seu computador o Photoshop.

• Depois, você precisa selecionar as fotos que você deseja usar na sequência e deixa-lás todas do mesmo tamanho...

• Vamos considerar a primeira imagem que você escolher como o primeiro quadro da futura foto  animada. Copie (Crt+C) a segunda imagem e cole (Crtl+V) em cima da primeira, formando assim uma nova camada. Repita esse procedimento com as demais imagens (você pode fazer com quantas imagens quiser).
  Clique em janela e procure por camadas. Você vai ver todas as camadas que acabou de criar. Agora clique em janela e depois em animação.
   
• Na figura 1 vemos as quatro camadas, numeradas de 0 a 3 e, logo abaixo, temos a janela de animações.  Vamos desmarcar as camadas 1, 2 e 3 clicando, no ícone correspondente, que parece um pequeno olho (seta 1). 

Fonte: Dicas Blogger

•  Clique agora onde está a seta 2 para abrir um novo quadro. Desmarque a camada 0 e marque a camada 1. Repita o procedimento para as demais camadas (figuras 2 e 3)  

Fonte: Dicas Blogger

Fonte: Dicas Blogger

• Agora, vamos escolher por quantos segundos será exibido cada quadro. Clique logo abaixo do quadro, onde está escrito 0 seg (figura 4) e escolha o tempo (sugestão 2,0 seg). A seguir, visualize a animação, clicando no local indicado na figura 5.

Fonte: Dicas Blogger

Fonte: Dicas Blogger

•  Se tudo estiver Ok, selecione todos os quadros, clique em arquivo e salvar para web e dispositivos (figura 6). Faça as configurações conforme mostra a figura 7 e, ainda na mesma janela, clique no botão visualizar (veja a seta)

Fonte: Dicas Blogger

Fonte: Dicas Blogger

• A animação irá aparecer no navegador. Clique com o botão direito do mouse e salve no seu computador. 
   
• Para colocar imagem no seu post, faça o upload da animação feita e salva em .gif no Photobucket. Depois que o upload estiver pronto e a imagem salva no seu álbum do Photobucket, copie o endereço HTML que eles fornecem.       

•    Depois de copiar o HTML code, cole-o na janela do editor de seus posts no blogger, clique em "Editar HTML" e logo em seguida clique em "Escrever" novamante... 

Pronto!!! Agora sua foto que se movimenta já aparecerá no seu editor!!!

Espero que o tutorial tenha sido útil!!! E caso tenham alguma dúvida, perguntem!!!

Beijos ♥