=

SUMÁRIO

Introdução 3
Contextualização 3
Desvendando o Krita 4
Saiba mais sobre as suas ferramentas 8

Princípios da animação no papel 13

Utilizando a separação de camadas 14
Técnicas com o uso onion skinning 17
Animando seguindo linhas de movimento 23
Animando um personagem cartoon 29
Animação de partículas 32
Exportando a animação 36
Sequência de Imagem 36
Gerando um GIF Animado 37
Gerando um vídeo MP4 42

Referências 43

2
 Introdução

Fala, Player! É uma honra ter você aqui, que com toda certeza, tem grande
admiração pelo mundo dos jogos digitais, não é mesmo?
Então, minha proposta para você é que juntos possamos explorar e aprender
sobre animação 2D, que além de ser bastante utilizada na produção de jogos
digitais, também é aplicada na criação de filmes, desenhos, vídeos, entre outras
possibilidades.
Neste curso, iremos aprender sobre softwares simples, práticos e intuitivos
que te possibilitarão criar artes 2D de personagens para jogos digitais, por meio de
ferramentas e recursos que permitam que seu produto atenda às normas e padrões
de qualidade, usabilidade, interatividade, integridade e segurança da informação.

Contextualização

Você sabe o que é animação 2D ou bidimensional?

Para entender esse conceito, é preciso saber que uma imagem
bidimensional refere-se às características visuais de altura e largura. Sendo assim,
como é que uma imagem, ou melhor, uma sequência de imagens pode gerar uma
animação? Pela repetição da mesma imagem em vários quadros, com alteração de
poses que possibilitem um efeito visual de movimento.
E, para que você possa chegar a essa parte, é importante dominar alguns
tipos de software e o Krita é um deles. A partir dele você aprenderá sobre o
processo de animação, separação de camadas, técnicas de transparências,
animações, exportação de imagens e muito mais. Esses aprendizados farão a
diferença na sua vida profissional.

3
 Desvendando o Krita

Para a instalação, basta você acessar o site oficial: http://www.krita.org e

realizar o download, de acordo com o seu sistema operacional. Após ter realizado a
instalação, vamos começar a desvendar o Krita.
Aqui, estou utilizando a versão 4.4.8 que é a mais recente estável no
momento deste curso.
Ao abrir o krita pela primeira vez, nos deparamos com a tela inicial padrão,
onde possui três tópicos de destaques que são: Iniciar, Comunidade e Novidades.

Imagem: Tela inicial padrão do Krita

No tópico Iniciar, temos as opções de criar um novo arquivo ou abrir um

existente.
No tópico de comunidade, temos alguns links que servem para auxiliar o
usuário, chamados de: Manual do usuário, Começando, Apoiando o krita,
Comunidade de usuários, Site do krita, Código-fonte e mais um link para empresa
desenvolvedora: Desenvolvido pela KDE.
No tópico de novidades, devemos marcar a caixa de diálogo: verificar por
atualizações, para poder ver na janela logo abaixo, tudo que vem de novidades
sobre o krita.

4
 Ao clicar no link de Novo arquivo ou utilizar o atalho CTRL + N, é aberta
uma janela com diversas opções de leiautes já predefinidos. Porém, na primeira
opção podemos criar um modelo personalizado, onde temos uma aba de dimensões
e uma aba de conteúdo.
Na aba dimensões podemos alterar a largura e altura do documento, a
unidade de medida, resolução, tipos de cores e até salvar essa nova predefinição.

Imagem: Janela para para criar documento personalizado.

Já na aba de conteúdo, podemos definir o nome do documento, o total de

camadas que irá iniciar o documento, cor de fundo, opacidade e até deixar alguma
descrição para melhor lhe auxiliar futuramente.

5
 Imagem: Aba de conteúdo para criação de um novo documento.

Um dos leiautes mais utilizados para animação, é o Modelos de animação,

onde temos o modelo do japão (JP), e o modelo americano (EN). Mas eles possuem
muitas camadas para o respectivo leiaute, por isso não utilizaremos eles, e sim, um
modelo personalizado com o tamanho Full HD, 1920 x 1080 pixels.

6
 Imagem: Janela com modelos de leiautes para animação.

Com o documento criado, temos agora o nosso krita com o espaço de

trabalho padrão.

Imagem: Área do Krita com destaques numerados em sua janela.

7
 1 - Barra de menus padrão: Essa barra contém os menus principais do
Krita, como vários padrões que são utilizados em diversos softwares, como arquivo,
janela e ajuda.
2 - É a junção de duas barras de ferramentas: Arquivo e Pincéis. A Barra de
arquivo possui os ícones de atalhos: Novo, Abrir, Salvar, Desfazer e Refazer. Já a
barra pincéis, mostra configurações que se alteram de acordo com a ferramenta
que você escolher.
3 - Caixa de ferramentas: É nela que podemos escolher as ferramentas
para utilizar na área de desenho.
4 - Áreas acopláveis: Seletor de cores avançado, Opções da ferramenta,
Camadas, e Predefinições do pincel. Toda área acoplável pode ser arrastada e
encaixada em outros lugares.
5 - Barra de status: Mostra as configurações do seu documento, como
também zoom, rotação e algumas informações sobre a ferramenta escolhida.

Saiba mais sobre as suas ferramentas

Abaixo, temos uma imagem com todas as ferramentas que iniciam o Krita:

Imagem: caixa de ferramentas padrão do Krita

8
 Observe o nome de todas as ferramentas, divididas em grupos para um
melhor entendimento:

Grupo 1

Selecionar formas (Funciona apenas em camadas vetoriais)

Ferramenta de Texto SVG

Edição de formas (Funciona apenas em camadas vetoriais)

Caligrafia (Funciona apenas em camadas vetoriais)

Grupo 2

Traços livres de pincel

Linha

Retângulo

Elipse

Polígonos (Shift pressionado, você finaliza o polígono fechando a forma)

Linhas poligonais (Shift pressionado, você finaliza o polígono fechando a

forma)

Curvas Bézier (Shift pressionado, você finaliza a curva)

Caminho livre a mão

Pincel dinâmico

Multi-Pincel

Grupo 3

9
 Transformar camada ou seleção

Movimento

Recorte

Grupo 4

Gradiente

Seletor de Cores

Edição de máscara de cor

Caminho inteligente

Preenchimento

Grupo 5

Assistente

Medida

Imagens de referência

Grupo 6

Seleção retangular

Seleção elíptica

Seleção poligonal

Seleção livre

Seleção contínua

10
 Seleção por cores semelhantes

Seleção por curva de Bézier

Seleção magnética

Grupo 7

Ampliação

Posicionamento (Pan)

Podemos escolher um espaço de trabalho já predefinido para animações,

indo no menu janela / espaço de trabalho / Animation .Observe que é exibido as
principais áreas acopláveis de animação.

Imagem: Espaço de trabalho definido com o leiaute Animation.

Caso não queira utilizar esse leiaute padrão, mude conforme achar melhor.
Lembre-se apenas das áreas acopláveis de animação são as de destaque conforme
imagem abaixo:

11
 Imagem: Destaque nas áreas acopláveis: Animação, Casca de Cebola e Linha do tempo.

Com seu leiaute ajustado, também é possível salvar esse espaço de

trabalho, apenas indo no menu Janela / Espaço de trabalho / Novo Espaço de
Trabalho. Defina o nome e já estará salvo acessando no mesmo menu.

12
 Princípios da animação no papel

Realizamos animação através de sequências de imagens, alterando a pose

conforme uma nova imagem é criada. Portanto, a animação quadro a quadro ou
também conhecida como animação direta (straight ahead), consiste em desenhar
um a um em sequência, até chegar na animação desejada.
Imagine que você possui um Flip Book (Bloco de folhas unidos de mesma
espessura para realizar desenhos em sequência, gerando a ilusão de uma
animação) e queira realizar a animação de uma bola quicando. Você terá que
desenhar desde o início, modificando cada pose da bola, até o fim da animação.

Veja o exemplo acessando o

QR Code ao lado:

Porém, por se tratar de muitos desenhos, essa técnica vem sendo utilizada
em partes e não por completo do início a o fim de uma animação. Por isso, temos a
técnica de animação chamada pose a pose, onde desenharemos uma pose inicial e
uma pose final e, entre eles, (interpolação) faremos o processo quadro a quadro. O
diferencial é que, já temos o controle do início e do fim da animação, o que nos
permite saber mais sobre o Timing (tempo de animação) correto. Ou seja, se a
animação será mais lenta ou mais rápida em determinados momentos.
Cada folha de papel chamamos de quadro. Se desenharmos uma pose inicial
e pose final chamamos de quadros chaves, pois são as posições extremas da
animação.
Em muitos estúdios é utilizado a mesa de luz, onde na frente temos uma
régua com pinos para fixar as folhas. A mesa é composta por um vidro que fica
abaixo das folhas e, por trás do vidro, uma lâmpada para gerar iluminação,
mostrando de forma mais transparente os desenhos que estão sendo realizados,
servindo assim, de auxílio para a criação de um novo desenho, pois ao colocar uma

13
nova folha por cima, ficará mais fácil “cobrir” o desenho que está mais transparente
e realizar uma nova pose. Esse efeito é conhecido como onion skinning ou casca
de cebola.

Imagem: Ilustração 3D de uma mesa de luz, com uma folha fixada à frente do vidro e a luz
acesa.

Utilizando a separação de camadas

Como você já sabe o krita é um software que possui sistema de animação

quadro a quadro, ou seja, não temos nada automatizado nesse quesito, logo as
animações seguem como tradicional. Porém, por ser modo digital, temos muitas
configurações que nos ajudam a realizar as animações de forma mais rápida.
Uma delas é o uso de camadas, pois se fosse no tradicional, imaginando
camadas, na folha de um flipbook, só iríamos trabalhar com uma camada, não
poderíamos separar por exemplo, folhas para paisagem, outras para personagens
etc. Em estúdios que seguem o modelo tradicional com mesa de luz, ainda utilizam
um sistema parecido com as camadas digitais, pois são criadas as paisagens, por

14
exemplo, películas à parte e ao escanear no software, é feita a separação em
camadas.
Com o krita aberto, vamos definir alguns atalhos que podem nos auxiliar
melhor durante a animação. Indo no menu Configurações / Configurar o Krita
temos a opção Atalhos do teclado. Nela acessamos o submenu de Animação, fica
a seu critério qual atalho utilizar aqui iremos definir os seguintes atalhos:

Ação Atalho

Quadro Anterior Tecla F1

Próximo Quadro Tecla F2

Duplicar Quadro Tecla F6

Criar um quadro em branco Tecla F7

Para uma animação básica, utilizaremos as camadas nomeadas de acordo

com os elementos. Aqui, para exemplificar temos as seguintes camadas de cima
para baixo: A primeira A line art (contorno final do desenho), a segunda Cores, a
terceira rascunho e próxima, piso, deixando sempre a última na cor branca que é o
background, simulando a folha de papel.

Imagem: Ordem das camadas utilizadas para exemplo.

Com as camadas prontas, na Linha do Tempo, também é possível ver a

mesma ordem para selecionar um quadro, sempre selecione primeiro a camada e
depois o quadro para ficar a animação na camada correta.

15
 Imagem: Ordem das camadas na Linha do Tempo.

Você pode criar grupos nas camadas para uma melhor organização. Por
exemplo, iremos deixar aqui dois grupos: um para o personagem e outro para o
cenário, pois cada grupo poderá ter diversas camadas.
Para criar um grupo basta selecionar uma camada, clicar com o botão direito
do mouse, selecionar a opção Agrupar, Grupo rápido, ou pressionar o atalho
CTRL + G. Após ter criado, basta nomear os grupos e arrastar as camadas corretas
para cada um, conforme imagem de exemplo abaixo:

Imagem: Área acoplável de camadas com dois grupos: Personagem e Cenários.

Utilizando a técnica de animação Pose a Pose, vamos definir uma animação

para um total de 1 segundo, ou seja, 24 quadros. Como a animação ficará se

16
repetindo, o quadro final deve ser o mesmo do inicial, o que chamamos de
animação em LOOP.
Para alterar o total de quadro na animação, basta ir na área acoplável de
animação, e alterar o valor da caixa de diálogo “Fim”, que por padrão inicia em 100,
altere para 24. Ao pressionar o botão de Play na mesma área, sua animação irá
percorrer até o quadro 24 e iniciar novamente automaticamente.

Imagem: Área acoplável de Animação com destaque no total de quadros.

Com tudo configurado, veremos no próximo capítulo como utilizar uma

animação com técnicas de onion skinning. Nunca esqueça de está salvando o seu
arquivo para não correr o risco de perder e ter que realizar tudo novamente do zero.

Técnicas com o uso onion skinning

Como já mencionamos, a técnica de onion skinning, ou também, conhecido

como casca de cebola, nos mostra o efeito de transparência tanto de quadros

17
anteriores como quadros posteriores. Isso nos dá um auxílio no caso de repetição
do desenho.
Primeiro vamos realizar uma animação de uma bola quicando. Lembrando
que esta animação será em loop, por isso ficará repetindo, ou seja, o quadro final
tem que coincidir com o quadro inicial.
Na camada, piso, vamos pressionar a tecla F6 (aqui como exemplo definimos
para duplicar quadro) e desenhar o piso, ou seja, o que faz parte do nosso grupo de
cenários. Use o pincel de sua preferência e crie novas camadas caso queira deixar
mais detalhado.

Imagem: Ilustração de um piso onde a bola irá quicar.

Observe que na linha do tempo é destacado um quadrado azul, mostrando

que tem algum conteúdo animado e, esse, não é mais um quadro vazio. Como foi
criado um quadro, é exibido uma linha na horizontal em todo o restante do quadro,
indicando que se não houver nenhum outro após ele, este será repetido por toda a
animação. Ao pressionar o botão de play, veja que a animação não fica com
quadros brancos, do início ao fim o piso permanece.
Agora, vamos na linha do tempo onde tem a camada de Rascunho que será
todo o rascunho da animação da bola. Já que o quadro final será o mesmo do
inicial, podemos ou deixar sem nada, porém o penúltimo quadro tem que está

18
próximo ao primeiro (a posição da bola na área de desenho) ou simplesmente
repetir.
Para repetir basta segurar a tecla CTRL no quadro, clicar com o botão
esquerdo do mouse e arrastar para o quadro final.

Imagem: Linha do tempo com cópia criada no quadro 24 da camada Rascunho.

Agora, criando mais uma cópia e colocando no quadro 12, já temos a nossa
definição do tempo de animação, ou seja, a bola gasta meio segundo para bater no
chão e voltar para posição inicial.
Ao pressionar a tecla de atalho CTRL + T acessamos à ferramenta de
transformar camada ou seleção e podemos arrastar a bola até colidir com o piso. Ao
pressionar o botão de play, já temos uma animação com início, meio e fim,
precisando apenas de detalhes.
Utilize a mesma ferramenta de transformação para achatar a bola, uma vez
que bate no piso, quando está no quadro 12. Lembre-se: de acordo com a física, ela
deve ser achatada de cima para baixo (vertical) e esticada na horizontal. Segure a
tecla ALT para esticar ambos os lados.

19
 Imagem: Bola sendo achatada e alongada nas laterais.

Com o Timing definido da animação, vamos agora ativar o onion skinning,

que é área acoplável “casca de cebola”. Para ativá-la, basta clicar no ícone de
lâmpada que fica ao lado de cada camada que já tenha algum conteúdo na linha do
tempo.

Imagem: Linha do tempo com destaque no ícone da lâmpada para ativar o efeito casca de
cebola.
Na área acoplável de “Cascas de Cebola” temos algumas barras e números
que indicam quantos quadros para frente (números positivos) e para trás (números
negativos) estão sendo exibidos na área de desenho. Já as barras, é para
definirmos o quanto de opacidade cada quadro será exibido, quanto maior a barra,
mais nítido será a cor em destaque.

20
 Para as cores, temos por padrão do lado esquerdo a cor vermelha (Quadros
anteriores) e do lado direito a cor verde (quadros posteriores). Ao clicar em cada um
podemos alterar as cores e na barra logo acima podemos definir o quanto o quadro
será colorido, que por padrão inicia em 100%.

Imagem: Área acoplável “Cascas de cebola” com as cores padrões dos quadros anteriores
vermelho e posterior verde.

Com eles ativados sempre siga a técnica do pose a pose, tendo como
referência um quadro inicial e um final, e entre eles desenhando a interpolação do
movimento. O efeito irá auxiliar muito na distância do desenho.
Quanto mais próximos os desenhos em mais quadros = MAIS LENTO A
ANIMAÇÃO.
Quanto mais distantes os desenhos em menos quadros = MAIS RÁPIDA A
ANIMAÇÃO.
Ou seja, para que a bola permaneça mais tempo no ar, ela deverá ter mais
quadros, praticamente na mesma posição, isso quer dizer que quanto mais o tempo
passa, mas ela permanece no local. Já o inverso mais rápido ela chega no local.
Como essa animação é mais simples, você pode ativar o ícone de Quadro
automático (Localizado na área acoplável de animação), pois ao pressionar o
CTRL + T e ao editar outro quadro, ficará mais fácil de mover apenas com as setas
do teclado para cima e para baixo.

21
Imagem: Demonstração do efeito “Cascas de cebola” mostrando um quadro anterior e outro posterior
nas cores vermelha e verde.

Finalizado a animação, faça efeitos em camadas a parte, use a camada de

pintura para dar um melhor destaque nos elementos e caso o impacto faça algum
dano no piso, basta criar esse dano no quadro do impacto que ele será repetido nos
quadros adiantes.

Veja ao lado como ficou

essa animação finalizada.

22
 Animando seguindo linhas de movimento

Agora, que você conhece mais um pouco de como funciona a animação no

krita, vamos utilizar mais uma animação de uma bola quicando. Mas, não na mesma
posição e, sim, seguindo um certo direcionamento, para inserirmos mais detalhes e
alguns princípios da animação, porém iremos seguir as linhas de movimentos, ou
também conhecido como linhas guias.
Primeiramente, vamos separar nossas camadas para uma melhor
organização. Aqui, fica a seu critério a forma de ordená-las e nomeá-las, nós iremos
utilizar as seguintes camadas: Line Art, Cores, Rascunho, Guia e Piso. Lembrando
que a última deixamos bloqueada que é a de background na cor branca.

Imagem: Área acoplável de Camadas com 5 camadas transparentes e uma com preenchimento
branco.

Vamos iniciar no desenho do cenário, criando novamente um novo piso para

que tenhamos uma ideia de onde irá ficar o contato. Selecionamos a camada piso,
na time line, clicamos no primeiro quadro e utilizamos o atalho F7 (definimos no
início do e-book) para criar um quadro em branco.
E para desenhar, utilize os pincéis de acordo com sua preferência, aqui,
realizamos apenas um rascunho de um terreno com mais alguns elementos.

23
 Imagem: Ilustração de terreno para auxiliar no exemplo da animação.

Como nosso cenário está pronto, vamos para a camada de Guia e iremos
desenhar a trajetória da bola. Utilize qualquer pincel e realize a trajetória quicando
no piso. A cada toque é reduzida a velocidade, portanto, teremos algo conforme
imagem de referência abaixo:

Imagem: Ilustração com a linha guia de trajetória da bola mostrando seu ponto inicial e final.

24
 Atente-se aos detalhes de altura e espaçamento. A bola vai perdendo altitude
e reduzindo o seu distanciamento, conforme a sua trajetória.
O próximo passo é realizar o desenho da bola na camada de rascunho,
lembrando que utilizamos essa camada, pois em outras faríamos orefinamento da
arte final. Porém, em vez de durar apenas um segundo de animação, vamos alterar
o total de quadros para 48, ou seja, dois segundos num total.
Basta irmos na área acoplável de animação e alterarmos a caixa de “FIM”,
para 48 quadros.
Após ter realizado o desenho inicial, segure a tecla CTRL, clique com o botão
esquerdo do mouse e arraste para o quadro final (48), criando assim, uma cópia do
quadro posicionado em local diferente. Agora, selecionando o quadro 48 utilize o
atalho de transformação CTRL + T, e mova a bola para a posição correta. Ative o
efeito de cascas de cebola, clicando na lâmpada ao lado da camada, para você ver
todos os quadros que já possuem conteúdo:

Imagem: Bola desenhada no quadro inicial e copiada para o quadro 48.

Lembre-se da técnica de velocidade: a velocidade aumenta, sempre que a

bola for caindo e, ao chegar no topo máximo, reduz a velocidade, pois irá começar a
descer. Dessa forma, simulamos efeitos de física na animação da bola.
Sempre iremos posicionar a bola, criando os extremos. Vamos posicionando
cada toque, no piso, em um quadro na animação, para quando realizar o play,
observarmos a sua velocidade. Também vamos realizar outras posições que são as

25
alturas máximas, para que fique a animação quase completa, faltando apenas as
interpolações.
Teremos algo nesse estilo:

Imagem: Quadros extremos para definir a velocidade da animação da bola.

Quer ver como fica a animação apenas com esses quadros? Você pode
acessá-la, através do QR Code abaixo. Até aqui, vimos apenas a definição de
tempo e espaço, temos ainda que criar as interpolações, achatar e esticar a bola
quando necessário durante o contato com o piso.

Veja ao lado como ficou

essa animação finalizada.

26
 Utilizando a técnica conhecida por: by Two (por dois), desenharmos sempre
a metade de todos os quadros, ou seja, a cada quadro desenhado o segundo é
repetido. Isso não afeta a visualização durante a animação e, em vez de desenhar
48 quadros, estamos apenas desenhando 24. Como o krita já deixa um quadro
repetido assim que é criado, basta deixarmos sem conteúdo apenas mostrando a
linha horizontal azul, que já sabemos que é a repetição do anterior, sem a
necessidade de copiar e colar ele novamente.

Imagem: Linha do tempo com uma repetição de quadro anterior a cada novo criado.

Vá ajustando sua animação, sempre verificando os quadros anteriores e

posteriores. Quanto mais próximos, mais lento e quanto mais longe, mais rápido:

Imagem: Quadro principal com a bola com borda preta, e efeito da Cascas de cebola nas
cores vermelho e verde.

27
 Caso sua animação não fique tão fluída, isso quer dizer que é necessário
mais quadros, ou seja, menos poses (colisões no piso). Nesse caso, aqui,
decidimos aumentar o tempo da animação para 3 segundos, sendo 72 quadros.
Para ajustar a quantidade na área acoplável de Animação, e ir selecionando
segurando a tecla SHIFT os quadros que queira afastar mais uns dos outros.

Imagem: Quadros da linha do tempo selecionados com a tecla SHIFT pressionada.

Após ajustes temos nossa animação finalizada. Como estamos utilizando

apenas as cores preto e branco, na camada Cores, basta criar quadros de
animações apenas onde estiver a bola em contato com o cenário, para não mostrar
partes, ficando transparente. Use o pincel na cor branca e vá criando quadros em
branco durante o preenchimento utilizando o atalho F7. Como não utilizamos a
camada de Line Art, jogue a camada de cores para baixo do rascunho.

Imagem: Criando um quadro em branco onde há contato com o cenário.

28
 E por último podemos criar uma camada, à parte, para efeitos ou alterar no
próprio cenário, onde foi colidido com a bola, deixando uma marca da colisão.
Nossa animação final ficou conforme você pode acessar abaixo no QR Code:

Veja ao lado como ficou

essa animação finalizada.

Animando um personagem cartoon

Aqui, iremos demonstrar uma forma mais detalhada de animação, realizando

alguns desenhos de um personagem Cartoon. Lembrando que você deve possuir
alguns conhecimentos básicos de técnicas de desenho para poder dominar a
questão de proporção e solidificação de objetos, caso não use nenhuma referência
para seguir.
Para demonstrar de forma mais simples, nosso personagem será um jogador
de baseball e não será tão detalhado. Já a nossa animação, será o personagem
realizando o lançamento de uma bola com a mão.
Iniciando com um novo documento em branco, renomeie a sua camada de
pintura para uma melhor organização. Nesse caso, renomeamos para o nome de
“rascunho”, pois caso necessite de mais detalhes nas artes, basta criar novas
camadas para cores e lineart, por exemplo.
Para iniciar, utilizaremos um princípio de animação conhecido como
“antecipação”. Primeiro desenharemos as poses extremas, chamadas também de
quadros chaves, são elas: Parado, Antecipação e Ação. A antecipação é um
movimento que demonstra o que o personagem irá fazer antes de realizar a próxima
pose, a pose da ação que trata-se da pose final de lançamento da bola.
Realize os desenhos conforme imagem abaixo e defina em quais quadros
na linha do tempo eles irão ficar, pois são essas poses principais que irão definir
o tempo da animação, qual parte é mais lenta e qual parte é mais rápida.

29
 Imagem: Referências para pose do personagem.

Lembrando de que a camada que renomeamos deve estar selecionada na

linha do tempo e, no primeiro quadro criado, um quadro em branco, que é a tecla de
atalho que definimos, a tecla F7.

Imagem: Janela da Linha do tempo com destaque na camada de nome Rascunho e no

primeiro quadro.

Com as poses definidas, não se esqueça, se ativarmos o onionskining,

teremos algo nesse estilo, conforme a imagem abaixo de exemplo:

30
 Imagem: Três poses do personagem com o onion skin ativado.

Como essas poses são as que mais se destacam em uma animação,

obviamente, são as mais lentas para que o público veja melhor. Arraste as poses
nos quadros pensando, justamente nesse tempo. A pose final por exemplo, irá
demorar mais, ou seja, se tivermos apenas um segundo de animação, essa pose irá
iniciar bem antes do quadro 24 e ao clicar no botão de play, já podemos ter uma
noção de como irá ficar nossa animação final.
Agora, como precisamos dos quadros de interpolação, vamos desenhar eles
entre os extremos, e o primeiro a ser desenhado será o que chamamos de
Pré-Antecipação, e posteriormente desenharemos outro, o Pré-Ação, ou seja,
movimentos destacados antes dos extremos.

Imagem: Referências da pré-antecipação e pré-ação.

31
 Com essas imagens feitas, sempre devemos utilizar o play para verificar
como está o andamento dela, lembrando de desenhar sempre entre um e outro,
utilizando o efeito de cascas de cebola (ou onion skinning) para não se perder em
questões de proporção.
E, por último, para finalizar sua animação, realize os desenhos entre todos os
extremos desenhados. Uma dica bastante valiosa é: copiar o quadro segurando a
tecla CTRL e arrastando para o local devido, apagar alguns detalhes e refazer os
novos traços.
Com tudo finalizado, crie mais uma nova camada, que será o desenho da
bola e ajuste apenas onde há desenho do personagem, ou seja, na linha do tempo,
coloque a bola no mesmo local acima dos quadros do personagem. Você pode
depois em outras camadas acrescentar detalhes, pois lembre-se que essa é uma
camada de rascunhos.

Veja no link a seguir como

ficou a nossa animação final.

Animação de partículas

Em jogos, é bastante comum vermos efeitos de animação de partículas, aqui

demonstraremos algumas técnicas para que você consiga animar partículas, tanto para
animações diversas, como para uso em jogos digitais.
Com um novo documento em branco, vamos iniciar uma animação de uma
bolinha caindo em um rio. Essa, ao cair terá o contato com o rio, e após a colisão,
subirá uma pequena onda com algumas partículas de água espalhadas até caírem e
colidirem novamente com o rio, assim desaparecendo todas as partículas.
Aqui nomeamos a camada de pintura com o nome de Agua (Sem
acentuação), e do quadro 0 ao 4, fizemos a animação da bolinha caindo, lembrando
que devemos seguir um fluxo, conforme imagem abaixo:

32
 Imagem: Referência indicando o caminho da bolinha e o fluxo das partículas.

Do quadro 5 em diante, é a parte da colisão com a água, devemos seguir as

seguintes etapas:
1º Ao colidir é gerado uma pequena onda que vai crescendo e se
fragmentando em alguns locais, gerando assim novas partículas de água;
2º Cada partícula segue o fluxo, podendo também se quebrar e virar outras
menores;
3º Ao atingir sua altura máxima, começa a queda até colidir novamente com o
“rio” imaginário e, em cada colisão, criamos arcos que se distanciam da partícula e
depois desaparecem, formando assim um efeito de pequenas ondas.
Repare na imagens abaixo de como se comporta cada etapa citada aqui, veja
que todas são quadro a quadro, e seguem o fluxo.

Imagem: Sequência inicial da animação do contato até novas partículas.

33
 As pequenas partículas continuam seguindo suas trajetórias até acontecer
novamente o contato com o rio e, após ele, é criado pequenas ondas (arcos) que se
expandem até desaparecer.

Imagem: Sequência final até desaparecer as partículas

Para ver como ficou esta animação

no final, acesse o Qr Code ao lado:

Já para animações de explosão com fumaça, o fluxo segue da seguinte

forma:
● 1º Os raios de luzes começam pequenos e depois aumentam aleatoriamente;
● 2º A fumaça surge grande (para indicar velocidade) e toma forma até sua
altura máxima.
● 3º A fumaça vai se espalhando, afinando o seu centro e, no topo, começa a
se despedaçar em pequenos pedaços até desaparecer completamente.

Abaixo seguem imagens de como fazer o fluxo desse exemplo citado.

Lembrando que existe diversos tipos de explosões. Aqui, estamos simulando com
um contato no chão, sem esse contato a fumaça se comportaria de uma forma
diferente.

34
 Imagem: Fluxo da fumaça, onde no centro vai afinando e o topo vai se espalhando.

Da mesma forma do exemplo anterior, crie uma nova camada para realizar
essa animação, siga as etapas citadas acima. Abaixo, veja referência para estudo a
sequência em quadro a quadro.

Imagem: Sequência da explosão gerando partículas de fumaça.

Observe, principalmente, a altura da fumaça, seu formato que vai se

expandindo nas laterais e diminuindo a partir do centro.

35
 Após finalizada a animação,
teremos algo como no exemplo
ao lado

Exportando a animação

No krita, temos algumas opções para exportação, porém algumas delas,

requerem uma instalação de outro programa para poder funcionar corretamente.
Vamos, aqui, exportar primeiro com a opção que não precisa de nenhuma
instalação. Nessa opção, é preciso apenas exporta uma sequência de imagens da
animação realizada, conforme sua necessidade.

Sequência de Imagem

Para exportar todos os quadros, formando assim uma sequência de imagens,

clicamos no menu Arquivo / Renderizar Animação e ao abrir uma nova janela, no
campo Exportar, escolhemos a primeira opção: Sequência de Imagem.

36
Imagem: Janela de renderizar animação com a opção marcada para exportar sequência de imagem.

Escolha o formato do arquivo, a localização onde vai ser salvo e um nome

base que é o sufixo das imagens exportadas. Também existe a opção de qual
quadro iniciar e finalizar a exportação, ou apenas quadros únicos. Caso você não
tenha preenchido todos os quadros de uma animação, ele pegará apenas os
quadros chaves, ou também como conhecemos pelo termo de extremos, se a opção
estiver marcada. Já a opção Começar numeração em significa dizer que o prefixo
do nome das imagens, irá acrescentar uma numeração aditiva, sempre somando a
cada imagem exportada.

Gerando um GIF Animado

Já para exportar como GIF animado, o krita o deixa na aba como se fosse
vídeo. Por isso, nesse caso, é necessário realizar uma instalação de um programa
para assim converter sua animação tanto em GIF, como em vídeo.

37
 Ao abrir a mesma janela de Renderização de animação, escolha a opção
Vídeo no campo Exportar.

Imagem: Janela de Renderização de animação com opção de Vídeo selecionada.

Agora, é possível definir o primeiro e último quadros, tamanho em largura,

altura e até o FPS da animação. Mais abaixo, tem a opção FFMpeg, que é o
caminho do arquivo necessário para poder gerar as conversões.
Caso você tente exportar sem ter o caminho para esse arquivo, abrirá uma
janela de alerta, indicando que você precisa dele. Assim como também, nela existe
o link para o site que possui o arquivo, bem como, o link para o manual do usuário
do krita, mostrando o passo a passo da execução de exportação utilizando o
FFMpeg.

38
 Imagem: Janela de alerta do krita indicando que necessita do caminho onde tem o FFmpeg.

Acessando o site, na primeira página temos um botão verde para download

do programa.

Imagem: Página inicial do site www.ffmpeg.org

E ao clicar nele, somos direcionados para outra página onde possui opções
de download para usuários dos sistemas operacionais: Linux, Windows e Mac.
Como no curso utilizamos o Sistema operacional Windows, deixamos o mouse
sobre o ícone e mais abaixo podemos encontrar dois links que irão direcionar para
os arquivos.

39
 Imagem: Página de download do arquivo FFmpeg.

Clicando no primeiro link, você é direcionado para outra página onde possui
diversas versões desse arquivo, junto com seu formato. Aqui, selecionamos o
arquivo com formato .ZIP das últimas versões 4.4.1.

Imagem: Arquivo ffmpeg destacado para realizar o download com extensão .zip.

Após ter realizado o download do arquivo, vá na pasta onde você salvou e

clique com o botão direito do mouse, selecionando a opção Extrair Aqui, para que o
arquivo saia da pasta compactada e fique em uma pasta normal.
Agora no krita, no local do FFmpeg, escolha a pasta onde está o arquivo
executável do programa.

40
 Imagem: Pasta com destaque no arquivo executável do ffmpeg.

Com tudo correto, basta escolher a opção de Renderizar como imagem GIF,
para que o sistema converta sua animação.

Imagem: Janela com o FFMpeg selecionado e a opção de Renderizar como imagem GIF.

41
 No final seu arquivo será gerado com sucesso, conforme é visto na área de
desenho do krita.

Gerando um vídeo MP4

Para gerar um vídeo, basta seguir o mesmo procedimento citado

anteriormente. Porém, em vez de escolher a opção imagem em GIF, escolha a
opção de Vídeo MPEG-4. Ao finalizar na sua pasta, pode ser que contenha mais
alguns arquivos extras fora o vídeo, basta apagá-los, pois é gerado
automaticamente pelo aplicativo FFMpeg.

42
 Referências

SENAI, Serviço Nacional de Aprendizagem Industrial. Plano de curso de Animação

2D . Iniciação Profissional, PB, 2020.

SENAI/DN. Metodologia SENAI de Educação Profissional - MSEP. Brasília/DF,

2019.

SENAI/DN. Itinerário Nacional - TI Software, Brasília/DF, 2020

KRITA. Disponível em: https://krita.org/en/ Acesso em: 11 de outubro de 2021.

FFMPEG. Disponível em: http://ffmpeg.org Acesso em: 03 de novembro de 2021.

43