Imagens DigitaisSeminário de Introdução à MultimídiaProfª.: Judith Kelner

Alunos:Felipe Ribeiro – frm@cin.ufpe.br Leonardo Luiz – llms@cin.ufpe.brHugo Alves – haa@cin.ufpe.br Thiago Pachêco – tpap@cin.ufpe.br

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

Roteiro

Tipos de ImagensRaster Vector Drawing

Formato de ArquivosBMPPNGSVG

Prática

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)

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 imagemCanais RGB (Red, Green, Blue)• São canais que indicam a presença dessas cores

Canal Alpha (Transparecia)

Canal de Escala de Cinza (Gray)

• Canal que guarda as informações de transparêcia• Nem sempre é suportado por todos os aplicativos• Valores máximos representam maior opacidade

• Determina a intensidade do cinza na imagem• Faz um transição entre o preto e o branco

OutrosAlguns algoritmos podem extrair outras informações das imagens

CMYK (Ciano, Magenta, Amarelo e Preto)

HSV (Hue, Saturation, Value)

• Sistema de cores usado principalmente para impressão;• Sistema perfeito para superfícies brancas;

• 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

Original Saturação Matiz Valor

Aplicações de Imagens Bitmap

• Texturas e sprites• Humor• Arte digital• Fotografias• Web• Desktop (Wallpaper, ícones)• Promoção de produtos

Editores para Imagens Raster

• Adobe Photoshop• Corel Photo-Paint• GIMP (Opensource) • Macromedia Fireworks

Photo-Paint

GIMP

Photoshop Fireworks

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

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

Editores para Imagens Vetoriais

• CorelDraw• Inkscape• OpenDraw • Macromedia FreeHands

CorelDraw

Inkscape

FreeHands

Formatos de Arquivos

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

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 – Portable Network Graphics

Objetivos do Projeto PNG:

• Portabilidade

• Completude

• Robustez

• Losslessness

• Performance

• Simplicidade

• Interchangeability e Flexibilidade

• Liberdade

Pandora5.bmp800x6001,37 mb

Pandora5.png800x600527 kb

Pandora5.gif800x600371 kb

Pandora5.jpg800x600132 kb

• Source Image• Reference Image• PNG Image• Delivered Image• PNG Datastream

Especificação do Formato

Fig. Relação entre source, reference, png e display imagem

Relationships between sample, sample depth, pixel, and channel

Reference image to PNG image transformation

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

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)

Exemplos de Arquivos SVG

Editores Gráficos

Parte Prática

GIMP (GNU Image Manipulation Program)

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*

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.

Exemplo

Antes Depois

Salve como Ex1.png

Exercício 2 – Misturando Camadas

Abra no gimp a imagem “Gabriel.jpg” e misture as camadas para modificara 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 porfim a opção Matiz.

Exemplos

Marrom (126, 79, 4)

Vermelho (255,0,0)

Escolha a cor que preferir e salve como Ex2.png

Antes

Depois

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.

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.

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

Alguns Exemplos

Exercício 4 – CMYK

Faça o mesmo que o exercício anterior mas decomponha em CMYK no lugar deRGB. E troque as cores. Use a imagem diablo.jpg.

Alguns Exemplos

Salve como ex4.png

Exercício 5 – CMYK para RGB

Faça o mesmo que o exercício anterior mas decomponha em CMYK no lugar deRGB 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

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

Salve como ex6.png

Antes Depois

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

Inkscape

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

Imagens DigitaisSeminário de Introdução à MultimídiaProfª.: Judith Kelner

Alunos:Felipe Ribeiro – frm@cin.ufpe.br Leonardo Luiz – llms@cin.ufpe.brHugo Alves – haa@cin.ufpe.br Thiago Pachêco – tpap@cin.ufpe.br