Construção de Imagens no Photoshop

Prévia do material em texto

MOTION GRAPHICSMOTION GRAPHICS
CONSTRUÇÃO NOCONSTRUÇÃO NO
EDITOR DE IMAGEM –EDITOR DE IMAGEM –
USO DO PHOTOSHOPUSO DO PHOTOSHOP
Autor: Me. Felipe Augusto Pires
Revisor : Edni l ton Costa
IN IC IAR
introdução
Introdução
O software Photoshop foi concebido em 1987, por Thomas Knoll, em sua tese
de doutorado, que criou um código para exibir imagens em tons de cinza em
um monitor preto e branco. Em meados de 1990, a Adobe adquiriu o
Photoshop, iniciando, assim, sua história, e tornando-o o software mais
conhecido para edição de imagens no mundo.
Concebido originalmente para rodar em sistemas Apple, no �nal de 1992, o
Photoshop lança uma versão para Windows e, depois, reinicia o ciclo de
desenvolvimento para Windows somente em agosto de 1997.
Com mais de 30 anos de estrada, o Photoshop é um software extremamente
consolidado na indústria, e quem sabe manipulá-lo, certamente, encontrará
espaço no mercado de trabalho.
O Adobe Photoshop é um software proprietário e, como tal, deve ser
adquirido, ou seja, o usuário deve comprar uma licença de uso. Atualmente, a
Adobe trabalha com sistema de licenças mensais ou anuais que podem ser
adquiridas em seu próprio site .
Uma vez adquirido e devidamente instalado, sempre que o programa iniciar
em seu computador, você irá se deparar com a tela de abertura que, a cada
atualização do programa, ganha uma nova imagem ou ilustração. No caso
deste conteúdo, utilizamos a versão mais atual: a versão 2020.
Construção noConstrução no
Editor de Imagem –Editor de Imagem –
Uso do PhotoshopUso do Photoshop
Se você utiliza o Adobe Creative Cloud, certamente, se deparará com a tela de
boas-vindas do software já logada na conta, conforme a imagem a seguir. Esta
tela de boas-vindas apresenta as novidades da versão, alguns links para
vídeos instrucionais a respeito do uso do software , as possibilidades de criar
ou abrir arquivos e os arquivos que foram desenvolvidos recentemente.
Figura 3.2 - Tela de boas-vindas do Photoshop 
Fonte: Elaborada pelo autor.
Contudo, se, por alguma situação, você está abrindo o software pela primeira
vez, sem ter realizado login no Creative Cloud, você será apresentado à caixa
de login ilustrada na Figura 3.3 para poder prosseguir.
Figura 3.1 - Tela de abertura do software 
Fonte: Elaborada pelo autor.
Para resolver esta situação, basta realizar o cadastramento do Adobe ID no
site da fabricante, pois sem o login de acesso não é possível acessar ou utilizar
os softwares . Em versões anteriores, isso não era obrigatório, entretanto, a
empresa optou por mudar o processo de uso.
Figura 3.3 - Caixa de login no Creative Cloud 
Fonte: Elaborada pelo autor.
Após realizar o login , para iniciar um novo arquivo e começar a construção,
primeiramente, é necessário clicar na opção “criar”, que se encontra ao lado
esquerdo da tela de início.
saibamais
Saiba mais
Para utilizar o Adobe After E�ects,
atualmente, é necessário ter uma conta
cadastrada: o Adobe ID. Esta conta é gratuita
e qualquer pessoa pode criá-la, porém, isso
não garante a autorização de uso do
software e nem o torna gratuito. Os softwares
da Adobe são softwares proprietários, ou
seja, é necessário comprá-los para poder
utilizar. Os valores variam de acordo com a
categoria, por exemplo, para pro�ssionais, os
valores são diferentes dos valores para
estudantes e professores, e todas essas
informações podem ser consultadas no site
da Adobe. Para criar o Adobe ID e veri�car as
informações de valores, é necessário acessar
o site a seguir.
ACESSAR
http://www.adobe.com.br/
Ao encontrar esta tela pela primeira vez, o software apresentará algumas
opções de criação de arquivos, conforme imagem a seguir.
Figura 3.5 - Tela de prede�nições do Photoshop 
Fonte: Elaborada pelo autor.
Nesta tela, encontramos opções de prede�nições dos mais diversos tipos de
arquivos para as mais diversas áreas.
Quando se fala em desenvolvimento de peças grá�cas para motion ,
normalmente, utilizam-se as prede�nições das áreas de dispositivos móveis e
�lme e vídeo. Portanto, para ilustrar o acesso a uma destas abas,
Figura 3.4 - Tela de boas-vindas do Photoshop com o botão “criar” visível 
Fonte: Elaborada pelo autor.
apresentamos a opção de �lme e vídeo, que será utilizada no processo
apresentado neste material.
Quando escolhemos uma prede�nição, podemos utilizá-la conforme foi
desenvolvida ou ajustá-la de acordo com a necessidade especí�ca. Para
efetuar ajustes, devemos alterar as opções contidas nos detalhes da
prede�nição.
As opções contidas nesta janela são:
Figura 3.6 - Tela de modelos prede�nidos de �lme e vídeo do Photoshop 
Fonte: Elaborada pelo autor.
Figura 3.7 - Tela de modelos prede�nidos do Photoshop 
Fonte: Elaborada pelo autor.
Largura : na qual de�ne-se a largura da imagem que será
trabalhada;
Altura : na qual de�ne-se a altura da imagem que será trabalhada;
Unidade de medida : a opção de exemplo é a opção pixel , mas o
Photoshop permite usar diversos tipos de unidade de medida;
Orientação : pode-se trabalhar com o arquivo em modelo paisagem
(deitado) ou em modelo retrato (de pé);
Resolução : determina quantos pixels haverá dentro de cada
polegada da criação da imagem. Isso está atrelado ao tipo de vídeo
ou veículo de exibição (internet, tv, etc.). A resolução é bastante
importante para qualquer projeto, no entanto, deve ser utilizada da
forma correta, por exemplo, a melhor resolução para projetos web é
de 72ppi (pixel per inch), e para trabalhos voltados à transmissão de
TV, é comum trabalhar com 300ppi;
Modo de cores : permite escolher que tipo de modo de cor será
utilizado para trabalhar. O modo de cor, basicamente, faz a gestão
das cores baseadas em sua mídia de saída. O motion se refere a
mídias digitais, isto é, monitores, portanto, o padrão mais comum
nesses casos é o RGB;
Conteúdo do plano de fundo : escolhe uma cor especí�ca para
trabalhar como fundo da imagem. Em relação ao vídeo, o fundo mais
comum é o preto, porém, se você está trabalhando com
desenvolvimento de imagens que serão usadas em projetos de
motion , geralmente, recomenda-se o fundo transparente.
É possível alterar qualquer uma destas opções de acordo com a necessidade
do projeto.
Depois de clicar na opção “criar” da janela, �nalmente, você terá criado o
arquivo que será utilizado para desenvolver a peça grá�ca animada. A tela do
Photoshop com o arquivo aberto é representada pela �gura a seguir:
Figura 3.8 - Modelo HDTV solicitado criado 
Fonte: Elaborada pelo autor.
Nesta tela, são desenvolvidas todas as separações de personagem. Assim,
utilizaremos o processo de vetorização do Photoshop para redesenhar os
elementos do personagem, pois é disso que esse processo se trata. Então,
utilizaremos a referência deste personagem para redesenhar por cima e,
agora que já entendemos a interface, vamos colocar a mão na massa.
praticar
Vamos Praticar
Re�etir sobre uma peça grá�ca é uma ação que requer conhecimento sobre a
necessidade do cliente, para, assim, poder utilizar as prede�nições de criação de
arquivo que o Photoshop oferece para o pro�ssional de forma consistente com o
que o projeto necessita. Sabendo que a opção mais importante de prede�nição é a
resolução do projeto, qual é a necessidade de escolher corretamente a resolução de
um projeto?
a) Garantir a cor correta dos elementos que serão exportados para o software
de animação escolhido.
b) Garantir a exportação correta quando a animação estiver �nalizada, de
acordo com a mídia escolhida ( web , tv, etc.).
c) Garantir a correta divisão dos elementos que serão animados quando a
peça grá�ca for levada para o software de animação.
d) Garantir que a quantidade de pixels contida em cada polegada desta peça
grá�ca esteja dentro dos padrões para a mídia �nal ( web , tv, etc.).
e) Garantir que os elementos da peça grá�ca mantenham sua posição no
software de animação, mantendo, assim, a ordem da criação.
Para criar uma peça grá�ca que será levada para o processo de animação,
existemvários caminhos e vários softwares que podem ser utilizados, en�m, é
aquela história de que “vários caminhos levam à Roma”. Assim, neste
material, a proposta é utilizar o editor de imagem Photoshop e os recursos
que ele possui voltados para este princípio.
Dessa forma, focaremos nas ferramentas de vetorização para desenvolver o
processo de produção do personagem que foi animado anteriormente no
After E�ects. Assim, acreditamos que os conceitos têm um alinhamento e que
isso contribuirá para que seja mais fácil conectar-se entre os conteúdos. 
Criação no EditorCriação no Editor
de Imagem – Criarde Imagem – Criar
uma Peça Grá�cauma Peça Grá�ca
para Animaçãopara Animação
saibamais
Saiba mais
Para acompanhar o mesmo processo de
construção apresentado neste material, pode
ser que você queira utilizar o mesmo
personagem que estamos desenvolvendo no
Photoshop e que foi animado no After
E�ects. Então, se essa for a sua vontade, o
informamos que o personagem foi retirado
de um banco de vetores gratuito, e
recomenda-se que você utilize apenas a
imagem e não o arquivo �nalizado. Ele pode
ser acessado e baixado no link a seguir.
ACESSAR
Então vamos recriar o personagem. Para isso, vamos utilizá-lo como uma
camada de imagem única dentro do Photoshop e recriar as formas por sobre
ele, trabalhando corretamente as camadas, o que é o mais importante nesse
tipo de construção. É importante ressaltar que, quando você for desenvolver
um personagem ou qualquer elemento para ser usado em vídeo, é necessário
usar o modo de cor “Luz”. Ao trabalhar com softwares da Adobe, o modo mais
comum é o Adobe RGB, que, segundo José e Reis (2014), é um modelo de cor
mais abrangente que o RGB padrão.
Assim, vamos iniciar um arquivo vazio com a prede�nição de �lme e vídeo no
formato de HDTV. 
https://www.vecteezy.com/vector-art/207544-male-guru-character
Figura 3.9 - Tela de modelos prede�nidos do Photoshop 
Fonte: Elaborada pelo autor.
Uma vez aberto, iremos trazer a imagem de referência para dentro do
arquivo, para podermos reconstruir os elementos deste personagem e
entender como um processo de construção de peça grá�ca para animação
deve ser pensado.
Para trazer uma imagem de referência para dentro do Photoshop, basta
arrastar de dentro da pasta para dentro do arquivo que está aberto na tela do
Photoshop, soltar e apertar a tecla “enter". 
Figura 3.10 - Arquivo referência inserido dentro do Photoshop 
Fonte: Elaborada pelo autor.
Existem diversas maneiras de recriar uma imagem para ser utilizada em
processo de animação. Este processo é denominado vetorização e se de�ne
em formas simples no ato de transformar uma imagem formada por pixels em
uma imagem baseada em objetos matemáticos (linhas, pontos e curvas) que,
dessa forma, poderá ser ampliada e reduzida sem perder qualidade, além de
poder sofrer os processos de animação (rotação, movimentação e
escalonamento), também sem prejuízo de qualidade.
Para desenvolver o ato de vetorização, o Photoshop possui algumas
possibilidades de ferramentas e técnicas. Dependendo da necessidade e do
projeto, e, certamente, quanto mais você estudar e trabalhar com o software ,
mais haverá possibilidade de escolher a técnica que você deseja utilizar. Neste
material, usaremos a técnica de vetorização com a ferramenta caneta, para
recriar o objeto e poder utilizá-lo de maneira correta no processo de
animação. Então, vamos ao processo.
Como elemento escolhido para esse processo, utilizaremos o rosto do
personagem com o objetivo de apresentar como desenvolver os passos.
Na primeira etapa, é sempre interessante ter o elemento que será vetorizado
em destaque, então, começamos aplicando zoom no elemento cabeça, no
caso, e deixando ele em destaque no centro da tela do Photoshop. Para isso,
basta rolar o scroll do mouse para frente e para trás e, se for necessário
movimentar a imagem da tela para ajustar a posição, basta manter o botão
de barra de tarefas pressionado e utilizar o botão esquerdo do mouse para
mover para o lado desejado. 
Figura 3.11 - Zoom no elemento que será vetorizado 
Fonte: Elaborada pelo autor.
Após realizado o processo de zoom do elemento, o próximo passo é acessar a
ferramenta caneta que se encontra na barra de ferramentas, localizada à
esquerda da tela, como pode ser observado na imagem a seguir. 
Figura 3.12 - Ferramenta caneta em destaque 
Fonte: Elaborada pelo autor.
Ao selecionar a ferramenta, a primeira escolha a se fazer dentro do
Photoshop é como esta ferramenta será utilizada, pois ela pode ser utilizada
para desenhar um vetor ou para criar uma seleção. Portanto, de�na se ela
será utilizada como demarcador ou forma. Assim, para desenhar um vetor, é
necessário utilizar a opção “forma”. 
Figura 3.13 - Ferramenta caneta com as opções forma e deformador sendo
selecionadas 
Fonte: Elaborada pelo autor.
Ao selecionar a opção “forma”, também é importante selecionar as cores com
as quais esta forma será desenvolvida. Para isso, o Photoshop permite a
escolha da cor de preenchimento e da cor de contorno. Todo processo de
vetorização se torna mais simples quando realizado com apenas uma cor de
contorno que seja bem diferente do objeto de base, para facilitar a percepção
do novo elemento que está sendo criado. 
Figura 3.14 - Seleção das cores do contorno da ferramenta caneta na opção
forma 
Fonte: Elaborada pelo autor.
Para este exercício, optamos por deixar o contorno vermelho e o
preenchimento sem cor, assim, teremos um novo elemento bem contrastante
sendo desenhado sob o anterior, e será bem simples enxergar essa criação. 
Figura 3.15 - Seleção das cores do preenchimento da ferramenta caneta na
opção forma 
Fonte: Elaborada pelo autor.
Após realizada a escolha, passamos para o processo de desenhar de fato. A
cada clique, será criado um ponto do desenho e, a cada dois pontos, será
realizada uma linha. Esta linha pode ser reta ou curva. Veja a imagem a seguir.
Figura 3.16 - Primeiro conjunto de pontos e linha criado 
Fonte: Elaborada pelo autor.
Para criar uma curva, é necessário que, no momento do clique com o botão
esquerdo para criar o ponto, você mantenha este botão pressionado e
movimente o mouse para esquerda ou direita, para, assim, criar a curva dessa
linha.
Começaremos desenhando o rosto. Como os elementos irão se sobrepor,
nesse caso, não é importante desenvolver o rosto perfeito e completo, pois
ele será coberto pela barba e pelo turbante, e, talvez, a forma seja diferente
do que se está acostumado. É necessário manter apenas o formato das
orelhas. Em relação ao restante, mantenha apenas o necessário. 
Então, temos apenas que fechar a �gura, ou seja, clicar no mesmo ponto
inicial pelo qual o processo de criação das linhas foi iniciado, para então
poder escolher a cor do objeto e partir para a criação do próximo.
Ao terminar o elemento, clique sobre a opção “cor de preenchimento” e utilize
a opção “seletor de cor” que está identi�cada na imagem a seguir: 
Figura 3.17 - Figura vetorizada pronta para inserir o último ponto e fechar a
forma 
Fonte: Elaborada pelo autor.
Figura 3.18 - Seleção de cor da forma �nalizada por meio do seletor de cores 
Fonte: Elaborada pelo autor.
Pronto, agora você pode utilizar a opção de conta gotas para poder “pegar” a
cor do rosto do personagem, ou então você pode escolher neste mesmo
seletor de cor qual cor você mais gostaria de aplicar no rosto. 
Figura 3.19 - Seleção de cor da forma �nalizada por meio do seletor de cores 
Fonte: Elaborada pelo autor.
Feito isso, agora, é só repetir esse processo na barba, nariz, olhos,
sobrancelha e turbante. É preciso, realmente, desenhar parte por parte do
objeto, no entanto, o resultado é verdadeiramente satisfatório.
Após colocar a cor de preenchimento, uma situação que pode ocorrer é a de
que alguns elementos que ainda não foram desenhados se “escondam”.
Diante dessa situação, temos duas possibilidades: a primeira, e mais óbvia,
seria colocar a cor de preenchimentosomente depois de tudo ter sido
desenhado; já a segunda opção seria mexer na opacidade da camada e
diminuí-la, criando uma transparência do elemento e possibilitando enxergar
o que estava “atrás” do elemento que foi desenhado. A segunda opção pode
ser vista na imagem a seguir. 
Figura 3.20 - Elemento com transparência da camada aplicada 
Fonte: Elaborada pelo autor.
Para diminuir a opacidade da camada, basta selecionar a camada, ou as
camadas, e diminuir o valor da opacidade que inicialmente está com o valor
em 100%. Mas lembre-se de voltar a opacidade ao seu valor original para não
�car com o elemento transparente no �nal do projeto. 
praticar
Vamos Praticar
Após vetorizar vários elementos que compõem o elemento �nal, por exemplo, um
braço com manga da camiseta e um relógio, em alguns casos, é necessário uni�car
todos os elementos a �m de formar um único elemento �nal. Ao clicar com o botão
direito do mouse sobre as camadas dos elementos que devem ser uni�cados, o
Adobe Photoshop fornece uma opção para desenvolver esse processo. Assinale a
alternativa que representa corretamente esta opção.
a) Ao clicar com o botão direito sobre as camadas, é preciso acessar a opção
“Juntar camadas selecionadas” para efetuar o processo.
b) Ao clicar com o botão direito sobre as camadas, é preciso acessar a opção
“Uni�car todas as camadas” para efetuar o processo.
c) Ao clicar com o botão direito sobre as camadas, é preciso acessar a opção
“Mesclar camadas visíveis” para efetuar o processo.
d) Ao clicar com o botão direito sobre as camadas, é preciso acessar a opção
“Mesclar camadas selecionadas” para efetuar o processo.
e) Ao clicar com o botão direito sobre as camadas, é preciso acessar a opção
“Mesclar automático” para efetuar o processo.
Depois de aprender a vetorizar os objetos, devemos entender que é
necessário organizar esses objetos da melhor maneira possível para poder
desenvolver o projeto de animação.
Basicamente, é preciso organizar separadamente cada elemento e, assim,
desenvolver individualmente cada parte a ser animada. Esta etapa é a mais
importante e relevante, pois é por meio dessa divisão que os elementos serão
encaminhados corretamente para o software de animação.
Depois de desenhar todos os elementos que compõem uma das partes, a
etapa �nal para se ter uma das peças grá�cas que constitui o personagem é
unir todos esses elementos em uma única peça.
Para executar essa ação, é mais simples desligar as camadas que foram
utilizadas como referência e deixar visíveis apenas as camadas que serão
unidas. E, para que isso aconteça, basta desligar o ícone de olho que está
localizado em frente à camada. 
Exploração dosExploração dos
MovimentosMovimentos
Figura 3.21 - Camadas desligadas 
Fonte: Elaborada pelo autor.
Para isso, devemos utilizar a tecla “shift” do teclado, mantendo-a pressionada,
clicar na primeira camada e, depois, na última camada, as quais precisam ser
unidas, conforme podemos observar na imagem a seguir. 
Após realizada essa seleção, é preciso clicar com o botão direito do mouse
sobre as camadas selecionadas e então acessar a opção “unir camadas
visíveis”. 
Figura 3.22 - Camadas que serão unidades selecionadas 
Fonte: Elaborada pelo autor.
É necessário, sempre, nomear as camadas e organizá-las de forma coerente
para você ou para quem desenvolverá a animação do projeto. Não se esqueça
de nomear de maneira que seja fácil de entender. 
Figura 3.24 - Todas as camadas organizadas e nomeadas. 
Fonte: Elaborada pelo autor.
Pronto, agora é só realizar esses mesmos passos e desenhar e unir cada uma
das partes que deverão ser animadas no After E�ects. Essa organização será
ditada de acordo com a necessidade da animação, portanto, a organização
nunca será a mesma para todas as animações que você criar. Dessa maneira,
Figura 3.23 - Opção “unir camadas visíveis” 
Fonte: Elaborada pelo autor.
é importante, em primeiro lugar, estudar o que deverá ser animado antes de
vetorizar e juntar todos os elementos sem a devida atenção. 
praticar
Vamos Praticar
Usando o Adobe Photoshop, desenvolva todos os vetores do personagem,
agrupando os elementos para que, no �nal, você tenha as seguintes camadas:
turbante, rosto, braço esquerdo, braço direito, perna esquerda, perna direita e
tronco. Organize as camadas exatamente nesta ordem, colocando o turbante mais
ao topo da lista e o tronco mais abaixo da lista de camadas. Vamos praticar?
A maneira mais comum de animar objetos ou personagens em qualquer
software de animação é por meio de quadros-chave ( keyframe ), ou posições-
chave. Essa técnica remonta às animações tradicionais, originadas nos
primórdios do século passado, em 1908, com a criação da animação
Fantasmagorie , do francês Émile Cohl.
A técnica de quadro-chave consiste em desenhar as posições de cada
movimento que o personagem/objeto efetuará no decorrer da animação.
Atualmente, os softwares ainda utilizam essa técnica, entretanto, de uma
forma um pouco mais inteligente, pois se baseiam no princípio de posição-
chave dos 12 princípios da animação, segundo o qual marcam-se apenas os
extremos da animação e o software se encarrega de preencher os espaços de
animação entre esses extremos.
Criação dosCriação dos
Movimentos –Movimentos –
Aplicação deAplicação de
Conceitos da AulaConceitos da Aula
PassadaPassada
Agora que entendemos como funciona uma animação de quadro-chave,
vamos entender os passos para criá-la no After E�ects. Primeiramente,
devemos começar um novo projeto. Ao abrir o software , clicamos na opção
“Novo Projeto”.
Figura 3.25 - Opção de criação de novo projeto no After E�ects 
Fonte: Elaborada pelo autor.
Realizada essa operação, partimos para uma das etapas mais importantes em
um projeto de animação: salvar o projeto. Nunca devemos trabalhar em um
projeto de animação sem salvá-lo constantemente.
Para isso, vamos até o menu “Arquivo”, opção “Salvar Como”, exatamente
como apresentado na imagem a seguir:
Ao selecionar essa opção, uma janela para salvar o projeto será apresentada,
basicamente, como acontece em todos os softwares . Nessa janela, você
escolherá o local em que deseja salvar o projeto em seu computador e qual o
nome do arquivo.
Figura 3.27 - Janela de salvamento no After E�ects 
Fonte: Elaborada pelo autor.
Assim que o projeto estiver salvo, não se esqueça de usar e abusar do atalho
CTRL + S para manter o arquivo sempre salvo e atualizado.
Figura 3.26 - Caminho para salvar um projeto de animação 
Fonte: Elaborada pelo autor.
Então, com o projeto criado e devidamente salvo, devemos iniciar uma nova
composição para, en�m, dar início ao arquivo de animação dentro do projeto.
Para isso, deve-se clicar na opção “nova composição”, que se encontra no
painel monitor de composição .
Figura 3.28 - Botão “nova composição” para criar a animação 
Fonte: Elaborada pelo autor.
Na janela a seguir, que é a janela de con�guração de nova composição,
atenha-se a nomear a composição, determinar seu tamanho e o tempo que
ela terá. Para essa tarefa, usaremos o nome ANIMACAO , sem acentuação,
para não corrermos o risco de ocorrerem falhas, e o tamanho da composição
será de HDTV1080 com 24 frames na taxa de quadros .
Essa animação durará o tempo de 10s, que foi previamente de�nido.
Portanto, na área de “Timecode”, indicaremos “10s” no campo “duração”.
Figura 3.30 - Destaque da área de timecode com a duração de 10s 
Fonte: Elaborada pelo autor.
Pronto. Toda a base para iniciar a animação está concluída. Agora, precisamos
trazer os arquivos que serão utilizados.
De acordo com Seegmiller (2015), a primeira coisa a se fazer ao tentar
resolver um problema é entender a questão que leva ao problema. Em nosso
Figura 3.29 - Tela de con�guração da nova composição 
Fonte: Elaborada pelo autor.
caso, a questão é levar o personagem do Photoshop para o After E�ects para
ser animado.
Assim, vamos até a opção “Importar”, que se encontra no menu “Arquivo”.
Figura 3.31 - Opção “Importar”localizada no menu “Arquivo” 
Fonte: Elaborada pelo autor.
Outra possibilidade é realizar esse processo por meio do atalho CTRL + I . Ao
selecionar a opção “importar arquivo”, será apresentada uma caixa de escolha
dos arquivos a serem importados. No exemplo deste estudo, temos dois
arquivos: Background.psd e Personagem.psd. Depois, é necessário selecionar
o arquivo e clicar na opção “importar”.
Para importar um arquivo de Photoshop para o After E�ects, é preciso saber
como importá-lo, pois, ao executar essa seleção, será apresentada uma caixa
na qual você deve escolher como deseja importar o arquivo para dentro do
projeto de animação.
As opções são:
Figura 3.32 - Opção “importar” localizada no menu “arquivo” 
Fonte: Elaborada pelo autor.
Figura 3.33 - Tipos de importação de arquivos de Photoshop e sua tela de
seleção 
Fonte: Elaborada pelo autor.
Gravação: o After E�ects entende todas as camadas existentes
dentro do arquivo do Photoshop como um elemento único, o que
não permitiria, por exemplo, o controle individual das partes do
personagem.
Composição: o After E�ects entende todas as camadas existentes,
mas mantém todas com o tamanho total da animação, ou seja, todas
as partes do personagem teriam o tamanho de 1920x1080 pixels .
Composição - Manter tamanhos de camada : o After E�ects
respeita a divisão de camadas existentes no Photoshop e o tamanho
original de cada objeto existente nas camadas do Photoshop.
Em nosso exemplo, utilizaremos a opção Gravação para importar o
Background.psd e a opção Composição – Manter tamanhos de camadas
para importar o Personagem.psd.
Importados os arquivos, o painel de projeto terá a seguinte con�guração:
Figura 3.34 - Painel “Projeto” com os arquivos já importados 
Fonte: Elaborada pelo autor.
Agora temos duas composições na tela: a chamada “Animação” e a chamada
“Personagem”. Efetuando um duplo clique na composição “Personagem”, o
After E�ects abrirá a composição com todas as camadas listadas no painel
“camadas”.
Utilizando as setas do lado esquerdo do nome e da numeração, conseguimos
acessar as opções de manipulação da camada escolhida. Inicialmente, vamos
movimentar o rosto do personagem para cima e para baixo, aplicando o
princípio da animação de exagero, a �m de simular uma respiração
controlada desse personagem, que está meditando.
Em seguida, vamos acessar as opções e abrir a seta da opção “transformar”, a
�m de acessar as opções de “posição”, “rotação”, “escalonamento” e
“opacidade”. Nessa parte do personagem, vamos movimentar apenas a
posição da cabeça, portanto, devemos trabalhar apenas na opção “posição”.
Essa opção tem dois campos de valores: o campo X, que movimenta o
personagem horizontalmente, e o campo Y, que movimenta o personagem
verticalmente. Vamos alterar as opções do campo Y.
Figura 3.35 - Painel “Projeto” com os arquivos já importados 
Fonte: Elaborada pelo autor.
Figura 3.36 - Opções de transformação da camada “rosto”, para manipular
sua altura e movimentar a cabeça para cima e para baixo 
Fonte: Elaborada pelo autor.
Para iniciar a animação, devemos trabalhar com os painéis “camada” e “linha
do tempo” ao mesmo tempo. Primeiramente, deixamos o painel “linha do
tempo” com a agulha no tempo zero (para isso, basta clicar no ícone da
agulha, segurar o botão direito do mouse e movimentar para a direita e
esquerda). Em seguida, ligamos o relógio para criar os quadros-chave,
clicando no ícone de cronômetro localizado ao lado esquerdo de “posição”.
Figura 3.37 - Criação do primeiro quadro-chave 
Fonte: Elaborada pelo autor.
Como podemos ver, foi criado um losango azul na linha da posição alinhada
ao tempo zero no painel “linha do tempo”. Agora, vamos deslizar a agulha
para a direita até o tempo 1 s, que se localiza na parte superior da linha do
tempo, e, então, vamos movimentar o eixo Y para que a cabeça suba um
pouco. De acordo com Porto (2018), a posição determina o lugar do objeto na
cena, portanto, para movimentar a cabeça para cima e para baixo, devemos
manusear esse parâmetro.
Agora, é só movimentar a agulha a cada 1 segundo e repetir as operações.
Para ter certeza de que as posições iniciais que determinamos serão mantidas
em cada segundo, podemos simplesmente selecionar o quadro-chave (o
losango azul), utilizar a opção CTRL + c , levá-lo até o próximo segundo da
animação e utilizar CTRL + v , ou seja, copiar e colar. Em seguida, copiamos o
quadro-chave da posição zero em todos os valores pares (2, 4, 6, 8 e 10) e o
quadro-chave da posição 1 em todas as posições ímpares (3, 5, 7 e 9).
Como podemos observar, quando falamos de animações 2D, os recursos
mais comuns são as animações de movimentação, rotação e escalonamento.
Segundo proposto por Parent (2007), essas movimentações são, geralmente,
chamadas de “movimentações rígidas”.
Figura 3.38 - Criação do primeiro quadro-chave 
Fonte: Elaborada pelo autor.
reflita
Re�ita
A vida pro�ssional de um animador
requer o manejo de certos conceitos
que, em outras pro�ssões, podem ser
um pouco mais simpli�cados ou até
mesmo menos evidentes.
Entre as mais essenciais qualidades na
carreira de um animador, estão a
necessidade de estabelecer uma
comunicação clara, ter muita atenção
aos detalhes, e entender que trabalha-
se para um cliente e, por isso, deve-se
desenvolver animações adequadas às
suas necessidades, com criatividade e
respeitando os prazos estabelecidos.
Para atingir um elevado patamar no
conhecimento desses conceitos, um
animador iniciante deve treinar
repetidamente, muitas vezes, a mesma
animação, a �m de perceber pontos
de melhoria e dominar a ferramenta.
A�nal, o After E�ects é apenas uma
ferramenta e o bom animador deve
dominá-la para aplicar os conceitos e
princípios que envolvem a animação.
O animador é um pro�ssional criativo
que utiliza um software , assim como
um pintor utiliza seus pincéis, um
cirurgião usa seu bisturi, entre tantos
outros exemplos. Está pronto(a) para
colocar a mão na massa e treinar?
Agora, vamos animar os braços e o turbante do personagem, para que o
movimento de respiração seja quase �nalizado. Para simpli�car esse
processo, utilizaremos o conceito de hierarquia, ou seja, ligaremos as
camadas que também precisam ter a movimentação de posição à camada do
rosto.
Assim, quando o rosto se movimentar, todas as outras camadas se
movimentarão junto. Para isso, vamos selecionar o painel de “herança”, que
�ca localizado no painel “camadas”.
Em seguida, vamos ligar as camadas “turbante, “braço direito” e “braço
esquerdo” à camada do rosto.
Figura 3.39 - Painel de herança para vincular as camadas que vão herdar a
movimentação da camada do rosto 
Fonte: Elaborada pelo autor.
Figura 3.40 - Camadas ligadas à camada do rosto 
Fonte: Elaborada pelo autor.
Agora, é só efetuar todas as alterações nas demais partes do personagem.
Para �nalizar a respiração, realizamos a alteração da escala do tronco,
expandindo-o lateralmente (escalonando apenas o eixo X), e movimentamos
também um pouco da rotação de cada perna, pois temos o personagem
�utuando na cena.
praticar
Vamos Praticar
Para desenvolver os movimentos de um projeto de animação dentro do software
After E�ects, é necessário utilizar o processo de quadros-chave. Os quadros-chaves
são responsáveis por indicar as mudanças sofridas pelo elemento na camada, no
tempo indicado na timeline do software . Nesse sentido, assinale a alternativa que
indica qual opção devemos ativar nas propriedades da camada para iniciar a
produção de quadros-chave em nossa animação.
a) Ícone com símbolo em forma de losango que �ca na timeline .
b) Ícone com símbolo em forma de espiral no painel “camadas”.
c) Agulha que �ca localizada na timeline .
d) Em nenhum símbolo, é necessário apenas mover a agulha.
e) Ícone com símbolo em formato de cronômetro.
indicações
Material
Complementar
FILME
Moana
Ano : 2016
Comentário : Animação 3D, que contou com o trabalho
de alguns artistas nacionais, como a artistaNatalia
Freitas. Como todo bom �lme 3D, é sempre necessário
utilizar softwares para desenvolvimento das texturas e
imagens que são utilizadas nas animações, portanto,
assista com atenção redobrada aos detalhes.
TRA ILER
LIVRO
Adobe Photoshop
Editora : Senac São Paulo
Autor : Marcos Sera�m de Andrade
ISBN : 978-8537105276
Comentário : Com uma linguagem simples, este livro
apresenta os recursos mais atuais do Photoshop e
pode ser aplicado para as mais diversas áreas. O livro
de Marcos Sera�m de Andrade é uma peça essencial
para aqueles que desejam ter um excelente material de
consulta para qualquer situação, apresentando sempre
as opções mais atuais da ferramenta.
conclusão
Conclusão
Como em qualquer processo da área de motion graphics , o desenvolvimento
de uma peça grá�ca necessita que seu criador tenha domínio da teoria e do
software/ferramenta escolhido. Desenvolver uma peça grá�ca no Photoshop
é um processo relativamente simples, que possibilita a entrada do
pro�ssional no mercado de trabalho, pois é um dos softwares mais utilizados
na indústria. Manusear corretamente a ferramenta caneta é o processo
mínimo e mais comum da ferramenta, entretanto, é importante lembrar que
ela tem muito mais recursos a oferecer. Espera-se que esse pontapé inicial
leve você a buscar estudos extras para seguir a carreira de animador.
referências
Referências
Bibliográ�cas
JOSÉ, F. M.; REIS, S. B. Projetos grá�cos : fundamentos 2D e 3D. São Paulo:
Érica, 2014.
PARENT, R. Computer Animation : Algorithms and Techniques. USA: Elsevier
Science, 2007.
PORTO, G. L. P. M. B. Adobe After E�ects : introdução. Santa Cruz do Rio
Pardo: Editora Viena, 2018.
SEEGMILLER, D. Digital Character Design and Painting : The Photoshop CS
Edition. Hingham, MA, US: Charles River Media, 2004. ProQuest ebrary, 2015.