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 desativar a reprodução automática de GIFs no navegador

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;

Documento selecionado (Foto: Reprodução/André Sugai)

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;

... �ão/André Sugai)" height="479" src="//s2.glbimg.com/KoCQDDH2oCsHHqo3gXC-MR6UkCc=/695x0/s.glbimg.com/po/tt2/f/original/2016/08/01/gif3d1f.png" width="695">Camadas mescladas (Foto: Reprodução/André Sugai)

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.

Como usar GIF no WhatsApp? Comente no Fórum TechTudo.

 



>>> Veja o artigo completo no TechTudo

Sobre Gerência Imóveis

A primeira plataforma que conecta o proprietário à imobiliária e/ou corretor de imóveis com o foco em potencializar as vendas e torná-las mais seguras maximizando o tempo do corretor.