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

1. Imagens DigitaisSeminário de Introdução à MultimídiaProfª.: Judith Kelner Alunos: Felipe Ribeiro – frm@cin.ufpe.br Leonardo Luiz – llms@cin.ufpe.br Hugo Alves – haa@cin.ufpe.br Thiago Pachêco – tpap@cin.ufpe.br

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. 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 Saturação Valor Original Matiz

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 • 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 Tamanho de um .bmp • 54 corresponde ao cabeçalho • 4*2^n corresponde a paleta de cores • n relacionado ao definição de cores • width – largura • height - altura 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

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 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 Relationships between sample, sample depth, pixel, and channel

18. 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 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 DigitaisSeminário de Introdução à MultimídiaProfª.: Judith Kelner Alunos: Felipe Ribeiro – frm@cin.ufpe.br Leonardo Luiz – llms@cin.ufpe.br Hugo Alves – haa@cin.ufpe.br Thiago Pachêco – tpap@cin.ufpe.br