Imagens Digitais Seminário de Introdução à Multimídia Profª

Apresentação em tema: "Imagens Digitais Seminário de Introdução à Multimídia Profª"— Transcrição da apresentação:

1 Imagens Digitais Seminário de Introdução à Multimídia Profª
Imagens Digitais Seminário de Introdução à Multimídia Profª.: Judith Kelner Alunos: Felipe Ribeiro – Leonardo Luiz – Hugo Alves – Thiago Pachêco –

2 Motivação Imagens são muito atrativas, expressam bem alguns sentimentos Imagens são um meio muito bom para divulgação de um produto Imagens fazem parte do nosso dia-a-dia, sendo em sites, seja em jogos, seja na nosso desktop elas estão lá.

3 Roteiro Tipos de Imagens Raster Vector Drawing Formato de Arquivos BMP
PNG SVG Prática

4 Imagens Raster Imagens Raster (ou bitmap – mapa de bits) Cada pixel é pintado para formar uma figura Cada ponto da figura tem seu valor de cor e luminosidade Perda quando redimensionado Formato mais simples Gera arquivos de grande volume (tamanho em bytes) Possui variações complexas (cores e formas)

5 Alguns Componentes de Imagem
Canais (Channel) São uma imagem em escala de cinza, do mesmo tamanho, que representam a presença de um atributo Alguns formatos de arquivos usam algoritmos para a partir desses canais para gerar a imagem Canais RGB (Red, Green, Blue) São canais que indicam a presença dessas cores

6 Canal Alpha (Transparecia)
Canal que guarda as informações de transparêcia Nem sempre é suportado por todos os aplicativos Valores máximos representam maior opacidade Canal de Escala de Cinza (Gray) Determina a intensidade do cinza na imagem Faz um transição entre o preto e o branco

7 Alguns algoritmos podem extrair outras informações das imagens
Outros Alguns algoritmos podem extrair outras informações das imagens CMYK (Ciano, Magenta, Amarelo e Preto) Sistema de cores usado principalmente para impressão; Sistema perfeito para superfícies brancas; HSV (Hue, Saturation, Value) Hue (Matiz) – Informa a cor predominante de um determinado pixel da imagem Saturation (Saturação) – Nível de pureza da cor Value (Valor) – O brilho da cor Já a saturação tem como função estimar a pureza da cor. Quanto mais saturada, isto é, quanto maior o valor de saturação, mais pura será a cor. E a pureza também está relacionada com a quantidade de cor branca presente na mesma. Quanto ao brilho, ele nos dá a noção, de maneira geral, de quão iluminada está a imagem naquele momento. Ou então, em termos mais apropriados a sensoriamento remoto, uma noção da resposta espectral de um objeto em uma dada banda de um sensor orbital ou aerotransportado. Tanto os valores de saturação quanto os de brilho, estão compreendidos entre 0 e 1. Embora estes intervalos de valores, bem como o de matiz, sejam uma notação (poderiam variar de 0 a 255, por exemplo), eles são de uso corrente e aceitos consensualmente. Porém, encontram-se exemplos de espaços de atributos onde os intervalos difiram desta notação. Original Saturação Matiz Valor

8 Aplicações de Imagens Bitmap
Texturas e sprites Humor Arte digital Fotografias Web Desktop (Wallpaper, ícones) Promoção de produtos

9 Editores para Imagens Raster
Adobe Photoshop Corel Photo-Paint GIMP (Opensource) Macromedia Fireworks Photo-Paint GIMP Fireworks Photoshop

10 Imagens Vetoriais (Vector Drawing)
Imagens formada a partir de vetores Uso de algoritmos matemáticos Suporta imagens raster misturadas a texto ou formas geométricas O tamanho do arquivo é menor É escalonável Fácil manipulação Falta de compatibilidade Falta de unificação dos formatos

11 Aplicações de Imagens Vetoriais
Logomarcas e Publicidade Imagens que precisam ter tamanhos variados Sites Flash Cartografia Estatística Dispositivos Móveis Ícones de programas

12 Editores para Imagens Vetoriais
CorelDraw Inkscape OpenDraw Macromedia FreeHands CorelDraw Inkscape FreeHands

13 Formatos de Arquivos

14 BMP Tamanho de um .bmp Criado pela Microsoft Microsoft Windows e OS/2
Definição de Cores Suportado: 2 cores(1bit) 16 cores (4bit) 256 cores (8bit) 65,536 cores (16-bit) 16.7 milhões de cores(24-bit) Suporta Greyscale, Indexcolor e Truecolor Transparência separada* Normalmente sem compressão 54 corresponde ao cabeçalho 4*2^n corresponde a paleta de cores n relacionado ao definição de cores width – largura height - altura Por que foi inventado? Como o formato funciona? Vantagens e desvantagens Utilização (Falar do Windows) Partes de um bmp Cabeçalho Informações do Bitmap Paleta de Cores Bitmap Data * A partir do Windows XP, foi adotado o suporte a transparência

15 PNG – Portable Network Graphics
Substituir o GIF; Suporta canal alfa; Liberdade para profundidade de cores; Comprime imagens com pouca perda de qualidade; Formato nativo do Fireworks Suportado pela biblioteca libpng Utiliza o algoritmo Deflate (implementado no zlib) Não possui animação Problemas com Internet Explorer em versões inferiores ao 7.0 PNG is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel for transparency. Sample depths range from 1 to 16 bits per component (up to 48bit images for RGB, or 64bit for RGBA).

16 PNG – Portable Network Graphics
Objetivos do Projeto PNG: Portabilidade Completude Robustez Losslessness Performance Simplicidade Interchangeability e Flexibilidade Liberdade Pandora5.bmp 800x600 1,37 mb Pandora5.png 800x600 527 kb Pandora5.gif 800x600 371 kb Portabilidade – Enconding, decoding e transmissão entre hardware e software independentes. Completude – Possibilidade de representar imagens truecolours, indexed-colours e greyscale, e em cada caso com a opção de transparência. Robustez – Transmissão da imagem Losslessness – Filtragem e compressão que possa preservar todas as informações. Performance – Poder carregar rápido (decoder) a imagem mesmo que demore a fazer o enconding. Simplicidade – Interchangeability e Flexibilidade – Qualquer programa feito no padrão pode rodar. Liberdade – Uso de algoritmos free. Pandora5.jpg 800x600 132 kb

17 Especificação do Formato
Source Image Reference Image PNG Image Delivered Image PNG Datastream Fig. Relação entre source, reference, png e display imagem Source Image – A imagem como ela é apresentada Reference Image – Só existe conceitualmente e corresponde a imagem formada pelos seus canais (canais podem ter definição diferentes) PNG Image – É a imagem obtida depois das transformações sobre a Reference image. Delivered Image – É a imagem recuperada do datastream PNG data stream – É a imagem depois do encoding Relationships between sample, sample depth, pixel, and channel

18 Indexing – É usado para imagens de indexed-colours
Transformações: Alpha Separation Indexing RGB merging Alpha Compaction Sample depth scaling Campos do Arquivo Cabeçalho de 8-bytes Critical chunks IHDR PLTE IDAT IEND Alpha Separation – Verifica se todos os valores de alfa são máximos se for ele elimina o canal alfa. Indexing – É usado para imagens de indexed-colours RGB merging – Se os 3 canais estiverem com o valor igual ele junta num só Alpha Compaction – Vê se todos tem valor máximo ou mínimo, ai ele usa somente um bit para representar. Sample depth scaling – Pega os 3 canais, se eles tiverem resolução diferente eles são comprimidos para o de menor resolução. Cabeçalho de 8-bytes 89 50 4E 47 0D 0A 1A 0A IHDR: É o primeiro chunck e contém o cabeçalho. PLTE: Contém a paleta. IDAT: Contém a imagem em si, podem existir vários campos com esse nome. IEND: Marca o fim da imagem. Reference image to PNG image transformation

19 SVG (Scalable Vector Graphics)
Linguagem para descrever imagens vetoriais Formato open (livre) Concebido pelo W3C Teve o apoio de empresas como: Adobe Apple Corel Microsoft ... Implementada em XML Baseada em CSS, PNG, JPEG Formato nativo do inkscape Suporta 3 tipos de imagens: Imagem raster Texto Formas geométricas Formato muito reduzido Compactação pelo gzip Formato ainda muito recente (2001)

20 Exemplos de Arquivos SVG

21 Editores Gráficos Parte Prática

22 GIMP (GNU Image Manipulation Program)

23 Exercício 1.1 - Scale Image
Pegue a imagem “sorceress.jpg” e redimensione para o tamanho 800x640. Para isso vá no menu “image” e escolha a opção “scale image...” Vai aparecer uma caixa de diálogo, escolha a altura e largura. Depois escolha a qualidade da interpolação*

24 Exercício 1.2 - Channel Mixer
Use a mesma imagem “sorceress.jpg” e altere seu canais de cores. Vá no menu “Filters”, depois no “Colors” e escolha a opção “Channel Mixers”, altere as cores RGB para um padrão desejado.

25 Exemplo Depois Antes Salve como Ex1.png

26 Exercício 2 – Misturando Camadas
Abra no gimp a imagem “Gabriel.jpg” e misture as camadas para modificar a cor da imagem. Para isso vá no menu “Dialogs” e escolha a opção “Layers”, uma nova aba irá aparecer (Camadas), clique em “New Layer”, irá abrir outra janela de diálogo para você escolher o nome (Digite “Camada 2”), mantenha o mesmo tamanho da camada de fundo e escolha “Branco” na opção “Tipo de Preenchimento”, pronto você criou uma camada, agora use a ferramenta “Balde” para colorir a camada com a cor desejada. Agora vá na aba de camadas e mude a opção “Modo” (Dica: Veja todas as possibilidades, caso queira voltar para como estava antes Ctrl+z :D). Escolha por fim a opção Matiz.

27 Depois Exemplos Marrom (126, 79, 4) Antes Vermelho (255,0,0) Escolha a cor que preferir e salve como Ex2.png

28 Exercício 3.1 – Decompondo Canais
Abra no gimp a imagem “diablo.jpg” e separe os canais de cores RGB. Para isso use o filtro “Decompor” no menu “Color”. Escolha para decompor em RGB.

29 O Filtro irá decompor os canais RGB dessa imagem.
Nele você pode observar a presença de cada cor na imagem. Partes mais escuras significam a ausência e as mais claras a presença.

30 Exercício 3.2 – Recompondo Canais
Você pode recompor a imagem trocando a ordem dos canais, isso gera uma imagem com as cores alteradas. Para fazer isso use o filtro “Compose” que fica em “Color” (Obs: ele só aparece nas imagens grayscale) Troque a ordem dos canais e dê ok. Salve a Figura resultante como ex3.png

31 Alguns Exemplos

32 Exercício 4 – CMYK Faça o mesmo que o exercício anterior mas decomponha em CMYK no lugar de RGB. E troque as cores. Use a imagem diablo.jpg.

33 Alguns Exemplos Salve como ex4.png

34 Exercício 5 – CMYK para RGB
Faça o mesmo que o exercício anterior mas decomponha em CMYK no lugar de RGB e na hora de recompor use RGB. Na hora de recompor faça a seguinte combinação: Red -> Magenta, Green -> Amarelo, Blue -> Ciano. Use a imagem Night-Elf.jpg Exemplos Antes Depois Salve como ex5.png

35 Exercício 6 – CMY para RGB
Faça o mesmo que o exercício anterior mas decomponha em RGB no lugar de CMYK e na hora de recompor use CMY. Na hora de recompor faça a seguinte combinação: Magenta -> Red, Amarelo -> Green, Ciano -> Blue. Use a imagem guardiao.jpg Antes Depois Salve como ex6.png

36 Exercício 7 – Canal Alfa Abra o arquivo “bloodelf.jpg” Adicione um canal alfa na imagem (Layer -> Transparecy -> Add Alpha Channel) e apague o o fundo da imagem (em verde). Assim você terá uma imagem com transparência. Salve como ex7.png

37 Inkscape

38 Exercício 8 – Raster para Vetorial
Abra o Inkscape e vá no menu arquivo -> importar... E escolha a imagem pentagrama.bmp Use a ferramenta do inkscape para modificar de bitmap para vetorial imagem, ela encontra-se no menu caminho -> trace bitmap. Você terá uma imagem vetorial que poderá ser ampliada ou reduzida ao seu gosto. Compare com a imagem raster. Salve o arquivo como ex8.svg

39 Imagens Digitais Seminário de Introdução à Multimídia Profª
Imagens Digitais Seminário de Introdução à Multimídia Profª.: Judith Kelner Alunos: Felipe Ribeiro – Leonardo Luiz – Hugo Alves – Thiago Pachêco –