Animacao

Animação
Brasília-DF.
Elaboração
Luis Fernando Pizzarro Bueno Ramos
Produção
Equipe Técnica de Avaliação, Revisão Linguística e Editoração

Sumário
APRESENTAÇÃO.................................................................................................................................. 4
ORGANIZAÇÃO DO CADERNO DE ESTUDOS E PESQUISA..................................................................... 5
INTRODUÇÃO.................................................................................................................................... 7
UNIDADE ÚNICA
COMPUTAÇÃO E ANIMAÇÃO GRÁFICA.................................................................................................. 9
CAPÍTULO 1
CRIAÇÃO DE IMAGENS............................................................................................................. 9
CAPÍTULO 2
ANIMAÇÕES GRÁFICAS ....................................................................................................... 145
CAPÍTULO 3
PROGRAMAÇÃO PARA INTERNET ......................................................................................... 156
REFERÊNCIAS................................................................................................................................. 167
Apresentação
Caro aluno
A proposta editorial deste Caderno de Estudos e Pesquisa reúne elementos que se

entendem necessários para o desenvolvimento do estudo com segurança e qualidade.
Caracteriza-se pela atualidade, dinâmica e pertinência de seu conteúdo, bem como pela
interatividade e modernidade de sua estrutura formal, adequadas à metodologia da
Educação a Distância – EaD.
Pretende-se, com este material, levá-lo à reflexão e à compreensão da pluralidade dos

conhecimentos a serem oferecidos, possibilitando-lhe ampliar conceitos específicos
da área e atuar de forma competente e conscienciosa, como convém ao profissional
que busca a formação continuada para vencer os desafios que a evolução científico-
tecnológica impõe ao mundo contemporâneo.
Elaborou-se a presente publicação com a intenção de torná-la subsídio valioso, de modo

a facilitar sua caminhada na trajetória a ser percorrida tanto na vida pessoal quanto na
profissional. Utilize-a como instrumento para seu sucesso na carreira.
Conselho Editorial
4
Organização do Caderno
de Estudos e Pesquisa
Para facilitar seu estudo, os conteúdos são organizados em unidades, subdivididas em

capítulos, de forma didática, objetiva e coerente. Eles serão abordados por meio de textos
básicos, com questões para reflexão, entre outros recursos editoriais que visam a tornar
sua leitura mais agradável. Ao final, serão indicadas, também, fontes de consulta, para
aprofundar os estudos com leituras e pesquisas complementares.
A seguir, uma breve descrição dos ícones utilizados na organização dos Cadernos de
Estudos e Pesquisa.
Provocação
Textos que buscam instigar o aluno a refletir sobre determinado assunto antes
mesmo de iniciar sua leitura ou após algum trecho pertinente para o autor
conteudista.
Para refletir
Questões inseridas no decorrer do estudo a fim de que o aluno faça uma pausa e reflita
sobre o conteúdo estudado ou temas que o ajudem em seu raciocínio. É importante
que ele verifique seus conhecimentos, suas experiências e seus sentimentos. As
reflexões são o ponto de partida para a construção de suas conclusões.
Sugestão de estudo complementar
Sugestões de leituras adicionais, filmes e sites para aprofundamento do estudo,

discussões em fóruns ou encontros presenciais quando for o caso.
Praticando
Sugestão de atividades, no decorrer das leituras, com o objetivo didático de fortalecer

o processo de aprendizagem do aluno.
5
Atenção
Chamadas para alertar detalhes/tópicos importantes que contribuam para a

síntese/conclusão do assunto abordado.
Saiba mais
Informações complementares para elucidar a construção das sínteses/conclusões

sobre o assunto abordado.
Sintetizando
Trecho que busca resumir informações relevantes do conteúdo, facilitando o

entendimento pelo aluno sobre trechos mais complexos.
Exercício de fixação
Atividades que buscam reforçar a assimilação e fixação dos períodos que o autor/
conteudista achar mais relevante em relação a aprendizagem de seu módulo (não
há registro de menção).
Avaliação Final
Questionário com 10 questões objetivas, baseadas nos objetivos do curso,

que visam verificar a aprendizagem do curso (há registro de menção). É a única
atividade do curso que vale nota, ou seja, é a atividade que o aluno fará para saber
se pode ou não receber a certificação.
Para (não) finalizar
Texto integrador, ao final do módulo, que motiva o aluno a continuar a aprendizagem

ou estimula ponderações complementares sobre o módulo estudado.
6
Introdução
Sejam todos bem vindos ao universo da Computação Gráfica. Esta é uma área muito
ampla que abrange uma variedade muito completa de técnicas e processos utilizados
em diversas áreas de Criação, como Modelagem 2D e 3D, animação, ilustração, pintura
digital, entre outras.
Como toda informação fora de contexto pode ser caracterizada como manipulação e
esta área é muito vasta, iniciaremos nossos estudos apresentando a você uma base
fundamental para compreensão e raciocínio acerca dos processos criativos.
Além de conceitos mais tóricos sobre om raciocínio, a transmissão de mensagem e

interpretação, apresentaremos, também, conceitos fundamentais sobre imagem, como
sua estrutura cromática, fontes, formas e proporções.
Tudo isso para que você, mais do que habilidade técnica, desenvolva seu senso crítico
acerca das diversas produções que observa em seu cotidiano e saiba discernir o que, de
fato, é algo certo e assertivo a ser utilizado.
Finalizando esta etapa de bases de ancoragem, passaremos ao estudos dos principais

softwares de edição e criação, como o Photoshop, para edição de imagens, o Flash,
para animação e o 3DMaya, para os projetos de modelagem tridimensionais. Junto
com os textos sempre mostraremos imagens e dicas, tutoriais, para que tudo seja bem
elucidativo em seu processo de aprendizado.
Finalizando, mostraremos alguns conceitos e práticas da lógica de programação, para

que você tenho esta visão cosmológica acerca das principais possibilidades do mercado
de criação, e que consiga se munir com as principais ferramentas.
Bons estudos!
Objetivos
»» Instigar o aluno ao processo criativo.
»» Informar sobre as mais diversas técnicas de artes digitais.
»» Fornecer conhecimentos para os aspectos básicos da arte e formar

refinamento estético e conceitual.
7
»» Apresentar as diferenças entre os diferentes tipos de imagens digitais.
»» Apresentar as bases dos softwares de edição de imagem.
»» Apresentar os conceitos básicos de Modelagem 3D e seu devido software

de modelagem e animação.
»» Informar o aluno a respeito dos principais tipos de animação.
»» Despertar o conhecimento para as diferentes funcionalidades e possibilidades

do processo de animação.
»» Desenvolver no aluno o raciocínio sistêmico a respeito das hierarquias

dos processos de animação.
»» Apresentar a linguagem Action Script.
»» Apresentar ao estudante os conceitos de Lógica de Programação.
»» Treinar o raciocínio sistêmico.
»» Possibilitar a assimilação dos diferentes processos para os aspectos da

lógica de programação.
»» Apresentar as diferentes relações das codificações das lógicas de

programação.
8
COMPUTAÇÃO E UNIDADE ÚNICA
ANIMAÇÃO GRÁFICA
CAPÍTULO 1
Criação de imagens
Nesta unidade abordaremos diversos conceitos acerca do vasto universo da criação e

programação.
Iniciaremos com a aprendizagem de alguns conceitos e definições e, na sequência,

passaremos aos estudos práticos, utilizando os softwares específicos.
A criação
Conceito de Criar
»» Dar existência; tirar do nada.
»» Dar origem; gerar.
»» Originar; causar.
»» Dar princípio; produzir; inventar; imaginar.
»» Estabelecer; fundar; instituir.
»» Alimentar; sustentar.
»» Instruir; educar.
»» Vir a ter.
»» Nascer; originar-se.
»» Adquirir; cobrar.
9
UNIDADE ÚNICA │ COMPUTAÇÃO E ANIMAÇÃO GRÁFICA
Criação, segundo alguns pensadores
»» Loucura | Platão
»» Inspiração Divina | Sócrates
»» É uma técnica que envolve Problema / Solução | Dualibi e Simonsen
»» Processo natural que obedece a leis imprevisíveis | Kant
»» Conexão de sistemas de referências, fusão, justaposição, colisão |

Koestler
»» Produção abundante e original de conteúdo associativo | Gestzels
Definição de Criar
É uma experiência subjetiva, associada a motivação e personalidade. Vem do latim

emovere, onde o “e” significa fora e “movere” significa movimento.
Perfil do Criativo
»» Fluência e flexibilidade.
»» Original e inovador.
»» Alta sensibilidade.
»» Fantasia e imaginação.
»» Inconformismo.
»» Independência de julgamentos.
»» Novas experiências.
»» Uso elevado de analogias.
»» Ideias elaboradas.
»» Situações de risco.
»» Alta motivação.
»» Curiosidades.
10
COMPUTAÇÃO E ANIMAÇÃO GRÁFICA│ UNIDADE ÚNICA
»» Senso de humor.
»» Impulsividade.
»» Espontaneidade.
»» Autoconceito positivo.
»» Sentido de destino criativo.
Teoria das Imagens
As imagens se dividem em dois domínios:
»» O primeiro domínio é o das representações visuais como desenhos,

pinturas, gravuras, fotografias e as imagens cinematográficas, televisivas,
holo e infográficas. Imagens, nesse sentido, são objetos materiais.
»» O segundo é o domínio imaterial das imagens no nosso cérebro. Neste

domínio, imagens são como visões, fantasias, imaginações, ou seja,
representações mentais. Ambos os domínios não existem isolados.
Não há imagens como representações visuais que não tenham surgido da mente
daqueles que as produziram.
Da mesma forma que também não há imagens mentais que não tenham alguma origem
no mundo real dos objetos.
Projeto de Identidade Visual
Um projeto de construção da Identidade Visual de uma Marca (PIV) se refere à forma

como uma marca visualmente se comunica.
São trabalhados elementos como tipografia, cores, elementos visuais.

[atenção]
Não confundir o PIV com o projeto de Branding, de gestão e construção da

IMAGEM da marca, construção de valor e reputação centrados nos seguintes
aspectos:
»» BRAND EQUITY (força da marca);
»» SHARE OF MIND (lembrança de marca);
11
»» BRAND AWARENESS (conhecimento da marca).
O termo é frequentemente usado como referência a uma determinada empresa:

um nome, marca verbal, imagens ou conceitos que distinguem o produto,
serviço ou a própria empresa.
De acordo com Philip Kotler, um dos principais nomes do Marketing mundial, a

marca possui até seis níveis de significados: atributos, benefícios, valores, cultura,
personalidade e usuário.
De uma forma geral, podemos conceituar a marca como a ligação entre uma empresa
ou instituição, sua missão, visão e valores, e os consumidores.
Marca
Segundo a American Marketing Association, marca é um nome, termo, símbolo,

desenho ou uma combinação desses elementos que possui a função de identificar
os bens ou serviços de um fornecedor ou grupo de fornecedores e diferenciá-los da
concorrência.
De acordo com a lei brasileira, o Instituto Nacional da Propriedade Industrial − INPI

é todo sinal distintivo, visualmente perceptível, que identifica e distingue produtos e
serviços dos seus congêneres, de procedência diversa, bem como certifica a conformidade
dos mesmos com determinadas normas ou especificações técnicas.
O termo branding (marca) deriva do termo nórdico brandr, que significa queimar. Tem
a mesma associação do uso na língua inglesa, to brand, que significa marcar, termo
associado à marcação de gado. A origem da palavra brand é extensa, já associada a
imagens de boi marcados por hieróglifos em lápides no ano de 3000 a.C. Durante a
“Guerra dos Cem Anos”, em 1346 faziam marcas imperiais em cavalos para identificar
os animais.
Posicionamento
Segundo Al Ries e Jack Trout, o posicionamento significa ocupar uma posição única
e valorizada na mente do cliente.
Embora, não seja uma tarefa fácil, é extremamente necessária.
Posicionamento (imagem da marca a ser construída) é o resultado da somatória da

Promessa Básica + Justificativa (explica os motivos dessa promessa) + Imagem
12
Desejada (atributos complementares, cujos valores definirão e fortalecerão a

personalidade da empresa).
Logotipo
[ saiba mais]
O termo Logotipo é formado pela junção de Logo (vem de “Lógos”, significa

o conceito, ideia ou significado de uma palavra) + Tipo (do grego “Tipos”, que
significa tipo, figura, desenho, sinal, gênero, símbolo).
Podemos, por exemplo, dizer que as letras, grafadas, são tipos (símbolos gráficos) dos
sons emitidos.
Logotipo, desta forma, se torna o símbolo gráfico de um conceito. O logotipo é

a concretização no estágio narrativo de um conceito abstrato gerado no estágio
fundamental.
É, também, a forma de representar o nome de uma instituição com um tipo de letra

específica e características. O logotipo é uma assinatura institucional, a representação
gráfica da marca.
São elementos visuais que tem um papel importante na construção do Brand Equity,
especialmente no que se refere à lembrança.
Benefícios de um Logotipo
Forte expressão visual que facilita o reconhecimento e a identificação dos produtos;
Versatilidade pelo fato de não serem verbais, podem ser atualizados ao longo do tempo
obtendo uma aparência mais contemporânea.
O uso da palavra Logomarca é errôneo
O termo logomarca é composto pela junção do radical grego Lógos que significa
palavra (não a falada ou a escrita, pois seria “Lexi”), conceito, ideia, verbalização,
pronunciamento, com o germânico Marka, que deriva do termo Signum,
significado.
A redundância se dá, pois a palavra Logomarca seria, então, o conceito do significado,

ou significado do significado.
13
Ao se compor um logo é sempre fundamental um detalhado estudo de criação, que

envolve aspectos fundamentais técnicos e teóricos do design, como formas, cores,
posições, fontes.
Figura 1. Composição de uma Logo.
Figura 2. Composição de uma Logo.
Fonte: Autor.
Slogan
O termo slogan possui derivação da língua celta, e significa um grito de guerra. Esta é a
essência de seu uso hoje, ser um grito de guerra, breve, sintético, que resuma a missão
e atributos de um produto e expresse seu posicionamento junto ao público.
Uma média de tamanho para um bom slogan varia de três a sete palavras.
Ele deve ser de fácil entendimento e lembrança.
Percurso gerador de sentido semiótico
Para se transmitir uma mensagem de forma adequada, é necessário analisar três

estágios de sua comunicação.
14
»» Estágio Fundamental
›› Ideias, valores, intenção do emissor.
»» Estágio Narrativo
›› Contextualização.
›› Tempo / Espaço.
›› Roteiro / Ações.
›› Cores, formas, trilha.
›› Personagens.
»» Estágio Discursivo
›› Análise e interpretação do receptor.
Figura 3. Tríade Semiótica de Pierce.
Fonte: Tríade Semiótica de Pierce
Design
Design – termo inglês
Derivado do latim designare, “de + signum” (marca, sinal), desenvolver, conceber.
Expressão Design – Inglaterra, século XVIII; tradução do italiano disegno.
Produção Industrial + criação das School of Design – expressão passa a representar a

atividade específica no processo de desenvolvimento de produtos. Atualmente termo se
refere tanto ao design industrial, como ao de produtos.
15
Figura 4. Design.
Fonte: Paulo Oliveira.
Princípios fundamentais do Design
Alinhamento
No ocidente sempre começamos a olhar algo começando do canto superior esquerdo

descendo pela lateral.
Figura 5. Alinhamento.
Fonte: Design para quem não é designer.
16
Proximidade
Elementos similares devem estar próximos.
Figura 6. Proximidade.
Contraste
Contraste não é só de cor, mas de elementos também.
Uma frase com tipografia diferente do restante do texto pode ser contrastante.
Figura 7. Contraste.
17
Repetição
Para o design de impressos, você pode repetir a cor, fontes, relações espaciais etc. Em
um site, por exemplo, você deve repetir a estrutura dele em todas as páginas internas.
A repetição cria uma sensação de organização.
Figura 8. Repetição.
Arte Digital
É uma forma de arte produzida em ambiente gráfico computacional, que é gerada por
meio de processos digitais e virtuais.
Os resultados dos processos artísticos digitais podem ser contemplados em impressões

gráficas ou no próprio ambiente gráfico computacional, nas interfaces e monitores.
Figura 9. Arte Digital.
Fonte: Design Blog.
18
Comunidades
Existem diversas comunidades virtuais voltadas à divulgação da Arte Digital, entre elas,
Deviantart, CGsociety e Cgarchitect.
Figura 10. Comunidades.
Fonte: <http://en.wikipedia.org/wiki/File:Deviantart_logo.png>.
Tipos de Imagens
Bidimensionais
Apresenta duas dimensões, altura e largura, com base nos planos cartesianos, é possível
gerar e interagir objetos em um plano. Possuem eixos x, y, o eixo z é nulo ou zero. Está
subdivididos em imagens bitmapeadas (raster images) e imagens vetoriais (vector
images). Diversas são as formas de elaboração de trabalhos neste estilo.
Figura 11. Bidimensionais.
Fonte: MDMat.
19
Bidimensionais Bitmapeadas
Utilizam mapas de Bits para geração de imagens.
Imagens raster (ou bitmap, que significa mapa de bits em inglês) são imagens que
contêm uma descrição de cada pixel, diferentemente dos gráficos vectoriais.
Figura 12. Bidimensionais Bitmapeadas.
Fonte: ExtremeTechs.
Por envolver cálculos muito complexos, como interpolação e álgebra matricial, são
necessárias ferramentas especiais para realizar as manipulações neste tipo de imagem.
O trabalho mais constante deste estilo associa-se à fotografia.
20
Um bitmap pode ser monocromático, em escala de cinza ou colorido.

Normalmente os pixels são formados no padrão RGB (do inglês Red, Green,
Blue), que utiliza três números inteiros para representar as cores vermelho,
verde e azul ou ainda o padrão RGBA, quando o formato possui transparência
(sendo A o canal de alfa, transparência, de cada pixel). Para mídias impressas
as imagens bitmap ou raster utilizam o modo de cor CMYK (Ciano, Magenta,
Amarelo e Preto).
Figura 15. Bitmap.
21
Bitmap | Manipulação de fotos
Constitui uma grande área de expressão da arte digital, que consiste em manipular uma
fotografia, sendo esta manipulação visível além de mudança de cores.
Bitmap | Natural Media
Tipo de pintura digital feita com softwares que possuem a função de simular as condições
naturais de uma arte tradicional, como as feitas com latas de tintas, pincéis, pastel entre
outros. Exemplos de software com uma proposta Natural-Media são: Adobe Photoshop,
Corel Painter e TwistedBrush.
Figura 16. Pintura Digital.
Fonte: DeviantArt.
Bitmap | Pixel Art
Uma forma de arte criada inteiramente a partir de mapa de pixels, usando uma
ferramenta digital muito simples, o lápis. Cada pixel é colocado num lugar específico
com o objetivo de melhorar a representação iconográfica da imagem e completar a
intenção original do artista. Exemplos de criações realizadas em Pixel Art são ícones
de área de trabalho, ícones de interface gráfica de softwares, emoticons e favicon icons
utilizados em navegadores.
22
Figura 17. Pixel art.
Fonte: DeviantArt.
Bitmap | Oekaki
São desenhos feitos em Oekakiboards, sites com um programa geralmente em Java

específicos para desenho. Exemplos desses programas podem apresentar recursos bem
completos, com layers (camadas), aquarela, airbrush, máscaras, filtros, entre outros.
Oekaki é uma palavra japonesa que significa desenho (desenhar), pintor ou

desenhista. Na cultura ocidental acabou ganhando um significado errado de
“rascunho“, uma espécie de Sketchbook.
Pintura digital
Uma forma de pintura criada em ambientes digitais, construída em softwares de

manipulação de imagens, se empregando conceitos de luz, sombra, intensidade
luminosa, cores, formas e contrastes.
Figura 18. Pintura Digital.
Fonte: Autor.
23
Bidimensional | Vetorial
Este tipo de imagem é gerada por meio de vetores, de forma que os softwares registram
para cada objeto, cada área, uma informação matemática. Estes dados podem ser
livremente acessados e alterados a qualquer momento. A versatilidade dos gráficos
vetoriais se dá por permitir a alteração nos desenhos produzidos e, principalmente, o
aumento de dimensões sem grande perda de qualidade.
Figura 19. Vetorial.
Fonte: ExtremeTech.
Figura 20. Vetorial.
Fonte: ExtremeTech.
24
Vetorial | Ilustração
Modelo de ilustração que utiliza vetores para definir as primitivas geométricas (formas
básicas, linhas, círculos, polígonos etc.). Estes elementos são definidos por registros
matemáticos, o que permite a alteração de cada uma destas entidades geométricas de
forma independente. É possível transformar uma fotografia, uma imagem bitmapeada
em vetorial, no processo conhecido como vetorização. Este processo não é perfeito
e acaba perdendo detalhes e características do arquivo original, tornando-se menos
realista. Dentre os softwares para trabalhos vetoriais podemos citar o Adobe IIlustrator,
Corel Draw, Macromedia FreeHand, Fireworks ou o Inkscape.
Animação bidimensional vetorial
Animações produzidas em ambiente gráfico computacional usando softwares específicos

bidimensionais, como o Flash.
Tridimensional
São vetores tridimensionais, artes digitais onde é possível modelar e interagir com os
objetos bi e tridimensionais no espaço tridimensional.
Este tipo de criação utiliza as coordenadas cartesianas (x, y, z) num plano digital
bidimensional, representando a ideia de profundidade e perspectiva às formas reais
ou abstratas. Os modelos tridimensionais gerados podem simular cor, textura, luz,
transparência e reflexão de objetos reais.
Figura 21. Tridimensional.
Fonte: Autodesk.
25
Arte Fractal
São imagens digitais geradas utilizando equações matemáticas complexas. Este

tipo de imagem é criada em programas como Apophysis, Chaoscope, Ultra Fractal e
outros. Estes programas são dedicados às fórmulas descritas pela geometria fractal, de
autorrepetição dos padrões que podem ser aumentados, ou diminuídos, mantendo seu
conceito original.
Figuras. 22 e 23. Arte Fractal.
Fonte: FormasFractales.
Para facilitar sua absorção acerca do tema estabelecido, busque algumas

imagens na Web, ou em livros e revistas e as separe de acordo com as categorias
aqui apresentadas.
Softwares
Existem diversos softwares dedicados para geração de arte digital. Entre eles, os
softwares proprietários e os softwares livres.
Proprietários
»» Adobe Photoshop
»» 3d studio max.
»» Maya.
»» AutoCAD.
26
»» Corel Draw.
»» Adobe Illustrator.
»» Macromedia FreeHand.
»» Fireworks.
»» Cinema 4D.
»» Zbrush.
»» MS Paint.
»» Flash.
Softwares livres
»» Gimp.
»» Inkscape.
»» Blender.
»» POV-Ray.
»» Imagemagick.
Artistas digitais
Diversos artistas contemporâneos de todo o mundo realizam grandiosas artes nas
interfaces digitais. Exemplos destes artistas são Roger Dean, Danny Outlaw, Pablo
Alfieri, Ezequiel Matteo, Adolfo Correa, Simone Legno, entre outros.
No Brasil encontramos Livia Burity, Fabio Sasso, Cristiano Siqueira, Rodrigo Francisco,
Igor Giamoniano, Bruno Bravo, Alexandre Venera, Juliana Teodoro e Michel Victor.
Elementos de criação de pinturas digitais

Ao se trabalhar com pinturas digitais, diversos elementos devem ser estudados para que
o resultado seja o mais profissional possível. Principalmente ao se tratar de pinturas
realistas, é fundamental o estudo de alguns elementos fundamentais.
27
Figuras 24 e 25. Elementos de criação de pinturas digitais.
Fonte: Design TutsPlus.
Elementos | Formas
A delimitação das formas é o primeiro passo para se aplicar os efeitos de pintura digital.
A base de toda a criação são as formas as quais serão representadas e trabalhadas, são
como o esqueleto do processo.
Figura 26. Elementos e formas.
Elementos | Cores
Saber as cores a serem utilizadas e representadas é o elemento que gera uma das
harmonias da composição. A natureza das cores e sua representação cria uma atmosfera
diferenciada às imagens.
28
Figuras 27, 28 e 29. Elementos e cores.
Elementos | Texturas
As texturas se relacionam à natureza física dos elementos representados. O conhecimento

tátil e visual dos materiais utilizados na composição é importante para que se fidelize a
representação destas nuances de superfície, as texturas.
Figura 30. Elementos e Texturas.
Fonte: Design TutsPlus
29
Elementos | Luz e sombra
Um trabalho competente de luz e sombra traz o grande realismo da composição.
Esse trabalho de contrastes entre sombra e luz é responsável pela

tridimensionalidade da imagem, geram o volume às formas, atenuam as
tonalidades cromáticas e enfatizam as texturas dos elementos, reagindo à sua
natureza.
Visto que a cor é um processo óptico e as texturas são variações do plano, é o trabalho
de luz e sombra que trará a representação visual a estes elementos citados.
Figura 31. Luz e sombra.
Elementos | Detalhes e acabamentos
São os detalhes que enriquecem e trazem vida à composição.
Reflexos, penumbras, relevos, transparências, quando colocados juntos em uma

representação que gera a lógica da composição, os detalhes traspassam o primor do
processo criativo e ressaltam os elementos principais da imagem.
Figura 32. Detalhes de acabamento.
Fonte: Design TutsPlus
30
Selecione quatro imagens diferentes de pinturas digitais pesquisadas e

identifique nelas cada um dos elementos apresentados neste capítulo, como
sombra, luz, cores. Faça um descritivo sobre essas ilustrações, posicionando sua
opinião.
Ferramentas
Ao iniciar o trabalho de pintura digital é importante conhecer o ferramental que o

software específico oferece.
Cada ferramenta gera um resultado diferente e as combinações desses detalhes ampliam

o leque de possibilidades do processo criativo.
Figura 33. Ferramentas.
Fonte: ThemeTaq.
Ferramentas | Pincéis
O tipo de pincel utilizado na composição, para a pintura, e sua forma são responsáveis
pelo tipo de traçado que interferem em toda a estética e estilo da composição. Formas,
31
tamanhos e estruturas diferentes de pincéis geram traçados diferenciados que criam

efeitos de textura, volume, forma e preenchimentos diferentes.
Figura 34. Pincéis.
Fonte: Badoo.
Ferramentas | Desfoque
A ferramenta de desfoque é ideal para atenuar as cores, misturando as cores, as

tonalidades e, possibilitando a execução de efeitos mais reais de luzes e sombras que
32
fornecem volume à composição. Camadas com efeitos de desfoque sobrepostas em

mesclagens geram efeitos diferenciados, como o “glamour” e o “dream”.
Ferramentas | Curvas
Uma Curva Tonal é um gráfico que define uma relação de entrada e saída da escala
tonal (tons de iluminação) de uma imagem.
A ferramenta de curvas permite que você afete a luminosidade em uma região tonal
específica da imagem como, por exemplo, clarear apenas as meia sombras da imagem,
sem afetar o resto da mesma.
Figura 35. Curvas.
Fonte: Adobe.
Ferramentas | Níveis
Ferramenta Níveis ajusta luminosidade da foto. No gráfico da imagem, é chamado de

histograma, à esquerda ficam os tons mais escuros e, à direita, os mais claros. No gráfico
é possível observar quantos pixels estão em cada faixa de tonalidade. Na imagem do
exemplo, observa-se que há muitos pixels entre a metade e a parte mais clara, o que
significa que a foto está bem clara, quase “estourada”. A excessiva quantidade de pixels
representada no histograma significa uma foto com pouco contraste.
33
Figura 36. Níveis ajustam a luminosidade da foto.
Figura 37. Histograma.
Fonte: Gizmodo.
Ferramentas | Opacidade
Por meio dos ajustes de opacidades, que funcionam como efeitos de transparências
(alfa), e opções de mesclagens é possível realizar a fusão das formas e elementos de
maneira mais equilibrada e harmônica. Esta ferramenta é bem indicada para atenuar as
cores, luzes e sombras, aplicando as quantidades específicas de opacidade nas camadas
corretas.
Figura 38. Opacidade.
Fonte: Gizmodo.
34
Ferramentas | Saturação
Diminuindo ou elevando a saturação de uma imagem e trabalhando com as correções

de cores adequadas se ajusta alguns detalhes e se atenua pequenos erros cromáticos
dos estilos de traçado e desfoque, deixando a arte mais homogênea e harmônica.
Cores
Fenômeno físico
O raio de luz branco proveniente do sol é refratado na atmosfera terrestre, em diferentes

frequências responsáveis pelas cores.
Figuras 39 e 40. Cores.
Fonte: Ciência BR.
Raios de luz de menor comprimento de onda são azulados e os maiores são avermelhados.
Isso justifica o céu avermelhado quando o sol está mais distante no horizonte.
Figura 41. Cores.
Fonte: Ciência BR
O preto é resultado de uma matéria que absorve toda a luz e não reflete, enquanto
o branco resulta do fenômeno oposto, quando algo reflete toda a luz, logo é a
35
existência de luz. Se você vê um objeto vermelho, é porque ele absorveu todas as cores,
e apenas refletiu a frequência vermelha.
O branco e o preto não são exatamente cores, mas características da luz.
Em 1666, Isaac Newton fez uma experiência onde verificou que a luz do Sol tinha
grande influência na existência das cores.
Figura 42. “ A cor só existe porque existe a luz. A maior fonte de luz é o sol”.
Fonte: Ciência BR
Cores | Fenômeno Biológico
No aparelho óptico, olhos funcionam como os sensores e o cérebro o processador.
A retina é a parte fundamental na percepção da sensação de cores. Os cones e os

bastonetes distribuídos pela córnea são as células fotorreceptoras. A ausência de um
grupo de cones ocasiona o Daltonismo.
Os bastonetes não distinguem cores e como precisam de pouca luminosidade são mais
eficientes pela noite.
Sintetizando, a cor é o efeito gerado pela radiação eletromagnética nos órgãos visuais.
Figura 43. Fenômeno Biológico.
Fonte: Ciência BR
36
Natureza das cores
Existem duas naturezas distintas para as cores. A compreensão adequada de cada uma
delas, sua utilização e particularidade é indispensável para se ter um trabalho bem
consolidado.
A cor luz é vista por meio dos raios luminosos, e é proveniente da luz solar. Representa
a própria luz, que pode ser decomposta em várias cores, que são as emitidas pelos meios
aditivos de luz, como os monitores e funcionam na escala RGB. A soma das cores luz
resulta no branco.
A cor pigmento é obtida em substâncias usadas para simular fenômenos de cor-luz.

Cores que podem ser extraídas da natureza, materiais de origem vegetal, animal ou
mineral. O pigmento surge destas misturas. São as cores trabalhadas graficamente na
escala CMYK, no fenômeno de cores subtrativas. A mistura dessas cores resulta na
Key Color, próxima ao preto.
Figura 44. Natureza das cores.
Fonte: Designtheplanet
Cores RGB
Utilizadas nos processos aditivos, em monitores.
Vermelho, Verde e Azul.
Figura 45. Cores RGB.
Fonte: Game Maker Brasil
37
Cores CMYK
Utilizadas em meio impresso, nos processos subtrativos.
Ciano, Magenta, Amarelo e “Preto” (Key Color).
Figura 46. Cores CMYK.
Fonte: PopCamaleao
Cores LAB
O modo LAB consiste em três canais de cores. O primeiro canal é a Iluminação

(L). Utiliza um valor de 0 a 100, sendo que o 0 (zero) significa preto e o 100 significa
branco. Quanto maior o valor, mais vivas são as cores. Os outros dois canais, A e B,
representam faixas de cores. O canal A contém uma faixa de cores que vai de verde a
vermelho, e o canal B contém cores de azul a amarelo.
O modo LAB é independente do dispositivo, o que significa que você pode usar
para editar qualquer imagem, pois suas cores não sofrerão grandes mudanças
convertidas para a saída final em CMYK. Devido a este fato, muitos profissionais
gráficos trabalham com o modo LAB.
O modelo LAB inclui todas as cores que você pode criar com os modos CMYK e RGB.
Figura 47. Cores LAB.
Fonte: Dreamtheworld
38
Cores Primárias
Conjunto de cores que podem ser combinadas para criar outras cores. A visão colorida
humana é tricromática, então, para as aplicações humanas, três cores primárias são
normalmente usadas: Vermelho, Verde e Azul para as Cores Luz, escala RGB e
Ciano, Magenta e Amarelo, para as Cores Pigmento, escala CMYK.
Figura 48. Cores Primárias.
Mistura Aditiva (luz) Mistura Subtrativa (pigmentos)
Fonte: Autor.
Cores Secundárias
Cores que se formam pela mistura de duas cores primárias, em partes iguais.
Curiosidade: no sistema RYB (vermelho, amarelo e azul), proposto por Leonardo

Da Vinci, as cores secundárias seriam laranja, violeta e verde.
É importante destacar que o Cinza é uma cor secundária, resultante de Branco e

Preto.
Figura 49. Transformação para cores secundárias.
Fonte: <http://artesatividades.blogspot.com.br/2011/04/cores-primaria-secundarias-terciarias.html>.
39
Cores Terciárias
Misturando uma cor primária com uma secundária correspondente, isto é, que a
contenha, o resultado será uma cor terciária, também denominada de intermediária.
Por exemplo, a combinação de amarelo com esverdeado.
Figura 50. Cores Terciárias.
Fonte: ChocolaDesign
Círculo Cromático
O círculo cromático é representado por um círculo com 12 cores: três primárias, três
secundárias e seis terciárias.
Figura 51. Círculo Cromático.
40
Pantone
Pantone é uma empresa fundada em 1962, em New Jersey, Estados Unidos. Pantone
Inc. é famosa pela “Escala de Cores Pantone” (“Pantone Matching System” ou PMS),
um sistema de cor utilizado em várias indústrias, como a gráfica, têxtil, de tintas e
plásticos.
O sistema Pantone é baseado em uma mistura específica de pigmentos para se criar

novas cores e também permite que cores especiais sejam impressas, como metálicas e
fluorescentes.
Figura 52. Pantone.
Fonte: Indústria Americana de Tintas Pantone.
A indústria americana de tintas Pantone desenvolveu um sistema numérico de cores de

tintas e conseguiu manter uma alta regularidade e padrão na produção destas. Desta
forma, atribuindo-se códigos numéricos às tintas ao invés de nomes regionais ou de
aplicação restrita, o processo torna-se muito mais assertivo, visto que estes códigos
empregados não são ou estão sujeitos à subjetividade humana.
Valor calórico das cores

As cores podem ser quentes, frias ou neutras. Uma cor tanto poderá parecer fria como
quente, dependendo da relação estabelecida entre ela e as demais cores de determinada
gama cromática. Por exemplo, o violeta, perto de tons de azul e verde, parecerá quente
e, perto de tons de vermelho, amarelo e laranja, parecerá frio.
Cores Quentes: o vermelho e o amarelo, e as demais cores derivadas. São associadas

ao sol e ao fogo e nos transmitem a sensação de calor.
41
Cores Frias: o azul e o verde, bem como as outras cores predominadas por eles. São
associadas à água, ao gelo, ao céu, e às arvores e nos transmitem a sensação de frio.
Cores Neutras: Não são quentes nem frias. Seu valor calórico depende da associação
com outras cores. Ex.: bege, cinza etc.
Figura 53. Cores Quentes/ Cores Frias.
O azul prevalece para as marcas de Social Networking, enquanto o vermelho é mais

utilizado para Mass Media.
Figura 54. As cores usadas na web.
Fonte: The Colors of The Web
42
Dimensões das cores
As cores são classificadas em três dimensões: tom, valor e saturação.
Para representar essa classificação elaboraram-se vários esquemas, como o duplo

cone de Ostwald, a pirâmide de Lambert e a ordenação criada por Munsell.
Estes sistemas baseiam-se no mesmo princípio.
Eixo vertical − representa as escalas de valores acromáticos, que vão desde o branco
na parte superior até o negro na inferior.
Círculo − correspondente ao equador e contém a escala dos tons que possuem, em

determinada altura, um valor de claridade médio.
Seções horizontais − apresentam os valores cromáticos em um determinado nível

de claridade.
Quanto mais afastado do eixo central, mais saturada será a cor. Quanto mais próxima,
mais misturada com cinza de mesmo valor.
Coloração ou Tinta − característica que estabelece a diferença entre elas. Ex.:

vermelho X azul.
Valor tonal
Grau de luminosidade (claridade).
Intensidade ou valor cromático
Característica que dá a pureza e a força da cor. Ex.: vermelho vivo é mais intenso que
vermelho claro.
Figura 55. Dimensões das Cores.
Fonte: Before & After Magazine.
43
Figura 56. Dimensões de cores.
Fonte: Before e After Magazine.
Psicologia das cores
Teoria de significação de cores que já entra em desuso. Com a crescente diversidade

de associações, pensamentos, culturas e estilos de vida, as pessoas cada vez mais
apresentam visões diferentes sobre alguns estímulos. Este fato faz com que a Psicologia
das Cores com o tempo acabe perdendo sua função, devido ao fato de as pessoas não
associarem mais de forma homogênea uma significação às cores.
Por exemplo, a cor vermelha para algumas pessoas pode significar amor, para outras
pode representar agressividade, associada ao sangue e, ainda, para outras, a combinação
de vermelho com amarelo pode ser um estímulo de fome. Em substituição à clássica
Psicologia das cores utilizamos as harmonias cromáticas.
Figura 57. Pscicologia das Cores.
Fonte: DesignBlog
44
Harmonia monocromática
É a harmonia resultante de uma mesma cor do círculo cromático. As tonalidades podem

mudar, mas todas ficam no mesmo matiz do círculo, variando luminosidade e saturação
de uma mesma cor.
Fatores positivos: a harmonia monocromática é simples de utilizar, balanceada e

visualmente apelativa.
Fatores negativos: este esquema carece de contraste. Não é uma harmonia tão
chamativa como a harmonia de cores complementares.
Figura 58. Harmonia monocromática.
Fonte: Decolor
Harmonia análoga
É a harmonia formada de uma cor primária combinada com duas cores vizinhas do
círculo. Na constituição desta harmonia, uma cor é utilizada como dominante enquanto
que as adjacentes são utilizadas para enriquecerem a harmonia.
Fatores positivos: as harmonias análogas são tão fáceis de criar quanto às

monocromáticas, porém são mais vibrantes.
45
Fatores negativos: um esquema de cores análogas não apresenta uma cor de

contraste. Não é uma harmonia tão rica como a harmonia de complementares.
Figuras 59 e 60. Harmonia análoga.
Fonte: Tudibao.
Harmonia complementar
É a harmonia que ocorre ao combinar cores opostas do círculo cromático. São cores
que se encontram simétricas com respeito ao centro do círculo e a matiz varia em 180º
entre um e outro.
Fatores positivos: a harmonia complementar apresenta uma combinação de grande

contraste ideal para atrair a máxima atenção do espectador.
Fatores negativos: esta harmonia é mais complexa para ser balanceada do que as
análogas ou monocromáticas.
46
Figura 61. Harmonia Complementar.
Fonte: Tudibao, FANTA
Harmonia triádica
É composta por três cores equidistantes no círculo cromático. Por exemplo: azul,
vermelho e amarelo. Esse tipo de combinação consegue dar um efeito visual muito
atraente.
Fatores positivos: esta harmonia triádica oferece alto contraste mantendo a

harmonia.
Fatores negativos: não é uma harmonia tão contrastante como a complementar.
Figura 62. Harmonia triádica.
47
Figura 63. Harmonia triádica.
Fonte: JULIE&CO, ELLELE.
Harmonia dupla complementar
Harmonia composta por dois pares de cores complementares entre si.
Denominado também como tetradas, estas combinações são as mais ricas de todas as
harmonias, por utilizar quatro cores, complementares em pares.
Fatores positivos: esta harmonia oferece a maior variedade na sua combinação.
Fatores negativos: é a harmonia mais difícil de trabalhar.
Figura 64. Harmonia dupla complementar.
48
Figura 65 a 67. Harmonia dupla complementar.
Fonte: JULIE&CO, HAVAIANAS, GOOGLE.
Harmonia acromática
É a harmonia composta pela utilização de cores neutras, as cores situadas na zona

central do círculo cromático, próximos ao centro. Estas cores perderam tanta saturação
que não se observa nelas o matiz original.
Figura 68. Harmonia acromática.
Fonte: Olhares
49
Harmonias da natureza
Determinadas combinações da natureza são bem harmônicos e funcionais, embora as

cores que formam o esquema ou harmonia não constituam nenhum esquema específico
conhecido na teoria das cores. Por exemplo, esquema de cores encontrado na primavera
ou no outono.
Figura 69. Harmonia da natureza.
Fonte: Autor.
Exemplos de Harmonias
Figura 70. Harmonia.
Fonte: Before&After.
50
Figura 71. Harmonia.
Fonte: Before&After.
Bicromia
Uma bicromia é uma imagem composta por duas cores. Essas duas cores podem ser
dois pantones, ou preto e amarelo, ou preto e pantone etc. O resultado final é uma
camada da soma dessas duas cores, que busca manter o contraste da imagem.
Figura 72. Bicromia.
Fonte: Graphysis.
51
Resumo
Figura 73. Cores.
Fonte: <Ateliebrincandocompaninhos .blogspot.com>.
Pesquise dois exemplos para cada harmonia cromática apresentada, justificando

a escolha.
Gestalt
A psicologia da Gestalt é um movimento que atua na área da teoria da forma. O design
utiliza as leis da Gestalt o tempo todo, muitas vezes até de forma inconsciente. Ele ajuda
as pessoas a assimilarem informações e entenderem as mensagens que são passadas.
Falando de forma geral, a Gestalt é o conjunto de entidades físicas, biológicas,

fisiológicas ou simbólicas que juntas formam um conceito, padrão ou
configuração unificado que é maior que a soma de suas partes.
“A “fórmula” fundamental da teoria da Gestalt pode ser expressa da seguinte forma,”

escreveu Max Wertheimer. “Existem conjuntos, o comportamento dos quais não
são determinados por seus elementos individuais, mas onde o processo da parte são
determinadas pela natureza intrínseca do todo. É o objetivo da Gestalt de determinar a
natureza de tais conjuntos” (1924).
52
Em resumo: o princípio básico da teoria gestaltista é que o inteiro é interpretado de

maneira diferente que a soma de suas partes.
Figura 74. Gestalt.
Fonte: Design Blog.
Conceito criativo
Divergência de definições, ideia abstrata:
»» “Estratégia inteligente que vende.”
»» “Paradoxo minimalista.”
»» “Conceito é a definição de uma ideia.”
»» “Essência da comunicação.”
»» “Expressão sintética da estratégia criativa.”
O conceito criativo norteia a campanha e Identidade Visual. Posteriormente são os

referenciais abstratos que devem ser concretizados na criação para representar a marca.
Posteriormente, serve como parâmetro comparativo para justificar a criação.
Criando um Logo
Definir sua marca é fundamental para formação do branding.
53
Muitas pessoas erram na hora de criar um logotipo, pois não conseguem transmitir a
imagem correta por meio de um simples logo.
O logo deve possuir a coerência adequada ao

projeto
Seu logotipo deve estar coerente com seu conteúdo. Se seu assunto é gastronomia,
transmita conceitos gastronômicos em sua marca logo, se é sobre design use um
logotipo que possua um estilo impecável, um bom design. Se faz referência a algum
outro projeto, use cores ou objetos que lembrem esse outro projeto, fortalecendo a
identidade visual.
Figura 75. Logotipo.
Fonte: Design Blog.
Além da coerência ao projeto, o logo também deve se mostrar eficaz e

compatível com seu público.
Analise seu público alvo, a partir desse resultado conclua que logotipo seria ideal para
esse grupo de pessoas.
Se o logotipo do Facebook fosse criado com o mesmo estilo e padrão do logo da PEPSI,
como seria? Ou se o nome da Coca-Cola fosse escrito com a mesma fonte da Apple?
É importante que o logo seja reconhecido

facilmente em outras cores
Um bom logo se adapta a outras cores, podendo ser usado e reconhecido sem a cor
original. Seu logo pode possuir excelentes cores, mas ele não se adapta a um simples
preto e branco é porque não é bom o suficiente.
54
A originalidade é o ponto crucial do logo
A originalidade é o que fornece exclusividade ao seu projeto. Não use símbolos idênticos,
ou bem parecidos a de outra marca, ou empresa. Crie sua própria marca. Caso contrário,
você não será reconhecido por seu trabalho, e sim por ter um trabalho praticamente
copiado de outro.
Não siga as últimas tendências de design
Se seguir padrões mercadológicos fosse algo positivo, constantemente as empresas troariam

seu logo. Lembre-se que uma tendência é passageira, mas seu logo deve ser duradouro e
atualizável, deve perdurar por um bom tempo para terem uma constância de imagem.
Existe a possibilidade de se utilizar o nome com

logotipo
Caso seu produto possua um bom nome, você pode optar por usar o nome como logo.
Empresas como a Coca-Cola, por exemplo, usam apenas o nome, sem deixar de lado
o profissionalismo e o design. Isso funciona em alguns casos. A vantagem é que você
posiciona e memoriza melhor a marca, o nome. A desvantagem é que, da forma que for
feito, você pode perder a chance de ter um símbolo forte, representativo e que possa ser
aplicado com o logo de forma metonimática.
Teste seu projeto, coloque em prática
Depois de listar o que pode e não conter no logo de sua empresa esboce em um papel
vários modelos, e o que mais agradar comece a trabalha-lo de forma digital, isso lhe
poupará um bom tempo. Depois de criar um logotipo, busque a opinião de outras
pessoas (estágio discursivo semiótico), e por fim se chega ao resultado final.
Selecione um exemplo de criação de logo positivo, ou seja, que tenha uma boa
construção seguindo os conceitos apresentados anteriormente, e um exemplo
negativo, justificando.
Tipografia
A tipografia (do grego typos — “forma” — e graphein — “escrita”) é a arte e o processo
de criação na composição de um texto, física ou digitalmente. O objetivo principal da
tipografia é dar ordem estrutural e forma à comunicação visual.
55
Figura 76. Tipografia.
Fonte: Typefaces.
Família de Letras
Figura 77. Família de Letras.
Fonte: PedroCS.
Fonte: PedroCS.
56
Fonte: PedroCS.
Fonte: PedroCS
Anatomia das Letras
Figura 81. Anatomia das Letras.
Fonte: Autor.
Fonte: Autor.
57
Fonte: Autor.
Fonte: Autor.
Fonte: PedroCS.
58
Ligaduras
Quando o espaçamento é correto, alguns pares de letras colidem, as ligaduras fornecem

melhor consistência ao texto.
Figura 86. Ligaduras.
Fonte: Autor.
Figura 87. Ligaduras.
Fonte: PedroCS
Kern
Parte da letra que sai do bloco definido, para permitir o encaixe com as demais letras.
Cada par de letras possuem o kerning definido na fonte digital e, sem ele, ficariam muito
afastadas. Porém, algumas vezes é necessário o ajuste manual do kerning.
Figura 88. Kern.
Fonte: PedroCS.
59
Medida
A largura de uma coluna de texto se denomina medida. As linhas criadas dentro da

coluna auxiliam o olho a seguir o texto e a largura deve ser combinada com o corpo de
letra e a entrelinha de forma a facilitar a viagem do olho de linha para linha.
Figura 89. Medidas.
Fonte: PedroCS.
Espaçamento
O espaçamento (tracking) ocorre tanto entre letras como entre palavras.
Entre letras, pode ser solto, normal ou apertado (kerning).
O ideal é que o espaçamento entre as palavras tenha consistência e seja o menor possível,
para não se criar vãos (dentes de cavalo) nos textos.
Figura 90. Espaçamento.
Fonte: Autor.
60
Figura 91. Espaçamento.
Fonte: PedroCS.
Entrelinha
A entrelinha (derivado do termo inglês leading, que significa tiras de chumbo, lead,
posicionadas para gerar o efeito) é o espaçamento entre duas linhas de texto.
O valor da entrelinha se dá ao corpo mais espaço, ou da linha de base à linha de base.
Figura 92. Entrelinhas.
Fonte: PedroCS.
Relações
O espaço entre linhas deve ser opticamente maior do que o espaço entre palavras. Isso
significa, por exemplo, que fontes com altura de x menor requerem menor entrelinha,
como é o caso da maioria das fontes serifadas.
É importante nos atentarmos de que todas as relações são relativas, as regras

não são absolutas. Por exemplo, a fonte Georgia é uma exceção por mesmo
sendo serifada, apresenta elevada altura de x.
61
Figura 93. Relações.
Fonte: PedroCS
Medidas Tipográficas
As unidades tipográficas, diferentemente de outras medidas, não costumam empregar
o sistema métrico. Portanto, quando tratamos de tipografia costumamos a nos referir a
pontos (pt), paicas (p), cíceros etc.
Em tipografia existem duas medidas de ponto mais conhecidas: o ponto paica (em
inglês pica), empregado na Inglaterra e nos países de língua inglesa, e o ponto Didot,
empregado na Europa continental.
O ponto, em ambos os casos, é o resultado da divisão da unidade em 12 partes. Há uma

pequena diferença de tamanhos, sendo a paica um pouco menor que o cícero. Sendo assim:
1 paica (4,22 mm) = 12 pontos (sistema britânico)
1 cícero (4,52 mm)= 12 pontos (sistema Didot)
Vale ressaltar que estas medidas foram empregadas principalmente no sistema

de impressão tipográfica e diz respeito aos tipos analógicos. Os tipos digitais,
por sua vez, adotam a medida em paicas, mas fazem uma adaptação em relação
à unidade. Neste caso, adotam o sistema de medidas inglês e tomam a polegada
como referência. Neste caso uma paica equivale a 1/6 de polegada (4,233 mm)
e o ponto 1/12 de paica.
Figura 94. Unidade tipográfica nos sistemas paica e Didot. Fonte usada: Gill Sans.
Fonte: PedroCS
62
Regras básicas da tipografia

1. Não utilize mais de três fontes em um documento.
2. Os títulos devem ser maiores que os corpos do texto e serem posicionados

a cima deles, isso eleva o contraste e representa a hierarquização de seu
texto.
3. O texto principal deve ser escrito em um tamanho legível para o meio em

que é aplicado.
4. Utilize tipos de letras “standardizadas”, ou seja, evite letras decorativas

e de pouca legibilidade. Esse tipo de letra decorativa nunca poderá ser
utilizada em um texto corrido.
5. Espaço entre pares de letras, letras numa frase e palavras deve ser
consistente.
6. Elementos de ênfase devem ser discretos para não evitar o ritmo de

leitura (preferencialmente itálico).
7. Não escrever texto corrido com letras maiúsculas, isso atrapalha a leitura
do texto e, no meio virtual, passa a ideia de descontrole.
8. O texto deve ser alinhado na horizontal, segundo o padrão de leitura

ocidental.
9. Apenas faça a justificação correta do texto (esquerda e direita) quando

tiver total ajuste de kerning, tracking, e hifenização. Não tendo, justificar
à esquerda ou em bandeira. NUNCA justifique um texto no meio
digital.
10. As linhas não devem ser muito curtas ou longas. Considerável um ideal
de 66 caracteres com espaço.
Geometria e proporções
Os primeiros estudos sobre proporções harmoniosas são originados da Grécia antiga.

Phidias, um dos principais responsáveis pela acrópole de Atenas, e Ictinus, o arquiteto
do Partenon, foram os primeiros a demonstrar o potencial do design baseado na
divisão de uma linha em segmentos proporcionais, o que depois viria a ser conhecido
como razão áurea.
63
Um dos primeiros registros formais sobre o assunto está no livro de Divina Proportione,
de Fra Luca Pacioli, em 1509. Esta proporção, que este chamou de “divina” derivava
da divisão de uma linha de tal forma que a razão da linha com o maior segmento
correspondia à razão do segmento maior em relação ao menor. Quando expandida,
essa proporção se tornava a Série de Fibonacci.
Esse nome é uma referência a Fibonacci, um matemático italiano, de Pisa, do século

X. A série que leva o seu nome é formada por números que correspondem à soma dos
dois anteriores (1, 1, 2, 3, 5, 8, 13, n...). Para se criar esta sequência, cada número é o
resultado da soma dos dois anteriores (1, 1+0=1, 1+1=2, 2+1=3, 3+2=5, 5+3=8, e assim
por diante.
Esse sistema de proporcionalidade é baseado no pentágono regular e seu pentagrama

correlato. Para os designers mais propensos a matemática, a razão áurea é representada
pela letra grega Φ (fi), em homenagem ao escultor grego Phidias, e corresponde ao
número irracional 1,61803398.
Figura 95. Razão Áurea.
Fonte: DesignBlog.
A imagem acima ilustra como se encontram relações proporcionais facilmente no

pentágono regular e respectivo pentagrama. Adaptado de Hurlburt, 1978.O pentagrama
é formado por um pentágono regular e cinco triângulos isósceles côngruos; a razão
entre o lado do triângulo e sua base (lado do pentágono) é o número de ouro.
Dentro do pentagrama pode ser encontrado um pentágono, ou seja, um polígono de cinco

arestas que, conectadas de forma concorrentes, obtém-se um novo pentagrama, com um
64
novo pentágono inscrito ao centro, e assim esta composição repete-se, infinitamente.

Ao desmembrar-se o pentagrama, obtém-se a verdade numérica de que a razão entre
o maior e o menor dos segmentos constituintes do perímetro do pentagrama é igual à
razão entre o todo de um lado e seu maior segmento adquirido.
Figura 96. Pentagrama.
Fonte: Autor.
Figura 97. Exemplo A.
Fonte: DesignBlog
Figura 98. Exemplo B.
Fonte: DesignBlog
65
Figura 99. Exemplo C.
Fonte: Walt Disney ’s Donald in the world of mathemagic
Figura 100. Exemplo D.
Fonte: DesignBlog
O quadrado
O estudo do quadrado foi também realizado com o objetivo de se encontrar harmoniosas

proporções. Diversas combinações foram baseadas na simples divisão pelo quadrado,
que é uma divisão natural do retângulo áureo.
No Japão, o quadrado tem um papel fundamental na arquitetura tradicional e

decoração, visível principalmente na produção e arranjo assimétrico de tatames
(“tapetes” de aproximadamente 0,91m x 1,83m). Além disso, um dos padrões
dimensionais mais utilizados atualmente para formato de papel (DIN) utiliza-se
do retângulo baseado na “raiz quadrada de 2” (1,4142).
Figuras 101 e 102 . Quadrado.
Fonte: DesignBlog
66
A imagem acima ilustra a proporcionalidade utilizada em tatames e a construção do

retângulo proporcional com a diagonal do quadrado. Adaptado de Hurlburt, 1978.
Simetria dinâmica
A proporção áurea, durante o século XX foi muito difundida e utilizada por diversos
especialistas, como Jay Hambidge, cujo livro Elementos da Simetria Dinâmica,
publicado em 1920, ainda preserva uma grande quantidade de seguidores.
Acredita-se que Hambidge foi o primeiro a relacionar a proporção áurea com a
espiral logarítmica.
Figura 103. Simetria Dinâmica.
A imagem acima apresenta oito retângulos áureos em uma série de Fibonacci, posicionados para criar a espiral logarítmica.
Fonte: HURLBURT, 1978.
O autor aponta que a diagonal do retângulo, quando intercepta o lado do quadrado

original, cria uma subdivisão harmônica. Ele utiliza o termo “simetria dinâmica” de
Platão e, uma de suas fontes do século I, Vitrúvio.
O Modulador (Modulor)
Ao falarmos sobre grids, é interessante mencionar que o primeiro sistema de

grid claramente identificável como voltado ao design foi criado por Le Corbusier.
Originalmente sua proposta estava voltada para arquitetura, mas ele rapidamente
concebeu aplicações na área gráfica.
67
Figura 104. O modulador.
Fonte: DesignBlog .Hurlburt (1978).
A proposta de Le Corbusier foi importante ao relacionar a proporção áurea ao

corpo humano. Sistema este responsável pela produção de uma série de proporções
matemáticas, utilizadas, principalmente, na arquitetura. Também influenciou designers
tipográficos alemães e suíços a criarem grids mais modernos e orientados ao design.
Grids
Um grid (ou malha) é um dos elementos básicos do design, sendo o elemento mais
ordenado do Desenho, útil para inúmeros tipos de projeto.
Surgiram com a proposta de ser uma ferramenta de ordem e arranjo de elementos

visuais, uma forma estudada de se resolver visualmente uma composição e obter coesão
no layout.
Figura 105. Grids.
Fonte: DesignBlog
68
Segundo Derek Birdsall (apud Tondreau), um grid é uma malha construída com
diversos retângulos, usada para ordenar elementos gráficos, “Os grids são os elementos
mais mal compreendidos e mal utilizados no layout de páginas. Um grid é útil apenas
se for derivado do conteúdo que ele pretende tratar.”
Por uma lógica coerente, apenas após definido o tipo de projeto que estamos trabalhando
que podemos partir para a criação de um grid, afinal, “o conteúdo determina a estrutura
que o grid terá” (TONDREAU, 2009).
O uso dos grids proporciona uma grande vantagem à confecção dos trabalhos, como
clareza, organização e facilidade de distinção entre as diferentes informações contidas
no layout (tanto na hora de criação pelo designer, quanto pelo usuário que consegue
navegar com uma facilidade muito maior pelo trabalho).
Grid | Anatomia
Margens: espaços negativos entre a borda da página e a área do conteúdo. As

margens exercem grande influência sobre o conceito trabalhado no projeto, e por
isso seu tamanho deve ser muito em estudado. Podem servir tanto como área de
descanso para os olhos, como para chamar a atenção para o conteúdo que elas
enquadram.
Linhas de fluxo: alinhamentos horizontais no espaço. Não são linhas visíveis, mas
são usadas para guiar o sentido de leitura do usuário pela página.
Zonas especiais: grupos de módulos que formam campos distintos. Esses campos
servem para informações específicas do projeto (imagens, publicidade etc).
Módulos: cada pequena unidade que compõe a malha. São espaçados uniformemente
e permitem inúmeras possibilidades de composição.
Marcador: elementos que auxiliam na navegação pelo documento, como número de

página, título de seção etc.
Coluna: áreas verticais que contém texto ou imagens. As colunas podem ter o mesmo
tamanho ou tamanhos variados, dependendo da informação que está sendo trabalhada
e dos elementos gráficos a se dispor no layout.
69
Figura 106. Grid/ Anatomia.
Fonte: DesignBlog.
Grids | Tipos
Grid de uma coluna: geralmente usado em textos corridos como relatórios e livros.
O foco nesse tipo de grid é o texto.
Grid de duas colunas: pode ser utilizado quando temos grande volume de texto e
precisamos apresentar conteúdos diferentes. As colunas podem ser iguais ou diferentes,
dependendo do contexto.
Grid de múltiplas colunas: usualmente aplicados em sites e revistas, permitem

uma flexibilidade muito maiores que os anteriores. Combina colunas de larguras iguais
ou diferentes (geralmente larguras diferentes).
Grids modulares: permitem um controle mais refinado em trabalhos com grande

número de informações, como jornais, calendários etc. São compostos por uma
combinação de colunas, que organizam o conteúdo em porções pequenas de espaço.
Grids hierárquicos: estrutura organizada em zonas de hierarquia, muitas vezes

compostas por colunas horizontais.
70
Figura 107. Tipos de Grids.
Fonte: DesignBlog
Manual de identidade visual

Manual de identidade visual é um documento que contém todos os elementos gráficos
que representam uma empresa, instituição, produto ou serviço. Neste manual é
especificado todos os formatos, tamanhos, cores, padrões de fonte e regras que são
impostas sobre essa identidade visual. Ele serve para a marca da empresa ser utilizada
de forma correta e com os seus padrões, garantido que a imagem da mesma fique intacta
sem ser modificada, com clareza e objetividade.
Figura 108. Manual de identidade Visual.
Fonte: Uirapuru.
71
Os elementos apresentados a seguir são os principais de serem contidos em um manual

e identidade visual, porém pode haver modificações de manual para manual, aonde em
alguns terão mais elementos e aplicações, e outros menos.
Marca
Primeiramente, mostra-se a aplicação da marca, com a explicação da mesma. Após isso,

é mostrada a versão horizontal e a versão vertical, sendo a primeira mostrada à versão
preferencial (mais usada).
Figura 109. Marca.
Fonte: EC Genius.
Figura 110. Marca.
Fonte: Autor.
72
Tipografia
Nesta etapa do material é apresentada a família tipográfica usada na marca.

Primeiramente é escrito o nome da fonte escolhida e embaixo a aplicação dessa família
com todas as letras do alfabeto e todos os números. Se o manual contiver! Caso o manual
contenha mais fontes, primeiramente deve-se colocar a fonte principal e em seguida as
fontes menos usadas.
Figura 111. Tipografia.
Fonte: DesignBlog.
Escala de cores
Apresentamos nesta etapa as cores institucionais com suas padronizações específicas,

com os critérios básicos de aplicação que seria RGB, CMKY e Pantone, e ao lado de cada
exemplo a numeração exata de cada cor, para na hora da aplicação a cor sair exatamente
igual ao do manual.
Figura 112. Escala de cores.
Fonte: Guggenheim.
73
Construção de marca
Fundamentalmente importante, nesta etapa são apresentadas várias padronizações

necessárias para a utilização dessa marca de forma correta.
A malha construtiva (grid de criação da marca) é uma delas, pois ela mostra a base de
alinhamento e proporção que a marca deve ter, aonde a marca não correrá o risco de
ficar muito comprida ou alta demais, seguindo as proporções necessárias.
Figura 113. Construção de marca.
Fonte: Apple.
Versões alternativas da marca, com uso de somente uma cor (para aplicações específicas
como: impressões com uma cor ou em patrocínios de eventos).
Fonte: Itambé.
74
Fonte: Fiat.
Aplicação da marca em versão negativa e versão positiva. A primeira mostrada será a

aplicação preferencial.
Fonte: <Brasil.gov.br>.
Aplicação da marca em fundos de cores sólidas, para ver qual seria a melhor aplicação
(na cor original, versão positiva ou versão negativa).
75
Fonte: Senac.
Aplicação máxima e redução mínima da marca. Para ampliação, na maioria dos casos,
não se apresenta uma restrição, somente para redução. Embora, a maioria dos manuais
utilize 2 cm como padrão mínimo, o designer pode ver e estudar esse padrão com
tamanhos menores, desde que consigamos enxergar com legibilidade a marca.
Fonte: Fiat.
Aplicabilidade
Aqui será mostrada a aplicação dessa marca, com todos os padrões e regras vistas em
produtos e serviços de materiais usados na empresa. Primeiramente é apresentada a
76
parte de papelaria e suas padronizações como formato final do suporte, papel utilizado,
cores e se possui acabamento. São mostrados então: cartão de visita, envelope, envelope
CD ou DVD, pasta.
Também é apresentada a parte virtual, como e-mail padrão, e-mail marketing,

apresentação de slides, e parte institucional como sinalização da empresa, frota,
uniforme, acessórios, crachás, brindes e por final a aplicação em publicidade.
Alguns exemplos de papelaria e elementos de manuais de Identidade Visual.
Figura 119. Exemplo A.
Fonte: RJNet.
Figura 120. Exemplo B.
Fonte: Fibonacci.
77
Figura 121. Exemplo C.
Fonte: DAU UFV.
Figura 122. Exemplo D.
Fonte: Family Dental Center.
Figura 123. Exemplo E.
Fonte: SAMU.
78
Figura 124. Exemplo F.
Fonte: Greenlots.
Figura 125. Exemplo G.
Fonte: Toyota.
Mapa conceitual de Design

Este mapa conceitual sobre Design, criado pelo próprio autor da apostila, é uma
ferramenta utilizada para se estudar os processos gráficos e a história do design.
Apresenta as principais palavras-chave para os estudos sobre design. Mapas conceituais
representam uma metodologia muito eficiente para apresentações e estudos.
A criação de mapas conceituais é um excelente exercício para o treino das inter-relações,

dos padrões de ensinos transversais e raciocínio abdutivo.
79
Figura 126. Mapa conceitual.
Fonte: Autor.
Tutorial Photoshop e GIMP

Os recursos apresentados neste capítulo são similares em diferentes softwares de
criação e manipulação de imagem. Os principais utilizados são o GIMP (software livre)
e o Photoshop, da suíte de aplicativos Adobe, sendo este o software de referência para
criações digitais bitmapeadas.
Figura 127. Photoshop e Gimp.
Fonte: Adobe Photoshop e Gimp.
Área de Trabalho
Após concluir o processo de inicialização, a área de trabalho ocupará todo o primeiro plano.
Para abrir uma imagem: Menu | File | Open.
Para iniciar um novo arquivo, clique no menu File New.
80
Nessa tela definimos a largura (Width), altura (Height) e resolução do projeto. Quando
se trabalha com aplicações para impressos a resolução recomendada é de 300 pixels/
inch (pontos por polegada, dpi) e, para criações digitais, utilizamos 72dpi. Para
Background Contents o padrão é White, porém em alguns casos será necessário deixar
como Transparent. Em alguns casos a arte criada deverá ser utilizada tanto no meio
impresso como digital. Em casos como esse, faça sua arte em 300dpi e depois, ao
adapta-la ao meio digital se trabalha a resolução, pois do contrário, começar com 72dpi
e aumentar para 300dpi não gera uma boa resolução final do documento.
Figura 128. New.
Fonte: Autor.
Barra de Propriedades
A barra de propriedades do Photoshop é dinâmica, muda conforme a ferramenta que

foi selecionada. Fica posiciona na parte superior da tela.
Figura 129. Barra de Propriedades.
Fonte: Autor.
A Barra de Ferramentas
Esta barra contém as principais ferramentas para se trabalhar no Photoshop. Caso ela
não esteja visível, poderá ser acessada por meio do Menu superior Windows | Tools.
81
Algumas ferramentas desta barra de ferramenta são desdobráveis. Estas são as que
possuem um pequeno triângulo preto no canto inferior direito. Ao se clicar e segurar
nesta determinada ferramenta, mais opções surgirão.
Figura 130. Ferramentas.
Fonte: Autor.
Mover (Atalho: V)
A ferramenta Mover permite que se movam objetos em uma determinada camada. Para
usá-la, clique em qualquer lugar da tela e arraste. O objeto selecionado se moverá na
camada.
Figura 131. Ferramenta Mover.
Fonte: Autor.
Máscara de Seleção (Atalho: M)
A ferramenta de Seleção por área serve para selecionar uma parte da tela no formato
retangular ou elíptico. A parte interna desta seleção é a região da imagem que será
alterada por qualquer edição feita. Caso você queira alterar a parte inversa, ou seja, a
82
que está fora dessa seleção, poderá inverter a máscara, segurando as teclas Control +
Sift + I. Segurando Shift ao fazer a seleção, você obtém um quadrado ou círculo perfeito.
Para selecionar um local, basta clicar com o mouse com o botão esquerdo, segurar e
arrastar o cursor.
Figura 132. Máscara de Seleção.
Fonte: Autor.
Laço (Atalho: L)
O Laço é uma ferramenta de seleção livre que permite a você desenhar uma área de
seleção com o mouse, clicando com o botão esquerdo do mouse, mantendo pressionado
e arrastando. Ao fechar a forma, tudo que estiver dentro dela será selecionado. Dentro
desta mesma ferramenta você ainda tem acesso ao Laço Poligonal, que permite criar
uma seleção livre em vários cliques, constituída por retas, e o Laço Magnético, que
tenta detectar bordas automaticamente para facilitar a seleção. Este último recurso não
apresenta um elevado nível de assertividade.
Figura 133. Laço.
Fonte: Autor.
83
Varinha Mágica (Atalho: W)
A Varinha Mágica é outra opção de ferramenta de seleção. Ao selecioná-la e clicar em

uma área da imagem é gerada uma seleção que inclua o ponto clicado e todas as áreas
adjacentes com coloração similar (há um ajuste no topo da tela para determinar a
sensibilidade dessa medição de área similar). A Varinha Mágica é geralmente utilizada
como uma forma amadora de retirar fundos de imagens e seus resultados não possuem
um bom acabamento, ao menos que o contraste entre a figura e o fundo sejam extremos.
Figura 134. Varinha Mágica.
Figura 135. Exemplo.
Fonte: Autor.
Corte (Atalho: C)
A ferramenta de Corte é utilizada para se cortar e segmentar as imagens. Clique com o

botão esquerdo do mouse, segure e arraste para criar a área de corte em uma seleção
retangular. Toda a área que ficar fora dessa seleção será eliminada da imagem. É possível
especificar o tamanho exato do corte, ou uma proporção, além de cortar a mão livre.
Figura 136. Corte.
Fonte: Autor.
84
Conta-gotas (Atalho: I)
Com a ferramenta Conta-gotas você será capaz de selecionar qualquer cor da imagem
ao clicar com ele na área correspondente. Ao copiar a cor, o Conta-gotas alterará a cor
primária que você estiver usando para a cor copiada. Esta ferramenta facilita ao se
escolher uma cor exata que já está contida na imagem.
Figura 137. Conta-gotas.
Fonte: Autor.
Pincel de Recuperação: (Atalho: J)
O Pincel de Recuperação permite que você selecione uma amostra de um ponto da

imagem e use-o para pintar sobre outro ponto. Ao finalizar o processo, o Photoshop
examina a região ao redor da que foi pintada para tentar suavizar a edição. Para
selecionar o ponto de referência, segure a tecla Alt do teclado e clique sobre ele. Em
seguida, clique com o botão esquerdo do mouse na região em que se deseja pintar.
Figura 138. Pincel de Recuperação.
Fonte: Autor.
Pincel e Lápis (Atalho: B)
O Pincel e o Lápis são ferramentas para se criar desenhos e traços à mão livre. O lápis cria
uma linha dura de espessura variável, controlável pela caixa de configuração da barra
de propriedades do Photoshop. O pincel pode assumir diversos formatos e modelos
distintos, e é possível suavizar as linhas, criar e carregar novos pincéis ou configurá-los
na janela Pincéis.
85
Figura 139. Pincel.
Fonte: Autor.
Carimbo (Atalho: S)
Utilizando uma dinâmica similar à do Pincel de Recuperação, o Carimbo permite que

você determine uma parte da imagem como origem de amostragem e então use esta
amostragem para cobrir outra área. Porém, o Photoshop colará exatamente o fragmento
selecionado, sem realizar uma análise para suavização dos resultados. Assim como no
Pincel de Recuperação, para selecionar o ponto de referência, segure a tecla Alt do
teclado e clique sobre ele. Em seguida, clique com o botão esquerdo do mouse na região
em que se deseja pintar.
Figura 140. Carimbo.
Fonte: Autor.
Pincel do Histórico (Atalho: Y)
O Pincel de Histórico permite que você corrija algum erro cometido, de forma pontual.
Isso é possível pelo fato de o Photoshop salvar todas as etapas da sua edição (50 etapas
por padrão), e o Pincel de Histórico ser capaz de pintar essas camadas anteriores sobre
a imagem atual.
Por exemplo, você alterou a textura de toda a imagem, mas gostaria que um fragmento
específico dela voltasse a ficar na textura original. Nesse caso, você pode selecionar o
Pincel do Histórico e a etapa do histórico que representa a imagem como você quer que
ela volte a ser, então pintar a parte desejada para trazer de volta a forma antiga.
86
Figura 141. Pincel do histórico.
Fonte: Autor.
Borracha (Atalho: E)
A Borracha é uma ferramenta muito semelhante ao pincel, com a diferença de que ela
apaga em vez de pintar. Ao apagar, pode ocorrer de a região apagada adquirir uma
cor diferenciada. O motivo disso é que a Borracha preenche o plano de fundo da área
apagada com a cor de plano de fundo selecionada. Você pode controlar a suavidade e
o tamanho desta borracha, bem como alterar sua forma, da forma como pode também
ser feito com o pincel.
Figura 142. Borracha.
Fonte: Autor.
Lata de Tinta e Gradiente (Atalho: G)
A Lata de Tinta funciona de forma semelhante à Varinha Mágica, ao considerarmos a

atuação sobre a área clicada e as áreas similares ao redor. O diferencial deste processo
é que, ao invés de selecionar a área específica, ela pinta com a cor primária ativa. A
ferramenta Gradiente gera um gradiente com base nas cores primárias e de fundo.
Uma grande possibilidade desta ferramenta é a criação de padrões mais complexos,
envolvendo transparências e diversas cores criando, por exemplo, efeitos metálicos
mais realistas.
Figura 143. Lata de tinta.
Fonte: Autor.
87
Desfoque, Nitidez e Borrar (Atalho: nenhum)
Todas estas três ferramentas funcionam com uma mecânica similar a dos pincéis, porém
cada uma possui um impacto diferente na sua imagem. Por exemplo, a ferramenta
Borrar é muito útil para fazer cores com transições suaves em pinturas digitais ou para
criar elementos como fumaça.
Figura 144. Ferramenta Desfoque.
Fonte: Autor.
Subexposição, Superexposição e Esponja (Atalho: O)
Estas ferramentas também possuem mecânica de uso semelhante a pincel. Sua função
é manipular a luminosidade e intensidade de cores. Com a subexposição podemos
escurecer áreas da foto, enquanto que com a Superexposição conseguimos clarear. A
ferramenta esponja serve para saturar ou suavizar cores na área pintada por ela. Estas
ferramentas fornecem ajuda para se trabalhar acabamentos profissionais em fotografias,
escurecendo áreas ultraexpostas ou clareando áreas de baixa exposição. Mediante ao
escurecimento de certas áreas pode-se, por exemplo, trabalhar o contorno do rosto de
modelos de forma mais profissional, formando um resultado muito mais consistente.
Figura 145. Subexposição.
Fonte: Autor.
Caneta (Atalho: P)
A ferramenta Caneta é usada para desenhar gráficos vetoriais ou para criar demarcadores
que podem ser usados para diversas tarefas mais avançadas.
88
Na barra de propriedades é possível selecionar se a caneta será configurada para

desenhar formas vetoriais ou criar demarcadores.
Inicialmente podemos considerar controle da caneta bastante complexo, mas tudo

depende da forma em que se adapta ao uso desta ferramenta. Ao se clicar para gerar o
ponto inicial e, na sequência, clicar em outro local para ter a continuidade do traçado
deve-se segurar o botão esquerdo do mouse clicado para gerar a curva. Arrastando o
cursor para o canto superior esquerdo, por exemplo, a curva descende ao canto inferior
direito, e assim por diante. Após a primeira curva ser criada, o software simulará uma
progressão algorítmica de continuidade da curva, o que significa que existe a necessidade
de você desfazer um dos nós das alças de controle da curva para se ter maior controle
sobre ela. O processo pode ser feito ao segurar a tecla alt e clicar com a ponta da caneta
no último ponto criado.
Acessando a janela de demarcadores é possível gerar uma máscara de seleção, preencher

a forma ou traçar um demarcador (opção esta que, inclusive, permite um recurso muito
interessante de simular pressão para traçados feitos a pincel).
Figura 146. Caneta.
Fonte: Autor.
Ferramenta Texto (Atalho: T)
Esta é a ferramenta clássica para escrever horizontalmente. Com as demais ferramentas

desdobráveis, você consegue escrever verticalmente e também criar máscaras de texto
horizontais e verticais.
Figura 147. Ferramenta Texto
Fonte: Autor.
89
Seleção de Demarcador (Atalho: A)

Esta ferramenta permite mover qualquer demarcador criado. É igual à ferramenta
Mover, mas específica para demarcadores.
Figura 148. Seleção de Demarcar.
Fonte: Autor.
Formas (Atalho: U)
As quatro ferramentas desdobráveis permitem a criação de retângulos, elipses, polígonos,

linhas e formas personalizadas em formato vetor. Estas formas são muito úteis quando
se está desenhando ou criando máscaras geométricas para fotos. Os demais controles
avançados destas ferramentas podem ser definidos na barra de propriedades.
Figura 149. Formas.
Fonte: Autor.
Ferramenta Mão (Atalho: H)
Permite mover a sua visão da área de trabalho inteira do Photoshop. Funciona muito
bem para mover a sua visão quando você está trabalhando em uma imagem em
que foi aplicada uma grande quantidade de Zoom. Esta ferramenta também pode
ser selecionada segurando a tecla Espaço. Ao soltar a barra de espaço, você possui
novamente a ferramenta anterior selecionada.
Figura 150. Ferramenta Mão.
Fonte: Autor.
90
Zoom (Atalho: Z)
A ferramenta Zoom é usada para aproximar e afastar a imagem. Este recurso é muito
utilizado ao se trabalhar diretamente nos pixels individuais ou em uma pequena área
da imagem. Por padrão, a ferramenta Zoom só aproxima. Para afastar, clique com a
tecla Option / Alt. Ou use a roda do mouse para afastar e aproximar mais rapidamente,
enquanto segura a tecla Alt.
Figura 151. Zoom.
Fonte: Autor.
Ferramentas de Seleção de Cor (Teclado: D para

padrões, X para inverter as cores)
Estas ferramentas permitem escolher e gerenciar as cores que estão sendo utilizadas.
A cor de cima é denominada de primária (que será usada pelos pincéis), enquanto a de
trás é a cor de plano de fundo (aparece ao deletar ou estender algo do plano de fundo).
Os dois ícones menores acima das cores são atalhos de funções. O da esquerda, que
mostra um quadrado preto sobre um branco, configura as suas cores primárias e de
plano de fundo para os padrões, que são preto e branco (atalho:D). A seta curva com
duas pontas à direita troca as suas cores uma pela outra (atalho: X). Ao clicar em
qualquer uma das cores é aberto um seletor para que possa ser escolhida com precisão
a cor desejada.
Figura 152. Ferramentas de seleção de cor.
Fonte: Autor.
91
Paletas
As paletas são os painéis que você observa na parte direita da tela. Extremamente úteis,
facilitam ações específicas, como realizar ajustes nas imagens, acessar as camadas,
navegar, entre outras importantes opções. Para fechar determinada paleta que não
esteja utilizando, ou principalmente abrir uma paleta não ativa, use o Menu Janelas e,
se for necessário, arraste com o mouse para a área de paletas à direita.
Figura 153. Paletas.
Fonte: Autor.
Camadas
A paleta de camadas é a principal dos softwares gráficos, é a alma do Photoshop. Mostra

todas as diferentes camadas do seu documento, na ordem. Extremamente necessária, é
muito utilizada. Por meio desta paleta é possível organizar e ordenar as suas camadas,
assim como configurar diversas opções, como visibilidade e opacidade, modos de
mistura, agrupar e fundir as camadas, entre outras coisas.
Para se entender bem esta reação de camadas, é muito utilizada à metáfora das folhas
transparentes. Imagine que cada camada é como uma folha transparente e apenas o
elemento desenhado, criado ou escrito em determinada camada está registrado nela.
A sobreposição dessas folhas transparentes gera a construção total da arte. A grande
vantagem desta ferramenta é que, com ela, é possível editar partes específicas do
desenho, separadas, sem alterar as demais, o que é indispensável caso ocorra algum
erro em um local específico.
92
Figuras 154 e155. Camadas.
Fonte: Autor.
Mesclando camadas
O Photoshop permite uma eficiente mistura de camadas acessadas no painel de

Layers. Neste painel encontramos quatro modos de mesclar pixels entre camadas.
Nenhuma dessas técnicas altera de forma permanente a imagem, ou seja, podem ser
reconfigurados.
Opacity: Digite um valor na caixa Opacity próxima à parte superior da paleta Layers
para alterar a opacidade da camada ativa ou da seleção flutuante. A opacidade é utilizada
para criar marcas d’água e efeitos de transparência.
Fill: A opção Fill permite você ajustar a opacidade das informações de pixel na camada,
sem afetar a opacidade de nenhum dos efeitos de camada que possam ser aplicados.
Significa que apenas o preenchimento se torna transparente, mas os efeitos permanecem
visíveis.
Estilos de Camada
Este painel possibilita configurar nas camadas das imagens efeitos como brilhos,
sombras, chanfros, brilhos. Para a criação de aplicação do efeito é necessário que a
camada não esteja vazia. Existem diversos estilos de efeitos aplicáveis em camadas,
acessados no Menu Layer, Layer Style, em que as opções de mesclagem são mostradas.
93
Podemos também aplicar o efeito por meio do botão add layer style, localizado no
rodapé do painel Layers.
Figura 156. Estilos de Camadas.
Fonte: Autor.
Ao marcar a caixa de checagem da opção, são aplicadas as configurações padrões da

opção. Ao clicar no nome do efeito serão mostradas as opções disponíveis:
Blending Options Default: permite trabalhar os modos de mistura da camada, bem

como sua opacidade e seu preenchimento.
DropShadow: aplica uma sombra projetada comum. É possível, nesta opção,

especificar a cor, sombra, opacidade, modo de mesclagem, posição, tamanho e o
contorno da sombra.
Inner Shadow: aplica uma sombra projetada interna em que o plano de fundo parece
que está à frente, projetando uma sombra sobre a camada.
Outer Glow: Cria um halo tradicional, como um brilho em volta dos objetos da layer.
Inner Glow: Aplica o efeito de Glow internamente.
94
Bevel and Emboss: Produz cinco efeitos de aresta distintos, conforme definido no
mesmo style. É possível aplicar uma aresta chanfrada tridimensional ao redor da parte
externa da camada. Enquanto o efeito Inner Bevel produz uma aresta chanfrada dentro
da camada, o efeito Emboss combina chanfros internos e externos. Já o efeito Pillow
Emboss reverte o chanfro interno para que a imagem apareça oculta e, em seguida,
surja novamente ao longo da camada.
Contour e Texture: são consideradas sub-opções de Bevel and Emboss. As

configurações da opção Contour criam ondas na superfície da camada que resultam em
ondulações de efeitos luminosos.
Satin: cria ondas de cor. É possível definir o comportamento das ondas, usando as
opções Contour.
Color, Gradient e Pattern Overlay: preenchem a camada com uma cobertura de

cor sólida, um degradê ou um padrão de repetição respectivamente. Elas funcionam de
modo quase idêntico aos três preenchimentos dinâmicos disponíveis para as camadas
de forma.
Stroke: opção utilizada para traçar um contorno ao redor de uma camada.
Após a personalização do estilo, é possível salvá-lo para uso posterior. Ele será salvo
junto aos estilos do Photoshop, para isso clique no botão New Style.
Painel Styles: por meio do painel Styles podemos facilitar a aplicação de efeitos de
camada. Quando salvamos anteriormente o nosso estilo ele também é armazenado
dentro desse painel.
Ajustes
Neste painel é possível de forma simples e eficiente criar e editar camadas de ajustes.
As camadas de ajustes são alterações não destrutivas que afetam todas as camadas
abaixo delas e que podem ser facilmente ligadas ou desligadas. Uma utilização muito
convencional para estas opções é no uso de correção de cores. Existe uma grande
quantidade de ajustes que alteram os aspectos visuais das imagens.
95
Figura 157. Ajustes.
Fonte: Autor.
Canais de Cores
A paleta de Canais de Cores permite analisar de forma independente as diferentes

cores que constituem a imagem. Estes canais variam de acordo com o modo em que a
imagem se encontra configurada. O modo RGB possui os canais vermelho (R), verde
(G) e azul (B). Outras opções, já citadas no começo do curso são o CMYK ou LAB. Ao
selecionar uma cor específica, a imagem será exibida em diferentes versões de preto
e branco. O motivo para este efeito é que cada canal de cor é apenas uma imagem
monocromática representando a luz em cada canal (ou seja: o canal vermelho mostra
apenas a quantidade de luz vermelha que a imagem emite em seus diferentes pontos).
Alternar entre esses canais diferentes é útil para fazer retoques específicos em cada
canal de cor, melhorias gerais de contraste e também para converter a foto para versão
preto e branco de modo mais correto.
Figura 158. Canais de Cores.
Fonte: Autor.
96
Seletor de Cores
Esta paleta permite alterar a cor primária e de plano de fundo de forma mais fácil,
usando comandos deslizantes com os valores individuais RGB ou de outro modo de
cores que estiver configurado.
Figura 158. Seletor de Cores.
Fonte: Autor.
Amostras de Cores
A paleta de amostras de cores é um conjunto de cores pré-definidas que você pode

escolher rapidamente. É possível carregar diversas outras coleções de amostras, ou
criar a sua própria.
Figura 159. Amostra de Cores.
Fonte: Autor.
Histórico
A paleta de histórico permite ver as últimas etapas da sua edição, e retornar a alguma
delas caso você queira. O comando Desfazer (Ctrl+Z) tem como padrão apenas alternar
entre o último e o penúltimo estado do histórico. Para voltar mais etapas, é por aqui
que você chega lá (até o máximo de 50 ações, por padrão). Outra forma de voltar mais
etapas é segurar a tecla Ctrl e apertas a tecla Z para cada passo que você quiser retomar.
Figura 160. Histórico.
Fonte: Autor.
97
Texto
A paleta de Texto é sempre utilizada junto com a de Parágrafo, e permitem fazer os ajustes
necessários às camadas de texto. É possível especificar fatores como espaçamento entre
letras e entre linhas, largura relativa dos caracteres, entre outras funções, de forma
semelhante aos editores de texto.
Figura 161. Texto.
Fonte: Autor.
Menus
O Photoshop possui diversas opções de menus em sua barra principal, sendo os

principais os descritos abaixo.
Figura 162. Menus.
Fonte: Autor.
98
Arquivo
É no Menu Arquivo que você pode abrir, salvar e fechar arquivos. É importante
destacar a opção Salvar Para Web, extremamente necessário para criações web em que
as imagens conseguem manter uma qualidade aceitável mesmo o tamanho virtual do
arquivo sendo expressivamente diminuído.
Editar
O Menu Editar apresenta opções clássicas como desfazer, refazer, cortar, copiar e colar.
Além das funções convencionais, no Photoshop você encontra neste menu opções para
transformar as camadas e definir seu padrão cromático.
Imagem
Ajustes de imagem e de tela, que também podem ser acessados na paleta

Ajustes. As opções neste menu são feitas para alterar a sua imagem como um
todo, apesar de alguns ajustes serem aplicados apenas a uma camada. Grande
parte destas transformações são destrutivas, ou seja, alteram permanentemente
a imagem.
Camada
O Menu Camada oferece as mesmas opções que podem ser acessadas pela paleta de
camadas, juntamente com algumas opções extras. É importante destacarmos outras
características importantes deste menu, como a possibilidade de criar camadas de
ajuste e objetos inteligentes, ou seja, de um grupo de camadas tratado como um objeto
único e de livre edição.
Selecionar
O Menu Selecionar oferece grande auxílio na hora de refinar uma seleção, além
de também poder ser utilizado para criar seleções completamente novas a partir de
critérios como espectro de cor e luminosidade.
Filtro
No Menu de Filtro, encontramos uma diversidade de filtros inclusos no Photoshop.

Cada filtro gera um tipo de efeito na imagem, que podem borrar, focar, distorcer e
alterar a imagem. Todo o acervo de filtros pode ser encontrado na galeria de filtros.
99
Sempre aconselhamos o teste cada filtro para entender suas funções e configurações. É
possível instalar mais filtros de terceiros e efeitos muito interessantes são gerados ao se
combinar mais de um tipo de filtros.
Análise
Local onde estão dispostas as ferramentas de medição. Em muitos casos você precisará
delas para fazer alterações precisas em suas imagens.
3D
Possui controles para manipulação de objetos 3D, bem avançados.
Visualizar
Aqui você pode acessar várias opções de visualização da área de trabalho. É possível
exibir ou esconder guias e réguas e fazer com que o Photoshop automaticamente alinhe
objetos em relação às bordas, cantos e ou uma grade no plano de fundo (grid), que
também pode ser ativado ou desligado.
Janela
Neste menu você pode acessar ou ocultar as janelas e paletas. É possível também
organizar as suas janelas do Photoshop da forma que considerar mais adequada e salvar
a sua organização para carregar posteriormente.
Redefinindo uma imagem
Redefinir uma imagem significa aumenta-a ou reduzi-la. Tradicionalmente o método

mais utilizado para definição é clicar no Menu Image e, então, Image Size. No painel
aberto é exibido o tamanho da imagem em largura e altura, com dimensões em
pixels. Em sua região central as dimensões em cm são referentes ao documento e é
apresentada também a resolução. Na parte inferior se encontram as opções de Scale
Styles que, ao estar marcada, fará com os estilos aplicados sejam redimensionados. A
opção “Constrain Proportions”, que mantém a proporção da imagem. Para definir as
novas dimensões clique em OK.
100
Figura 163. Image Size.
Fonte: Autor.
Tutorial de criação para pintura digital e

imagens vetoriais
Apresentaremos agora um tutorial que exemplifica alguns passos e processos para a
criação de uma pintura digital, dependendo da ferramenta utilizada em sua concepção
pode, também, ser gerada como uma imagem vetorial.
Basicamente, as ferramentas mais exploradas neste tutorial para a composição de uma

imagem vetorial em uma pintura digital são: caneta (pen tool), pincel e o desfoque
gaussiano (encontrado na janela de filtros > Desfoque, ele faz com que a imagem seja
desfocada e, assim, suas cores acabam se misturando).
A técnica apresentada aqui é uma das diversas existentes para este tipo de composição.
Cabe ao artista decidir com qual técnica ele sente mais aptidão em trabalhar.
O tutorial abaixo foi desenvolvido pelo próprio autor deste curso, com a finalidade de
estudos de pintura digital, sem intenções para fins lucrativos.
101
Trata-se de uma reprodução da personagem Elsa, de filme Frozen. A marca Frozen,

bem como a personagem Elsa e todos os demais da animação são marcas registradas
pertencentes a Walt Disney Pictures.
Primeiramente, crie um novo documento com uma boa resolução e, então, desenhe
com a ferramenta caneta ajustada para o preenchimento de formas, as formas padrões,
básicas do desenho.
Caso você tenha dificuldade em criar desenhos, você pode, também, abrir uma imagem
em grande resolução e, em seguida, utilizar ela como base, criando a arte por cima da
original, cobrindo-a com formas vetoriais.
Para isso, selecione a ferramenta Caneta, no modo Forma, e mantenha a cor de primeiro
plano em um tom similar ao do rosto original do personagem (use a ferramenta Conta-
Gotas pra capturar um ponto de cor).
Clique uma vez, e será criado o primeiro ponto, que dará início à composição. Mova a
caneta em outra direção, e clique outra vez; será traçada uma linha ligando os dois pontos.
Conforme você for arrastando o cursor e clicando serão criadas linhas novas. Se você
clicar outra vez sobre o primeiro ponto, o demarcador será fechado em uma forma.
Se você deseja criar linhas em ângulo precisos, sejam retas ou diagonais, ao clicar no
ponto seguinte, mantenha a tecla Shift pressionada. O ponto será criado na posição
mais próxima do cursor que estiver dentro do limite do ângulo.
Para criar linhas curvas, após clicar, e antes de soltar o botão do mouse, você deverá
arrastar o mouse. É importante observar esta dinâmica, você deve fazer o segundo
ponto e arrastar o cursor com o botão do mouse ainda pressionado. Este procedimento
criará uma linha tangente, que vai determinar a extensão de cada segmento da curva a
partir do ponto de ancoragem. Ao soltar o botão, a curva é criada. Também é possível
se controlar esta curva mantendo a tecla Shift pressionada: a tangente será limitada a
ângulos retos e diagonais.
Existe a possibilidade de você alternar entre retas e curvas. Para fazer, após a criação
do segmento de curva, é possível “cortá-lo”, para que o próximo ponto defina uma
reta. Após criar a curva, passe o mouse sobre o último ponto. Ao lado do cursor será
exibido um sinal de negativo. Neste momento, segure a tecla Alt, e clique sobre o
último ponto; a linha tangente será eliminada após o ponto. Ao lado do cursor surgirá
um sinal parecido com uma seta. Agora você pode construir uma nova reta ou curva,
independentemente da conversão da tangente anterior. Faça isso para criar a forma
base da cabeça e dos olhos.
102
Figura 164. Criação A.
Fonte: Autor
Após pintar as primeiras nuances, feitas em uma camada acima das camadas das formas,
aplique o filtro desfoque gaussiano para suavizar as marcas de pintura e começar a
gerar os primeiros efeitos tridimensionais da composição.
Selecione, então, a camada que contém a forma geométrica da cabeça e clique com
o botão direito do mouse no nome da camada correspondente à forma, selecionando
a opção Rasterize Layer. Isso possibilitará maior interação na edição desta camada.
Com a varinha mágica, clique na imagem da parte interna da camada da forma
geométrica da cabeça (nesta camada ativa) e, em seguida, clique em Control + Shift + I
para inverter a seleção (desta forma você diz ao software que estará tudo selecionada,
menos a região da cabeça, apenas a parte externa). Clique novamente na camada das
cores desfocadas, ainda com a máscara de seleção da cabeça ativa e delete as sobras do
desfoque selecionando a camada principal que dá forma ao rosto.
Figura 165. Criação B.
Fonte: Autor
103
Repita o procedimento para criar a tridimensionalidade dos olhos, utilizando diversas

camadas de pintura sobre as formas geométricas básicas.
Figura 166. Criação C.
Fonte: Autor
Na sequência, crie uma nova camada e desenhe traços mais claros e mais escuros
para compor a íris. O efeito surgirá ao se desfocar essa camada com o filtro Desfoque
Gaussiano.
Figura 167. Criação D.
Fonte: Autor
104
Para criar o nariz, pinte no rosto manchas claras nas regiões em que o nariz é mais
saliente. Na sequência, utilizando a ferramenta caneta configurada para demarcação,
desenhe o contorno do nariz sobre a mancha clara e recorte a parte de fora para na
imagem existir apenas a região clara delimitada pelo recorte deste contorno.
Figura 168. Criação E.
Fonte: Autor
Para desenhar as regiões escuras o procedimento é o mesmo, porém o contorno da

caneta e o corte são traçados para dentro, o lado oposto, para que fique apenas a sombra
sutilmente esmiuçada.
Figura 169. Criação F.
Fonte: Autor
105
Repita o procedimento do olho esquerdo para o direito, pintando em uma nova camada
sobre as formas básicas, desfocando e recortando os excessos.
Figura 170. Criação G.
Fonte: Autor
Com um pincel fino, desenhe os cílios e, com um pincel mais grosso, em uma nova cama
desenhe as cores para a sombra das pálpebras. Esta camada será desfocada.
Figura 171. Criação H.
Fonte: Autor
106
Este é o resultado parcialmente obtido destes processos.
Figura 172. Criação I.
Fonte: Autor
Da mesma forma que os cílios foram desenhados, desenhe as sobrancelhas e pinte mais
detalhes do volume do rosto.
Figura 173. Criação J.
Fonte: Autor
107
Você notará que cada vez mais a imagem se torna realista e tridimensional, embora
tenha sido gerada em um ambiente bidimensional e software de edição de bitmaps.
Figura 174. Criação L.
Fonte: Autor
Figura 174. Resultado parcial.
Fonte: Autor
108
Crie mais algumas camadas de ajustes, pintando maiores detalhes no rosto com os
pincéis e desfocando.
Figura 175. Detalhamento 1.
Fonte: Autor
Com a ferramenta caneta configurada para preenchimento de formas, desenhe as áreas

do cabelo, em cores diferentes para facilitar a visualização.
Fonte: Autor
109
Com as formas delimitadas, comece a pintar os detalhes de cada uma das partes do
cabelo, pintando sombras e luzes para se criar o volume. Com um pincel mais fino faça
os detalhes dos fios.
Fonte: Autor
O cabelo começará a ganhar um volume.
Fonte: Autor
110
Gradativamente vá melhorando o efeito dos cabelos, utilizando o pincel bem fino e

suave.
Fonte: Autor
Perceba a evolução que o desenho do cabelo ganha.
Fonte: Autor
111
Utilizando um pincel de efeito esponja, pinte diversas vezes seguindo o fluxo original do
cabelo. Vá variando as cores e as pressões para fornecer maior realismo e acabamento
à imagem.
Fonte: Autor.
Faça este processo para todas as partes do cabelo.
Fonte: Autor.
112
Com uma borracha macia, comece a deletar a sobra dos fios de cabelo, de modo que o
corte não fique brusco.
Fonte: Autor.
Faça cada detalhe com muita calma e atenção.
Fonte: Autor.
113
Abaixo das camadas dos cabelos e acima das camadas de desfoque do rosto, pinte por
baixo do cabeço a região que será referente à sombra do cabeço na testa.
Fonte: Autor.
Utilize, como das outras vezes, o filtro desfoque gaussiano para suavizar a sombra.
Fonte: Autor.
114
Desfoque as pontas dos cortes das partes dos cabelos e use a ferramenta de mistura
para puxar suavemente esta região e integrar os fios.
Fonte: Autor.
Pinte acima das camadas dos cabelos mais algumas luzes e sombras.
Fonte: Autor.
115
Utilize o desfoque gaussiano e delete os excessos para ter um resultado perfeito.
Fonte: Autor.
É muito mais nítido o efeito de volume aplicado ao cabelo com a adição das sombras e
luzes.
Fonte: Autor.
116
Com a ferramenta caneta selecionada para demarcação, desenhe os fios rebeldes soltos.
Fonte: Autor.
Utilizando um pincel bem fino e o efeito de simular pressão, mande contornar os

demarcados na paleta de Demarcadores para gerar o efeito certo.
Figur 192. Detalhamento 18.
Fonte: Autor.
117
Melhore os detalhes da boca adicionando mais pinturas para representar luzes e

sombras, fornecendo volume aos lábios e sombras aos dentes.
Fonte: Autor.
Desenhe as formas base para o corpo e a trança, cada parte de uma cor para não
confundir a visualização.
Fonte: Autor.
118
Comece a pintar camadas claras no pescoço e ombros para dar definição ao corpo.
Fonte: Autor.
Aplique o desfoque gaussiano para suavizar essas pinturas.
Fonte: Autor.
Pinte formas mais ressaltadas para definir a clavícula.
119
Fonte: Autor.
Faça mais algumas camadas para ajustes de definição da região da clavícula e pescoço.
Fonte: Autor.
Da mesma forma que foi feito com o cabelo, desenhe parte a parte a trança.
120
Fonte: Autor.
Pinte mais alguns detalhes e ajustes estratégicos e finalize a pintura do ombro e do

vestido.
Fonte: Autor.
121
Desenhe mais fios rebeldes para elevar o volume do cabelo e elevar o realismo da
imagem.
Figura 201. Detalhamento 26
Fonte: Autor.
Na paleta de demarcadores, mande traçar os fios soltos, da mesma forma que foi feita
a etapa anterior.
Fonte: Autor.
122
Pinte mancas luminosas para o fundo e novamente desfoque as camadas.
Fonte: Autor.
Pinte formas escuras nas bordas e desfoque para criar uma vinheta que destaca a
imagem central. Finalize a arte, assine e salve, mantendo sempre salva uma versão PSD
com as camadas em backup e uma versão Jpeg para uso.
Fonte: Autor.
123
Utilizando as ferramentas aqui apresentadas, tente criar uma esfera tridimensional

utilizando o Photoshop, pintando suas devidas luzes e sombras. Na sequência,
você pode ir evoluindo esta forma básica aplicada, criando personagens e
ilustrações com o simples uso da sobreposição de formar e padrões geométricos.
Atalhos do Photoshop
Comandos gerais | paletas
F1 − Abre o Adobe Help Center (Ajuda Online do Photoshop).

F5 − Mostrar ou esconder a paleta de Predefinições de Pincéis (Brushes).
F6 − Mostrar ou esconder a paleta de Cores, Amostras e Estilos.
F7 − Mostrar ou esconder a paleta de Camadas, Canais e Demarcadores (Layers).
F8 − Mostrar ou esconder a paleta do Navegador, Informações e Histograma (Info).
F9 − Mostrar ou esconder a paleta do Histórico e Ações.
Tab − Mostrar ou esconder todos os componentes da tela.
Shift+Tab − Mostrar ou esconder todos os componentes da tela (com exceção da barra
de ferramentas).
Atalhos para barra de ferramentas
Para alternar entre ferramentas que utilizam a mesma tecla de atalho, utilize Shift.
Por ex.: a tecla L seleciona a ferramenta Laço (Lasso), mas se você quiser utilizar a
ferramenta Laço Poligonal (Polygonal Lasso), tecle Shift+L.
M − Letreiro Retangular (Rectangular Marquee); Letreiro Elíptico (Elliptical

Marquee).
V − Mover (Move).
L − Laço (Lasso); Laço Poligonal (Polygonal Lasso); Laço Magnético (Magnetic
Lasso).
W − Varinha Mágica (Magic Wand).
C − Corte Demarcado (Crop).
K − Fatia (Slice); Seleção de Fatia (Slice Select) .
J − Pincel Para Recuperação de Manchas (Spot Healing Brush); Pincel de
Recuperação (Healing Brush); Correção (Patch); Olhos Vermelhos (Red Eye).
124
B − Pincel (Brush); Lápis (Pencil); Substituição de Cor (Color Replacement).

S − Carimbo (Clone Stamp); Carimbo de Padrão (Pattern Stamp).
Y − Pincel do Histórico (History Brush); História da Arte (Art History Brush).
E − Borracha (Eraser); Borracha de Plano de Fundo (Background Eraser); Borracha
Mágica (Magic Eraser).
G − Degradê (Gradient); Lata de Tinta (Paint Bucket).
R − Desfoque (Blur); Nitidez (Sharpen); Borrar (Smudge).
O − Subexposição (Dodge); Superexposição (Burn); Esponja (Sponge).
A − Seleção de Demarcador (Path Selection); Seleção Direta (Direct Selection).
T − Texto Horizontal (Horizontal Type); Texto Vertical (Vertical Type); Máscara de
Texto Horizontal (Horizontal Type Mask); Máscara de Texto Vertical (Vertical Type
Mask).
P − Opções da Ferramenta Caneta (Pen); Caneta de Forma Livre (Freeform Pen).
U − Retângulo (Rectangle); Retângulo Arredondado (Rounded Rectangle); Elipse
(Ellipse); Polígono (Polygon); Linha (Line); Forma Personalizada (Custom Shape).
N − Observações (Notes); Comentário de Áudio (Audio Annotation) .
I − Conta-gotas (Eyedropper); Classificador de Cores (Color Sampler); Medir
(Measure).
H − Mão (Hand).
Z − Zoom .
D − Cores de Primeiro Plano e Plano de Fundo Padrão (Reset Foreground and
Background To Black and White).
Para os seguintes atalhos, não é necessário teclar o Shift para alternar entre as funções,
basta pressionar a tecla de atalho novamente.
X − Alternar Cores de Primeiro Plano e Plano de Fundo (Change Foregroud to

Background).
Q − Alternar entre Editar no Modo Padrão (Pattern Mode); Editar no Modo Máscara
Rápida (Quickmode) .
F − Alternar para o Modo de Tela Padrão (Pattern Screen); Modo de Tela Cheia com
Barra de Menus (Fullscreen w/ Menu Bars); Modo de Tela Cheia (Fullscreen).
Daqui para frente estão os atalhos para comandos do menu, navegação, edição, seleção,
texto, camadas, e os mais importantes do Photoshop.
125
Atalhos para ARQUIVO (File Menu)
Novo… (New) − Ctrl+N

Abrir… (Open) − Ctrl+O
Procurar… (File Browser) − Ctrl+Alt+O
Abrir Como… (Open As) − Ctrl+Alt+Shift+O
Editar no Image Ready (Jump to Image Ready) − Ctrl+Shift+M
Fechar (Close) − Ctrl+W
Fechar Todas (Close All) − Ctrl+Alt+W
Fechar e Ir para o Bridge… (Close and Jump to Bridge) − Ctrl+Shift+W
Salvar (Save) − Ctrl+S
Salvar Como (Save As) − Ctrl+Shift+S
Salvar para Web (Save to Web) − Ctrl+Alt+Shift+S
Reverter (Revert) − F12
Info Sobre Arquivo (File Info) − Ctrl+Alt+Shift+I
Configurar Página (Page Setup) − Ctrl+Shift+P
Imprimir com Visualização (Preview Print) − Ctrl+Alt+P
Imprimir (Print) − Ctrl+P
Imprimir uma Cópia (Print Copy) − Ctrl+Alt+Shift+P
Sair (Exit) − Ctrl+Q
Atalhos para EDITAR (Edit Menu)
Desfazer (Undo) − Ctrl+Z

Avançar uma Etapa (Step Backward) − Ctrl+Shift+Z
Retroceder uma Etapa (Step Forward) − Ctrl+Alt+Z
Atenuar…(Fade) -− Ctrl+Shift+F
Recortar (Cut) − Ctrl+X ou F2
Copiar (Copy) − Ctrl+C ou F3
Copiar Mesclado (Copy Merged) − Ctrl+Shift+C
Colar (Paste) − Ctrl+V ou F4
Colar em (Paste Into) − Ctrl+Shift+V
Transformação Livre (Free Transform) − Ctrl+T
Transformar Novamente (Tranform Again) − Ctrl+Shift+T
Configuração de Cores (Color Settings) − Ctrl+Shift+K
Atalhos de Teclado (Keyboard Shortcuts) − Ctrl+Alt+Shift+K
126
Mudar Preferências (General Preferences) − Ctrl+K

Atalhos para Imagem (Image Menu)
Níveis (Levels) − Ctrl+L
Níveis Automáticos (Auto Levels) − Ctrl+Shift+L
Contraste Automático (Auto Contrast) − Ctrl+Alt+Shift+L
Cor Automática (Auto Color) − Ctrl+Shift+B
Curvas… (Curves) − Ctrl+M
Equilíbrio de Cores… (Color Balance) − Ctrl+B
Matiz/Saturação (Hue/Saturation) − Ctrl+U
Remover Saturação (Desaturation) − Ctrl+Shift+U
Inverter (Invert) − Ctrl+I
Tamanho da Imagem (Image Size) − Ctrl+Alt+Y
Atalhos para CAMADAS (Layers Menu)
Nova Camada (New Layer) − Ctrl+Shift+N

Nova Camada por Cópia (Layer via Copy) − Crtl+J
Nova Camada por Corte (Layer via Cut) − Ctrl+Shift+J
Criar/Soltar Máscara de Corte (Create/Release Clipping Mask) − Ctrl+Alt+G
Agrupar Camadas (Group with Previous) − Ctrl+G
Desagrupar Camadas (Ungroup) − Ctrl+Shift+G
Trazer para o Primeiro Plano (Bring to Front) − Ctrl+Shift+]
Trazer para Frente (Bring Forward) − Ctrl+]
Enviar para Trás (Send Backward) − Ctrl+[
Enviar para o Plano de Fundo (Send to Back) − Ctrl+Shift+[
Mesclar Camadas (Merge Down) − Ctrl+E
Mesclar Camadas Visíveis (Merge Visible) − Ctrl+Shift+E
Atalhos para SELECIONAR (Select Menu)
Selecionar Tudo (Select All) − Ctrl+A

Cancelar Seleção (Deselect) − Ctrl+D
Selecionar Novamente (Reselect) − Ctrl+Shift+D
Inverter Seleção (Inverse Selection) − Ctrl+Shift+I ou Shift+F7
Selecionar Todas as Camadas (All Layers) − Ctrl+Alt+A
Difusão… (Feather) − Ctrl+Alt+D ou Shift+F6
127
Figura 205. Teclas de Atalho.
Fonte: Oficina da Net
Modelagem 3D
3D Studio Maya
O 3D Maya é um excelente software para modelagens tridimensionais, utilizado por

grandes estúdios como a DreamWorks e a Pixar. Ele pode ser baixado no site da
empresa que o desenvolveu, a AutoDesk, utilizando sua licença estudantil.
Neste capítulo aprenderemos a criar um cenário e, desta forma, teremos uma visão
clara sobre o funcionamento das ferramentas tridimensionais.
Todos os passos e processos são apresentados em forma de tópicos para facilitar a

confecção, em um tutorial dos passos a serem concebidos no desenvolvimento de suas
primeiras criações tridimensionais.
Figura 206. 3D Maya.
Fonte: Autor.
128
Criar Solo
Create → Polygon Primitives → Plane
Display → Ul Elements → Channel Box / Layer Editor
Inputs => 200 Width / 200 Height
Criando Abóboda
Create → NURBS Primitives → Desativar interactive Creation
Create → Nurbs Primitives → Sphere
X, Y, Z Channel Box = 100.
makeNurbSphere1 → End Sweep = 180/ Selections = 4
Rotate X = -90o graus
Menu Shading → Smooth Shade All
Show → Grid
Selecionar abóboda → Window → Attribute Editor
Expandir Render Stats
Desabilitar Double-Sided (visualizar lado de trás da imagem)
Ativar Opposite (visualizar de dentro para fora)
Selecionar abóboda → Window → Attribute Editor
Expandir Object Display
Drawing Overrides → ativar Enable Overrides
Definir Display Type como Referência (para não ser selecionada)
Criar Construção
Create → Polygon Primitives → Cube → Quadrado
Definir Normalize para Off
Create
129
Scale para aumentar o tamanho e volume.
Criar Telhado
Create → Polygonal Primitives → Cylinder
Move (w), subir eixo Y 17 unidades.
Inputs do ChannelBox → Subdivisions Axis = 3 | Subdivisions Caps = 0 | Routate Z =

90o graus.
Scale
Duplicar
Edit → Duplicate (Ctrl+D)
Agrupar
Selecionar construção e toldo → Edit → Group → o
Definir Group Pivot para center → Group
Criar Poste
Create → Polygonal Primitives → Cylinder
Scale Y → 6 unidades
Ocultar
Display → Hide → Hide Selection
Display → Show → All ou Show Last Hidden
Mover poste para cima até a base ficar no chão.
Configurar: Radius = 0.2 | Subdivisions Axis = 20 | Subdivisions Height = 5 | Subdivisions

Caps = 0
Centralizar
Teclar F para centralizar.
130
Moldar Poste
Menu Superior, botão modo componente.
Arrastar arestas e moldar poste. Shift + clique, selecionar várias.
Figura 207. Moldar Poste.
Fonte: Autodesk
Botão modo objeto para sair do modo componente.
Se ao clicar aparecer uma malha colorida para modelar, clique duas vezes na
ferramenta de seleção, da esquerda, barra de ferramentas e, abrindo o painel
lateral, em Soft Selection desabilitar Viewport Color.
Moldar Luz Ornamental
Create → Polygon Primitives → Prism
Channel Box configurar: Lenght = 2 | Side Lenght = 0.5 | Number of Sides = 8 |

Subdivisions Height = 3 | Subdivisions Caps = 1
Modo Componente → moldar Luz
131
Figura 208. Moldar Luz Ornamental - A.
Fonte: Autodesk
Selecionar Luz + Poste → Ctrl G para agrupar
Ctrl + D para duplicar.
Figura 209. Moldar Luz Ornamental - B.
Fonte: Autor.
132
Figura 210. Moldar Luz Ornamental - C.
Fonte: Autor.
Figura 211. Moldar Luz Ornamental - D.
Fonte: Autor.
Cabo Elétrico
Create → Nurbs Primitives → Cylinder
Channel Box → Marcar makeNurbsCylinder1
Definir Sections = 4 | Spans = 4
Rotate X = 90, Z = 90
Scale X = 0.05, Y= 10, Z = 0.05
Modo Componente = F8
133
Modo Wireframe = 4
Para moldar, em Modo Componente clicar e arrastar para selecionar alguns grupos de
CVS e usar MOVE para mover no eixo y.
Suavizar Cabo
Selecionar cabo → Display principal → Hull, Rought, Medium, Fine, Custom NURBS
Smoothness.
Ou clicar no cabo, com modo componente ativado e digitar 1, 2 ou 3, sendo 3 o mais

suave.
Toldo
Create → Nurbs Primitives → Plane
Mover Eixo Y = 10
Ampliar todos os eixos seis unidades
Channel Box → Input makeNurbsPlane → Patches U e V para 2
BDM no toldo para chamar menu de contexto radial → Hull
Hulls definem curvas de superfícies NURBS
Selecione revestimento externo (hull) clicando na linha roxa do toldo.
Mover revestimentos
Para sair do modo componente, BDM no toldo → Hull
Posicionar o Toldo na Construção.
Inserir Loops de Arestas
Clicar na Construção e Digitar F3 para inserir o conjunto de Menu Polygon.
Edit Mesh → Insert Edge Loop Tool.
Clicar e arrastar na horizontal para inserir vertical e na vertical para inserir horizontal.
Fazer a moldura da porta para que fique ligeiramente abaixo do solo.
134
Exibir Faces
Selecionar ferramenta de seleção, “q”, BDM na construção e FACE, ou F11.
Passar mouse sobre faces para selecionar, ficar verde, e clicar.
Extrudar Polígono
Edit Mesh → Extrude
Seta → Move
Círculo externo → Rotação
Cubo → Redimensionamento
Clique e arraste a SETA no eixo Z para criar uma pequena borda para a porta.
Edit Mesh → Extrude novamente.
Clique e arraste o eixo do CUBO do eixo X e Y para dimensionar a face para dentro.
Extrude novamente e arraste a SETA do eixo Z do manipulador ao interior para criar a

parte interior da borda da porta.
Selecionar a face da porta e deletar, clicar delete.
Criar Porta
Polygon Primitives → Cube
Dimensionar e mover para a abertura da porta.
Clicar em F para centralizar.
Edit Mesh → Insert Edge Loop Tool. Adicionar janela.
Apertar “q” para sair do Insert Loop e chamar a ferramenta Select.
Extrudar Janela
Selecionar porta e apertar F11 para chamar face.
Wireframe, 4, selecionar face para a janela.
Modo Sombreado, 5, Edit Mesh → Extrude
135
Clique e arraste manipulador de seta azul para transladar ligeiramente a face para fora
e criar suave borda.
Extrude novamente.
BEM no quadrado do manipulador para habilitar função de dimensionamento.
BEM+arraste quadrado central para reduzir as faces projetadas para fora.
BEM na seta para transladar.
Edit Mesh → Extrude.
Translade faces no eixo Z para se interpenetrarem ligeiramente.
Excluir faces para criar abertura da janela.
F8 para modo objeto.
Salvar.
Figura 212. Estrutura realizada.
Fonte: Autor.
Barril de Petróleo
Desenhar curva de perfil.
Tecla de espaço para painel de quatro visualizações. Cursor do mouse sobre visor frontal
e tecla de espaço novamente.
Modo de visualizações selecione Show → None e, então, Show → NURBS Curves.
Isso limpará a janela de visão para você se concentrar nas curvas.
Create → EP Curve Tool → quadradinho.
136
Opções de configuração definir Curve Degree para 1 linear para a curva fazer interpolação
linear para cada ponto.
Close
Figura 213. Desenhar curva em formato L e apertar Enter para desenhar.
Fonte: Autodesk.
O CV do centro inferior do barril deve encaixar no eixo Y mais grosso, para impedir a
formação de buraco no fundo do barril.
Figura 214. Modo de Componente com a máscara NURBS Edit Points.
Fonte: Autodesk.
Selecionar o ponto de edição localizado no centro inferior da curva de perfil.
Selecione Ferramenta MOVE
Segure tecla rápida X para encaixar na grade e clique e arraste o centro do manipulador
na linha de grade mais grossa do eixo Y.
Solte tecla rápida X e translade o ponto de edição em seu eixo X para que a linha inferior
fique na horizontal.
Refine forma da curva.
137
Aperte F8 para ir ao Modo Objeto.
Volte para visualização de perspectiva.
F4 para selecionar o subconjunto de menus Surface.
Com a curva de perfil selecionada, selecione Surfaces → Revolve.
Encaixar barril no beco.
Fazer ajustes finos.
Criar lâmpada
Crie esfera poligonal e coloque no topo do poste de luz para usar como lâmpada.
Selecione lâmpada e então Shift − selecione o poste.
Edit → Parent ou “p”.

Parentar é como agrupar, mas estabelecendo relação hierárquica entre os elementos.
Você movendo o poste move a lâmpada junto, mas a lâmpada pode ser movida sozinha.
Sombreamento
Figura 215. Criando lâmpada.
Fonte: Autor.
Apertar e segurar barra de espaço → clicar acima dos menus → Hypershade \ Persp
Para visualizar a textura, clicar na bolinha quadriculada do menu superior, ou tecla

rápida 5.
Create → Create Maya Nodes → Phong (sombreador que oferece controle sobre brilho
e incandescência).
Attribute Editor → Color
138
Abre o Color Chooser, janela na qual se edita o HSV (hue − tom, saturation – saturação,
value – valor).
Escolher amarelo vibrante e Accept.
Editar incandescência do material
No Attribute Editor clique na mostra de cor próxima ao atributo incandescence. Escolha

o amarelo escuro e clique em Accept.
Atribuir material, clicar com o botão do meio do mouse no nó material e arrastar na

janela perspectiva até o objeto.
Criar Mapa de Textura Procedual
Limpar área de trabalho do Hypershade selecionando Graph, Clear Graph.
Create → Lambert (sombreador que oferece controle sobre aparências de materiais

lisos e pontos luminosos brilhantes).
No Attribute Editor, altere o nome do nó material para toldoM.
Na seção da barra Create do Hypershade mode, rlar para baixo até 2D Texture, para
criar novas texturas.
Clique do meio e arraste qualquer fractal da barra Create para a área de trabalho,
qualquer lugar.
Na área de trabalho do Hypershade, clique com o botão do meio no ícone Fractar e o

arraste para o nó de Material toldoM.
Selecione Color para remapear o fractal em sua cor.
Clique em Rearrange Graph (quadradinhos amarelos) no topo do painel Hypergraph.
Selecione os toldos na cena e clique com botão direito no material toldoM e selecione
Assign Material to Selection.
Para habilitar texturização de hardware, clique com o botão do meio do mouse na

janela de perspectiva para tornar ativa, abra o Hotbox (espaço) e selecione Shading →
Hardware Texturing ou tecla rápida 6.
No Hypershade, selecione o nó fractal.
139
No Attribute Editor (“Control a” se estiver oculto), vá em Color Balance.
Clicar na mostra de cor próxima ao atributo Color Gain.
Escolher cor desejada, como marrom, e clicar em Accept.
Clicar na cor Color Offset.
Escolher cinza e clicar em Accept.
Na seção Fractar Attributes, ajustar os atributos, por exemplo:
Amplitude para 0.8
Threshold para 0.3
Ratio para 0.6
No topo do Attribute Editor, selecione a aba place2dTexture para ver diferentes

aplicações de textura fractal.
Altere os atributos de aplicação fractal para:
Repeat U para 0.1
Repeat V para 0.1
Mapas de Textura | Rua
Área de trabalho do HyperShade, BDM, clique, Grapf → quadradinho → clear graph.
Role para seção Surface na barra Create e crie um Lambert.
Dê um duplo clique no material para ver o Attribute Editor, se estiver oculto.
Clique no botão Map (quadrado quadriculado) próximo à Color.
Clique na aba Textures, na seção 2Dtextures clique em File, arquivo de nó será

adicionado.
Para o nó File (quadrado preto), no Attribute Editor clique em File folder, próximo ao
nome da imagem.
Selecionar arquivo bricks.tif e Open.
Aplicar o material ao plano, solo.
140
No hypershade, selecione o nó place2dTexture conectado ao arquivo (quadrados

coloridos). Defina Repeat U e V para 10. Se os tijolos ainda estiverem grandes, tente 30
ou 50.
Definir Rotate Frame para 90.
Textura do Céu
Crie material Surface Shader (não usam nenhuma informação de iluminação, apenas
emitem cor e textura atribuídos a ele, bom para céu noturno).
Attribute Editor, clicar no botão Map para o atributo OutColor.
Crie nó de textura de arquivo e atribua a imagem star.tif a ele.
Objeto abóboda céu é referência, então pode ser selecionado tanto com Window →
Outliner, ou digitando select aboboda Ceu no Command Line, na parte inferior da
interface.
Com a abóboda seleciona, atribua o material a ela.
Selecione o nó place2dTexture conectado ao nó de textura de arquivo e defina Repeat

U e V para 5.0
Textura da Lua
Utilizaremos canal Alpha, que contém os canais de cores regulares mais um canal alpha
para transparência. Assim se pode cortar a forma sem prejudicar a geometria.
Crie plano NURBS
Redimensione e o mova no céu à parte extrema direita do beco.
Crie sombreador Lambert com textura de arquivo mapeada.
Attribute Editor e clique em Browse.
Selecionar moon.tif e Open.
Automaticamente o Maya identificará o Canal Alpha e o atribuirá ao material a

transparência.
Atribuir à lua.
141
Figura 216. Criação da imagem - A.
Fonte: Autor.
Figura 217. Criação da imagem - B.
Fonte: Autor.
Atalhos
F8 → Alterna entre modo objeto e último modo de componente | Modo Objeto.
F9 → Exibe pontos, vértices
F10 → Exibe Arestas
F 11 → Exibe Faces
F12 → Exibe UVs
Espaço segurar → HotBox
Espaço teclar → visualizações
Alt atalho para mover
142
Shift+Clique → Selecionar mais de um1, 2, 3 → Modo de 3D grade ou suavizado5 →
modo Sombreado
6 → Texturização de Hardware
Display → Ul → Channel Box
Window → Attribute Editors
BDM → Line
Alt H → ocultar objetos não selecionados
Loops → Selecionar Objetos → F3
Edit Mesh → Insert Edge Loop Tool
Edit Mesh → Extrude
Combinar → Mesh → Combine
F → Enquadra Seleção
a → enquadra tudo
Shift+a → enquadra tudo em todas as visualizações
Q → pick
W → move
E → rotate
R → scale
T → manipulator
Y → última ferramenta
G → Repete último Comando
Hypershade mode
Apertar e segurar barra de espaço → clicar acima dos menus → Hypershade \ Persp
Para visualizar a textura, clicar na bolinha quadriculada do menu superior.
143
Create → Create Maya Nodes → Lambert (para luz é Phong)
Área de Trabalho, BDM + clique → Graph quadradinho → Clear Graph
Duplo Clique no Lambert para exibir Attribute Editor
Map → Color → quadradinho quadriculado → Texture → 2D Texture → File → File

Attribute → File Name → Pasta → Selecionar imagem do computador
BDM no material → Assign Material to Selection
Figura 218. Resultado da criação.
Fonte: Autor.
Utilizando o software de sua preferência, crie uma casa simples com telhado e
abertura para a porta e as janelas.
144
CAPÍTULO 2
Animações Gráficas
A seguir veremos informações sobre animações gráficas, compreendendo em uma

maior profundidade seus principais aspectos e sua construção. Levaremos como base
de aprendizagem tática o software Adobe Flash. As informações abaixo são adaptadas
das informações oficiais oferecidas pela desenvolvedora do software, a Adobe, para
facilitar o acesso e uso ao software de animação vetorial proprietário.
Figura 219. Adobe Flash.
Fonte: Adobe Flash.
Tipos de animação
Conheceremos nesta unidade os principais tipos de animação existentes e como podemos
fruir de suas características para a confecção de inovadoras estratégias criativas.
Interpolações de movimento
São utilizadas para definir propriedades de um objeto, como posição e transparência

alfa em um quadro e novamente em outro quadro. Na sequência, o Flash interpola
os valores de propriedade entre os quadros. A interpolação de movimento significa
movimento ou transformação contínua de um objeto, procedimento este extremamente
utilizado em técnicas de animação. As interpolações de movimento são exibidas na
Linha do tempo como uma extensão contínua de quadros que, por padrão, podem ser
selecionados como um único objeto.
Interpolações clássicas
Assemelham-se às interpolações de movimento, porém exigem maior complexidade em

sua criação. O diferencial deste tipo de animação é que permite alguns efeitos animados
específicos que não são possíveis em interpolações com base em extensão.
145
Poses de cinemática inversa
O grande diferencial desta ferramenta é que ela permite alongar e curvar objetos Shape
e vincular grupos de ocorrências de símbolos para fazer com que se movam juntos de
forma natural. Depois de adicionar bones (parte de uma estrutura da imagem animada
que norteia o fluxo da animação) a uma forma ou a um grupo de símbolos, é possível
alterar a posição dos bones ou dos símbolos em diferentes quadros-chave. O Flash
interpola as posições nos quadros intermediários.
Interpolações de formas
Neste tipo de animação você desenha uma forma em um quadro específico na Linha do
tempo e altera essa forma ou desenha outra forma em outro quadro específico. O Flash
Pro então interpola as formas intermediárias para os quadros intermediários, criando
a animação de uma forma se transformando em outra, progressivamente.
Animação quadro a quadro
Esta técnica permite especificar artes diferentes para cada quadro na Linha do tempo. É
utilizada para animações complexas em que os elementos gráficos de cada quadro devem
ser diferentes e o controle dessas qualidades deve ser mais específico e personalizado. É
similar com o que ocorre em um filme, onde os frames (as cenas) são passadas quadro
a quadro em uma grande velocidade, dando a sensação, ilusão óptica do movimento.
Sobre as taxas de quadro
Representa a velocidade com que uma animação é reproduzida, é medida pelo número
de quadros por segundo (fps). Uma taxa de quadros muito lenta dá a impressão de que
a animação está parando e começando novamente; uma taxa muito rápida borra os
detalhes da animação. A taxa de quadros de 24 q/s é o padrão de novos documentos
Flash e normalmente oferece os melhores resultados na Web. Esta também é a taxa
padrão de um filme de cinema também é de 24 q/s, embora hoje as produtoras já
estejam investindo nos filmes de 48 q/s.
Vale a ressalva de que a complexidade da animação e a velocidade do computador que

reproduz a animação afetam esta suavidade de reprodução, portanto, para determinar
as taxas de quadro ideais, teste suas animações em vários computadores e, assim, terá
maior fidelidade ao resultado final.
146
Como apenas uma taxa de quadros é especificada para todo o documento do Flash Pro,
ajuste essa taxa antes de começar a criar a animação.
Identificação de animações na Linha de tempo
O software Flash Pro, consegue diferenciar a animação interpolada da animação quadro

a quadro na Linha de tempo, e exibe indicadores diferentes em cada quadro que contém
conteúdo.
Os seguintes indicadores de conteúdo do quadro aparecem na Linha de tempo:
»» Uma extensão de quadros com um plano de fundo azul indica uma

interpolação de movimento. Um ponto preto no primeiro quadro da
extensão indica que a extensão interpolada tem um objeto de destino
atribuído a ele. Losangos pretos indicam o último quadro e todos os
outros quadros-chave de propriedade. Os quadros-chave de propriedade
são quadros que contêm alterações de propriedade que você definiu de
maneira explícita. Você pode selecionar que tipos de quadros-chave
de propriedade devem ser exibidos, clicando com o botão direito do
mouse (Windows) ou com o botão Command (Macintosh) na extensão
da interpolação de movimento e selecionando Exibir quadros-chave >
tipo no menu de contexto. Por padrão, o Flash exibe todos os tipos de
quadros-chave de propriedade. Todos os outros quadros na extensão
contêm valores interpolados para as propriedades de interpolação do
objeto de destino.
»»
»» Um ponto vazio no primeiro quadro indica que o objeto de destino da

interpolação de movimento foi removido. A extensão interpolada ainda
contém seus quadros-chave de propriedade e pode ter um novo objeto de
destino aplicado a ela.
»»
»» Uma extensão de quadros com plano de fundo verde indica uma camada
de pose de cinemática inversa (IK). As camadas de pose contêm armaduras
IK e poses. Cada pose é exibida na Linha do tempo como um losango
preto. O Flash interpola as posições da armadura nos quadros entre as
poses.
»»
147
»» Um ponto preto no quadro-chave inicial com uma seta preta e plano de

fundo azul indica uma interpolação clássica.
»»
»» Uma linha tracejada indica que a interpolação clássica está quebrada ou

incompleta, por exemplo, quando falta um quadro-chave no final.
»»
»» Um ponto preto no quadro-chave inicial com uma seta preta e plano de

fundo verde claro indica uma interpolação de forma.
»»
»» Um ponto preto indica um único quadro-chave. Os quadros em cinza-

claro depois de um quadro-chave único contêm o mesmo conteúdo sem
alterações. Esses quadros têm uma linha preta vertical e um retângulo
vazio no último quadro da extensão.
»»
»» Um pequeno a indica que é atribuído ao quadro o painel Ações.
»»
»» Um sinalizador vermelho indica que o quadro contém um rótulo.
»»
»» Uma barra dupla verde indica que o quadro contém um comentário.
»»
»» Uma âncora dourada indica que o quadro é uma âncora com nome.
»»
Noções de camadas na animação

Cada cena em um documento do Flash Pro pode consistir em um número qualquer
de camadas na Linha do tempo. É necessário, para o sistema organizacional o uso de
camadas e pastas de camada para organizar o conteúdo de uma sequência de animação
e separar objetos animados. Este procedimento evita que sejam apagados, conectados
148
ou segmentados uns aos outros quando sobrepostos. Para criar uma animação que
inclua o movimento interpolado de mais de um símbolo ou campo de texto no mesmo
tempo, coloque cada objeto em uma camada separada. Você pode usar uma camada
como camada de plano de fundo para a arte estática e usar camadas extras para um
objeto animado separado.
Ao criar uma interpolação de movimento, o Flash Pro converte a camada que contém
o objeto selecionado para interpolar em uma camada de interpolação. A camada de
interpolação possui um ícone de interpolação perto do nome da camada na Linha do
tempo.
Caso existam outros objetos na mesma camada que o objeto interpolado, o Flash Pro
acrescenta novas camadas acima ou abaixo da camada original conforme necessário.
Os objetos que existirem abaixo do objeto interpolado em sua camada original. Se
movem para uma nova camada abaixo da camada original. Os objetos que estavam
abaixo do objeto interpolado em sua camada original são movidos para uma nova
camada acima da camada original. O Flash Pro insere essas novas camadas entre as
camadas preexistentes na Linha do tempo. Dessa forma, o Flash Pro preserva a ordem
de empilhamento original de todos os objetos gráficos no Palco.
Uma camada de interpolação só pode conter extensões de interpolação (grupos contíguos

de quadros contendo uma interpolação), quadros estáticos, quadros-chave em branco
ou quadros vazios. Cada extensão de interpolação contém apenas um objeto de destino
único e um caminho opcional de movimento para o objeto destino. Como você não
pode desenhar em uma camada de interpolação poderá criar interpolações adicionais
ou estáticas em outras camadas e depois arrasta-las para a camada de interpolação.
Para colocar scripts de quadros em uma camada de interpolação, crie os scripts em
outra camada e arraste-os para a camada de interpolação. O script de quadro só pode
residir em um quadro fora da própria extensão de interpolação de movimento. Em
geral, é melhor manter todos os scripts de quadro em uma camada separada contendo
apenas o ActionScript.
Quando um documento contiver várias camadas, o controle e a edição dos objetos

em uma ou mais camadas podem ser tarefas difíceis. Este processo se apresenta mais
simples se você trabalhar com o conteúdo de uma camada por vez. Para ocultar ou
bloquear as camadas nas quais você não esteja trabalhando no momento, clique no
ícone Olho ou Bloqueio próximo ao nome da camada na Linha do tempo. O uso das
pastas de camada o ajuda a organizar as camadas em grupos gerenciáveis.
149
Distribuição de objetos em camadas para

animação interpolada
O Flash Pro move automaticamente o objeto para a respectiva camada de interpolação,
quando aplicada uma interpolação de movimento ao objeto. Você também pode
distribuir objetos nas respectivas camadas distintas. Por exemplo, você mesmo pode
optar por distribuir objetos quando estiver organizando o conteúdo. A distribuição
manual também é útil para aplicar animação aos objetos, mantendo, ao mesmo tempo,
o controle preciso sobre a forma como eles são transferidos de uma camada para outra.
Ao utilizar o comando Distribuir em camadas (Modificar > Linha do tempo > Distribuir
em camadas), o Flash Pro distribui cada objeto selecionado em uma camada nova e
separada. Todos os objetos que você não seleciona (incluindo objetos em outros
quadros) são preservados em suas camadas originais.
Você pode aplicar o comando Distribuir em camadas a qualquer elemento no Palco,

incluindo objetos gráficos, ocorrências, bitmaps, clipes de vídeo e blocos de texto
separados.
Sobre as novas camadas criadas com

Distribuir em camadas
As novas camadas criadas durante a operação Distribuir em camadas são nomeadas de
acordo com o nome do elemento que cada uma contém:
»» Uma nova camada contendo um ativo de biblioteca (como símbolo,

bitmap ou clipe de vídeo) recebe o mesmo nome que o ativo.
»» Uma nova camada contendo uma ocorrência com nome recebe o nome
da ocorrência.
»» Uma nova camada contendo um caractere de um bloco de texto separado

recebe o nome do caractere.
»» A camada nova que contém um objeto gráfico (que não tem nome) se
chama Camada 1 (ou Camada 2 e assim por diante), pois os objetos
gráficos não têm nomes.
»» O Flash Pro insere as novas camadas abaixo das camadas selecionadas.

As novas camadas são organizadas de cima para baixo, na ordem em que
os elementos selecionados foram originalmente criados. As camadas
150
no texto separadas são organizadas na ordem dos caracteres, seja para

esquerda para a direita, da direita para a esquerda, ou de cima para
baixo. Por exemplo, suponhamos que você separe o texto VETOR e o
distribua em camadas. As novas camadas, denominadas V, E, T, O e R,
são organizadas de cima para baixo com a letra V na parte superior. Essas
camadas são exibidas logo abaixo da camada que continha inicialmente
o texto.
Distribuir objetos em camadas

1. Para executar esta etapa, selecione os objetos que você deseja distribuir
em camadas separadas. Os objetos podem estar em uma camada única,
ou em várias camadas, incluindo camadas não contíguas.
2. Siga um destes procedimentos:
›› Selecione Modificar > Linha do tempo > Distribuir em camadas.
›› Clique com o botão direito (Windows) ou mantenha pressionada a

tecla Control enquanto clica (Macintosh) nos objetos selecionados e
escolha Distribuir em camadas.
Criação de animações interpoladas

distribuindo objetos em quadros-chave
O Flash Pro permite que você distribua automaticamente objetos para cada quadro-
chave separado. A escolha da distribuição dos objetos é possível ao organizar o conteúdo
no palco. O processo se apresenta de forma mais lenta ao ser feito de forma manual. A
grande utilidade desta distribuição é a possibilidade de criar animações interpoladas,
colocando objetos em quadros-chave individuais. Você pode atribuir objetos diferentes
ou estados de objetos a quadros-chave individuais.
Ao usar o comando Distribuir em quadros-chave, o Flash Pro distribui cada objeto

selecionado para um novo quadro-chave separado. Todos os objetos que você não
seleciona (incluindo objetos em outros quadros) são preservados em suas camadas
originais.
Você pode aplicar o comando Distribuir em quadros-chave a qualquer elemento no

Palco, incluindo objetos gráficos, instâncias, bitmaps, clipes de vídeo e blocos de texto.
151
Sobre novos quadros-chave criados com Distribuir em quadros-chave
»» Os novos quadros-chave criados durante a operação Distribuir em

quadros-chave são organizados de acordo com a sequência em que os
objetos que foram selecionados.
»» Se qualquer objeto na camada ficar desmarcado ao realizar a operação

Distribuir em quadros-chave, os quadros originais não serão afetados por
esses objetos. Os objetos selecionados para distribuição são atribuídos
a quadros-chave, iniciando o próximo quadro imediatamente após o
último quadro do conteúdo original. Por exemplo, Objeto1 e Objeto2
estão em uma camada que possui 50 quadros. Se Objeto1 for escolhido
para distribuição, ele será colocado no 51o quadro-chave.
Distribuir objetos em quadros-chave

1. Para realizar o processo de distribuição, selecione os objetos que você
deseja distribuir em camadas separadas. Os objetos podem estar em uma
camada única, ou em várias camadas, incluindo camadas não contíguas.
2. Clique com o botão direito (Windows) ou mantenha pressionada a tecla

Control enquanto clica (Macintosh) nos objetos selecionados e escolha
Distribuir em quadros-chave.
Com o ActionScript®, você pode controlar a Linha do tempo no tempo de execução. O

uso do ActionScript permite criar interação e outros recursos nos arquivos FLA que não
são possíveis apenas com a Linha do tempo. Veremos exemplos a seguir.
Action Script
Adobe Actionscript é uma linguagem de programação da plataforma Adobe Flash

orientada a objetos. Destaca-se por ser muito robusta e inteligente, visto que os
operadores, dispositivos, objetos, funções e eventos dão o real poder da “programação
Flash”. Originalmente desenvolvida como um meio para os desenvolvedores
programarem dinamicamente, melhorando a eficiência do desenvolvimento de
aplicações na plataforma Flash, desde uma imagem simples a uma complexa animação.
Sua execução se dá por meio de uma máquina virtual (AVM − “ActionScript Virtual
Machine”).
152
Com o auxílio do ActionScript é possível construir scripts eficientes por meio de

componentes de códigos, redefinindo e/ou acrescentando funcionalidades ao ActionScript.
O padrão que o ActionScript segue é o mesmo do JavaScript (ECMA 262), o que justifica
a similaridade entre essas linguagens. O ECMAScript é muito utilizado em construções
de aplicações RIA (Rich Internet Applications, ou Aplicações Ricas de Internet.
A seguir, veremos algumas funcionalidades desta linguagem, seus principais termos.
gotoAndPlay
Utilizado da maneira correta da seguinte forma: gotoAndPlay (cena, frame); Neste

caso, cena é o nome da cena para onde a reprodução será enviada, e frame é o número
do frame para qual o filme será enviado.
Esse script é responsável pelo envio da reprodução ao quadro determinado, reproduzindo

a partir deste.
Exemplo:
on (release) {
gotoAndPlay (“index”, 21);
Ao clicar em um botão que possua esta action atribuída, a animação será reproduzida
na cena index a partir do frame 21.
gotoAndStop
Utilizado da maneira correta da seguinte forma: gotoAndStop (cena, frame); Aqui, cena
é o nome da cena para onde a reprodução será enviada, e frame é o número do quadro
para qual o filme será enviado.
Este script envia a reprodução para o quadro determinado e a interrompe. Caso não
seja determinada uma cena, a reprodução segue para o quadro especificado na cena
atual.
Exemplo:
on (release) {
gotoAndStop (12);
153
Quando o usuário clicar no botão que contém essa action o filme irá para o quadro 12 da
cena atual e, visto que não existe uma cena determinada, ele interrompe a reprodução.
nextFrame
Utilizado da maneira correta da seguinte forma: nextFrame ( )
Este script envia a reprodução para o próximo quadro e a encerra.
Exemplo:
On (release) {
nextFrame ( );
nextScene
Utilizado da maneira correta da seguinte forma: nextScene ( )
O script envia a reprodução para o Quadro 1 da próxima cena e faz uma interrupção.
Exemplo:
on (release) {
nextScene ( );
No exemplo acima ao clicar no botão, a reprodução é enviada para o Quadro 1 da

próxima cena.
prevScene
Utilizado da maneira correta da seguinte forma: prevScene ( )
O script envia a reprodução para o Quadro 1 da cena anterior e faz uma ininterrupção.
Funciona de forma inversa ao nextScene.
Exemplo:
on (release) {
prevScene ( );
}
154
Ao ser executada a ação, a reprodução é enviada para o Quadro 1 da cena anterior.
play
Utilizado da maneira correta da seguinte forma: play ( )
Este script é responsável por fazer com que a reprodução do filme vá para frente na
linha do tempo.
Exemplo:
stop ( );
if (name == “Roberto”) {
play ( );
else {
alert=”Espere! O nome está errado!”;
}
É importante observarmos que o código acima apresenta a inscrição if para verificar o
valor de um nome que o usuário escreve. Se o usuário escrever “Roberto” a ação play
é executada e o filme move-se na linha de tempo. Se o usuário inserir qualquer valor
diferente de “Roberto” o filme não é reproduzido e um campo de texto com o nome de
variável alert é exibido.
stop
Utilizado da maneira correta da seguinte forma: stop ( )
Este script encerra a reprodução do filme na linha de tempo. Esta action é utilizada
principalmente para controlar clipes de filme com botões, o que faz com que ela seja
muito útil e frequentemente utilizada.
Utilizando qualquer animação pesquisada como base, tente indicar na linha

do tempo da animação em quais momentos foi utilizado algum dos scripts
mencionados acima.
155
CAPÍTULO 3
Programação para Internet
Nesta unidade apresentaremos os conceitos da lógica de programação. Faremos

uma referência entre a programação e a sistematização de atividades cotidianas,
potencializando a capacidade de abstração aos referentes temas.
Lógica de Programação
A lógica de programação é utilizada por profissionais que almejam trabalhar com
desenvolvimento de sistemas e programas. A função da lógica de programação é definir
a sequência lógica para o desenvolvimento dos sistemas. Em suma, ela é a técnica de
encadear pensamentos para atingir determinado objetivo.
Estes pensamentos podem ser descritos como uma sequência de instruções, que devem
ser seguidas em determinada ordem para se cumprir uma tarefa específica.
Para definirmos, uma sequência Lógica, os passos são executados em uma ordem
correspondente até atingir um objetivo ou solucionar uma problemática.
Instruções
Posicionando de forma básica, instruções é um conjunto de regras ou normas definidas

para a realização ou emprego de algo. Aqui podemos abrir parênteses e dizer que,
quando falamos na área de informática, instrução é caracterizada como a informação
que indica a um computador uma ação elementar a executar. Uma ordem isolada não
permite realizar o processo completo, é necessário um conjunto de instruções colocadas
em ordem lógica para esta sequência.
Por exemplo, se quisermos fazer um bolo de morango, precisaremos colocar em prática

uma série de instruções: lavar os morangos, bater os ovos, misturar a massa, ligar o
forno, assar o bolo, confeitar, esperar esfriar, cortar etc. Todas essas etapas, ou seja, as
instruções têm que ser executadas em uma sequência correta, por exemplo, não tem
como você assar o bolo antes de preparar a massa.
Por isso, afirmamos que a instrução gerada de forma independente não assume um
sentido claro; para obtermos o resultado assertivo, precisamos colocar em prática o
conjunto de todas as instruções, na ordem correta.
156
Algoritmo
É denominado de algoritmo é uma sequência finita de processos que levam à execução

de uma determinada tarefa. Seria como um briefing de uma campanha publicitária,
que norteia sua criação, apresentando os procedimentos adequados em uma ordem
específica. É importante considerarmos que as tarefas especificadas não podem
ser redundantes nem subjetivas na sua definição, devem ser claras e precisas, é a
assertividade que garante o sucesso do procedimento.
Um exemplo muito utilizado para exemplificar um algoritmo são os das operações

básicas (adição, multiplicação, divisão e subtração) de números reais decimais. Além
destes, temos as receitas culinárias, os manuais de aparelhos eletrônicos, um tutorial,
que indique os passos específicos a serem tomados na execução de terminada tarefa
que contemple o objetivo específico.
Podemos descrever utilizando sequências lógicas até mesmo situações cotidianas

ínfimas, como, por exemplo, beber um refrigerante em lata, que possui os seguintes
passos básicos:
»» Pegar a lata de refrigerante.
»» Abrir a embalagem, pressionando o anel superior contra o lacre.
»» Beber o refrigerante.
»» Jogar a lata no lixo
Outro exemplo ilustrativo:
»» “Subtrair dois números aleatórios”.
›› Escreva o primeiro número no círculo A;
›› Escreva o segundo número no círculo B;
›› Subtraia o número do círculo B do número do círculo A e coloque o

resultado no círculo C.
Esta é a metodologia das criações de conjuntos matemáticos, dos dados de pesquisas de

campos, dos estudos do target em um planejamento de mídia e a base dos pressupostos
de transitoriedade que norteiam um raciocínio abdutivo.
157
Programas
Os softwares (programas de computadores) são algoritmos escritos em uma linguagem

de computador (exemplos de linguagens: C, Pascal, Cobol, Fortran, Visual Basic entre
outras. Estas inscrições são operacionalizadas, ou seja, lidas e interpretadas por um
equipamento eletrônico que, no caso, seria um computador.
Estrutura de Decisão e Repetição
Em grande parte dos casos, necessitamos tomar decisões no andamento do algoritmo.

Essas decisões interferem diretamente no andamento do programa. Para isto, podemos
trabalhar com dois tipos de estrutura, a de Decisão e a de Repetição.
Comandos de Decisão
Os comandos de decisão, também denominados desvio, pertencem às técnicas de

programação que conduzem a estruturas de programas que não são totalmente
sequenciais. A partir do uso das instruções de SALTO ou DESVIO pode-se fazer com
que o programa proceda de uma ou outra maneira, de acordo com as decisões lógicas
tomadas em função dos dados ou resultados anteriores. As principais estruturas de
decisão são: “Se Então”, “Se então Senão” e “Caso Selecione”.
SE ENTÃO / IF ... THEN
A estrutura de decisão “SE/IF” normalmente vem acompanhada de um comando. Isso

significa, caso determinada condição for satisfeita pelo comando SE/IF, então execute
determinado comando. Podemos exemplificar a abstrairmos um algoritmo que indique
que um determinado aluno somente estará aprovado se sua média for maior ou igual a
5.0. Neste caso, o algoritmo resultante seria:
SE MEDIA > = 5.0 ENTÃO ALUNO APROVADO
Em diagrama de blocos ficaria assim:
158
Figura 220. Diagrama 1.
Fonte: Paulo Sérgio de Moraes
Em Visual Basic
IF MEDIA >= 5 Then
Text1 = “APROVADO”
ENDIF
SE ENTÃO SENÃO / IF ... THEN ... ELSE
A estrutura de decisão “SE/ENTÃO/SENÃO”, funciona exatamente como a estrutura

“SE”, porém com um diferencial. Em “SE” somente podemos executar comandos caso
a condição seja verdadeira, diferente de “SE/SENÃO”, pois sempre um comando será
executado independente da condição. Isso significa que caso a condição seja “verdadeira”
o comando da condição será executado, caso contrário o comando da condição “falsa”
será executado.
O algoritmo resultante seria o seguinte:
SE MÉDIA >= 5.0 ENTÃO
ALUNO APROVADO
SENÃO
ALUNO REPROVADO
Em diagrama:
159
Em Visual Basic
IF MEDIA >= 5 Then
Text1 = “APROVADO”
ELSE
Text1 = “REPROVADO”
ENDIF
No exemplo acima está sendo executada uma condição que, se for verdadeira, executa o
comando “APROVADO”, caso contrário executa o segundo comando, o “REPROVADO”.
Podemos também dentro de uma mesma condição testar outras condições, conforme
demonstra o exemplo abaixo:
Em Visual Basic
IF MEDIA >= 5 Then
160
IF MEDIA >= 7.0 then
Text1 = “Aluno APROVADO”
ELSE
Text1 = “Aluno Necessita fazer outra Avaliação”
ENDIF
ELSE
Text1 = “Aluno REPROVADO”
ENDIF
CASO SELECIONE / SELECT ... CASE

A estrutura de decisão CASO/SELECIONE é utilizada para testar, na condição, uma
única expressão, que produz um resultado, ou o valor de uma variável em que está
armazenado um determinado conteúdo. Neste caso se compara o resultado obtido no
teste com os valores fornecidos em cada cláusula “Caso”.
No exemplo do diagrama de blocos demonstrado abaixo, é recebida uma variável “Op” e

testado seu conteúdo, caso uma das condições seja satisfeita, é atribuído para a variável
Título a String “Opção X”, caso contrário é atribuído a string “Opção Errada”.
Em Visual Basic é utilizada a seguinte sequência de comandos para representar o

diagrama anterior.
161
TITULO = “”
OP = INPUTBOX(“DIGITE A OPÇÃO”)
SELECT CASE OP
CASE 1
TITULO = “OPÇÃO 1”
CASE 2
CASE 3
CASE 4
CASE 5
CASE ELSE
TITULO = “OPÇÃO ERRADA”
END SELECT
LABEL1.CAPTION = TITULO
A partir dos conceitos de lógica de programação apresentados acima, escolha

uma das opções de formato de organograma ilustradas no texto e tente
emprega-la a uma situação cotidiana, adaptando-a.
Responda adequadamente as questões abaixo, assinalando a alternativa correta

solicitada.
162
1. O significado adequado ao termo marca é:
a. Uma ação de diferenciação de uma empresa, produto,marca ou serviço por

meio de atributos reais ou simbólicos.
b. Qualquer suporte de difusão de informações.
c. Um nome, termo, símbolo, desenho ou uma combinação desses elementos

que possui a função de identificar os bens ou serviços de um fornecedor ou
grupo de fornecedores e diferenciá-los dos da concorrência.
d. O valor agregado atribuído a produtos e serviços, podendo refletir no modo

como os consumidores pensam, sente ou agem em relação a uma marca,
seja pelo preço, participação de mercado ou na lucratividade proporcionada
pela marca para a empresa.
e. É um conjunto de informações, uma coleta de dados.
2. Identifique os três estágios de um percurso semiótico gerador de sentido.
a. Absoluto, sintético e relativo.
b. Fundamental, narrativo e discursivo.
c. Primário, secundário e terciário.
d. Imagético, contextual e léxico.
e. Retórico, superlativo e absoluto.
3. O design gráfico possui uma grande riqueza de estudos para seu desenvolvimento.
Dentre os princípios fundamentais do design, destacamos os fundamentais:
a. Alinhamento, proximidade, contraste e repetição.
b. Textura, cor, sombra e detalhe.
c. Fonte, forma, tendência e padrões.
d. Vetorial, bidimensional, tridimensional e fractal.
e. Minimalismo, expressionismo, coesão e tamanho.
4. Imagens que contêm uma descrição de cada pixel e envolvem cálculos muito
complexos, como interpolação e álgebra matricial são classificadas como:
163
a. Vetoriais.
b. Bitmapeadas.
c. Fractais.
d. Tridimensionais.
e. Neutras.
5. A ferramenta responsável pelo ajuste da luminosidade da foto, que apresenta um

gráfico da imagem, chamado de histograma, onde é possível observar quantos pixels
estão em cada faixa de tonalidade é denominada de:
a. Níveis.
b. Opacidade.
c. Saturação.
d. Desfoque.
e. Pincel.
6. O padrão de cores que consiste em três canais de cores, sendo primeiro canal a
Iluminação (L), que utiliza um valor de 0 a 100, sendo que o 0 significa preto e o 100
significa branco e os outros dois canais, A e B, representam faixas de cores é:
a. CMYK.
b. RGB.
c. LAB.
d. Análoga.
e. Complementar.
7. A harmonia complementar é:
a. composta por três cores equidistantes no circulo cromático. Por exemplo:

azul, vermelho e amarelo. Esse tipo de combinação consegue dar um efeito
visual muito atraente.a harmonia formada de uma cor primária combinada
com duas cores vizinhas do círculo. Na constituição desta harmonia, uma
cor é utilizada como dominante enquanto que as adjacentes são utilizadas
para enriquecerem a harmonia.
164
b. a harmonia resultante de uma mesma cor do círculo cromático. As

tonalidades podem mudar, mas todas ficam no mesmo matiz do círculo,
variando luminosidade e saturação de uma mesma cor.
c. a harmonia que ocorre ao combinar cores opostas do círculo cromático. São

cores que se encontram simétricas com respeito ao centro do círculo e a
matiz varia em 180º entre um e outro.
d. composta por dois pares de cores complementares entre si.

Denominado também como tetradas, estas combinações são as mais ricas
de todas as harmonias, por utilizar quatro cores, complementares em pares.
8. Estilo de animação utilizado para definir propriedades de um objeto, como posição

e transparência alfa em um quadro e novamente em outro quadro, que significa
movimento ou transformação contínua de um objeto, procedimento este extremamente
utilizado em técnicas de animação é denominado de:
a. HyperShade Mode.
b. Extrusão.
c. Interpolação de Movimento.
d. Sequência de Fibonacci.
e. Cinemática inversa.
9. A definição adequada para Action Script é:
a. Uma linguagem de programação da plataforma Adobe Flash orientada a

objetos.
b. Um software para edição e manipulação de infográficos.
c. Uma ferramenta de controle de exposição da imagem.
d. Uma linguagem de programação voltada a testar, na condição, uma única

expressão, que produz um resultado, ou o valor de uma variável em que está
armazenado um determinado conteúdo,
e. Uma linguagem criativa utilizada na elaboração do percurso gerador de

sentido.
165
10. A definição “uma sequência finita de processos que levam à execução de uma
determinada tarefa” corresponde ao:
a. Método de animação.
b. Algoritmo.
c. Estilo criativo.
d. Processo de interpolação de movimento.
e. Trabalho de modelagem em ambiente tridimensional.
166
Referências
ANDRADE, Candido Teobaldo de Souza. Curso de Relações Públicas: relações com
os diferentes públicos. São Paulo, Thompson Learning, 2003.
BOCK, A. M. B; FURTADO O.;TEIXEIRA, M. de L. T. Psicologias – Uma introdução

ao estudo de Psicologia. São Paulo: Saraiva, 2006.
BOONE, Louis KURTZ, David. Marketing Contemporâneo. Rio de Janeiro: LTC, 1998.
BRONW, James. Técnica de persuasão: da propaganda e lavagem cerebral. 2a ed.

Rio de Janeiro: Zahar Editora, 1971.
CARVALHO, Nelly de. Publicidade: a linguagem da sedução. S. Paulo: Ática 1998, pp. 11-34.
CHURCHILL, Gilbert A. Jr; PETER, J. PAUL. Marketing: criando valor para os clientes.
2a Ed. São Paulo: Saraiva, 2000.
COBRA, Marcos. Marketing básico: uma perspectiva brasileira. São Paulo: Atlas, 1989.
DONDIS, Donis A. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997.
FRANÇA, Fábio. Públicos: como identificá-los em uma nova visão estratégica. São
Caetano do Sul, SP: Yendis Editora, 2004.
GIL, Antonio Carlos. Como elaborar projetos de pesquisa. São Paulo: Atlas, 1991.
______. Métodos e técnicas de pesquisa social. São Paulo: Atlas, 1999.
GOLDENBERG, Mirian. A arte de pesquisar. Rio de Janeiro: Record, 1999.
HOOLEY, Graham J.; SAUNDERS, John A.; PIERCY, Nigel F. Estratégia de

Marketing e Posicionamento Competitivo. São Paulo: Prentice Hall, 2001.
HURLBURT, Allen. Layout: o design da página impressa. São Paulo: Nobel, 2002.
JONES, John Philip. A publicidade como negócio. São Paulo:Nobel, 2002.
KOTLER, Philip; KELLER, Kevin Lane. Administração de Marketing. 12a ed.

Pearson Prentice Hall, São Paulo, 2006.
KOTLER, Philip. Administração de Marketing. 5a ed. São Paulo: Atlas, 1998.
167
LAKATOS, Eva Maria; MARCONI, Marina de Andrade. Metodologia do trabalho

científico. São Paulo: Atlas, 1989.
LÉVY, P. Cibercultura. São Paulo: Ed. 34, 1999.
MAYA, Autodesk. Introdução à Modelagem e Animação 3D. São Paulo. Digerati, 2013.
MARCHIORI, Marlene. Cultura e comunicação organizacional. São Caetano do

Sul (SP). Difusão, 2006.
MATTELART, Armand; MATTELART, Michele. História das teorias da

comunicação. 2a ed. São Paulo: Loyola, 1999.
McCARTHY, E.J; PERREUALT, W. D. Jr. Marketing essencial. São Paulo: Atlas, 1997.
MCLUHAN, M. O meio é a mensagem (com Quentin Fiore, 1967). Ed. Record.

Tradução: Ivan Pedro de Martins. 1971.
______. Os meios de comunicação de massa como extensões do homem.

(understanding media). 3a ed. São Paulo: Cultrix, 1964.
MORIN, E. Complexidade e Transdisciplinaridade: A reforma da Universidade

e do Ensino Fundamenta. Natal, EDUFRN, 1999.
______. Introdução ao Pensamento Complexo. Lisboa: Instituto Piaget, 1991
NETO, Ângelo F. Midialização: o poder da mídia. São Paulo: Nobel, 2006.
NEVES, Roberto de Castro. Comunicação empresarial integrada. Rio de Janeiro,

Mauad, 2004.
NICKELS, William G.; WOOD, Marian Burk. Marketing: relacionamento, qualidade,

valor. Rio de Janeiro: LTC, 1999.
OGDEN, James R. Comunicação integrada de marketing. São Paulo:Prentece

Hall, 2002.
PERROT, Philippe Desnoix. Venda, marketing, publicidade: a organização

comercial. Porto Alegre: Inova, 1990.
PINHO, J. B. Relações públicas na internet: técnicas e estratégias para informar e

influenciar públicos de interess. São Paulo, Summus, 2003.
PIZZINATTO, Nádia Kassouf. Planejamento de marketing e de mídia. Piracicaba:

UNIMEP, 1994.
168
RIBEIRO, Júlio; ALDRIGHI, Vera; IMOBERDORF, Magy; BENETTI, Edison; LONGO,

Walter; DIAS, Sérgio R. Tudo que você queria saber sobre propaganda e
ninguém teve paciência para explicar. São Paulo: Atlas, 1985.
SANDMANN, Antonio. A linguagem da propaganda. São Paulo: Contexto, 1993,

pp. 34-44.
SANT’ANNA, Armando. Propaganda – teoria, técnica e prática. 4a ed. São Paulo:

Pioneira, 1989.
SCHUYTEMA, Paul. Design de Games – Uma abordagem prática. São Paulo:

CENGAGE Learning, 2008.
TRIVIÑOS, Augusto Nibaldo Silva. Introdução à pesquisa em ciências sociais: a

pesquisa qualitativa em educação. 13a ed., São Paulo: Atlas, 1987.
VAZ, Conrado Adolpho. Google Marketing: o guia definitivo de marketing digital /

Contado Adolpho Vaz. – São Paulo: Novatec Editora, 2010.
VESTERGAARD, Toben. A linguagem da propaganda. São Paulo: Martins Fontes,

2000, pp. 159-194.
Sites
<http://www.adobe.com>.
<http://design.blog.br/design-grafico/grids-o-que-sao-e-para-que-servem>.
<http://www.slideshare.net/pedrocs/tipografia-noes-bsicas>.
<http://design.blog.br/design-grafico/o-que-e-gestalt-2>.
<http://chocoladesign.com/fundamentacao-e-leis-da-gestalt>.
<http://chocoladesign.com/criando-um-manual-de-identidade-visual>.
<http://www.crieblogger.com/2011/05/como-criar-um-logotipo-de-qualidade.html>.
169

Animacao

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Animacao

Enviado por

Direitos autorais:

Formatos disponíveis

Animação

Luis Fernando Pizzarro Bueno Ramos

Equipe Técnica de Avaliação, Revisão Linguística e Editoração

ORGANIZAÇÃO DO CADERNO DE ESTUDOS E PESQUISA..................................................................... 5

A proposta editorial deste Caderno de Estudos e Pesquisa reúne elementos que se

Pretende-se, com este material, levá-lo à reflexão e à compreensão da pluralidade dos

Elaborou-se a presente publicação com a intenção de torná-la subsídio valioso, de modo

Para facilitar seu estudo, os conteúdos são organizados em unidades, subdivididas em

Sugestão de estudo complementar

Sugestões de leituras adicionais, filmes e sites para aprofundamento do estudo,

Sugestão de atividades, no decorrer das leituras, com o objetivo didático de fortalecer

Chamadas para alertar detalhes/tópicos importantes que contribuam para a

Informações complementares para elucidar a construção das sínteses/conclusões

Trecho que busca resumir informações relevantes do conteúdo, facilitando o

Questionário com 10 questões objetivas, baseadas nos objetivos do curso,

Para (não) finalizar

Texto integrador, ao final do módulo, que motiva o aluno a continuar a aprendizagem

Além de conceitos mais tóricos sobre om raciocínio, a transmissão de mensagem e

Finalizando esta etapa de bases de ancoragem, passaremos ao estudos dos principais

Finalizando, mostraremos alguns conceitos e práticas da lógica de programação, para

»» Informar sobre as mais diversas técnicas de artes digitais.

»» Fornecer conhecimentos para os aspectos básicos da arte e formar

»» Apresentar as bases dos softwares de edição de imagem.

»» Apresentar os conceitos básicos de Modelagem 3D e seu devido software

»» Informar o aluno a respeito dos principais tipos de animação.

»» Despertar o conhecimento para as diferentes funcionalidades e possibilidades

»» Desenvolver no aluno o raciocínio sistêmico a respeito das hierarquias

»» Apresentar a linguagem Action Script.

»» Apresentar ao estudante os conceitos de Lógica de Programação.

»» Treinar o raciocínio sistêmico.

»» Possibilitar a assimilação dos diferentes processos para os aspectos da

»» Apresentar as diferentes relações das codificações das lógicas de

Nesta unidade abordaremos diversos conceitos acerca do vasto universo da criação e

Iniciaremos com a aprendizagem de alguns conceitos e definições e, na sequência,

»» Dar existência; tirar do nada.

»» Dar origem; gerar.

»» Dar princípio; produzir; inventar; imaginar.

»» Estabelecer; fundar; instituir.

Criação, segundo alguns pensadores

»» Inspiração Divina | Sócrates

»» É uma técnica que envolve Problema / Solução | Dualibi e Simonsen

»» Processo natural que obedece a leis imprevisíveis | Kant

»» Conexão de sistemas de referências, fusão, justaposição, colisão |

»» Produção abundante e original de conteúdo associativo | Gestzels

É uma experiência subjetiva, associada a motivação e personalidade. Vem do latim

»» Uso elevado de analogias.

»» Sentido de destino criativo.

Teoria das Imagens

As imagens se dividem em dois domínios:

»» O primeiro domínio é o das representações visuais como desenhos,

»» O segundo é o domínio imaterial das imagens no nosso cérebro. Neste

Projeto de Identidade Visual

Um projeto de construção da Identidade Visual de uma Marca (PIV) se refere à forma

São trabalhados elementos como tipografia, cores, elementos visuais.

Não confundir o PIV com o projeto de Branding, de gestão e construção da

»» BRAND EQUITY (força da marca);

»» SHARE OF MIND (lembrança de marca);

»» BRAND AWARENESS (conhecimento da marca).

O termo é frequentemente usado como referência a uma determinada empresa:

De acordo com Philip Kotler, um dos principais nomes do Marketing mundial, a

Segundo a American Marketing Association, marca é um nome, termo, símbolo,

De acordo com a lei brasileira, o Instituto Nacional da Propriedade Industrial − INPI

Embora, não seja uma tarefa fácil, é extremamente necessária.