Utilização do Sistema

Multimédia
1
Objetivos
• Reconhecer os diferentes modelo de cor.

• Caracterizar os atributos elementares das imagens.

• Caracterizar os formatos de ficheiros de imagem.

• Saber utilizar programas de desenho e pintura.

• Saber alterar os atributos da imagem.

• Caracterizar os formatos de ficheiros de texto.

• Caracterizar os formatos de ficheiros de som.

• Conhecer software, de captura, edição e gravação de som num suporte ótico.

• Caracterizar os standards relacionados com vídeo.

• Compreender a compressão e a necessidade de codecs de vídeo.

• Conhecer software, de captura, edição e gravação de vídeo num suporte ótico.

• Conhecer algumas técnicas de animação 2D.

• Saber utilizar um programa de animação 2D.

• Identificar métodos, tecnologias e software de divulgação de vídeo e sons via rede.

 1. Bases sobre a teoria da cor aplicada
aos sistemas digitais
2
Teoria da cor

O conceito de cor está associado à perceção, pelo sistema de visão humana da luz
emitida, difundida ou refletida pelos objetos, sendo considerada um atributos dos
mesmos.

A importância da luz

A cor de um objeto DEPENDE das características das fontes de luz que o

iluminam, da reflexão da luz produzida pela sua superfície, das caracterí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 luz contêm uma variedade de ondas eletromagnéticas com diferentes
comprimentos. Se o comprimento de onda eletromagnética pertencer ao
intervalo 380 a 780 nm é detetada e interpretada pelo sistema de visão do ser
3 humano.

Espectro de luz visível do sistema humano - 1 nm = 10-9

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 da visão e
esta pode ser escotópica e fotópica.

Escotópica é assegurada por um único tipo de bastonetes existentes na retina,

sensíveis ao brilho e não detetam a cor. Sensíveis à alteração de luminosidade.

Fotópica é assegurada por um conjunto de três tipos diferentes de cones

existentes na retina. São sensíveis à cor, aos comprimentos de onda da luz visível,
distribuídos da seguinte forma: 64% do tipo vermelho, 32% do tipo verde e 25 azul.
 Luminância e crominância
• São relacionados com as diferentes formas de
4 representar as cores.

Luminância Crominância

• É uma medida da densidade da intensidade • A crominância (C), é um dos dois

de uma luz refletida numa dada direção. elementos que conformam um sinal de
vídeo junto com a luminância (Y).
• Descreve a quantidade de luz que atravessa
ou é emitida de uma superfície em questão,
e decai segundo um ângulo sólido.

A crominância refere-se ao valor das cores, enquanto a luminância se refere às luzes -

branco e preto-. Os diferentes sistemas de difusão de vídeo -NTSC, PAL, SECAM, etc.-
permitem misturar ou enviar por separado ambos os elementos. Em retransmissões
televisivas, os valores C/Y são o primeiro a comprovar, posto que uma má qualidade ou
sincronização resultaria num péssimo sinal.
 1.1. Modelo aditivo e modelo subtrativo
• Antes de descrever alguns modelos de cor convém diferenciar modelo
5 aditivo de subtrativo
Modelo aditivo

• Num modelo aditivo a ausência de luz ou de cor correspondente à cor

preta, enquanto que a mistura dos comprimentos de onda ou das cores
vermelhas (Red), verde (Green) e azul (Blue) indica a presença de da luz ou
cor branca.

• O modelo aditivo explica a mistura dos comprimentos de onda de qualquer

luz emitida.
Modelo Subtrativo

• Num modelo subtrativo, 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 correspondente ao branco e
significa que nenhum comprimento de onda é absorvido, mas sim todos
refletidos.

• O modelo subtrativo explica a mistura de pintura e tintas para criarem cores

que absorvem alguns comprimentos de onda da luz e refletem outros. Assim,
a cor de um objeto corresponde à luz refletida por ele e que os olhos
recebem.
 1.1. Modelo aditivo e modelo subtrativo

A aplicação dos modelos aditivo e subtrativo

Modelo Aditivo Modelo subtrativo

Luz emitida e projetada num ecrã Luz refletida

Mistura de cores emitidas por fontes de luz Mistura de cores de pintura ou impressão
 1.2. Os Modelos de cor

7 O porquê de se criar modelos de cor?

• Uma das perguntas frequentes é a questão de como são geradas,

armazenadas, manipuladas reproduzidas as imagens pelos diferentes
dispositivos que utilizam cor. Para isso é necessário representá-las através de
modelos que são aplicados em diferentes situações.

• Estes modelos fornecem métodos que permitem especificar uma

determinada cor.

Modelos de cor: RGB,CMYK, HSV e YUV

 1.2.1. Modelo RGB
A) Caracterização do modelo
8
• O MODELO RGB é um modelo aditivo, que descreve as cores como uma combinação
das três cores primárias: vermelho, verde e azul.

• Em termos técnicos, as CORES PRIMÁRIAS de um modelo são cores que não resultam da
mistura de nenhuma outra cor.

• Como o modelo RGB é aditivo, a cor branca corresponde à representação simultânea

das três cores primárias (1,1,1) enquanto que a cor preta corresponde à ausência das
mesmas (0.0.0).

• A escala de cinzentos é criada quando se adicionam quantidades iguais de cada cor

primária, permanecendo na linha que junta os vértices preto e branco.

Representação
do modelo RGB
 A) Caracterização do modelo (cont.)
• Num sistema digital, qualquer cor é caracterizada por valores numéricos, por exemplo, no modelo
RGB podes ter valores decimais de 0 a 1, valores inteiros de 0 a 255, percentagens de 0% a 100% e
hexadecimais de 00 a FF.
9 Correspondência entre valores

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

Correspondência Inteiro 0 51 102 153 204 255
entre valores nos
Percentagem 0 20 40 60 80 100
vários formatos
Hexadecimal 00 33 66 99 CC FF

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)

Várias cores do Branco (R+G+B) (1,1,1) = (1,0,0) + (0,1,0) + (0,0,1) (255,255,255)

modelo RGB Amarelo (1,1,0) = (1,0,0) + (0,1,0) + (0,0,0) (255,255,0)
representados por
valores decimais. Ciano (0,1,1) = (0,0,0) + (0,1,0) + (0,0,1) (0,255,255)

Magenta (1,0,1) = (1,0,0) + (0,0,0) + (0,0,1) (255,0,255)

90% de preto (0.1, 0.1, 0.1) (25,25,25)

Azul-celeste (0, 0.8, 1) (0,204,255)

Castanho (0.6, 0.4, 0.2) (153, 102, 51)

 1.2.1. Modelo RGB

10 B) Aplicações

• O modelo RGB está presente nos equipamentos como monitores de

computadores e ecrãs de televisão.

• Exemplo: As cores emitidas pelos computadores (cores primárias)

processam-se no olho e no cérebro humano, interpretando os vários
comprimentos de onda. Com esta combinação de cores é possível
criar outras que são possíveis observar no monitor.
 1.2.1. Modelo RGB

11 C) Resolução e tamanho
 1.2.1. Modelo RGB

12 D) Profundidade da cor
• A profundidade da cor indica o numero de bits usados para representar a cor de um pixel
numa imagem. Este valor é também conhecido por profundidade do pixel e é definido
por bits por pixel (bpp)

A profundidade de
cor das imagens varia
com o numero de
cores presentes na
imagem. No modelo
RGB, com a
profundidade de 24
bits, existe a
possibilidade de
escolher 16,7 milhões
de cor .
 1.2.1. Modelo RGB

13 E) Indexação da cor

• A indexação da cor consiste em representar as cores dos pixéis por meio de

índices de uma tabela (lookup table) e que, em alguns formatos de imagem, é
armazenada juntamente com a mesma num único ficheiro. As cores desta tabela
são conhecidas como indexadas, porque estão relacionadas pelos números de
índice que são usados pelo computador para identificar a cor.

• Enquanto uma imagem RGB é definida separadamente por valores de vermelho,

verde e azul para cada pixel numa imagem, uma imagem de cor indexada cria
uma tabela que defini um determinado número de cores e cada pixel é definido
por um índice de cor nessa tabela.

• As cores indexadas reduzem o tamanho dos ficheiros das imagens. No entanto, se

a imagem for uma fotografia, esta pode originar um ficheiro de cores indexados
de tamanho grande.

• As cores indexadas estão limitadas a 256 cores.

 1.2.1. Modelo RGB

14 E) Indexação da cor (exemplo)

Imagem e as respetivas caixas de diálogo colormap

do GIMP com uma tabela (paleta) de 16 cores.

Comparação da composição das cores preta,

vermelha e branca com os seus respetivos índices
numa tabela correspondentes à da figura ao lado.

Cor Índice RGB (inteiro) RGB (hexadecimal)

Preto 0 0, 0, 0 00, 00, 00
Vermelho 9 255, 0, 0 FF, 00, 00
Branco 15 255, 255, 255 FF, FF, FF
Caixas de diálogo
colormap do GIMP
 1.2.1. Modelo RGB

15 F) Paleta de cores

• Uma paleta de cores é a 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 ou tabela de procura de cores (Lookup
Table – LUT)

• Cada cor dentro da paleta é identificada por um número (índice)

• A utilização de paletas de cor permite diminuir o tamanho dos ficheiros de

imagens, porque apenas são armazenadas em memória as cores utilizadas.
 1.2.1. Modelo RGB

16 G) Complementaridade de cores As cores primárias

no RGB e as suas
cores
complementares.
• Uma cor complementar de uma determinada cor primária é a cor
que se encontra quando é efetuada uma rotação de 180 graus num
anel de cor, (figura ao lado). No modelo RGB estas cores
complementares são também chamadas de cores secundárias ou
cores primárias de impressão.

• Em termos técnicos, as cores secundárias ou complementares de um

modelo são cores que resultam da mistura de quantidades iguais de
duas cores primárias adjacentes.

Primária Complementar
Vermelho (Red) Ciano (Cyan) As cores primárias no
RGB e as suas cores
Verde (Green) Magenta (Magenta) complementares.

Azul (Blue) Amarelo (Yellow)

 1.2.2. Modelo CMYK
A) Caracterização do modelo
17
• O MODELO CMYK é constituído a partir do modelo CMY em que foi acrescentado a cor
preta (representada pela letra K). O Modelo CMY é um modelo subtrativo, descrevendo
as cores como uma combinação das três cores primárias ciano, magenta e amarelo. A
cor preta foi adicionada ao modelo por ser mais fácil a sua obtenção quando impressa
em papel do que recorrendo à mistura de cores.

• Este modelo é muito semelhante ao anterior, contudo a posição das cores representadas
no cubo é diferente. Este modelo baseia-se nas cores que são refletidas e absorvidas no
espetro, daí este modelo ser subtrativo por as cores são criados pela redução de outras.

• As cores primárias do modelo CMYK são as cores secundárias do RBG e as cores primárias
de RGB são as cores secundárias de CMY.

Representação
do modelo CMYK
 1.2.2. Modelo CMYK

18
B) Aplicações

• O modelo CMYK é utilizado na impressão do papel, empregando as

cores do modelo CMY e a tinta preta (K) para realçar melhor os tons
de preto e cinza

• Exemplo: Este modelo utiliza-se em impressoras, fotocopiadoras,

pintura e fotografia, onde os pigmentos de cor das superfícies dos
objetos absorvem certas cores e refletem outras.
 1.2.3. Modelo HSV

A) Caracterização do modelo
19

• Este modelo, é definido pelas grandezas de tonalidade, saturação e

valor (luminosidade ou brilho).
• A TONALIDADE é a cor pura com saturação e luminosidade máximas
(laranja, vermelho, verde,…), permitindo fazer a distinção das várias cores
puras e exprime-se num valor angular entre 0 e 360 graus.
• A SATURAÇÃO indica o maior ou menor intensidade da tonalidade, isto é,
se a cor é pura ou esbatida. Uma cor saturada ou pura não contém a cor
preta nem a branca. Desta forma a saturação é utilizada para descrever
quão viva ou pura é a cor e em termos técnicos descreve a quantidade
de cinzas numa cor.
• O VALOR traduz a luminosidade ou o brilho de uma cor, isto é, se uma cor
é mais clara ou mais escura, indicando a quantidade de luz que a
mesma contém. O termo luminosidade está relacionado com a luz
refletida, enquanto que o termo brilho está relacionado com a luz
emitida. Representação
• A tonalidade e a saturação são elementos de crominância (fornecem do modelo HSV
informações acerca da cor) e a luminosidade e o brilho são elementos
de luminância (luz).
 1.2.3. Modelo HSV

20
B) Aplicações

• O modelo HSV é muito utilizado por artistas plásticos nas suas pinturas
pois estes combinam as cores com elementos de brilho e saturação.
Desta forma, este modelo é mais intuitivo de utilizar do que o RGB.

• De um ponto de vista artístico é mais fácil trabalhar com cores que

contêm sombras e tons do que apenas com misturas de cores.
 1.2.4. Modelo YUV

A) Caracterização do modelo
21

• O modelo YUV foi criado a par do desenvolvimento da transmissão de

sinais de cor de televisão.
• Este modelo baseado na luminância permite transmitir componentes de
cor em menos tempo do que seria necessário se fosse utilizado o modelo
RGB.
• Ao mesmo tempo, o modelo YUV permite transmitir imagens a preto e
branco e imagens de cor de forma independente.

• O modelo YUV guarda a informação de luminância separada da

informação de crominância ou cor.
• Componentes deste modelo:
- Componente Brilho (Y)
- Componente crominância (U- blue; Y- red) Representação
do modelo YUV
• Com este modelo é possível representar uma imagem a preto e branco
utilizando apenas a luminância e reduzindo bastante a informação que
seria necessária noutro modelo.
 1.2.4. Modelo YUV

22
B) Aplicações

• O modelo YUV é adequado às televisões a cores, porque permite enviar a

informação da cor separada da informação de luminância. Assim, os sinais de
televisão a preto e branco e de televisão a cores são facilmente separados. E
também é adequado para sinais de vídeo.

• Este modelo permite uma boa compressão dos dados, porque alguma
informação de crominância pode ser retirada sem implicar grandes perdas na
qualidade da imagem, pois a visão humana é menos sensível à crominância do
que à luminância.

• O modelo YUV pelos sistemas de televisão europeu PAL e Francês SECAM e na

conversão de formatos JPEG/MPEG. No sistema de televisão americano e asiático
é utilizado um modelo de cor equivalente YIQ.
 Modelos de cor por diferentes equipamentos e conversão

23

Exemplos de utilização de
vários modelos de cor por
diferentes equipamentos e a
necessidade de conversão
 1.3. Cores em HTML

24

• As cores presentes em páginas WEB utilizam normalmente o modelo RGB.

• Durante o desenvolvimento de um website, existem diversos fatores que interferem

diretamente na qualidade do mesmo, e em como o usuário receberá as informações do
conteúdo. Uma das coisas mais importantes para a criação de um layout é a escolha certa
das cores a utilizar. Por esta razão, ter à mão ferramentas que facilitem no processo como
uma tabela de cores HTML é essencial.

• Antigamente, os monitores suportavam apenas 256 cores RGB, o que limitava a quantidade
de tons disponíveis. Hoje em dia, os monitores modernos trabalham com milhões de cores,
mas mesmo assim ainda existem as cores seguras para web.
 2. Geração e captura de imagem

2.1 Formatos de ficheiro de imagens

25

• Existe a necessidade muitas vezes de transferir uma imagem de um programa para outro,
Assim, os vários programas devem poder importar e exportar as imagens de uns para outros de
forma rápida e eficiente.

• Existem vários formatos para guardar os ficheiros de imagens digitais e os vários programas
devem ter capacidade para ler e guardar nesses formatos.

• Apesar, de muitas vezes, se guardar no formato que, por defeito, é apresentado pelo
programa, é preciso conhecer os vários formatos e saber, qual deles é melhor e saber também
qual o o software mais adequado para o trabalho a realizar.

• Os programas de computador que trabalham com imagens estão genericamente divididos

em duas categorias: programas bitmap (imagem) e programas vetoriais (gráficos ou desenho).
 2. Geração e captura de imagem
2.1.1. Tipos de formatos para imagens Bitmap
26
A informação de uma imagem bitmap pode ser guardada numa grande quantidade de
formatos de ficheiros.

Alguns exemplos:

• BMP (Bitmap)
O BMP (bitmap) é um formato muito popular, devido ao programa de pintura do windows, o
PAINT.
• GIF (Graphics Interchange Format)
É um formato com conversão sem perdas, não perdendo a qualidade quando é alterado o
seu tamanho original. São ficheiros que ocupam um pequeno espaço no computador, sendo
perfeitos para o desenvolvimento de páginas na internet. Não suporta mais de 256 cores e é lido
por muitos programas. O sucesso deste formato na WEB deveu-se à transparência, animação e
entrelaçamento.
• JPEG (Joint Photographic Expert Group)
A extensão JPEG, JPG é um formato com várias níveis de compressão com perdas. Muito
popular para compressão de ficheiros mas que implica a perda de informação e qualidade de
imagem.
 2. Geração e captura de imagem
2.1.1. Tipos de formatos para imagens Bitmap (continuação)
27
A informação de uma imagem bitmap pode ser guardada numa grande quantidade de
formatos de ficheiros.

Alguns exemplos (continuação):

• PCX (PC Paintbrush)

O PCX é um dos formatos bitmap mais antigos criado para o programa Panitbrush da
Microsoft.
• PNG (Portable Network Graphics)
O PNG é um formato com conversão sem perda, que substitui p formato GIF para a WEB,
suportando uma profundidade de cor até 48 bits, mas não comportando animação.
• XCF (eXperimental Computing Facility)
O XCF é o formato utilizado na aplicação GIMP.
• TIFF (Portable Network Graphics)
O TIFF é um formato com compressão muito utilizado em programas bitmap de pintura e
edição de imagem e com software de digitalização. É o maior em tamanho
 2. Geração e captura de imagem
2.1.2. Tipos de formatos para imagens vetoriais
28
A informação de uma imagem vetorial pode ser guardada numa grande quantidade de
formatos de ficheiros.
Alguns exemplos:

• SVG (Scalable Vetor Graphics)

O SVG tende a ser um formato padrão para a WEB, especificado pela W3C e definido sob a
linguagem XML.
• PS (PostScript) e EPS (Encapsulated PostScipt)
Os formatos PS e EPS são reconhecidos por quase todos os programas de edição de texto ou
imagem que suportam imagem vetorial.
• CDR (CorelDRAW)
O formato CDR é utilizado na aplicação CorelDRAW.
• WMF (Windows Meta File)
O formato WMF é reconhecido pela maioria dos programas de edição de texto ou de imagem
do Microsoft Office.
• SXD (OpenOffice.org DRAW)
O formato SXD do OpenOffice.org Draw permite de forma simples o desenho vetorial em
trabalhos.
 2.2. Gráficos vetoriais

Noções e características
29
• Os gráficos vetoriais não são construídos por pixels (embora sejam exibidos na tela do
computador como pixels). Eles são, na verdade, formados através de expressões matemáticas
e as instruções inseridas produzem uma série de elementos bidimensionais (2D) linhas, curvas
retângulos, polígonos, etc., ou tridimensionais (3D), como sólidos ou outros volumes.

• Os elementos contidos em desenhos vetoriais

podem ser facilmente deslocados e redimensionadas.

• Quando se trabalha com um programa vetorial

(ou de desenho) não se mexe na resolução da imagem, pois
a qualidade da imagem vetorial é baseada na resolução
(dpi-dots per inch) e não na resolução de imagem (ppi).

• Os gráficos vetoriais são, geralmente, muito menores em tamanho do que os gráficos de

bitmap porque não se baseiam na resolução.

Os desenhos vetoriais podem ser guardados no formato bitmap mas, depois de convertidos, não
podem ser trabalhados como vetores. Portanto, é aconselhável ter sempre a versão vetorial do
mesmo.
 2.2. Gráficos vetoriais

Exemplos de programas de desenho vetorial

30
Adobe
ilustrator Corel Draw

Inkscape

Formato .AI, .AIT Formato CDR

Freehand
Autocad

Formato SVG

Formato .DWG Formato .FH?

 2.2. Gráficos vetoriais

Programas de desenho vetorial

31
 Gráficos vetoriais e bitmap
Todos os ficheiros gráficos de computador se enquadram em uma das duas
32 técnicas: gráficos de bitmap ou vetor. O primeiro é feito a partir de pixels, o último
é feito a partir de linhas e formas.

Imagens em vetor
podem ser ampliadas
sem distorções.
 2.3. Gráficos Bitmap (raster)

Noções e características
33
• Os gráficos de bitmap são os tipos mais comuns e são compostos de pixels coloridos. Pixels são
definidos como pequenos quadrados, de diferentes cores que, uma vez juntos, formam uma
imagem.

• Neste formato as imagens são trabalhadas

ao nível do pixel onde pode estar disponível
uma vasta gama de cores.
• Quando a imagem é criada num programa bitmap,
não é fácil alterar partes da imagem, isto é, não é
possível clicar numa parte da imagem e movê-la.
• A qualidade das imagens dependem da resolução e
da profundidade de cor.
• As imagens bitmap de alta resolução geram ficheiros
de tamanho muito grande.

• A dificuldade em trabalhar com os gráficos bitmap é que,

ao ampliá-los, ocorre a perda de definição e uma diminuição considerável na qualidade.

• Formatos de arquivos comuns de dados de imagem de bitmap incluem PSP, BMP, GIF, JPEG e
PNG para o uso da Internet e TIFF para o uso de impressão.