Aplicações Informáticas B

Conceitos básicos de multimédia

 Reconhecer os diferentes modelos de cor

 Caraterizar os atributos elementares das imagens
 Caraterizar os formatos de ficheiros de imagem
 Saber utilizar programas de desenho e pintura
 Saber alterar os atributos da imagem
Bases sobre a teoria da cor em
sistemas digitais
A cor está associada à perceção, pelo sistema de visão do
ser humano, da luz emitida, difundida ou refletida pelos
objetos.

A cor de um objeto depende das caraterísticas das fontes

de luz que o iluminam, da reflexão da luz produzida pela
sua superfície e, por último, das caraterísticas sensoriais do
sistema de visão humano, os olhos, ou de câmaras digitais.

A não existência de luz implica que nada se veja e, portanto,

significa a não existência de cor.
A cor de um material é
determinada pelos comprimentos
de onda dos raios luminosos que
as moléculas que as constituem
refletem, isto é, um objeto terá
determinada cor se não absorver
justamente os raios
correspondentes à frequência
daquela cor.
Espetro Eletromagnético
A luz contém uma variedade de ondas eletromagnéticas com diferentes
comprimento de onda.
Apenas uma pequena faixa da radiação é captada pelos nossos olhos,
varia entre os 400 e os 700 nanómetros nm (nanómetro=10−9 metro) e é
designada pelo Espectro Visível.
Visão Escotópica/Fotópica
A interpretação das cores é feita pelo cérebro humano depois de a luz atravessar
a íris e ser projetada na retina.
Desta forma , os olhos são os sensores de toda a visão e esta pode ser do tipo:
• Visão Escotópica é assegurada por um único tipo de bastonetes existentes na
retina. Estes são sensíveis ao brilho e não detetam a cor, ou seja são sensíveis
às alterações de luminosidade;
• Visão Fotópica é assegurada por um conjunto de três tipos de cones existentes
na retina. Estes são sensíveis à cor. O número de cones na retina distribui-se da
seguinte forma: 64% são do tipo vermelho (Red), 32% do tipo verde (Green) e
2% do tipo azul (Blue).
Como os bastonetes e os cones constituem dois tipos de sensores
diferentes que apreendem a intensidade de luz e as diferenças de cor, é
usual associá-los, respetivamente, aos conceitos de luminância e
crominância.
Estes conceitos estão relacionados com as diferentes formas de
representar as cores.
 Aditivo e Subtrativo

Os modelos de cor fornecem

métodos que permitem especificar
uma determinada cor.

É necessário distinguir modelo

aditivo de subtrativo, a saber:

Modelo Aditivo Modelo Subtrativo

Luz emitida e projetada num ecrã Luz refletida
Mistura de cores emitidas por fonte Mistura de cores de pintura ou
de luz impressão
Modelo Aditivo

Neste modelo a ausência de luz ou

de cor corresponde à cor preta,
enquanto que a mistura dos
comprimentos de onda ou das cores
vermelha, verde e azul indicam a
presença da luz ou a cor branca.

Este modelo explica a mistura dos

comprimentos de onda de qualquer
luz emitida.
Modelo Subtrativo

Neste modelo, ao contrário do

modelo aditivo, a mistura de cores
cria uma cor mais escura, porque
são absorvidos mais comprimentos
de onda, subtraindo-os à luz.

A ausência de cor corresponde ao

branco e significa que nenhum
comprimento de onda é absorvido,
mas sim todos refletidos.
Cores Primárias

As cores primárias são o vermelho, o

amarelo e o azul. São chamadas
assim porque não se pode obtê-las
com a mistura de nenhuma cor, já
com a mistura dessas três cores
podemos criar todas as outras.
Cores Secundárias

Cores secundárias ou binárias são

as cores que obtemos se se
misturarem duas cores primárias,
por exemplo:

Verde + Azul = Ciano

Azul + Vermelho = Magenta
Vermelho + Verde = Amarelo
Amarelo + Azul = Verde
Azul + Vermelho = Violeta
Vermelho + Amarelo = Laranja
Cores Terciárias

São obtidas pela mistura de

uma primária com uma ou
mais secundárias. 
Circulo Cromático

O disco cromático não é um

instrumento científico de
classificação de cores, mas é
muito útil no entendimento da
teoria das cores. Geralmente
usado para estudar as cores, o
disco cromático pode ser
desenvolvido em qualquer
material.   
Sistemas de cores - RGB

O que é o RGB?
É a abreviatura do sistema
de cores aditivas formado
pelas três cores: Vermelho
(Red), Verde (Green) e Azul
(Blue).
É o sistema aditivo de cores,
ou seja, de projeções de luz,
como monitores, ecrãs de
televisão e videoprojetores.
Sistemas de cores - RGB
Caraterísticas:
Qualquer cor no sistema digital é representada por um
conjunto de valores numéricos, cada uma das cores no
sistema RGB pode ser representada por um dos seguintes
valores: decimal de 0 a 1, inteiro de 0 (mais escuro) a 255
(mais claro). Nos programas de edição de imagem, esses
valores são habitualmente representados por meio de
notação hexadecimal, indo de 00 (mais escuro) até FF
(mais claro) para o valor de cada uma das cores.
Correspondência entre valores

Decimal 0 0,2 0,4 0,6 0,8 1

Inteiro 0 51 102 153 204 255
Percentagem 0 20 40 60 80 100
Hexadecimal 00 33 66 99 CC FF
Sistemas de cores - RGB
Um Byte permite 256 combinações possíveis - de 0 a 255, sendo o 0 a
ausência de cor e 255 a cor na sua totalidade. A transformação de
cores em bits através do RGB é simples:

Um Byte para o vermelho

Um Byte para o verde
Um Byte para o azul

Em RGB:
Preto: 0 0 0; Branco: 255 255 255; Amarelo: 255 255 0; Cyan: 0 255
255; Magenta: 255 0 255
Sistemas de cores - RGB
Exemplo de várias cores:

Cor Valor Decimal Valor Inteiro

Preto (0,0,0) (0,0,0)
Vermelho (R) (1,0,0) (255,0,0)
Verde (G) (0,1,0) (0,255,0)
Azul (B) (0,0,1) (0,0,255)
Branco (R+G+B) (1,1,1)=(1,0,0)+(0,1,0)+(0,0,1) (255,255,255)
Amarelo (1,1,0)= (1,0,0)+(0,1,0)+(0,0,0) (255,255,0)
Castanho (0.6,0.4,0.2) (153, 102, 51)
Sistemas de cores – RGB
Resolução e Tamanho

Uma imagem é uma representação discreta, isto é, constituída por

píxeis (PÍXEL – PIcture ELement) . O píxel, normalmente um quadrado
é a unidade elementar de brilho e cor que constitui uma imagem digital.

Resolução de uma imagem: Quantidade de informação que a

imagem contém por unidade de comprimento, isto é, o número de
píxeis por polegada, ppi (pixels per inch). A resolução pode também ser
definida, de forma imprópria, pelo tamanho, ou seja, pelo número de
píxeis por linha e por coluna. O nível de detalhe de uma imagem digital
determina os requisitos de armazenamento da mesma, quanto maior a
resolução de uma imagem maior será o tamanho do ficheiro de
armazenamento.
Sistemas de cores – RGB
Resolução e Tamanho
O nível de detalhe de uma imagem depende da informação de cada
píxel. Cada píxel é codificado de acordo com a cor e o brilho que
representa, isto é, ocupa em memória um número de bits que varia
de acordo com o número de cores, tons de cinza e brilho definido
para a determinada imagem.
Sistemas de cores – RGB
Profundidade de cor
Indica o número de bits usados para representar a cor de um píxel
numa imagem. Este valor é também conhecido por profundidade do
píxel e é definido por bits por píxel (bpp).
A tabela mostra a relação entre o número de bits e o número de cores que
podem ser produzidas e ainda os padrões gráficos utilizados em monitores e
placas gráficas

Profundidade de cor N.º de cores

Qualidade da cor Padrão gráfico
(n.º bits) produzidas

Preto e Branco
1 21=2 Monocromática
(bit 0 ou 1)

CGA
2 22=4 Cores de 2 bits (Color Graphics
Adapter)

EGA
4 24=16 Cores de 4 bits (EnhancedGraphics
Adapter)

VGA
Escala de cinzas ou
8 2 =256
8
(Video Graphics
cores de 8 bits
Adapter)

XGA
Cores de 16 bits
16 2 =65 536
16
(Extended Graphics
(high color)
Array

28x28x28=224 Cores de 24 bits

24 SVGA = SuperVGA
=16 777 216 (True Color)

32 232 =4 294 967 296 Cores de 32 bits SVGA = SuperVGA

Sistemas de cores – RGB
Indexação de cor
Consiste em representar as cores dos píxeis por meio de índices de uma
tabela (Lookup Table - LUT) e que, em alguns formatos de imagem, é
armazenada juntamente com a mesma num único ficheiro. As cores são
conhecidas como cores indexadas, porque estão referenciadas pelos
número de índices que são usados pelo computador para identificar cada
cor
As cores indexadas
reduzem o tamanho dos
ficheiros de imagens. As
indexadas estão limitadas
a 256 cores, podendo ser
qualquer conjunto de 256
cores de 16,7 milhões de
24 bits de cor.
Paleta de cor
Designação utilizada para qualquer subconjunto de cores do total
suportado pelo sistema gráfico do computador. Uma paleta de cores
pode também ser chamada de mapa de cor, mapa de índice, tabela de
cor, tabela indexada. Cada cor dentro da paleta é identificado por um
número (índice).

A utilização das paletas

permite diminuir o tamanho
dos ficheiros de imagem,
porque são apenas
armazenadas em memória
as cores utilizadas.
Sistemas de cores - CMYK
É um modelo constituido por Cyan, Magenta, Yellow em
que foi acrescentada a cor preta (Black). É um padrão de
três cores “primárias”, que combinadas formam cores
ilimitadas. A cor preta foi adicionada ao modelo por ser
mais fácil a sua obtenção quando impressa em papel.
Sistemas de cores - CMYK
Caraterísticas do CMYK
O padrão CMYK é mais usado para impressão em papel, onde 4
cores de tinta geram uma qualidade final melhor do que apenas 3.
Porém, monitores, televisões, etc. usam o padrão RGB, Red,
Green & Blue, onde são usadas apenas três cores. É por isto que
uma mesma imagem vista no monitor apresenta leves alterações
na tonalidade das cores ao ser impressa.
Sistemas de cores - HSV
HSV é a abreviatura para o sistema de cores formado
pelas componentes Hue (Tonalidade ou matiz), Saturation
(Saturação) e Value (Valor), este último representa a
luminosidade ou brilho de uma cor.
Do ponto de vista de um artista plástico é mais fácil
manusear as cores em função de tons e sombras do que
combinações de vermelho, verde e azul.
 Sistemas de cores - YUV
Este sistema de cores foi criado a par do
desenvolvimento de cor de televisão.
A componente Y corresponde ao brilho
(luminância) enquanto o U e o V
correspondem à cor (crominância).

Diferencia-se do RGB pois quer a cor quer o

brilho são tratados separadamente. De forma
a reduzir a informação transmitida só são
transmitidas as intensidades do azul e do
vermelho, sendo a intensidade do verde
calculada a partir da luminosidade total.
RGB – CMYK – HSV

• O modelo RGB permite a exibição de imagens de cor em

monitores;
• O modelo CMYK é utilizado na impressão;
• O modelo HSV é utilizado na mistura de cores do ponto
de vista artístico.
 Cores em HTML
As cores presentes em páginas WEB utilizam normalmente
o modelo RGB.
Inicialmente os monitores apenas permitiam uma paleta
limitada de 256 cores RGB. Atualmente o uso de 16,7
milhões de cores não traz problema para qualquer
computador que tem capacidade de processar este número.
No entanto há dispositivos que permitem visualizar
documentos em HTML e cuja capacidade cromática é
limitada como por exemplo os telemóveis. Por isso para o
desenvolvimento de páginas WEB é recomendável utilizar
um conjunto de 216 cores.
Geração e captura de imagens
Bitmap / Vetorial
Formatos de ficheiros de imagem
mais comum

Existe a necessidade de transferir uma imagem de um

programa para outro, onde cada programa tem as suas
capacidades, podendo vir a acrescentar à imagem aspetos
próprios de cada um. Assim, os vários programas devem
poder importar e exportar as imagens de uns para os outros
de forma rápida e eficiente.
Os programas de computador que trabalham com imagens
estão genericamente divididos em duas categorias: formato
Bitmap-baseado num mapa de bits (imagem) e formato
Vetorial -baseado em fórmulas matemáticas (gráficos ou
desenho).
Imagem Bitmap ou Mapa de
Bits
Bitmaps são imagens que, apresentadas no monitor, são divididas
em pequenos quadradinhos, cada um, com uma cor. Esses
quadradinhos chamam-se pixels. Quando se grava na modalidade
bitmap, grava-se o conteúdo de cada pixel. Num programa que
manipula bitmaps, como o Paint do Windows ou o Photoshop, pode
alterar a cor até mesmo de um único pixel!

Uma fotografia digitalizada é um exemplo claro de imagem bitmap.

No redimensionamento do bitmap
O sistema perde quando precisamos redimensionar imagens. Como
os pixels não são redimensionáveis, perdemos pixels ao reduzirmos
o tamanho da imagem. De modo oposto, ao ampliarmos uma
imagem bitmap, são acrescentados pixels (o programa INVENTA os
pixels que são acrescentados). Por isso, por mais sofisticada que
seja a interpolação de pixels, imagens bitmaps com tamanho
alterado não apresentam qualidade muito boa, especialmente,
quando ampliamos.
Na figura, o lápis menor é um bitmap obtido de um desenho vetorial
(original). Ao ampliar a o lápis num programa bitmap, como o Paint,
por exemplo, note que a qualidade do resultado vai diminuindo.
 Bitmap / Vetorial
Programas conhecidos que criam ficheiros bitmap (pixel):
Adobe PhotoShop;
Corel Photopaint;
Corel Painter;
Paint Shop Pro.
Programas que criam arte vetorial (também conhecidos como arte orientada
ao objeto) são:
CorelDRAW;
Illustrator;
Freehand;
RealDraw
Flash.
Esses programas cada vez mais integram num mesmo programa a
manipulação dos dois tipos de ficheiros.
 Imagem Vetorial
Como na física, onde um vetor é uma entidade definida pelos atributos
direção e sentido, podemos dizer que, na comunicação visual, os
vetores (imagens vetoriais) são objetos definidos, também, por seus
atributos.
Assim, de modo simplificado, o objeto abaixo (imagem vetorial) poderia
ser definido da seguinte maneira:

•Tipo de Curva = Circunferência

• Raio = 1 cm
• Preenchimento = amarelo
• Contorno = azul

Para guardar esse círculo, não precisamos gravar

a imagem propriamente dita, que seriam os pixels
(gastaria muita memória).
Se guardarmos os atributos, como
"Circunferência", preenchida de "amarelo",
contornada por "azul" e com raio de "1 cm",
qualquer computador poderia reproduzi-la! Esta é
a principal característica de uma imagem vetorial.
Cada vez que o Illustrator (ou outro software vetorial como CorelDRAW, ou o
PowerPoint, por exemplo) for carregar uma imagem vetorial, ele lerá, do disco,
os atributos e REDESENHARÁ a imagem, claro, obtendo uma idêntica à original!

Ainda, pensando nessa linha, se decidíssemos aumentar o raio para 3 cm,

apesar de gastarmos mais espaço de tela, não gastaríamos mais espaço no
disco. Afinal, o círculo (os pixels que o compõem) não será gravado no disco.
Apenas os atributos!

Observe como fica perfeita a ampliação de uma imagem vetorial. O lápis foi
construído (e ampliado) num programa de vetores (CorelDRAW) e não tem o
acabamento de uma foto.
Tipos de compressão de
imagem

Compressão sem perdas: a compressão

seguida pela descompressão preserva
integralmente os dados das imagem;

Compressão com perdas: a compressão

seguida da descompressão conduz à perda de
alguma informação da imagem (que pode não
ser aparente ao sistema visual humano).
Tipos de compressão de imagem

A técnica de compressão com perdas têm como base de

funcionamento a eliminação de alguma da informação da
imagem original, de modo a obter uma representação mais
compacta. Uma vez descartada, essa informação não
poderá ser recuperada.

Cada vez que se aplica uma técnica de compressão com

perdas, se os dados de uma imagem fossem repetidamente
comprimidos, descomprimidos e, em seguida comprimidos
novamente, a sua qualidade iria deteriorar-se
progressivamente.
Tipos de compressão de imagem
Compressão
SEM perda (lossless compression)

original data

compressed data

COM perda (lossy compression)

original data ~ decompressed data ~ decompressed data

compressed data recompressed data

Formatos de imagens bitmap:

bmp - é o formato mais comum (paint);

gif - formato de compressão sem perdas, não perdendo a qualidade quando é

alterado o seu tamanho original, ocupam pouco espaço, sendo perfeitos para o
desenvolvimento de páginas da internet. Um fx gif pode ser animado quando
várias imagens se abrem com um certo movimento;

jpeg - tem vários níveis de compressão com perdas, é um formato especial

para trabalhar em páginas web por serem fxs que ocupam pouco espaço e ás
vezes menores que os de formato gif;

pcx - é um dos formatos bit map mais antigo, criado para o programa
paintbrush;
pdf - criado pelo programa Adobe Acrobat, é usado para converter e
comprimir de forma substancial documentos de texto e imagem;

png - é um formato de compressão, sem perdas, que substitui o formato gif

para a web;

xcf – é utilizado na aplicação GIMP;

tiff - é um formato sem compressão utilizado em programas de edição e

pintura e com software de digitalização, é o maior em tamanho e o melhor em
qualidade de imagem;
Formatos de imagens vetoriais:

svg (scalable vector graphics) - tende a ser um formato padrão para a web e
definir sobre a linguagem XML;

sxd - formato do open office permite de forma simples o desenho vetorial em

trabalhos;

cdr - é utilizado na aplicação corel draw;

wmf (windows meta file) - é reconhecido pela maioria dos programas de

edição de texto ou de imagem do microsoft office;

Os desenhos vetoriais podem ser guardados em formato bit map mas depois
de convertidos não podem ser trabalhados como vetores.