CPA

Agosto / 2020

Turminha, vou colocar aqui alguns materiais pra vocês, ok.

Técnicas de animação

10 estilos de animaçao

 Exemplo de animação

 

Uma cartilha também bem educativa, acessem aqui.

----------------------------------

Aula de 06/03/2020 - CPA

Como fazer GIF no Photoshop

O GIF é um formato de arquivo "animado" muito utilizado na Internet, seja nos sites de humor ou anúncios na web. Apesar de não ser recomendado em situações que necessitam de maior detalhamento, o GIF tem recursos práticos como permitir transparência, preservando o fundo no qual foi inserido, e compatibilidade com a maioria dos programas.

Além disso, o grande diferencial desse formato é a possibilidade de usar de imagens em sequência para a criação de animações leves e versáteis. Veja neste tutorial como criar um GIF animado no Adobe Photoshop e aproveite para postar nas redes sociais.

Como criar um GIF animado no Photoshop (Foto: Reprodução/Adobe)

Passo 1. Abra o Photoshop e crie um novo documento (Ctrl+N)

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

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 do 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.

 
Adicionando novos frames (Foto: Reprodução/
TechTudo)

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".

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

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.
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 o logo.

GIF com animação (Foto: Reprodução/TechTudo)

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.

Fonte: TechTudo

Atividade da aula:

Vamos criar um gif animado em homenagem ao dia internacional da mulher.

Enviar para a professora:

cristiane.soares@etec.sp.gov.br