introdução i multimÍdia e hipermÍdia formatos digitais de ... · introdução i multimÍdia e...

Introdução IMULTIMÍDIA E HIPERMÍDIAFormatos Digitais de Imagens

Prof. Ms. Ricardo Seyssel

Prof. Ms. Ricardo Seyssel

Editores vetoriais são frequentemente contrastadas com editores de bitmap , e as

suas capacidades se complementam. Eles são melhores para layouts de páginas,

tipografia, logotipia, ilustrações técnicas e artístico-editoriais, história em

quadrinhos, clip arts, diagramas, complexos padrões geométricos, fluxogramas e

infográficos.

Editores de bitmap são mais adequados para retoque, processamento de fotos,

ilustrações realistas, colagens e ilustrações desenhadas à mão com uma caneta

digital (Wacom). As versões recentes dos editores bitmap, como GIMP, Photoshop,

Photopaint, PaintShop Proanexaram suporte para vetor (por exemplo, os caminhos

editáveis), e os editores de vetores como o CorelDRAW, Adobe Illustrator, Xara

Xtreme, Adobe Fireworks, Expression Design, Inkscape estão adotando efeitos raster

que antes eram limitados a editores bitmap ( por exemplo, ofuscamento).

Formatos Digitais de Imagens

BITMAP & VETORIAL

> Existem dois tipos de arquivos fundamentais na computação gráfica: bitmap e vetorial.

Alguns programas mais conhecidos que criam arquivos bitmap (pixel) são: Adobe

PhotoShop, Corel Photopaint, Corel Painter, Corel Paint Shop Pro, Gimp e outros.

> Já programas que criam arte vetorial (também conhecidos como arte orientada a

objeto) são CorelDRAW, Illustrator, Xara, Inkscape, RealDraw, entre outros.

> O programa Flash também trabalha com vetorial, porém ele é destinado a construção

de artes e interação para a Internet. Um software que foi descontinuado e esteve por algum tempo

nesse mercado, foi o Microsoft Expression Design 4, a última versão se tornou gratuita.

> Esses programas cada vez mais integram num mesmo aplicativo a manipulação dos dois tipos de

arquivos.

Prof. Ms. Ricardo SeysselFormatos Digitais de Imagens

As oscilações eletromagnéticas (radiações) divergem entre si

por seus diferentes comprimentos de onda (frequência)

RAIO “X”

RAIOS GAMAE ALFA

CORRENTEELÉTRICA

CALOR

LUZ TELEVISÃO

RÁDIO

1/1000000 nm 1/1000 nm 1/1000 mm 1 mm 1 m 1 km 1000 km1 nm 400 nm 700

A luz é constituída de ondas eletromagnéticas. Pertencem à família das ondas eletromagnéticas, além da luz, também a corrente elétrica, ondas de rádio e televisão, os raios alfa e as radiações cósmicas.

O comprimento de onda das oscilações eletromagnéticas varia entre 1000 quilômetros a frações de milicrom. As oscilações das ondas eletromagnéticas visíveis, portanto a luz, variam de comprimento entre

As cores do espectro

ONDAS ELETROMAGNÉTICAS


400 nm 700 nm

9nm= nanômetro > 1 metro = 10 (1o.ooo.ooo.ooo) nanômetros

Variação de comprimento das oscilações das ondas eletromagnéticas visíveis (a luz),

entre 400 e 700 nm (nanômetros) ou milimicra.

Ultravioleta (UV)380 a 1 nm

Infravermelho700 nm a 1 mm


Passagem da luz branca através de um prisma, sua decomposição e projeção sobre uma tela branca

Luz Branca

Tela Branca

VermelhoLaranjaAmareloVerdeC

ianoVio

leta

Na luz branca estão contidas todas as cores visíveis, portanto a cor é apenas uma parte da luz branca. Mediante a refração da luz branca em um prisma de cristal se produz o espectro. O espectro é a separação das radiações contidas na luz; sua ordem é sistemática, segundo o comprimento de onda.

Prisma de Cristal



Violeta Azul Ciano Verde Laranja VermelhoAmarelo

400-450 450-480 480-490 490-560 560-580 580-600 600-700


Esta parte do espectro eletromagnético, entre 400 e 700 nm é chamada de espectro visível em três partes proporcionais teremos a predominância de três cores: Vermelho, Verde e Azul Violeta que traduzidas para o inglês serão: Red, Green and Blue, ou seja, .RGB

A luz branca é luz formada pela adição destas três luzes coloridas RGB, no sistema conhecido como Síntese Aditiva ou Sistema Aditivo que pode ser observado em qualquer monitor de computador ou televisão que possui somente fósforos destas três cores e podem compor todas as demais cores que observamos.

s cores do espectro são , A azul-violeta, azul-ciano, verde, amarelo vermelho-

laranja vermelho e . As cores de um só comprimento de onda se chamam

monocromáticas. O não está contido no espectro devido ao fato de não magenta

ser monocromática. Obtém-se o magenta sobrepondo-se a projeção dos extremos,

ou seja, o vermelho-laranja e o azul-violeta.

MagentaAzul-violeta Vermelho-laranja


A cor magenta

As cores básicas da sistema aditivo são , e vermelho azul verde.

SISTEMA ADITIVO - Resultado da mistura das três cores-luz

O ponto inicial do sistema aditivo é o pretoEste correspondente à não existência de oscilações eletromagnéticas visíveis

O ponto final do sistema aditivo é o branco

O ponto inicial

O ponto final





Sistema de projeção de luz:Dispositivos como: monitores e datashows;

RGBA – canal Alpha para indicação de transparência;Há mais de 16,7 milhões de combinações diferentes.

Representação numérica:

Escala de 0 à 255 HexadecimalBranco

Branco

255 255 255 #FFFFFFVerde 0 255 #00FF00Vermelho 255 0

0#FF0000

Preto

Preto

0 0 0 #000000

Fatores de 0.0 a 1.0Branco 1.0 1.0 1.0Verde 0.0 1.0 0.0Vermelho 1.0 0.0 0.0Preto 0.0 0.0 0.0

R G B

0

Um adaptador de display típico do ano 2007 utiliza, geralmente, 8 bytes para cada uma das cores (RGB), alcançando 256 possíveis valores para cada cor.

Para ocorrer o degradê ou gradiência suave entre o preto e

o branco são necessárias256 linhas



Sistema de projeção de luz:monitores

R G B

Dot Pitch é o termo utilizado para referenciar os pontos no monitor. Lembrando, o canhão trabalha com 3 feixes de cores. Na tela, a camada de fósforo gera a cor correspondente ao feixe através da intensidade da corrente elétrica. Cada ponto da tela consegue representar somente uma cor a cada instante. Cada conjunto de 3 pontos, sendo um , um e um , é denominado tríade. vermelho verde azulDot Pitch é, basicamente, a distância entre dois pontos da mesma cor. Quanto menor esta distância melhor a imagem. O Dot Pitch é medido em milímetros. Para uma imagem com qualidade, o mínimo recomendado é o uso de monitores com Dot Pitch igual ou menor que 0,28 mm. wikipedia

C RM GY BK

SISTEMA SUBTRATIVO e SISTEMA ADITIVO

Relação entre os sistemas de cor

No modelo de cores RGB, as cores dos pixels podem ser mudadas combinando-se vários valores de

vermelho, verde e azul. Cada uma das três cores primárias tem um intervalo de valores de 0 até 255. Quando

você combina os 256 possíveis valores de cada cor, o número total de cores fica em aproximadamente 16,7

milhões (256 X 256 X 256). Isso pode parecer uma quantidade imensa de cores, mas lembre-se de que elas

constituem apenas uma parte visível das cores da natureza. Contudo, 16,7 milhões de cores é suficiente para

reproduzir imagens digitalizadas cristalinas em um monitor capaz de exibir cores 24 bits.

Escala de Cinzas Verde = (0,1,0)

Vermelho = (1,0,0)

Magenta = (1,0,1)Azul = (0,0,1)

Preto = (0,0,0)

Branco = (1,1,1)

Ciano = (0,1,1)

Amarelo = (1,1,0)G

R

B


As cores básicas da sistema subtrativo são ciano, e amarelo magenta

SISTEMA SUBTRATIVO - Resultado da mistura das três cores-pigmento

MAG

EN

TA

MAG

EN

TA

MAG

EN

TA

AM

AR

ELO

AM

AR

ELO

AM

AR

ELO

CIA

NO

CIA

NO

CIA

NO



O ponto inicial da síntese Subtrativa é o brancoEsta correspondente a todas oscilações eletromagnéticas visíveis

O ponto final da síntese aditiva é o preto

MAG

EN

TA

MAG

EN

TA

MAG

EN

TA

AM

AR

ELO

AM

AR

ELO

AM

AR

ELO

CIA

NO

CIA

NO

CIA

NO

O ponto inicial

O ponto final

Sistema de impressão - pigmento:

Cyan, Magenta, Yellow e BlacK

Dispositivos como: impressoras e fotocopiadorasC M Y K

Representação numéricaintensidade (0% a 100%)

Branco 0% 0% 0% 0%Verde 100% 0% 100% 0%Vermelho 0% 100% 100% 0%Preto 0% 0% 0% 100%

ABS (Agfa Balanced Screening)

Sublima



Sistema de impressão - retícula:

ABS (Agfa Balanced Screening)

Sublima


C M Y K

A retícula tradicional ou convencional AM é composta de pontos equidistantes e com dimensões variáveis.

(Amplitude Modulada)

Ângulos da retícula

Amarelo 90º

Ciano 75º

Preto 45º

Magenta 15º


Sistema de impressão - seleção de cores:C M Y K

Amarelo Amarelo e Magenta Amarelo, Magenta e Ciano Amarelo, Magenta, Ciano e Preto


Impressão adicionando as cores


Sistema de impressão - seleção de cores:C M Y K

ESCALA EUROPA

Variações tonais das cores utilizadas em off-set: ciano, magenta, amarela e preto.

Muito importante para se determinar as cores desejadas na seleção de cores.

O QUE É ?ESCALA EUROPA

30

0

0

10

10

20

20

30

30

40

40

50

50

60

60

70

70

80

80

90

90

100

100

Exemplo da Escala Europa

O exemplo ao lado da Escala Europa,

partindo dos valores da cor amarela em 30%,

adicionando 10 % tanto da cor Cian, como da cor Magenta


C RM GY BK


Sobreprojetando duas cores primárias aditivas, produz-se o tom de uma cor primária subtrativa.

A mistura aditiva do vermelho e verde dá o amarelo

O verde e o azul dão o ciano

O azul/violeta e vermelho dão o magenta

+ =

=

=

+

+


C RM GY BK


Misturando duas cores primárias subtrativas, produz-se o tom de uma cor primária aditiva.

O magenta e o ciano dá o azul/violeta

O amarelo e o magenta dão o vermelho

O ciano e o amarelo dá o verde

+ =

=

=

+

+


C RM GY BK



amarelo

azul-violeta

ciano

verdevermelho

magenta

R G

M C

Y

B


x

y

0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

0.1

0.2

0.3

0.4

0.6

0.5

0.7

0.8

0.9

1.0

Gamute de um Monitor - RGB

Sistema de Visão Humana

Gamute de uma Impressora - CMYK

C1

C2

B

C2 cor não realizável

C1

cor não realizável na impressora

*O maior intervalo possível de cores numa reprodução.

> Escala de combinações de cores

possíveis de reproduzir a partir de um

determinado conjunto de corantes num

equipamento ou num sistema de

reprodução gráfica.

> Intervalo de cores disponíveis num

determinado sistema de reprodução.

> A tradução literal do termo é “gama”,

cujo significado é amplitude; adota-se o

termo gamut apenas para não confundir

com gama <gamma>, que tem a mesma

tradução, mas diferente significado

(contraste).


x

y

0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

0.1

0.2

0.3

0.4

0.6

0.5

0.7

0.8

0.9

1.0

Gamute de um Monitor - RGB

Sistema de Visão Humana

Gamute de uma Impressora - CMYK

C1

C2

B

C2 cor não realizável

C1 cor não realizável na impressora

*O maior intervalo possível de cores numa reprodução.

GAMA: Medida da compressão ou da expansão das áreas claras ou escuras de uma reprodução.

GAMA DO MONITOR:Luminosidade produzida pelos fósforos do monitor de visualização de um sistemade tratamento de imagens, tipicamente compreendida no intervalo entre 1,8 e 2,2.

GAMA TONAL:Diferença de densidade entre as áreas mais ou menos luminosas de uma imagem, ou capacidade refletora de um tema.

GAMUT DA IMPRESSORA:Conjunto das cores mais saturadas, que podem ser reproduzidas, avaliado pelas cromaticidades x,y das tintas ciano, magenta e amarela utilizada.

GAMUT DE CORES:Quantidade de cores que podem ser reproduzidas por todas as combinações possíveis de corantes num sistema de reproduçã gráfica.

O Modelo de Cores HSB

Embora os modelos de cores RGB e CMYK sejam essenciais à computação gráfica e à impressão, muitos desenhistas e artistas gráficos acham desnecessariamente complicado tentar misturar cores usando valores ou porcentagens de outras cores. O uso de um disco de cores ajuda, mas nem o modelo RGB nem o CMYK são muito intuitivos. A mente humana não separa as cores em modelos de vermelho/verde/azul ou ciano/magenta/amarelo/preto. Para facilitar essas escolhas, foi criado um terceiro modelo de cores: modelo HSB - Hue/Saturation/Brightness (matiz/saturação/brilho).

O HSB baseia-se na percepção humana das cores e não nos valores RGB do computador ou nas porcentagens de CMYK das impressoras. O olho humano vê cores como componentes de matiz, saturação e brilho.

Pense nos matizes como sendo as cores que você pode ver em um disco de cores. Em termos técnicos, matiz baseia-se no comprimento de onda de luz refletida de um objeto, ou transmitida por ele. A saturação, também chamada de croma, é a quantidade de cinza em uma cor. Quanto mais alta a saturação, mais baixo é o conteúdo e mais intensa é a cor. O brilho é uma medida de intensidade da luz em uma cor.

Hue/Tom: é o comprimento de onda da luz refletida ou transmitida por um

objeto. O Tom se refere à tonalidade predominante da cor, por exemplo, Vermelho, Azul etc...

Saturação/Croma: determina o grau de pureza desta cor e o quanto ela está próxima ou afastada dos tons neutros de cinza, branco ou preto.

Luminosidade/Brilho: determina o quanto a cor está próxima da luminosidade total ou de sua falta.


A roda de cor dos artistas Matiz:

posição na roda de cor Saturação:

intensidade de uma dada matiz

Brilho: grau de branco ou preto

Hue/Tom: é o comprimento de onda da luz refletida ou transmitida por um objeto. O Tom se refere à tonalidade predominante da cor, por exemplo, Vermelho, Azul etc...

Saturação/Croma: determina o grau de pureza desta cor e o quanto ela está próxima ou afastada dos tons neutros de cinza, branco ou preto.

Dessaturada

Baixa luminosidade Alta luminosidadeLuminosidade normal

Saturada normal Saturada alta

Luminosidade/Brilho: determina o quanto a cor está próxima da luminosidade total ou de sua falta.


Figura 1.2


BITMAP & VETORIAL

Figura 1.1

Cada pixel tem uma coordenada, e o conteúdo deste pixel é gravado e salvo no arquivo.

Imagens bitmap são construidas com a formação de quadrados muito pequenos chamados pixel. Para >

demonstrar essa construção está abaixo as ilustrações, nas quais estão demonstradas as características

principais. Na grade de base, cada quadrado representa 1 pixel. (Figura 1.1).

> Vejamos um simples exemplo, ao criar um círculo preto com 20 pixels de diâmetro (Figura 1.2). O número

de pixels determina a resolução do arquivo. O computador registra este arquivo pela gravação da exata

localização e cor de cada pixel. O computador não tem idéia que isso é um círculo, somente que é um

aglomerado de pequenos pontos.

A imagem consiste em centenas de linhas e colunas de pequenos elementos. Cada elemento chama-se pixel (picture element).O olho humano não é capaz de ver cada pixel individualmente, ficando então

com a percepção de uma imagem com suaves gradações.O número de pixeis

necessários para obter uma boa imagem depende do uso desta imagem.

> As imagens bitmap (mapa de bits), são tal como o nome indica, uma colecção de bits que formam

uma imagem. A imagem consiste numa matriz de pontos individuais (ou pixeis) em que cada um tem

a sua própria cor (descrita usando bits, a mais pequena unidade de informação para um

computador).

Arquivo Indexado - GIF - 256 cores Arquivo RGB - JPG - 16,7 milhões

>

> Quando tentamos alargar, aumentar (em escala ou aleatóriamente) o bitmap, um problema

acontece, o arquivo modificado em tamanho/ imagem, somente alarga o tamanho do pixel, o que

resulta no efeito de “pixelização” da imagem.

A imagem fica pixelada. No caso de imagens com 16,7 milhões de bits elas produzem

desfoque e áreas quadriculadas, uma pixelização bem suave. De qualquer forma há perda

de qualidade.


BITMAP & VETORIAL


BITMAP & VETORIAL

GIFGif só suporta até 8 bits (256 cores).Têm suporte a transparência e é muito utilizado na web. Recomenda-se para

imagens gráficas, com pouca cores.

JPEG

JPEG suporta 16 bits (65536 cores), 24 bits (16,7 milhões de cores). Recomenda-se

para imagens que devem ser True Color e tenha tons contínuos, como fotos. Com JPEG consegue-se compressão, porém com perdas.

PNG

Arquivo padronizado como altermativa ao GIF para usocom transparência, utilizando 16,7milhões de cores.

TIFFCom o formato TIFF, consegue-se imagens sem nenhuma perda de qualidade. Ele

trabalha até com 32 bits (24 bits de cor + escala de cinza de 8 bits). É recomendado

para imagens para impressão, que serão levadas à gráficas ou bureaus.

Tons de Cinza

Imagens em tons de cinza usam 8 bits.

Imagens raster ou bitmap em RGB


BITMAP & VETORIAL

Imagens raster ou bitmap em CMYK


BITMAP & VETORIAL

Imagens Line-art

São imagens que apenas contêm duas cores, normalmente

o preto e o branco. Por vezes são referidas como imagens

bitmap porque o computador tem de usar apenas 1 bit

(on=preto, off=branco) para poder definir cada pixel.

Imagens Grayscale

Contêm várias gradações de cinzentos, também

compostas por preto e branco. No sistema do computador,

a gradiência é formada em sua máxima configuração de

256 linhas.

Imagens Multitônicas

Imagens que contêm gradações de duas ou mais cores.

As imagens multitônicas mais conhecidas são as

duotônicas, que normalmente são compostas por preto e

por uma segunda cor direta (normalmente uma cor

Pantone). A imagem abaixo é constituída por preto e

Pantone Warm Red.

Imagens a cores

A informação de cor pode ser descrita usando determinados

espaços de cor: RGB, CMYK ou Lab, por exemplo.


BITMAP & VETORIAL

Imagens raster, ou bitmap (mapa de bits, em português) são imagens que contém a descrição de cada pixel, em oposição aos gráficos vetoriais.

Raster

Raster = A descrição da cor de cada pixels.

>

>

Imagens chamadas de mapa de bits, que são geradas a partir de pontos minúsculos diferenciados por suas cores.

O tratamento de imagens deste tipo requer ferramentas especializadas, geralmente utilizadas em fotografia, pois envolvem cálculos muito complexos, como interpolação, álgebra matricial etc.


BITMAP & VETORIAL

300 ppp

72 ppp

200 ppp

40 ppp

100 ppp

20 ppp


BITMAP & VETORIAL

BITMAP & VETORIAL

Vetorial Bitmap300 ppp


Linhas sem preenchimentoLinhas com preenchimento

BITMAP & VETORIAL


BITMAP & VETORIAL


> As Curvas de Bézier são usadas para a manipulação dos pontos de um desenho. Cada linha descrita em um desenho vetorial possui nós, e cada nó possui alças para manipular o segmento de reta ligado a ele.

> Por serem baseados em vetores, esses gráficos geralmente são mais leves (ocupam menos memória no disco) e não perdem qualidade ao serem ampliados, já que as funções matemáticas adequam-se facilmente à escala, o que não ocorre com gráficos raster (bitmap)

que utilizam métodos de interpolação na tentativa de preservar a qualidade.

> Outra vantagem do desenho vetorial é a possibilidade de isolar objetos e zonas, tratando-as independentemente.

Curvas de BézierCírculos com nós

BITMAP & VETORIAL


Diferentemente da imagem bitmap, o círculo vetorial aparece suave tanto em 100% como em 800%

100% 800%

> A arte vetorial é diferente do procedimente da criação em pixels individuais, são criados objetos, como por exemplo retângulos e círculos. Mas nada de coordenadas matemáticas, destas formas, o programa vetorial pode criar arquivos com uma fração do espaço utilizado pelo bitmap (imagens rastreadas), e mais importante, possuem a capacidade de serem ampliados indefinidamente sem perderem definição e detalhamento.

BITMAP & VETORIAL


AA11 A1

> Imagem vetorial é um tipo de imagem gerada a partir de construções geométricas de formas, diferente das bitmap (mapa de bits) construídas por uma unidade básica. Uma imagem desenvolvida em um programa vetorial é composta por curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam vetores matemáticos para sua descrição. Vide exemplo abaixo.

> Em um trecho de desenho sólido, de uma cor apenas (chapado), um programa vetorial utiliza pouca informação, não tendo que armazenar dados para cada pixel.

Linhas sem preenchimentoLinhas com preenchimento

BITMAP & VETORIAL


Programas Vetoriais

Programas Bitmaps

Outras Extensões de Vetoriais

Outras Extensões de Bitmap

Extensões Compostas

CorelDRAW: .CDR

Illustrator: .AI

Inkscape: .SVG

Photoshop: .PSD

CorelPHOTOPAINT: .CTP

CorelPAINTER: .RIF

CorelPaintShop Pro: .PSP

Windows Metafile: .WMF

Scalable Vector Graphics: .SVG

AUTOCAD: .DWG/DWF

Tagged Image File Format: .TIF (TIFF)

Joint Photographic Experts Group: .JPG (JPEG)

Portable Network Graphics: .PNG

Graphics Interchange Format: .GIF

Formato Cru: .RAW (informação integral)Encapsulated PostScript File: .EPS

Portable Document Format: .PDF

BITMAP & VETORIAL


introdução i multimÍdia e hipermÍdia formatos digitais de ... · introdução i multimÍdia e...

Documents