3 maneiras de fazer capturas de tela GIF animadas de design para seu portfólio

Depois que seu último projeto de web design estiver pronto, é hora de exibi-lo e adicioná-lo ao seu portfólio. Os visitantes do seu site (e clientes em potencial!) vão querer ver seu trabalho incrível em ação. Boas imagens são fundamentais e, no espaço digital, haverá momentos em que você deseja ilustrar a funcionalidade do projeto. Exibi-lo com capturas de tela animadas pode ser a solução perfeita.

Tenho certeza de que você já viu as capturas de tela animadas e simples que nos mostram como os aplicativos ou sites funcionam. GIFs de capturas de tela dão ao usuário uma ideia melhor de como certas tarefas são executadas, além de mostrar quais recursos estão disponíveis. O vídeo é certamente uma opção e definitivamente tem um lugar importante na web. Vídeos detalhados de produtos ou estudos de caso definitivamente se beneficiam de um formato de vídeo. No entanto, uma escolha mais simples e consciente do tamanho do arquivo, como um GIF de captura de tela animado, pode ser exatamente o que você está procurando.

Por que as capturas de tela animadas são importantes para o seu portfólio

Se você pronunciar “GIF” ou “JIF”, é importante lembrar que os GIFs podem ser mais do que apenas gatos engraçados e clipes de filme com um slogan inteligente. GIFs animados de seus projetos devem ser atraentes e cuidadosamente planejados para mostrar a funcionalidade do design. Animar elementos de interface é um propósito funcional e estético, então um arquivo GIF mostra isso. Que tal demonstrar o cardápio e as opções que seu trabalho apresenta? Que tal mostrar como funciona o scroll? Mostrar a funcionalidade ajuda o usuário a ver claramente como o aplicativo ou site pode ajudá-lo.

Ferramentas para fazer GIFs

Não há melhor maneira de demonstrar seu trabalho duro do que com uma das seguintes ferramentas para criar GIFs. Os exemplos abaixo demonstrarão como fica quando um usuário toca em uma opção, visualiza mais detalhes e, em seguida, rola para ver mais conteúdo.

Nota : Não haverá instruções de design visual neste tutorial; essas dicas pressupõem que o design do site ou aplicativo para seu projeto de portfólio já está pronto.

Como criar capturas de tela GIF animadas no Adobe Photoshop

Na minha opinião, Adobe Photoshop e Adobe After Effects são as melhores ferramentas para o trabalho. Ambos permitem muito controle sobre o produto final. Pessoalmente, gosto do Photoshop para fazer capturas de tela GIF (e a maioria dos designers está muito familiarizada com isso), então é assim que o exemplo a seguir será construído. Vamos começar!

Mostrando a funcionalidade de rolagem

Esse design foi feito no Adobe XD, mas depois exportado para o Photoshop com camadas nomeadas apropriadamente. O exemplo tem uma camada chamada “Lista de locais MinTour” para a página da lista, “Listagem do jardim de esculturas” para a página de detalhes, e a parte que está fora da visualização de rolagem inicial é chamada de “estouro da listagem do jardim de esculturas”.

Parte um

1. Configuração da linha do tempo e lista de locais

O recurso Timeline é o que usaremos para criar as diferentes telas do produto final. Certifique-se de que o Painel da Linha do Tempo esteja aberto indo em Janela > Linha do Tempo.

Aqui está a página de listagem; o usuário começa aqui, toca em um local e chegará à página de detalhes, onde pode rolar para ver mais detalhes.

Você verá que já existe um primeiro quadro-chave estabelecido. Certifique-se de que as camadas corretas estejam sendo exibidas para que a visualização correta seja mostrada no quadro-chave.

Opcional: se você quiser mostrar onde o usuário toca, às vezes isso é mostrado com um ponto. Para fazer isso, adicione um quadro extra com a área do ponto.

2. Detalhes de localização individual

A capacidade de organizar com camadas é uma grande vantagem e ajudará você a manter tudo em ordem enquanto cria seu GIF de captura de tela. Vá para as opções no painel Timeline e escolha “New Frame”. A mesma coisa aqui – certifique-se de que as camadas corretas estejam ocultas/exibidas. Para este, eu precisava que a listagem individual fosse mostrada, para que a camada da lista de locais ficasse oculta.

3. Detalhes de localização individual rolam o conteúdo

A página de listagem individual do Jardim de Esculturas tem mais conteúdo, então a área de rolagem deve ser mostrada ao usuário. Isso estava em uma camada separada, então criei um novo quadro para mostrar esse conteúdo de estouro.

4. Escolha as durações

Isso pode exigir alguma experimentação, mas é importante escolher a duração de cada quadro. Você quer que o usuário tenha tempo suficiente para ver cada quadro, mas também não deve esperar muito antes de ver o próximo.

Coloquei valores para cada quadro, totalizando cinco segundos para toda a animação.

5. Visualização

É bom dar uma olhada no que está acontecendo até agora. Há um botão de reprodução na linha inferior do painel Linha do tempo. Experimente e veja se há algo que pode ser melhorado.

(Opcional) controle de interpolação

As coisas estão ordenadas corretamente, mas parecem um pouco nervosas. As animações de captura de tela podem ser ajustadas para tornar as coisas um pouco mais suaves. Nas opções da linha do tempo, há uma opção “Tween”. Para criar automaticamente uma animação suave entre o quadro atual e o anterior, pode haver mais quadros inseridos automaticamente.

Da listagem ao estouro da lista, o Tween foi adicionado para parecer mais uma ação de rolagem. Esses novos quadros foram configurados para ter uma duração muito curta de 0,05 segundos (a rolagem em um aplicativo acontece relativamente rápido).

Se você quiser que isso continue em loop no Photoshop, certifique-se de que “Forever” esteja selecionado. Se houver um número definido de loops, esse valor pode ser inserido.

6. Salvando o GIF de captura de tela (somente fluxo de tela)

Se você deseja incluir isso apenas como um fluxo de tela animado, salvar será a última etapa. Neste momento, a animação da captura de tela é criada, apenas precisa ser salva no formato GIF correto. Você pode estar acostumado a salvar uma imagem estática, mas salvar uma sequência de imagens é diferente. Vá para Arquivo > Salvar para a Web para salvar este arquivo GIF.

Aqui você verá todas as configurações necessárias para o seu GIF. Lembre-se de que você está limitado ao número de cores, portanto, deixaremos as coisas com a melhor aparência antes de exportar. 256 é provavelmente a melhor opção, já que sites e aplicativos tendem a ter uma grande variedade de cores, mas se o seu design permitir, você pode simplificar (o que mantém o tamanho do arquivo baixo).

Existem também algumas configurações de “Animação” no canto inferior direito; você pode escolher Looping se quiser que ele faça um loop indefinidamente. Você também pode repetir um determinado número de vezes, se desejar. Salve-o no local desejado e está pronto para ser usado!

Parte dois: telas em camadas apresentadas em um dispositivo

Se você decidiu continuar, algumas etapas adicionais são necessárias para colocá-lo em camadas para que pareça mais realista no telefone. No painel Linha de tempo, escolha “Achatar quadros em camadas”. Cada quadro será convertido em uma camada plana, que acaba sendo 26 quadros (portanto, são 26 camadas).

Uma vez salvo, a imagem do telefone precisará ser adicionada ao arquivo. Para acomodar isso, algum redimensionamento do tamanho da imagem terá que ser feito.

1. Ajuste o tamanho da tela para sua captura de tela animada

A imagem de fundo é 1300 x 920, então o tamanho da tela precisa ser ajustado para caber exatamente. Vá em Image > Canvas Size e coloque as dimensões corretas.

2. Prepare as camadas para serem colocadas na tela do telefone

Em seguida, crie uma nova camada para a imagem de fundo para que a animação possa ser colocada em camadas no topo. Aqui é onde as camadas de quadro “Selecionar tudo” serão úteis.

3. Verifique novamente os quadros

Este é um bom momento para se certificar de que os quadros ainda estão como você planejou. Se você reproduzir a animação no painel Linha de tempo, verá a sequência animada.

4. Inclinar as telas

É importante que todas as camadas da tela sejam selecionadas para que possam ser distorcidas de uma vez para permanecerem uniformes. Edit > Transform > Skew é onde isso é feito.

Vai demorar um pouco de experiência, mas ajuste os cantos para que eles se alinhem com os limites da tela, dando a ilusão de que a tela está iluminada com a animação.

5. Ajustes de imagem e salvando sua captura de tela GIF

Agora é a hora de fazer qualquer ajuste. Cor, contraste ou qualquer outro toque final deve ser feito antes de salvar. Salvar a animação é o mesmo que foi feito na Parte um, passo 6.

Neste exemplo, o plano de fundo foi dessaturado e o contraste foi aumentado para que a animação realmente se destacasse. Agora parece estar em um dispositivo real!

Giphy

Se o Photoshop não é sua ferramenta preferida, existe uma ferramenta gratuita e fácil chamada Giphy. (Além do uso profissional, você também pode fazer muitos GIFs engraçados!)

Se você escolher “Apresentação de slides”, esta é uma boa opção para criar uma captura de tela de animação. Para usar isso, você terá que ter arquivos individuais das telas salvos. Em seguida, você arrastará e soltará as imagens estáticas e o processo será iniciado.

Depois que os arquivos forem carregados, selecione “Criar apresentação de slides”. Quando terminar de juntar as imagens, você pode baixar o arquivo. É simples assim!

Grave isto

Este aplicativo é bastante simples; ele grava a ação que ocorre na tela do seu computador e carrega a gravação no site Recordit.io e cria um link compartilhável, com a opção de baixar o GIF.

Quando o Recordit estiver instalado em seu computador, um ícone aparecerá na barra de tarefas. Quando selecionado, você pode arrastar e selecionar a área da tela que deseja gravar. Isso foi perfeito quando fui para o modo de visualização no Adobe XD e pude usar um protótipo para demonstração.

Depois de selecionar a área que será incluída, um botão de gravação é exibido. Quando você pressiona “Record”, o Recordit grava tudo o que acontece na tela, dentro dos limites que você criou. Quando terminar de gravar, basta escolher “Parar”.

Levará alguns segundos, mas depois que a gravação for interrompida, haverá um pop-up com um link que o levará para a gravação, que está hospedada no site Recordit.io.

GIFs animados de capturas de tela são uma ótima maneira de mostrar o fluxo do usuário e como seus projetos de design funcionam. O vídeo também tem seu lugar, mas os GIFs podem ser criados muito rapidamente e são fáceis de adicionar ao seu portfólio online.

Planilha gratuita: Público-alvo e persona do cliente

Procurando um guia prático para ajudá-lo a manter seu conteúdo relacionável e envolvente? Este PDF interativo de três páginas ajudará você a encontrar seu público, auditar seu conteúdo e criar um plano de jogo para expandir seus negócios.

Se você gostou deste artigo, você também pode gostar destes:

• Como criar animações SVG com CSS
• Como criar uma galeria de vídeos do WordPress
• Como usar links para pular para tornar seu site WordPress mais acessível