Como fazer um Cinemagraph no Photoshop

Os cinemagraphs têm sido uma das minhas tendências de design favoritas há alguns anos. Eles são uma mistura impressionante entre foto e vídeo, resultando em uma obra de arte elegante para o seu site que adiciona apenas uma pitada de mistério.

Há também uma razão prática importante pela qual os cinemagraphs são ótimos: seu tamanho de arquivo pequeno. É muito mais fácil adicionar pequenos momentos de movimento ao seu site, em vez de um arquivo de vídeo inteiro! Mas além da logística, há uma última razão pela qual os cinemagraphs são tão mágicos: eles são realmente muito mais fáceis de criar do que você imagina!

Pronto para começar? Puxe sua cadeira, abra o Photoshop e siga estas sete etapas fáceis para criar seu próprio cinemagraph!

1. Escolha seu arquivo de vídeo

Para fazer um cinemagraph, você começará com um arquivo de vídeo básico. Idealmente, você mesmo gravaria o vídeo para que fosse específico para sua empresa e combinasse perfeitamente com sua marca, mas se você estiver apenas experimentando, baixar um vídeo de estoque funcionará perfeitamente!

Para este tutorial, estou usando um vídeo que gravamos internamente de uma turnê de Jenga contra um fundo azul simples. (Você obterá o mesmo arquivo se se inscrever no curso Design Trends!)

Ao escolher o vídeo perfeito para o seu cinemagraph, há algumas coisas que você deve ter em mente:

• A câmera precisa ficar parada o tempo todo. Se você estiver gravando o vídeo sozinho, retire o tripé antigo para manter as coisas o mais estáveis ​​possível. Se você estiver navegando nas opções de ações, procure o mínimo de movimento possível!
• O movimento que você deseja manter deve ser fácil de isolar. Se os objetos estiverem se cruzando um na frente do outro ou se movendo por toda a tela, será mais difícil isolar o movimento que você realmente deseja enquanto mantém o fundo imóvel.
• O vídeo deve ficar em loop . Para manter o cinemagraph atemporal, ele precisará fazer um loop. Embora o Photoshop possa definitivamente ajudar a suavizar as coisas, é mais fácil usar um vídeo que possa ser repetido facilmente ou que tenha início e fim reversíveis.

Depois de obter o arquivo de vídeo, você está pronto para carregá-lo no Photoshop.

2. Importe o arquivo de vídeo

Com o Photoshop aberto, vá para Arquivo > Abrir . Selecione seu arquivo e, em seguida, você verá o vídeo aparecer como uma camada. Se não aparecer automaticamente, verifique se você também pode ver a Linha do tempo acessando Janela > Linha do tempo .

Você notará que o arquivo de vídeo é colocado automaticamente em um grupo, “Grupo de Vídeo 1”. Você pode deixá-lo lá, mas se apenas ter uma camada em um grupo o incomoda, sinta-se à vontade para retirar a camada de vídeo e excluir o grupo! Não é necessário.

3. Limpe a linha do tempo

Reproduza seu arquivo de vídeo algumas vezes – você precisa de tudo? Se houver uma filmagem extra antes ou depois da seção em que você deseja que seu cinemagraph se concentre, vá em frente e corte o arquivo para que fique fora do seu caminho. Você pode fazer isso clicando na borda do arquivo na Timeline e arrastando-o para o carimbo de data/hora desejado.

Se o seu arquivo de vídeo for longo e você estiver tendo problemas para visualizar tudo ou chegar ao ponto exato que deseja, use a escala na parte inferior da janela da Linha do tempo para aumentar e diminuir o zoom.

Nota: A parte do seu arquivo que você cortar ainda será salva, então não se preocupe em perder dados aqui! Você sempre pode clicar e arrastar a borda de volta, se decidir que precisa de uma determinada parte mais tarde.

Meu arquivo de vídeo original terminou com a torre Jenga caindo, o que não seria fácil de repetir. Então eu cortei essa parte e cortei um pouco desde o início também, só para simplificar o tempo que eu estava trabalhando!

Depois de limpar a Linha do tempo, é hora de ocultar o movimento que você não deseja.

4. Crie a camada de máscara

Agora você criará o aspecto “foto” do cinemagraph. Pause o vídeo na “imagem” que deseja criar e selecione toda a área. Copie e cole isso em uma nova camada.

Se você clicar em play, notará que agora não pode ver nada do vídeo, porque a imagem posterior está no topo. Agora é hora de adicionar uma máscara, que nos permitirá escolher o movimento exato que queremos mostrar!

Vá em frente e adicione uma máscara de camada, seja na opção na parte inferior do painel Camadas ou indo em Camada > Máscara de camada > Revelar tudo.

5. Isole o Movimento

Certifique-se de ter a máscara de camada selecionada (em vez da própria camada) e, em seguida, pegue a ferramenta Pincel. Assim como qualquer máscara, pincelar com preto ocultará a máscara (revelando o conteúdo da camada abaixo), enquanto pincelar com branco revelará a máscara (ocultando o conteúdo da camada abaixo).

Para este exemplo, eu queria mostrar o movimento da torre Jenga enquanto os ponteiros permanecem estáticos. Para conseguir isso, pintei a máscara de preto no topo da torre e deixei o resto de branco.

Isso permite que você isole o movimento, revelando apenas o movimento que deseja que seu cinemagraph mostre enquanto mantém o restante congelado.

6. Exporte como um GIF

Quando estiver satisfeito com seu cinemagraph, é hora de exportá-lo! Basta ir em Arquivo > Exportar > Salvar para a Web (Legado) . Existem muitas opções que você pode experimentar aqui, mas as duas mais importantes são:

1. Salvar como um gif (localizado próximo ao topo da caixa de diálogo)
2. Defina as opções de loop para Forever (localizadas perto da parte inferior da caixa de diálogo)

Há sempre um pouco de equilíbrio entre o tamanho do arquivo e a qualidade, então definitivamente recomendo experimentar as configurações para garantir que você obtenha exatamente a exportação de que precisa.

E é isso! Você acabou de criar seu próprio cinemagraph para compartilhar com o mundo. Como foi? Adoraríamos saber nos comentários.

Como usar o arquivo do Photoshop

Ao abrir este arquivo no Photoshop, você verá o cinemagraph finalizado. Você pode usá-lo, se quiser, ou pode brincar para ver como configuramos tudo!

Comece desmascarando todas as camadas, exceto a “Base Footage”. Esse é o arquivo de filme original com o qual começamos. Se você clicar em jogar, poderá ver o quanto a mão se move para sacudir o tabuleiro de Jenga!

Em seguida, adicionamos a camada de máscara para isolar o movimento e deixe-me dizer a você - escolher uma forma geométrica como esta em cima de um fundo sólido tornou o processo de máscara super simples! Dependendo do seu arquivo de vídeo, pode ser necessário ser um pouco mais exato, mas deixaremos isso para você.

Em seguida, decidimos nos concentrar em apenas um segmento do vídeo que tivesse um bom loop, para criar aquele efeito atemporal. Deixamos o arquivo inteiro lá, no entanto, para que você pudesse ver a coisa toda!

Por último, alteramos as Curvas para corrigir algumas das cores no arquivo. Você pode ou não precisar fazer isso, dependendo do seu vídeo, mas lembre-se: você sempre pode continuar editando depois que o cinemagraph estiver pronto!

E é isso! Você tem um cinemagraph pronto para ser exibido em seu site. Conta pra gente nos comentários abaixo: O que você vai criar com essa tendência?