Upload
philip-obrien
View
20
Download
0
Embed Size (px)
DESCRIPTION
Imagens Digitais Seminário de Introdução à Multimídia Profª.: Judith Kelner. Alunos: Felipe Ribeiro – [email protected] Leonardo Luiz – [email protected] Hugo Alves – [email protected] Thiago Pachêco – [email protected]. Motivação - PowerPoint PPT Presentation
Citation preview
Imagens DigitaisSeminário de Introdução à MultimídiaProfª.: Judith Kelner
Alunos:Felipe Ribeiro – [email protected] Leonardo Luiz – [email protected] Alves – [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 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 – [email protected] Leonardo Luiz – [email protected] Alves – [email protected] Thiago Pachêco – [email protected]