Utilizando um recurso muito simples você pode criar a sensação de efeito 3D em GIFs animados. Para isso, basta usar o Photoshop. O efeito que dá a sensação de que GIFs animados saltam da tela é apenas uma ilusão de ótica, e pode confundir o cérebro, fazendo com que ele entenda que existem planos dentro da imagem em 2D. Para criar este efeito adicionaremos barras brancas dentro da imagem com a ajuda da Adobe. Confira o passo a passo abaixo.
Como criar um Gif 3D (Foto: Reprodução/André Sugai)
Passo 1. Pressione Ctrl+O e abra o GIF animado que você deseja trabalhar no Photoshop. Note que sua paleta de camadas abrirá uma série de camadas. Cada camada corresponde a um frame do GIF, confira quantas camadas seu GIF possui pois isso será importante mais a frente;
Gif aberto no Photoshop (Foto: Reprodução/André Sugai)
Passo 2. Pressione Ctrl+A para selecionar todo o conteúdo do documento, pressione Ctrl+C para copiar;
Passo 3. Pressione Ctrl+N para criar um novo documento, dê o nome de barras e pressione Ok, o novo documento será criado com o mesmo tamanho do documento anterior;
Criando o novo documento (Foto: Reprodução/André Sugai)
Passo 4. Pressione a letra M do teclado para selecionar a Ferramenta Letreiro Retangular e crie uma seleção como a da foto abaixo;
Criando a seleção (Foto: Reprodução/André Sugai)
Passo 5. Escolha a cor branca, pressione a letra G no teclado para selecionar a Ferramenta Lata de Tinta e clique dentro da seleção para preencher com a cor escolhida;
Seleção preenchida com branco (Foto: Reprodução/André Sugai)
Passo 6. Pressione Ctrl+J para duplicar a linha criada, pressione a letra V no teclado para selecionar a Ferramenta Mover.
Agora mantenha a tecla Shift pressionada e arraste a linha criada para o canto oposto do documento como na foto abaixo;
Barra duplicada (Foto: Reprodução/André Sugai)
Passo 7. Pressione Ctrl+E para mesclar as duas camadas;
Passo 8. Clique sobre a camada das linhas criadas e pressione Ctrl+J até criar o mesmo número de camadas que o seu GIF animado possui, no caso deste tutorial o GIF animado possui 19 camadas, portanto criaremos 19 cópias das linhas.
Camadas duplicadas (Foto: Reprodução/André Sugai)
Passo 7. Vá em Janela e clique em Linha do Tempo;
Caminho para Linha do Tempo (Foto: Reprodução/André Sugai)
Passo 8. Na Linha do Tempo clique na pequena seta para baixo;
Linha do Tempo (Foto: Reprodução/André Sugai)
Passo 9. Escolha a opção Criar Quadro de Animação;
Opção Criar Quadro de Animação (Foto: Reprodução/André Sugai)
Passo 10. Você verá um único quadro em sua Linha do Tempo;
Quadro na Linha do Tempo (Foto: Reprodução/André Sugai)
Passo 11. Com a tecla Shift pressionada, clique sobre todas as camadas criadas, agora clique no pequeno ícone de seta no canto superior direito do painel de Linha do Tempo e escolha a opção Criar Quadros a Partir de Camadas;
Opção para Criar Quadros a Partir de Camadas (Foto: Reprodução/André Sugai)
Passo 12. Sua Linha do Tempo deverá ficar como a foto abaixo;
Linha do Tempo (Foto: Reprodução/André Sugai)
Passo 13. Clique no primeiro quadro da Linha do Tempo, mantenha a tecla Shift pressionada e clique no último para selecionar todos os frames. Clique novamente no ícone de seta no canto superior direito da Linha do Tempo e escolha a opção Copiar Quadros;
Opção para copiar quadros (Foto: Reprodução/André Sugai)
Passo 14. Volte ao documento que possui o GIF aberto, vá em Janela e clique em Linha do Tempo. Clique no ícone de seta no canto superior direito da Linha do Tempo e escolha a opção Colar Quadros;
Opção para colar quadros (Foto: Reprodução/André Sugai)
Passo 15. Na caixa que irá abrir marque a opção Colar Sobre a Seleção e pressione Ok;
Escolha a opção indicada (Foto: Reprodução/André Sugai)
Passo 16. Com a tecla Shift pressionada, clique sobre todas as camadas que contém as linhas que criamos, pressione Ctrl+G para agrupar as camadas dentro de um folder, dê o nome de Barras. Diminua levemente a opacidade do folder para que possamos enxergar a imagem por baixo das linhas;
Folder com camadas (Foto: Reprodução/André Sugai)
Passo 17. Clique no primeiro quadro na Linha do Tempo, note que a primeira camada contendo as linhas terá sua visibilidade ativada, clique nesta camada. Pressione a letra E no teclado para selecionar a Ferramenta Borracha, aplique a ferramenta em todas as partes onde os elementos principais passam por cima das linhas;
Primeiro quadro selecionado (Foto: Reprodução/André Sugai)
Passo 18. Sua imagem deve ficar como a foto abaixo;
Barras editadas (Foto: Reprodução/André Sugai)
Passo 18. Clique no quadro 2, note que a visibilidade da segunda camada com as linhas será ativada automaticamente, clique sobre a camada e repita o processo;
Segundo quadro selecionado (Foto: Reprodução/André Sugai)
Passo 19. Repita o procedimento até finalizar todas as camadas, no final clique sobre o folder e defina a opacidade em 100% novamente;
Opacidade do folder em 100% (Foto: Reprodução/André Sugai)
Passo 20. Agora vá em Arquivo e clique em Exportar, escolha a opção Salvar para Web;
Caminho para Salvar para Web (Foto: Reprodução/André Sugai)
Passo 21. Escolha a opção Gif Restritivo;
Opção de Gif (Foto: Reprodução/André Sugai)
Passo 22. Marque a opção Sempre em Opções de Loop e clique em Salvar;
Definição de repetição (Foto: Reprodução/André Sugai)
Utilizando esta técnica você dá a sensação de que os elementos do Gif saltam para fora da imagem recriando o efeito 3D com um recurso muito simples.