Tech - Como criar um GIF 3D

Não está com tempo de ler? Ouça este conteúdo.

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)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)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)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)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)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)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)Barra duplicada (Foto: Reprodução/André Sugai)

Passo 7. Pressione Ctrl+E para mesclar as duas camadas;

Camadas mescladas (Foto: Reprodução/André Sugai)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)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)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)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)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)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)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)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)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)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)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)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)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)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)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)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)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)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)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.

 

Sobre Gerência Imóveis

Única 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.