Home Tutoriais Materiais MyeonDesign

Vamos falar sobre GIF's

||

A-yo , brotos, como estão? Espero que muitíssimo bem! Eu finalmente estou de volta para falar de um tema pavoroso: GIF's.

Confesso que a um tempo atrás eu odiava com todas as minhas forças eles, simplesmente por achar muito complicado de se mexer e "sem muita utilidade para capas", sim, era assim que eu pensava. No aplicativo do spirit para Android não é possível ver a movimentação da imagem, por isso, sempre acreditei ser algo inútil, uma completa perda de tempo. 

Mas, felizmente, eu evoluí quando troquei de telefone para um com sistema IOS e descobri a beleza e o charme que um gif trás para uma capa, icon, jornal ou o que for. Um edit simples pode se transformar complementante com o acrescento dele, pode ser um pequeno a um grande, um detalhe ou a imagem inteira, confirmo sensata que fará a diferença.

Diferente do que todos pensam, mexer com linha do tempo e frames não é um monstro de sete cabeças, é somente prática e aprendizado de macetes, no terceiro edit você já pega o jeito e tenta inventar outras formas de utilizar essa ferramenta, falo por experiencia própria. Nessa postagem, estarei explicando alguns termos por cima de como utilizar esse artificio e deixarei um vídeo que fiz utilizando gifs para fazer icons. 

Frame ou quadro de vídeo/animação é uma das "imagens paralisadas" que juntas formam o gif/vídeo. 

linha do tempo e frames

Linha do tempo é como se fosse as "configurações" do gif, você, a partir dela, terá acesso aos frames de cada segundo e poderá ver como está o desenvolvimento, podendo editar separadamente cada um deles. 


como abrir a linha do tempo

Esses dois serão seus dois grandes amigos na batalha. 

Com eles abertos e prontos para produzir, escolha um gif de seu gosto (o arquivo TEM que estar salvo na modalidade .gif), coloque para ele abrir no photoshop.

como sua interface irá ficar

Abrindo seu gif, você vai ter acesso a todos os frames e as camadas, sempre selecione todas elas na hora de mexer nelas, quando você acrescentar algo ou puxar elas para um lugar, talvez não mude em todos os segundos da reprodução, aí que entra os macetes que você tem que aprender.

Sempre que for adicionar um efeito no gif, adicione no primeiro quadro de animação e acima de todas as camadas, caso não adicione, não irá se reproduzir nas outras, a mesma regra se aplica se você mudar o estado ou opacidade de uma camada no gif. 

Na hora de transportar o gif para outro lugar, você tem duas opções:

1. Levar todas as camadas para o arquivo que deseja e construir sua animação ativando frame por frame;

2. Selecionar e copiar todos os frames e colar em outra linha do tempo.


como copiar frames

como colar frames

Assim que tiver seu gif no lugar certo, solte sua imaginação, com cuidado, e crie do jeito que desejar, acrescente numa capa ou em outras coisas, mas preste atenção na hora de salvar, é de uma forma diferente. Assim que terminar seu trabalho, vá em "Aquivo" no canto esquerdo de sua tela e escolha a opção "Exportar", depois "Salvar para a Web (legado)...", assim abrirá uma tela e é só salvar.

tela de salvar


Alguns edits meus que já usei essa técnica:







Nesse vídeo eu fiz três exemplos de utilizar gifs em icons, com um ou com mais de um, mas recomendo para quem estar iniciando, trabalhar apenas com um e depois se aventurar em mais.





Esses foram os resultados dos icons:


Caso apresente alguma dúvida sobre o assunto, pode me perguntar pela postagem ou procurar uma de minhas redes sociais, meu twitter é @inuteiz, eu ficarei feliz em lhe ensinar. Espero que tenham gostado dessa postagem e tenham aprendido algo, um xero no cangote e até a próxima!


Atenciosamente, Web Master Lua (@lunaticax).









Nenhum comentário:

Postar um comentário