Introdução I MULTIMÍDIA E HIPERMÍDIA Formatos Digitais de Imagens. Prof. Ms. Ricardo Seyssel

Transcrição

1 Introdução I MULTIMÍDIA E HIPERMÍDIA Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel

2 BITMAP & VETORIAL Formatos Digitais de Imagens 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 leiaute 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. As versões recentes dos editores bitmap, como GIMP, Photoshop, Photopaint, anexaram 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).

3 Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel > 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 para a Internet. Um novo software está já há algum tempo nesse mercado, é o Microsoft Expression Design 4. > Esses programas cada vez mais integram num mesmo aplicativo a manipulação dos dois tipos de arquivos.

4 ONDAS ELETROMAGNÉTICAS RAIO X CALOR RÁDIO 1/ nm 1/1000 nm 1 nm 400 nm 700 1/1000 mm 1 mm 1 m 1 km 1000 km RAIOS GAMA E ALFA LUZ TELEVISÃO CORRENTE ELÉTRICA As oscilações eletromagnéticas (radiações) divergem entre si por seus diferentes comprimentos de onda (frequência) 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

5 ONDAS ELETROMAGNÉTICAS Ultravioleta (UV) 380 a 1 nm Infravermelho 700 nm a 1 mm 400 nm 700 nm Variação de comprimento das oscilações das ondas eletromagnéticas visíveis (a luz), entre 400 e 700 nm (nanômetros) ou milimicra. As cores do espectro 9 nm= nanômetro > 1 metro = 10 (1o.ooo.ooo.ooo) nanômetros

6 ONDAS ELETROMAGNÉTICAS Luz Branca Vermelho Laranja Prisma de Cristal Amarelo Verde Ciano Violeta Tela Branca 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. Passagem da luz branca através de um prisma, sua decomposição e projeção sobre uma tela branca

7 ONDAS ELETROMAGNÉTICAS Violeta Azul Ciano Verde Amarelo Laranja Vermelho 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. As cores do espectro

8 A cor magenta A s cores do espectro são azul-violeta, azul-ciano, verde, amarelo, vermelholaranja e vermelho. As cores de um só comprimento de onda se chamam monocromáticas. O magenta não está contido no espectro devido ao fato de não ser monocromática. Obtém-se o magenta sobrepondo-se a projeção dos extremos, ou seja, o vermelho-laranja e o azul-violeta. Azul-violeta Magenta Vermelho-laranja As cores do espectro

9 SISTEMA ADITIVO - Resultado da mistura das três cores-luz As cores básicas da sistema aditivo são vermelho, azul e verde.

10 SISTEMA ADITIVO - Resultado da mistura das três cores-luz As cores básicas da sistema aditivo são vermelho, azul e verde. O ponto final O ponto inicial O ponto inicial do sistema aditivo é o preto Este correspondente à não existência de oscilações eletromagnéticas visíveis O ponto final do sistema aditivo é o branco

11 SISTEMA ADITIVO - Resultado da mistura das três cores-luz As cores básicas da sistema aditivo são vermelho, azul e R G B Sistema de projeção de luz: Dispositivos como: monitores e datashows; verde. RGBA canal Alpha para indicação de transparência; Há mais de 16,7 milhões de combinações diferentes. 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. Representação numérica: Escala de 0 à 255 Hexadecimal Branco #FFFFFF Verde #00FF00 Vermelho #FF0000 Preto # Fatores de 0.0 a 1.0 Branco Verde Vermelho Preto Preto Para ocorrer o degradê ou gradiência suave entre o preto e o branco são necessárias 256 linhas Branco

12 SISTEMA ADITIVO - Resultado da mistura das três cores-luz As cores básicas da sistema aditivo são vermelho, azul e R G B Sistema de projeção de luz: monitores verde. 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 vermelho, um verde e um azul, é denominado tríade. Dot 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

13 SISTEMA SUBTRATIVO e SISTEMA ADITIVO Relação entre os sistemas de cor C M Y K R G B 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.

14 As cores básicas da sistema aditivo são vermelho, azul e verde. Escala de Cinzas G Verde = (0,1,0) Amarelo = (1,1,0) Ciano = (0,1,1) Branco = (1,1,1) Preto = (0,0,0) Azul = (0,0,1) B Vermelho = (1,0,0) R Magenta = (1,0,1)

15 AMARELO SISTEMA SUBTRATIVO - Resultado da mistura das três cores-pigmento As cores básicas da sistema subtrativo são ciano, amarelo e magenta MAGENTA CIANO

16 AMARELO SISTEMA SUBTRATIVO - Resultado da mistura das três cores-pigmento As cores básicas da sistema subtrativo são ciano, amarelo e magenta O ponto inicial MAGENTA CIANO O ponto final O ponto inicial da síntese Subtrativa é o branco Esta correspondente a todas oscilações eletromagnéticas visíveis O ponto final da síntese aditiva é o preto

17 As cores básicas da sistema subtrativo são ciano, amarelo e magenta Sistema de impressão - pigmento: C M Y K Cyan, Magenta, Yellow e BlacK Dispositivos como: impressoras e fotocopiadoras Representação numérica intensidade (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 SUBTRATIVO - Resultado da mistura das três cores-pigmento

18 As cores básicas da sistema subtrativo são ciano, amarelo e magenta C M Y K Sistema de impressão - retícula: Amarelo 90º Ciano 75º Preto 45º Magenta 15º Ângulos da retícula ABS (Agfa Balanced Screening) A retícula tradicional ou convencional AM (Amplitude Modulada) é composta de pontos equidistantes e com dimensões variáveis. Sublima SISTEMA SUBTRATIVO - Resultado da mistura das três cores-pigmento

19 As cores básicas da sistema subtrativo são ciano, amarelo e magenta C M Y K Sistema de impressão - seleção de cores: Impressão adicionando as cores Amarelo Amarelo e Magenta Amarelo, Magenta e Ciano Amarelo, Magenta, Ciano e Preto SISTEMA SUBTRATIVO - Resultado da mistura das três cores-pigmento

20 As cores básicas da sistema subtrativo são ciano, amarelo e magenta C M Y K Sistema de impressão - seleção de cores: O QUE É 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 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 ESCALA EUROPA

21 SISTEMA SUBTRATIVO e SISTEMA ADITIVO + Relação entre os sistemas de cor C M Y K R G B Sobreprojetando duas cores primárias aditivas, produz-se o tom de uma cor primária subtrativa. O verde e o azul dão o ciano + = A mistura aditiva do vermelho e verde dá o amarelo = O azul/violeta e vermelho dão o magenta + =

22 SISTEMA SUBTRATIVO e SISTEMA ADITIVO Relação entre os sistemas de cor C M Y K R G B Misturando duas cores primárias subtrativas, produz-se o tom de uma cor primária aditiva. O amarelo e o magenta dão o vermelho + = O magenta e o ciano dá o azul/violeta + = O ciano e o amarelo dá o verde + =

23 SISTEMA SUBTRATIVO e SISTEMA ADITIVO Relação entre os sistemas de cor C M Y K R G B amarelo Y vermelho verde R G M C magenta ciano B azul-violeta

24 Relação entre os sistemas de cor y C 2 C 1 C 2 cor não realizável C 1 cor não realizável na impressora Sistema de Visão Humana Gamute de um Monitor - RGB B Gamute de uma Impressora - CMYK x > 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). *O maior intervalo possível de cores numa reprodução.

25 Relação entre os sistemas de cor y C 2 cor não realizável C 1 cor não realizável na impressora C 1 C 2 Sistema de Visão Humana Gamute de um Monitor - RGB B Gamute de uma Impressora - CMYK GAMA: Medida da compressão ou da expansão das áreas claras ou escuras de uma reprodução x GAMA DO MONITOR: Luminosidade produzida pelos fósforos do monitor de visualização de um sistema de 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 maior intervalo possível de cores numa reprodução.

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

27 O Modelo de Cores HSB 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

28 O Modelo de Cores HSB 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 Saturada normal Saturada alta Luminosidade/Brilho: determina o quanto a cor está próxima da luminosidade total ou de sua falta. Baixa luminosidade Luminosidade normal Alta luminosidade

29 Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel > 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. Figura 1.1 Figura 1.2 Cada pixel tem uma coordenada, e o conteúdo deste pixel é gravado e salvo no arquivo. BITMAP & VETORIAL

30 BITMAP & VETORIAL Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel > 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 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.

31 BITMAP & VETORIAL Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel GIF Gif 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 uso com transparência, utilizando 16,7milhões de cores. TIFF Com 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.

32 Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel BITMAP & VETORIAL Imagens raster ou bitmap em RGB

33 Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel BITMAP & VETORIAL Imagens raster ou bitmap em CMYK

34 BITMAP & VETORIAL Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel 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.

35 BITMAP & VETORIAL Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel 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.

36 Formatos Digitais de Imagens Prof. Ms. Ricardo Seyssel 300 ppp 200 ppp 100 ppp 72 ppp BITMAP & VETORIAL 40 ppp 20 ppp

37 Formatos Digitais de Imagens BITMAP & VETORIAL Vetorial Bitmap 300 ppp

38 Formatos Digitais de Imagens BITMAP & VETORIAL Linhas com preenchimento Linhas sem preenchimento

39 Formatos Digitais de Imagens 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. Círculos com nós Curvas de Bézier

40 Formatos Digitais de Imagens BITMAP & VETORIAL > 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. 100% 800% Diferentemente da imagem bitmap, o círculo vetorial aparece suave tanto em 100% como em 800%

41 Formatos Digitais de Imagens > 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. A1 A1 BITMAP & VETORIAL Linhas com preenchimento Linhas sem preenchimento

42 Formatos Digitais de Imagens BITMAP & VETORIAL

43 Formatos Digitais de Imagens BITMAP & VETORIAL

44 Formatos Digitais de Imagens BITMAP & VETORIAL Programas Vetoriais CorelDRAW:.CDR ILLUSTRATOR:.AI Outras Extensões Vetoriais Windows Metafile:.WMF Scalable Vector Graphics:.SVG AUTOCAD:.DWG/DWF Programas BITMAP PHOTOSHOP:.PDS CorelPHOTOPAINT:.CTP CorelPAINTER:.RIF Outras Extensões Bitmap Tagged Image File Format:.TIF Joint Photographic Experts Group:.JPG Portable Network Graphics:.PNG Extensões Compostas Encapsulated PostScript File:.EPS Portable Document Format:.PDF