390 likes | 458 Vues
Explore the impact of images in media, from raster to vector graphics formats, file types, and editing software commonly used in the industry. Learn about image applications and the versatility of formats like BMP, PNG, SVG.
E N D
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
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 Saturação Valor Original Matiz
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 Fireworks Photoshop
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
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.bmp 800x600 1,37 mb Pandora5.png 800x600 527 kb Pandora5.gif 800x600 371 kb Pandora5.jpg 800x600 132 kb
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
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
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)
Editores Gráficos Parte Prática
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
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
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.br Hugo Alves – haa@cin.ufpe.br Thiago Pachêco – tpap@cin.ufpe.br