Como criar GIFs animados de maquetes de protótipo, como os do Dribbble?

Tenho certeza que você já viu Dribbblers fazer upload de modelos animados de seus designs.

Aqui está um exemplo:

Posso criar maquetes no Photoshop e até aplicar simples animações de interpolação a elas, mas nunca consigo que meus GIFs se pareçam com o exemplo aqui.

O que os Dribbblers estão usando para criar essas animações?

Observe que as animações também incluem pontos de contato e movimento perfeito. Gostaria de converter meus modelos do Photoshop para fazer o mesmo.

Como posso criar um exemplo animado de meus modelos, semelhante aos criados pelo Dribbblers?

O que você precisa saber para criar algo assim no After Effects:

Como fazer um projeto e composições

Ao iniciar o AE, você pode pressionar Cmd+Npara criar um novo projeto com uma composição dentro dele.

Se você já tem um projeto aberto, pressionar Cmd+Napenas cria uma nova composição.

Neste projeto, usei 2 composições. GUIcomp para manter a GUI e suas animações. iphonecomp para conter os dois, background e GUIcomp.

A segunda composição com animações da GUI deve ter o mesmo tamanho da tela ou, pelo menos, a mesma proporção. Mais tarde, quando você o colocar na tela, poderá parecer estranho se a proporção estiver desativada.

Importando imagens para o AE

O After Effects possui um sistema muito bom para importar arquivos .psd, mas não gosto de usá-lo porque, se você perder, mover ou renomear o arquivo .psd, o After Effects não poderá encontrá-lo e você precisará substituir as imagens para cada camada separadamente.

Se você importar uma pasta de imagens para os projetos e você, por exemplo. renomear a pasta da imagem, você só precisará substituir uma gravação de imagem e todas as imagens ausentes serão restauradas (desde que todas as imagens ausentes existam na mesma pasta). Além disso, dessa maneira, há menos confusão.

Como importar imagens para um projeto

Clique com o botão direito do mouse dentro do painel Projeto, à esquerda, escolha: Import > Multiple files

... ou você pode simplesmente arrastar arquivos para esse painel

Eu usei o slicy para exportar minhas imagens do photoshop.

Quais objetos você deve salvar como arquivos de imagem separados

Essencialmente, você desejará salvar todos os objetos em movimento separadamente. Você também pode salvar alguns objetos estáticos separadamente.

^{Neste projeto, eu poderia ter potencialmente salvo o cabeçalho e o rodapé como um, mas o cabeçalho tinha uma sombra que passa sobre o primeiro botão, então tive que salvá-los separadamente.}

Aqui está um detalhamento de como eu salvei meus arquivos de imagem no photoshop antes de importá-los para o AE.

Animação 101

Animação de posição:

1. Animação de posição:
   • Selecione seu objeto na lista no lado esquerdo da linha do tempo.
   • pressione P
   • Clique no ícone do cronômetro que está agora abaixo da camada selecionada. Isso adiciona automaticamente o primeiro quadro-chave, onde quer que esteja seu indicador de tempo (é a linha vermelha na linha do tempo).
   • 
   • mova o indicador de tempo para frente na linha do tempo. Arraste-o ou Cmd+{Arrow left or right}ouCmd+Shift+{Arrow left or right}
   • no visualizador de composição, arraste seu objeto para a posição em que deseja mover (você também pode usá-lo Shift+arrow keys, como no photoshop Ou arrastando os valores numéricos.).
   • Outro quadro-chave aparece na linha do tempo e agora você tem uma animação.
   • 
   • Você pode reproduzir a animação pressionando space

Mova os quadros-chave para mais perto um do outro para acelerar a animação ou se afastar um do outro para diminuir a velocidade.

Animações continuadas após uma pausa.

um cenário: você animou algo de A a B e deseja pausar por uma quantidade X de milissegundos e depois passar de B para C.

Quando você animar B, vá em frente na linha do tempo e clique no ícone do quadro-chave no lado esquerdo, aqui:

Deve parecer acinzentado, então não se preocupe. Isso significa apenas que não há quadro-chave nessa posição

Como o quadro-chave nº 2 e a transformação de quadro-chave nº 3 recém-criados têm os mesmos valores, agora há uma pausa entre esses dois quadros-chave. Em seguida, você pode continuar animando normalmente, avançando na linha do tempo e alterando os valores novamente.

Animando outras coisas, como rotação ou opacidade

Eu só queria dedicar esse tempo para dizer que todos eles funcionam como animações de posição (... menos o arrasto).

Basta usar os controles deslizantes de números que aparecem quando você pressiona as teclas de atalho abaixo.

Teclas de atalho para diferentes métodos de transformação:

• P - Posição
• T - Opacidade
• R - Rotação
• S - Escala
• A - Ponto de ancoragem

Basta selecionar o (s) objeto (s) e pressionar uma dessas teclas de atalho e começar a animar. Se você não selecionar nada, isso revela métodos de transformação para cada objeto na composição.

Como escravizar objetos para outros objetos

No painel Comp, você notará uma lista suspensa Pai em todos os objetos.

Você pode usá-lo para definir um pai para um objeto.

Se você mover o Pai, notará que o elemento Filho agora se move com ele. O mesmo vale para as animações que você anexa ao elemento Pai.

Se você animar o objeto Pai para girar, o Filho seguirá ...

Adicionando elasticidade à sua animação

Talvez você tenha notado que a animação do botão não para em uma parede, mas de uma maneira muito elástica.

As Expressões após o efeito podem ser usadas para conseguir isso (também pode fazer muito mais).

Para aplicar o script Expression a uma animação, Alt+{mouse click}o cronômetro e cole no script.

A expressão que usei na animação do botão

As três primeiras variáveis amp, freq, decaypodem ser editadas para obter resultados diferentes.

Você pode aplicar esse mesmo script a animações baseadas em movimento. Por exemplo, a animação de opacidade não é afetada.

Também pode ser encontrado aqui.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Facilitando ....

Portanto, isso é outra coisa que pode fazer a animação parecer muito menos linear, assim como o script Expression acima.

Eu usei Facilidade Facilidade naquele "círculo indicador de toque" para fazer com que parecesse um movimento um pouco mais humano.

Você pode selecionar um ou vários quadros-chave e clicar com o botão direito do mouse em um deles.

Então da lista: Keyframe assistant > Easy Ease

Costumo usar Easy easy, porque sou preguiçoso ...

Fotos ou não aconteceu ...

Aqui está uma animação de posição simples, demonstrando como a flexibilização e esse script de expressão específico podem ter um enorme impacto na animação.

Colocando imagens / composições animadas em uma tela

Então, após a GUI ser animada, é hora de colocá-la na tela do dispositivo.

1. Coloque a GUI dentro do iPhone, assim como você coloca as imagens dentro de uma composição.
2. Clique duas vezes em iPhone comp no painel Projeto
3. Selecionar GUI comp
4. No menu superior Effects > Distort > Corner pin
5. Em seguida, basta arrastar cada canto para corresponder aos cantos da tela do dispositivo.

Exportando para .gif

AE não tem método nativo para fazer isso, mas não se preocupe, existem maneiras.

Eu prefiro fazer isso:

1. Clique em uma composição no Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Em seguida, na parte inferior, onde normalmente fica a linha do tempo, você escolhe o que exportar e para onde.
   • Normalmente exporto um .mov sem perdas
   • Se você clicar em "Configurações de renderização", poderá escolher uma taxa de quadros, caso contrário, ela usará a taxa de quadros Comp
4. Em seguida, pressione renderizar no canto superior direito ou nesse painel.
5. Encontre o arquivo exportado e abra-o no photoshop.
6. Salvar para a web Cmd+Shift+Alt+S
   • Salvar como .gif

Honestamente, não é tão ruim assim ...

Exportando como um arquivo de vídeo

Portanto, mesmo que o método acima mostre como exportar um arquivo sem perdas, não é o caminho que você deve exportar arquivos de vídeo.

Você faz assim:

1. Salve seu arquivo de projeto.
2. Clique em uma composição no Projects panel(se você tiver mais de um)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Arraste uma predefinição da coluna da direita para a coluna da esquerda
5. Pressione play.
6. Se você não escolher a pasta de exportação, por padrão, ela estará ao lado do arquivo do projeto.

Como substituir filmagens

Então o AE não consegue encontrar seus arquivos? Fazem isto:

• Clique com o botão direito do mouse em uma das cenas ausentes no painel Projeto
• Da lista Replace footage > File...
• Localize suas filmagens e outras coisas

Outras teclas de atalho úteis

• U- Revela todos os quadros-chave usados ​​na comp (se você não tiver nada selecionado). Realmente útil quando você precisa mover vários quadros-chave de uma só vez, por exemplo.
• U( Toque duas vezes ) - revela tudo o que foi alterado.
• E( Toque duas vezes ) - revela todas as expressões usadas.
• J - Move para o quadro-chave anterior.
• K - Move para o próximo quadro-chave.
• space - Reproduz comp
• Iou hometecla - Move o indicador de tempo atual para o início na linha do tempo.
• Cmd+K - Configurações atuais de composição.
• Cmd+I - Importar arquivos.
• Alt+{Arrow keys left and right} - Selecione o (s) quadro (s) de teclas e pressione as teclas de atalho para movê-las.
• Alt+Shift+{Arrow keys left and right} - Selecione o (s) quadro (s) de teclas e pressione as teclas de atalho para movê-las.

Os arquivos do projeto podem ser encontrados here.

ESTE É UM ARQUIVO .PSD DE MOCKUP ANIMADO GRATUITO de um site de rolagem do site e uma animação de menu completamente editada e animada no photoshop ridícula e fácil de editar e brincar, você pode baixar o arquivo gratuitamente aqui , também tenho um vídeo tutorial de como é fácil de editar este brinde.

Se você olhar nos comentários desse post em particular, o cara diz que usou o Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Existem duas maneiras de fazer isso.

1. Recrie / faça o mockup das animações desejadas em um programa de animação (dos quais o After Effects é um) e exporte-o como um gif animado. Obviamente (como você percebeu), isso envolverá também a criação de toques "falsos" e outras interações para demonstrar o que está acontecendo.

2. Crie um protótipo funcional e grave a saída do seu dispositivo via AppleTV ou similar através da saída HDMI à medida que ela é transmitida à sua televisão.

Ambos são incrivelmente demorados e a jornada é por si só.

Mas a opção 2 tem vantagens ENORME em relação à opção 1. Além disso, você aprenderá alguma programação básica.

Muito maior do que isso, porém, é que, com algumas habilidades básicas de programação interativa, você será capaz de percorrer variações e abordagens alternativas muito mais rapidamente do que alguém usando o software Animation.

E você terá algo verdadeiramente interativo para demonstrar seu design. Além disso, o trabalho artístico foi testado em um ambiente interativo no dispositivo, por isso, com certeza, será perfeito em pixels e cores.

Mas espere, eu sei. Você está assustado. Vai ser difícil, certo?

Não se você tiver um iPad.

Codea é a maneira mais barata e rápida de criar animações e interatividade triviais (e MUITO complexas) na linguagem de script mais simples e limpa do mundo ... Lau.

http://codea.io

Se você não possui um iPad, adquira um.

Até lá, continue com o learning processing.org, pois você poderá criar modelos igualmente interessantes dentro disso:

http://processing.org/

O processamento usa outra linguagem de script chamada Javascript. É igualmente simples, mas não tão elegante quanto Lua.

Você também pode criar a animação da interface do usuário usando o Keynote. É bastante simples e perfeito para criar animações da interface do usuário. Eu então usei o After Effects para colocar o vídeo no telefone.

Etapa 1: criei a animação da interface do usuário na palestra e o fiz: http://vimeo.com/108991829

Etapa 2: Coloquei o vídeo em um iPhone depois do mockup de efeitos que encontrei on-line e salvei o arquivo .mov. Seguindo as instruções neste vídeo: http://youtu.be/VeZGwjVwDrc

Passo 3: Com a ajuda do photoshop e seguindo as instruções que fiz.

se você deseja aderir ao Keynote e exportá-lo como um formato Quicktime, acho que não deve doer tentar:

GIF Brewery

O GIF Brewery permite converter clipes curtos dos seus arquivos de vídeo em GIFs. Se você deseja criar o GIF de gato mais recente ou fornecer uma visualização de um vídeo mais longo, o GIF Brewery é para você.

Você não precisa mais extrair quadros dos seus filmes e mexer nas camadas do Adobe® Photoshop®. Em vez disso, deixe o GIF Brewery fazer todo o trabalho tedioso para você.

Além disso, o GIF Brewery contém muitos outros recursos para expressar sua criatividade. Você pode adicionar legendas para recriar o diálogo ou adicionar vários filtros de imagem.

Eu realmente amo todas as instruções dadas por @Joonas.