18 setembro, 2014

Borboleta animada - Criar GIF animado online

Criar gif borboleta com 1 imagem
Como criar um efeito animado dum borboleta a esvoaçar?
Tudo a partir de 1 imagem.
Verifique como fazer em 3 fases.
A 1ª fase passa pelo planeamento. A 2ª passa pela preparação das diversas imagens. A 3ª passa pela criação do gif a que chamamos de Borboleta animada.
Tudo isto com recursos online, gratuitos e sem registos.
Vamos utilizar o Pixlr para a fase 2 e o Gifmaker.me para a fase 3.

Comecemos pelo planeamento.

Esta é uma fase que irá determinar o objecto final. Devemos, nem que seja mentalmente, traçar um caminho com um objectivo pré-definido.
Vou exemplificar.
borboleta 1Durante os meus testes sobre as diversas funcionalidades do Pixlr, criei um pincel duma borboleta o qual depois apliquei sobre um gradiente intermédio com diversas cores (figura à direita)
Depois, e como tinha publicado umas mensagens sobre animações, veio-me à ideia a possibilidade de colocar a borboleta a esvoaçar.
Para tal imaginei o que seria necessário fazer para tentar recriar o movimento das asas a bater.
borboleta animada - planeamentoImaginado um eixo central vertical, que passe pelo meio da borboleta, teria de submeter a imagem a transformações, tendo em consideração que teria de actuar horizontalmente sobre as dimensões da imagens de modo a "encolher" as asas, conforme se esquematiza na figura à esquerda.

Como um dos objectivos do exercício era de usar programas online, lembrei-me que o Pixlr têm uma ferramenta que produz exactamente o que pretendia. 


Assim recorri ao editor Pixlr e abri a minha imagem. Depois recorri a Editar/ Transformação livre e movi o quadradinho central à esquerda um pouco para a direita (ver imagem seguinte)
Borboleta animada - fase 2


Salvei com o nº 2 e fui repetindo o processo para a 3, 4 e 5 conforme sequência na imagem seguinte.
Borboleta animada sequência planeamento

Para criar a animação GIF recorri ao gifmaker.me no JotaV Editores

Carreguei o conjunto das cinco imagens (1 a 5) todo de uma vez e depois carreguei individualmente, nesta ordem, a 4, depois a 3, seguida da 2.
Imagens sequências no gifmaker.me
Deste modo e com esta sequência pretendendo recriar o movimento de "fechar" as asas (de 1 a 5), seguido do "abrir" de asas (4, 3, 2) terminado no ponto de partida a 1.
No gifmaker.me mantive as dimensões iniciais (Canvas size) e fui alterando a velocidade da animação de modo a obter o efeito desejado.
Neste exemplo uma velocidade de animação (Animation speed) de 20 milliseconds (milésimos de segundo) corresponde a um movimento das asas rápido conforme o 1º exemplo no inicio desta mensagem.
Uma velocidade de animação de 50 milliseconds  corresponde a um "esvoaçar" mais lento conforme exemplo seguinte.
Borboleta esvoaçando 50 milliseconds

Notas adicionais:
- Uma animação GIF pode ser feita com um mínimo de duas imagens dependendo do resultado que queira obter.
- O gifmaker.me trabalha com imagens com fundo transparente.
- Se quiser testar imagens com fundo transparente recorra, por exemplo, ao pngimg.com disponível nesta mensagem
- O gifmaker.me têm uma interface muito simples. Confira na imagem seguinte os detalhes.
GifMaker-me Interface e dicas

Divirta-se
JotaV
Related Posts Plugin for WordPress, Blogger...