sábado, 26 de fevereiro de 2011

Como criar um GIF animado no Photoshop

Separação por layers (Foto: Reprodução/TechTudo)


Fim da animação (Foto: Reprodução/TechTudo)

O GIF é um formato de arquivo muito utilizado na internet devido ao seu tamanho e peso reduzidos em relação aos demais formatos de imagem. Apesar de não ser recomendado em situações que necessitam de maior detalhamento e aproximação da realidade, o GIF possui muitos benefícios que o tornam um dos formatos mais utilizados em sites e anúncios de internet, por exemplo.
Dois benefícios do GIF são a possibilidade de utilizar uma imagem em transparência, preservando o fundo no qual foi inserido, e a compatibilidade com a maioria dos programas. Entretanto, o grande diferencial desse formato, e foco nesta matéria, é a possibilidade de utilização de imagens em sequência para a criação de animações leves e versáteis. Veja abaixo como criar um GIF animado no Photoshop:
Passo 1. Abra o Photoshop e crie um novo documento (Ctrl+N)
Passo 2. Defina a cor ou imagem de fundo que será utilizada no GIF. O fundo utilizado neste tutorial será branco, mas é possível utilizar qualquer imagem a sua escolha.
Passo 3. Escolha os elementos que farão parte da animação (imagens, textos, formas etc.)
Passo 4. Crie quantos layers (Ctrl+Shift+N) forem necessários e separe os elementos por camada. Nesse caso, criaremos um GIF básico, utilizando apenas 3 elementos (Fundo, Frase e Logo).
Passo 4. No menu, clique em "Window" e marque a opção "Animation". A janela aberta será o local onde será montada a animação, com movimentos separados por frames.
Preparando o primeiro frame (Foto: Reprodução/TechTudo)
Passo 5. No primeiro frame (e único, por enquanto), defina o estado inicial do GIF animado. No nosso exemplo, o efeito pretendido é o surgimento da logo do TechTudo e, depois, o deslizamento da frase "a tecnologia descomplicada" da esquerda para a direita.
Passo 6. Sendo assim, clique no símbolo de olho do layer "Frase" para deixá-lo invisível e diminua a opacidade do layer "Logo" para 0%.
Passo 7. Clique na seta ao lado de "0 sec." e altere o valor para "0.1 sec". Esse tempo será replicado para os novos frames.
Passo 7. Agora iremos adicionar novos frames e aumentar gradativamente (de 10 em 10%) a opacidade do layer, até atingirmos 100%. Portanto, a opacidade do layer "Logo" no segundo frame deverá ser 20%, no terceiro, 30% e assim sucessivamente.
Passo 8. No 11º frame o layer "Logo" deverá ter opacidade 100%. Agora iremos inserir o layer "Frase".
Passo 9. Marque o símbolo de olho ao lado do layer "Frase" e, segurando Shift (para não subir ou descer), arraste a frase para a esquerda, até deixá-la totalmente fora do layer.
Adicionando novos frames (Foto: Reprodução/TechTudo) Passo 10. Em seguida, adicione mais um frame (o 12º) e deslize a frase um pouco para a direita. Faremos isso de pouco em pouco - adicionando novos frames para cada movimento - até deixar a frase alinhada verticalmente com a logo.
Passo 11. Defina o tempo do último frame para "2 sec". Nossa animação ficou com um total de 20 frames, mas esse número pode variar de acordo com o deslocamento utilizado na frase.
Passo 12. Para salvar a animação em formato GIF, clique em "File" e selecione a opção "Save for Web & Devices..." (ataho: Ctrl+Shift+Alt+S).
Passo 13. Visualize a animação antes de salvá-la clicando no botão de "Play", no canto inferior direito.
Passo 14. Clique em "Save" e defina o nome e local onde o arquivo será salvo.
O objetivo deste tutorial era explicar a forma de criação e salvamento de um GIF animado básico no Photoshop. Apesar de termos utilizado poucos elementos e efeitos, nada impede a criação de GIFs com maior número de layers, elementos e efeitos. Para isso, basta adicionar tantos layers e frames quantos forem necessários.

0 comentários:

Postar um comentário

 
Design by Scooby Doo jogos