Fundamento das Imagens Estáticas,
Fotografia e Digitalização

Com o auxílio do scanner ou máquinas fotográficas digitais é possível incluir fotos no aplicativo, as quais podem contar histórias, descrever pessoas, lugares ou coisas e servem para captar a atenção do usuário.

Os arquivos de fotografia geralmente são estruturados no formato bitmap, pois seria quase impossível criar um arquivo vetorial dada a sua complexidade.

Arquivos formato bitmap

 

Este formato de arquivo é estruturado na forma de um mapa de bits, onde ele transforma a imagem em uma espécie de matriz de pontos; a interseção formada pelo cruzamento das linhas com as colunas recebe o nome de pixel – contração de picture elements –: em um monitor de vídeo padrão VGA existem 640 colunas por 480 linhas perfazendo um total de 307.200 pixels. Este “é um arquivo altamente estruturado que contém informações a respeito de tipo, tamanho e cores, assim como os elementos de um retrato da imagem ou pixels. Arquivos de bitmap podem armazenar imagens com qualidade fotográfica de todas as cores, mas também podem conter retratos relativamente mais simples, disfarçando-se de ícones, botões, cursores e outras figuras”. (SWAN, 1993). Aumentar drasticamente o tamanho de uma imagem deste formato pode resultar numa considerável perda de qualidade. São exemplos deste formato de arquivo: .bmp, .jpg, .gif dentre outros.

Cor

• Selecione uma matiz e padronize.
  
  • Varie a luminosidade da cor.
• Cores contíguas harmonizam.
• Cores separadas por outra contrastam.
• Cores diagonais não são recomendáveis.

• A cor comunica por si:
  • uma campanha da Pepsi exibia duas latas sem identificação, uma vermelha e outra azul, e perguntava: ‘qual destas duas é capaz de matar sua sede?’.
• Cores mais vivas devem ser utilizadas em objetos de maior importância.
• Use cor para:
  • comunicar não para decorar;
  • estabelecer padrões e criar expectativas;
  • agrupar itens similares;
  • estabelecer correlações;
  • para diferenciar.
• Use menos cores não mais.
• Na Internet as cores variam conforme o Browser cliente:
  • use 'browser-safe palette'
  • atenção quando a cor for a mensagem.

Escala de grises

• antes de editar a imagem
  • eleve o contraste de seu monitor ao máximo
  • eleve o brilho de seu monitor ao máximo
  • reduza o brilho até ver os onze quadros
  • faça o ajuste fino do contraste
• adicione a escala de cinza à apresentação ou ao seu trabalho
  • repita esta operação no projetor ou instrua o usuário
• use a escala de cinza quando
  • a mensagem estiver na qualidade da imagem

 

 

Resolução

• Monitor padrão VGA:
  • 640 colunas por 480 linhas
    • 307.200 pixels.
• Monitor padrão SVGA:
  • 800 colunas por 600 linhas
    • 480.000 pixels.
  • 1.024 colunas por 768 linhas
    • 782.336 pixels.
• Atenção com a possibilidade do monitor do cliente estar com uma resolução diferente da resolução do seu monitor.
• Em apresentações com datashow selecione a resolução adequada para evitar perda de qualidade:
  • borda preta e imagem pequena;
  • corte de parte do conteúdo.
• Impressora HP:
  • padrão economode
    • 150 x 150 dpi
      • 22.500 dpsi.
  • padrão normal
    • 300 x 300 dpi
      • 90.000 dpsi.
  • padrão presentation
    • 600 x 600 dpi
      • 360.000 dpsi.

Dica do Stefanelli

• na Internet
  • alguns 'browsers' usam a paleta do sistema
    • quarenta cores variam entre sistemas
  • browser safe palett
    • duzentas e dezesseis cores não variam
      • selecione destas quando a mensagem estiver na cor
  • as cores das fotos não sofrem influência

 

 

 

 

 

 

 

 

 

 

 

 

• duplicando o tamanho do lado (l) de uma imagem quadruplica-se o seu tamanho em bytes!
  • 2 · l -> l^2
• Imagem na Internet
  • não use
    • <WIDTH>
    • <HEIGHT>
  • reduza o tamanho no arquivo da imagem
  • excesso
    • pode custar um longo tempo para carregar;
  • falta
    • pode deixar a página pobre.

Dica do Stefanelli

• os detalhes das fotos são prejudicados
  • pela baixa resolução dos monitores
  • pela pequena área de visualização
    • produza duas cópias da imagem com tamanhos diferentes e utilize o recurso crop

 

 

 

• Indicação de uso
  • .GIF
    • Imagens que predomine pixels contíguos de mesma cor
  • .JPG
    • Imagens que predomine pixels contíguos de cores diferentes

Digitalização

O scanner – “um dispositivo prático que ‘lê’ uma página de texto ou gráfico e envia essas informações ao computador” (GOOKIN & MULLEN, 1994) – faz a chamada varredura da figura, da esquerda para a direita e da primeira para a última linha, traduzindo as cores ou tons de cinza dos pixels em valores elétricos, que são convertidos em um conjunto de bits que correspondem a uma cor ou tom de cinza de uma tabela. Este conjunto de bits forma uma espécie de mapa dos pixels da figura.

Por exemplo: para digitalizar a figura ao lado, numa profundidade de cor de 1 bit –duas cores– e com uma resolução de 10 colunas x 8 linhas, seria necessária a obtenção dos pixels durante o processo de varredura (ver figura).

O fluxo de bits: ”000000000100000000100000001100000001000000001000
00001100000001000000001000000000” descreve qual pixel é vermelho (1) ou amarelo (0). A saída deste processo se assemelharia à figura acima.

Vetorial

Como observamos, o bitmap é uma estrutura de arquivo que não é a mais indicada para armazenagem de figuras geométricas, desenhos e mapas.

Diferentemente dos arquivos formato bitmap que armazenam as informações das cores correspondentes a cada ponto de uma matriz, os arquivos vetoriais trazem informações dos objetos que compõem a imagem, por exemplo: a bandeira do Brasil é composta por um retângulo verde sob um losango amarelo e um círculo azul, sendo “mais adequados para imagens como mapas, diagramas, desenhos arquitetônicos e outras gravuras compostas de múltiplas camadas e possivelmente sobrepostas”. (SWAN, 1993).

Por exemplo: o arquivo que armazenaria a figura 3 seria muito simplificado, pois além do cabeçalho, com informações sobre o próprio arquivo, conteria as informações referentes aos objetos que a compõe: o retângulo – dimensões e cor, e a linha diagonal – coordenadas dos pontos inicial e final, largura e cor. O computador reconstrói a imagem no momento de demonstrá-la.

Gráficos

Em seu sentido mais lato, na multimídia, os gráficos incluem quase tudo que é visto no monitor, exceção feita aos vídeos. Os elementos gráficos vão de um fundo estático onde acontecem as interações até o uso das cores, passando por ilustrações, fotos, animações e uso de títulos e planilhas.

Dica do Stefanelli

• utilize fotos como exemplo e não como decoração;
• arquivos mais indicados:
  • .JPG:
    • para fotos ricas em detalhes;
  • .GIF:
    • para ilustrações com predominância de poucas cores.