Imagens Digitais
Seminário de Introdução à Multimídia
Profª.: Judith Kelner
Alunos:
Felipe Ribeiro – [email protected]
Hugo Alves – [email protected]
Leonardo Luiz – [email protected]
Thiago Pachêco – [email protected]
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 Imagens
Raster
Vector Drawing
Formato de Arquivos
BMP
PNG
SVG
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 imagem
Canais RGB (Red, Green, Blue)
• São canais que indicam a presença dessas cores
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
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
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
Photo-Paint
• Adobe Photoshop
• Corel Photo-Paint
• GIMP (Opensource)
• Macromedia Fireworks
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
FreeHands
•
•
•
•
CorelDraw
Inkscape
OpenDraw
Macromedia FreeHands
Formatos de Arquivos
BMP
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
• 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
* 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:
Pandora5.bmp
800x600
1,37 mb
Pandora5.png
800x600
527 kb
Pandora5.gif
800x600
371 kb
Pandora5.jpg
800x600
132 kb
• Portabilidade
• Completude
• Robustez
• Losslessness
• Performance
• Simplicidade
• Interchangeability e Flexibilidade
• Liberdade
Especificação do Formato
•
•
•
•
•
Fig. Relação entre source, reference, png e display imagem
Relationships between sample, sample depth, pixel, and channel
Source Image
Reference Image
PNG Image
Delivered Image
PNG Datastream
Transformações:
• Alpha Separation
• Indexing
• RGB merging
• Alpha Compaction
• Sample depth scaling
Campos do Arquivo
Reference image to PNG image transformation
• 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
Depois
Antes
Salve como Ex1.png
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.
Depois
Exemplos
Marrom (126, 79, 4)
Antes
Vermelho (255,0,0)
Escolha a cor que preferir e salve como Ex2.png
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 de
RGB. 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 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
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
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 Digitais
Seminário de Introdução à Multimídia
Profª.: Judith Kelner
Alunos:
Felipe Ribeiro – [email protected]
Hugo Alves – [email protected]
Leonardo Luiz – [email protected]
Thiago Pachêco – [email protected]