Princípios de

imagens digitais
e criação de
animações

Fotografia na aprendizagem: novos olhares para construir o conhecimento

Programa Escolas Conectadas | Fundação Telefônica
Imagens em computação gráfica
Existem duas categorias de arquivos gráficos:
bitmap ou imagem de rastreio e vetor.
Conhecer suas características e aplicações é
importante ao trabalharmos com imagens no
meio eletrônico.
Bitmap
§   Mapa de bits, imagem por rastreio ou de
pintura
§  É constituído por pontos individuais chamados
pixels
§  Pixels são dispostos e coloridos de maneiras
diferentes a fim de formar padrões que se
combinam para compor a imagem
Bitmap
§  Fotografias digitais, imagens escaneadas
§  Ao aumentarmos a figura (“zoom in”), é
possível visualizar os quadrados individuais que a
formam
 Bitmap

Bitmap

By  Rex  [Public  domain],  via  Wikimedia  Commons  |  h<ps://commons.wikimedia.org/wiki/File%3AVector_vs_raster.png  

Bitmap
§  Bits carregam um número muito rico de
informações sobre a imagem, o que a torna mais
pesada
§  O tamanho da imagem não pode ser alterado
sem déficit da resolução: possibilidade de
granulação/ “pixelização”
§  Principais formatos: JPG, BMP, GIF, PNG
Vetor
§  Imagem gerada a partir de descrições
geométricas
§  Pode sofrer redimensionamento sem déficit de
qualidade (a cada alteração, cálculo é refeito)
§  Entidades de desenho: retas, curvas, polígonos,
“traço”
Vetor
§  É escalonável sem perda da resolução
§  Principais formatos: WMF, EMF, EPS, AI (Adobe
Illustrator), CDR (Corel Draw)
 Vetor

Bitmap Vetor

By  Nil  Einne  -­‐  Praca  własna  (Public  domain),  via  Wikipedia      

h<ps://upload.wikimedia.org/wikipedia/commons/e/e7/Orc_-­‐_Raster_vs_Vector_comparison.png  
RGB
§  Padrão de cores de monitores e dispositivos
eletrônicos
§  Cor luz
§  Red (Vermelho), Green (Verde) e Blue (Azul)
 
RGB
CMYK
§  Padrão de cores para impressão
§  Cor pigmento
§  Cyan, Magenta, Yellow e BlacK

 
CMYK
Resolução
§  Quantidade de pixels existentes em uma
polegada quadrada de imagem
§  DPI: dots per inch ou pontos por polegada -
unidade de medida da resolução
§  Ex: 300 dpi = 300 pontos presentes em uma
polegada 
Resolução
§  Deve ser estabelecida de acordo com a
distribuição a ser realizada
§  Web: 72 ou 96 dpi (resolução do monitor)
Quando a resolução da imagem é superior à do
monitor, a imagem aparece expandida na tela
Resolução
§  Impressão: 300 dpi ou resolução proporcional à
da impressora
§  São necessários muitos pontos de impressão
para obter o efeito de um pixel na imagem do
monitor
Resolução
§  Na imagem bitmap, os dados são dependentes
da resolução: ao alterarmos a dimensão, a
imagem pode perder qualidade
§  Na imagem vetorial, a resolução é
independente: podemos alterar a dimensão da
imagem sem déficit de qualidade
Criando animações
§  GIF: Graphics Interchange Format –
“formato para intercâmbio de gráficos”

§  Muitos programas comumente utilizados

permitem salvar o formato GIF: editores simples
de imagem como Paint e Picture Manager,
editores de slides como Power Point e BrOffice
Impress e o software Gimp são algumas das
alternativas.
§  GIMP: programa para criação e edição de
imagens bitmap com suporte a formatos de
imagem vetorial
§  Software livre e código aberto
§  Permite criar imagens ou projetos gráficos,
manipular fotografias e compor animações
§  Disponível em
http://www.gimp.org/downloads
 Como criar animações
a partir de editores de slides?
  
§  Elabore diferentes quadros para sua animação,
salvando cada quadro em um slide, como em
uma apresentação convencional.
§  Gere o conjunto de GIFs da seguinte forma:
Power Point: utilize a opção SALVAR COMO e
selecione em SALVAR COMO TIPO o formato
GIF. Em seguida, marque a opção TODOS OS
SLIDES.
BrOffice Impress: utilize a opção EXPORTAR e
selecione, em FORMATO DE ARQUIVO, o
formato GIF. Repita o procedimento para cada
slide.
§  Insira a sequência de quadros (arquivos de
formato GIF) em um editor de GIF online para
concluir a animação:

http://www.loogix.com/: gera URL,

apresenta efeitos e permite fazer download
da animação.
http://www.animasher.com/create,
http://www.createagif.net/: geram URL
 
 
Como criar animações
no Gimp?
§  Elabore diferentes quadros para sua animação,
salvando cada imagem com a extensão GIF
§  Abra o primeiro quadro criado
§  Abra, a partir dele, os demais quadros utilizando a
opção Arquivo>Abrir como Camada
§  Salve a animação a partir da opção
Arquivo>Salvar como, escolhendo novamente a
extensão GIF
§  Um quadro como este aparecerá:

§  Selecione Salvar como animação e

clique em exportar
§  Determine o intervalo de tempo entre os
quadros da animação, selecione a opção "Um
quadro por camada (substituir)" e clique em
OK.
§  Abra o arquivo GIF gerado a partir da
sequência de quadros em um navegador para
testar sua animação!
§  Orientações elaboradas com base no tutorial
desenvolvido pela Fundação Pensamento
Digital, disponível em:

http://oficinas.pensamentodigital.org.br/
gimp/index.html

Consulte no mesmo endereço tutoriais de

outras aplicações do software Gimp.
 Sites consultados
http://oficinas.pensamentodigital.org.br/gimp/index.html

http://www.gimp.org/

http://pt.wikipedia.org/wiki/GIMP

http://webdesign.about.com/od/graphics/a/aa100906.htm

http://canaltech.com.br/o-que-e/software/Qual-a-diferenca-entre-JPG-GIF-PNG-EXIF-e-
outros-formatos-de-imagem/

http://pt.wikipedia.org/wiki/Desenho_vetorial

http://pt.wikipedia.org/wiki/.gif

http://pt.wikipedia.org/wiki/Jpg