You are on page 1of 31

Princípios de

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

MOOC Fotografia na Aprendizagem – Novos olhares para construir o conhecimento
Programa Escolas Rurais 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 .

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

PNG . GIF. 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.Bitmap §  Bits carregam um número muito rico de informações sobre a imagem. BMP.

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

CDR (Corel Draw) .Vetor §  É escalonável sem perda da resolução §  Principais formatos: WMF. AI (Adobe Illustrator). EPS. EMF.

Vetor Bitmap Vetor By  Nil  Einne  -­‐  Praca  własna  (Public  domain).png   .wikimedia.org/wikipedia/commons/e/e7/Orc_-­‐_Raster_vs_Vector_comparison.  via  Wikipedia       h<ps://upload.

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. a resolução é independente: podemos alterar a dimensão da imagem sem déficit de qualidade . a imagem pode perder qualidade §  Na imagem vetorial. os dados são dependentes da resolução: ao alterarmos a dimensão.

Criando animações .

editores de slides como Power Point e BrOffice Impress e o software Gimp são algumas das alternativas. .§  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.

org/downloads .gimp. manipular fotografias e compor animações §  Disponível em http://www.§  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.

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. o formato GIF. BrOffice Impress: utilize a opção EXPORTAR e selecione. Repita o procedimento para cada slide. marque a opção TODOS OS SLIDES. . Em seguida. em FORMATO DE ARQUIVO.

§  Insira a sequência de quadros (arquivos de formato GIF) em um editor de GIF online para concluir a animação: http://www. apresenta efeitos e permite fazer download da animação.createagif.com/: gera URL. http://www.net/: gera URL     .loogix.

Como criar animações no Gimp? .

§  Elabore diferentes quadros para sua animação. 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 . a partir dele. salvando cada imagem com a extensão GIF §  Abra o primeiro quadro criado §  Abra.

§  Um quadro como este aparecerá: §  Selecione Salvar como animação e clique em exportar .

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! .§  Determine o intervalo de tempo entre os quadros da animação.

§  Orientações elaboradas com base no tutorial desenvolvido pela Fundação Pensamento Digital.br/ gimp/index.html Consulte no mesmo endereço tutoriais de outras aplicações do software Gimp. . disponível em: http://oficinas.org.pensamentodigital.

wikipedia.br/gimp/index.com.org/wiki/Jpg .html http://www.gif http://pt. Sites consultados http://oficinas.org/wiki/.wikipedia.htm http://canaltech.org/wiki/Desenho_vetorial http://pt.gimp.org/ http://pt.wikipedia.about.pensamentodigital.org/wiki/GIMP http://webdesign.org.br/o-que-e/software/Qual-a-diferenca-entre-JPG-GIF-PNG-EXIF-e- outros-formatos-de-imagem/ http://pt.com/od/graphics/a/aa100906.wikipedia.