SlideShare uma empresa Scribd logo
Multimídia
Imagem Digital - Bitmaps
2014
Prof. Willian Magalhães
wmagalhaes@unipar.br
Bitmaps
• Bitmap é um termos em inglês que traduzido para o
português significa mapa de bits
• Imagens bitmaps também são conhecidas como imagens
raster
Bitmap = Mapas de Bits = Raster
wmagalhaes@unipar.br
Bitmaps
Bitmaps
Características
• Geralmente corresponde a imagens fotográficas
wmagalhaes@unipar.br
Bitmaps
Características
• Imagens do tipo bitmap são formadas por uma matriz de
pontos
• Cada posição da matriz corresponde a uma cor / um
ponto da tela
• O número de bits que um pixel contem determina o
intervalo de cores que este pode representar
wmagalhaes@unipar.br
Bitmaps
Bit?
Unidades de Medida
Unidade Equivalência Símbolo
Bit Menor unidade de medida ( 0 e 1 )
Byte 8 bits B
Kilobyte 1024 Bytes KB
Megabyte 1024 Kilobytes MB
Gigabyte 1024 Megabytes GB
Terabyte 1024 Gigabytes TB
Profundidade
• A cor de um pixel depende do número de bits disponíveis
para armazena-la
• Este número de bits também é conhecido como pixel
depht (profundidade do pixel)
wmagalhaes@unipar.br
Profundidade
wmagalhaes@unipar.br
Profundidade
1 bit 4 bits 8 bits 24 bits
12
Imagem com 1 bit
 21 = 2 cores possíveis
Profundidade
Imagem com 4 bits
 24 = 16 cores possíveis
13
Profundidade
Imagem com 8 bits
 28 = 256 cores possíveis
14
Profundidade
Imagem com 24 bits
 224 = 16,8 milhões de cores possíveis
15
Profundidade
Como calcular?
• Imagem com 4 bits de profundidade
wmagalhaes@unipar.br
Profundidade
2
Cores possíveisVariações de um bit
(zero ou um)
Quantidade de
bits do pixel
4 = 2x2x2x2 = 16
Podemos concluir que...
• Quanto mais bits, mais cores na imagem
• Quanto mais cores, mais informações
• Quanto mais informações, maior tamanho físico
wmagalhaes@unipar.br
Profundidade
Tamanho físico
Tamanho físico
wmagalhaes@unipar.br
Profundidade
1 bit = 2 cores
Tamanho físico 58,5kb
24 bits = 16,8 milhões de cores
Tamanho físico 1,37mb
Calculo tamanho físico (sem compressão)
• (640 x 480 x 1bit) / 8 = 38.400 bytes
• (800 x 600 x 8bits) / 8 = 480.000 bytes
• (1024 x 768 x 24bits) / 8 = 2.359.296 bytes
wmagalhaes@unipar.br
Profundidade
𝐵𝑦𝑡𝑒𝑠 =
𝐿𝐴𝑅𝐺𝑈𝑅𝐴 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴 𝑥 𝐵𝐼𝑇𝑆
8
Unidades de Medida
Unidade Equivalência Símbolo
Bit Menor unidade de medida ( 0 e 1 )
Byte 8 bits B
Kilobyte 1024 Bytes KB
Megabyte 1024 Kilobytes MB
Gigabyte 1024 Megabytes GB
Terabyte 1024 Gigabytes TB
Resolução
• A resolução de uma imagem bitmap está relacionada à
quantidade pixels que a imagem contém
• Em imagens digitais a resolução é medida em megapixels
wmagalhaes@unipar.br
Resolução
Megapixel
• Unidade de medida utilizada em câmeras digitais
• Determina o grau da resolução / definição de uma
imagem
• Um megapixel corresponde a 1.000.000 (um milhão) de
pixels
wmagalhaes@unipar.br
Megapixel
Calculo Megapixel
wmagalhaes@unipar.br
Megapixel
LARGURA (px)
ALTURA
(px)
𝐿𝐴𝑅𝐺𝑈𝑅𝐴 𝑝𝑥 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴(𝑝𝑥)
1.000.000
= 𝑀𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙
700 𝑥 700
1.000.000
= 0,49 𝑚𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙𝑠
Megapixel na prática
Samsung Galaxy SIII
• Especificação no site do fabricante
Megapixel na Prática
wmagalhaes@unipar.br
Nokia Lumia 1020
• Segundo o site Tudo Celular o
smartphone Lumia 1020 da fabricante
Nokia é capaz de capturar imagens com
as dimensões de 7152x5368 pixels.
Megapixel na Prática
Nokia Lumia 1020
• Segundo o site Tudo Celular o
smartphone Lumia 1020 da fabricante
Nokia é capaz de capturar imagens com
as dimensões de 7152x5368 pixels.
Megapixel na Prática
Qual a resolução desta câmera?
E a resolução dos televisores?
• NTSC – 720x480 pixels
• PAL – 768x576 pixel
• HDTV – 1280x720 pixels
• HDTV FullHD – 1920x1080 pixels
• UHDTV 4K – 3840x2160 pixels
• UHDTV 8K – 7680x4320 pixels
Resolução - Televisores
wmagalhaes@unipar.br
wmagalhaes@unipar.br
Proporção das Resoluções
Densidade
• É uma medida relacionada à composição de imagens
• Geralmente medida em :
• DPI – Dots Per Inch / Termo em inglês
• PPP – Pontos Por Polegada / Termo em português
Densidade
wmagalhaes@unipar.br
• Expressa o número de pontos individuais que existem
em uma polegada linear na superfície onde a imagem é
apresentada
Densidade
1” = 2,54
10 DPI
1” = 2,54
20 DPI
wmagalhaes@unipar.br
É possível classificar as imagens de acordo com sua
densidade (DPI), da seguinte maneira:
• Pontos por polegada - imagens gravadas em algum
suporte por uma impressora (ex. papel)
• Pixels por polegada - imagens apresentadas em
monitores de vídeo
Densidade
wmagalhaes@unipar.br
Padrões
• 72 dpi para exibição
• 300 dpi para impressão
Densidade
wmagalhaes@unipar.br
Compressão de imagens
• Métodos específicos
Compressão de Imagens
BMP 2,301kb GIF 82kb JPG 251kb PNG 279kb
wmagalhaes@unipar.br
.BMP
• Formato de codificação adotado pela Microsoft
• Utilizado para armazenamento de imagens em memória
• Gera arquivos não compactados
Principais Formatos
wmagalhaes@unipar.br
.GIF
• Abreviação de (Graphics Interchange Format)
• Desenvolvido pela CompuServ para transmissão de
imagens por linhas discadas
• Utiliza codificação LZW para compressão de imagens
Principais Formatos
wmagalhaes@unipar.br
.GIF
• Suporte a fundos transparentes
• Suporte a animações
• Imagens com 8 bits de profundidade
• Utiliza apenas 256 cores
• Algoritmo de compactação proprietário
Principais Formatos
wmagalhaes@unipar.br
.GIF
Principais Formatos
wmagalhaes@unipar.br
.PNG
• Portable Network Graphics
• Surgiu em 1996 como substituto ao GIF
• Formato livre
• Permite compressão de imagens sem perda de qualidade
• Formato recomendado pelo W3C
Principais Formatos
wmagalhaes@unipar.br
.PNG
• Suporta fundos transparentes
• Não suporta animações
Principais Formatos
wmagalhaes@unipar.br
.PNG
Principais Formatos
wmagalhaes@unipar.br
.JPG
• Método para comprimir fotografias
• Padrão utilizado nas câmeras digitas domesticas
• Profundidade de 8 a 24 bits
• Extensões utilizadas JPG ou JPEG
Principais Formatos
wmagalhaes@unipar.br
Sistemas de Cores
Existem diversos sistemas para se obter cores
• RGB
• CMYK
• HSB
• Lab
• Entre outros
Sistemas de Cores
wmagalhaes@unipar.br
• RGB
• CMYK
Sistema RGB
• Utilizado em dispositivos eletrônicos como:
• Monitores
• TV
• Projetores
• Câmeras digitais
Sistemas de Cores
wmagalhaes@unipar.br
Sistema RGB
• O padrão RGB é composto da união das três cores
primárias
• RED - Vermelho
• GREEN - Verde
• BLUE - Azul
Sistemas de Cores
wmagalhaes@unipar.br
Sistema RGB
• No sistema RGB cada
pixel é formado através
de porções de cada uma
das cores
Sistemas de Cores
wmagalhaes@unipar.br
Sistema RGB
Sistemas de Cores
wmagalhaes@unipar.br
Sistema RGB
• Neste sistema o intervalo de cada cor pode ser
representado de diversas maneiras
• Entre 0 e 1
• Entre 0 e 100 (percentual)
• Entre 0 e 255
• Entre 00 e FF (hexadecimal)
Sistemas de Cores
wmagalhaes@unipar.br
Sistema CMYK
• Sistema utilizado em impressoras
• Baseado na mistura de tinta sobre o papel
Sistemas de Cores
wmagalhaes@unipar.br
Sistema CMYK
• O padrão CMYK é composto da união das cores
seguintes:
• CYAN - Ciano
• MAGENTA - Magenta
• YELLOW – Amarelo
• BLACK - Preto
Sistemas de Cores
wmagalhaes@unipar.br
Sistema CMYK
• Nem todas as cores
vistas no monitor
podem ser conseguidas
na impressão
Sistemas de Cores
wmagalhaes@unipar.br
• PAULA FILHO, Wilson de Pádua. Multimídia: Conceitos e Aplicações. 1ª ed. Rio de
Janeiro: LTC, 2000.
• Slides Prof. Rodrigo Rocha. Disponível em: <http://www.bolinhabolinha.com>
Acesso em janeiro de 2104
• Apostila Prof. Alexandre C. B. Ramos. Disponível em:
<http://www.ebah.com.br/content/ABAAAAQWAAI/apostila-sistemas-
multimidia> Acesso em janeiro de 2104
Referências
• Samsung. Galaxy SIII. Disponível em:
<http://www.samsung.com/br/consumer/cellular-phone/cellular-phone-
tablets/smartphones/GT-I9300RWPZTM-spec> Acesso em março de 2014
• Tudo Celular. Nokia Lumia 1020. Disponível em:
<http://www.tudocelular.com/Nokia/fichas-tecnicas/n2485/Nokia-Lumia-
1020.html> Acesso em março de 2014
Referências

Mais conteúdo relacionado

Mais procurados

Projeto editorial e projeto gráfico
Projeto editorial e projeto gráficoProjeto editorial e projeto gráfico
Projeto editorial e projeto gráficoaulasdejornalismo
 
Módulo 3 - Suportes e ferramentas gráficas
Módulo 3 - Suportes e ferramentas gráficasMódulo 3 - Suportes e ferramentas gráficas
Módulo 3 - Suportes e ferramentas gráficasFilipe Serra
 
Jornalismo de Revista: Edição
Jornalismo de Revista: EdiçãoJornalismo de Revista: Edição
Jornalismo de Revista: EdiçãoPetcom
 
Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)Talita Moretto
 
Metodologia para Projeto de Design
Metodologia para Projeto de DesignMetodologia para Projeto de Design
Metodologia para Projeto de DesignMarcio Duarte
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das CoresLéo Dias
 
Redação Publicitária - Associação de ideias na publicidade: criatividade
Redação Publicitária - Associação de ideias na publicidade: criatividadeRedação Publicitária - Associação de ideias na publicidade: criatividade
Redação Publicitária - Associação de ideias na publicidade: criatividadeVOZ Comunica
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGAndrea Dalforno
 
Design de Cartazes
Design de CartazesDesign de Cartazes
Design de CartazesLuiz Agner
 

Mais procurados (20)

Projeto editorial e projeto gráfico
Projeto editorial e projeto gráficoProjeto editorial e projeto gráfico
Projeto editorial e projeto gráfico
 
DIAGRAMAÇÃO DE JORNAIS
DIAGRAMAÇÃO DE JORNAISDIAGRAMAÇÃO DE JORNAIS
DIAGRAMAÇÃO DE JORNAIS
 
Módulo 3 - Suportes e ferramentas gráficas
Módulo 3 - Suportes e ferramentas gráficasMódulo 3 - Suportes e ferramentas gráficas
Módulo 3 - Suportes e ferramentas gráficas
 
Jornalismo de Revista: Edição
Jornalismo de Revista: EdiçãoJornalismo de Revista: Edição
Jornalismo de Revista: Edição
 
Manual inkscape
Manual inkscapeManual inkscape
Manual inkscape
 
O Design Brasileiro um panorama do século XX à IV Bienal de Design.
O Design Brasileiro um panorama do século XX à IV Bienal de Design.O Design Brasileiro um panorama do século XX à IV Bienal de Design.
O Design Brasileiro um panorama do século XX à IV Bienal de Design.
 
Lima, Erica Marina C. Sobre as cores na expografia
Lima, Erica Marina C. Sobre as cores na expografiaLima, Erica Marina C. Sobre as cores na expografia
Lima, Erica Marina C. Sobre as cores na expografia
 
Briefing
BriefingBriefing
Briefing
 
Design Editorial | Introdução
Design Editorial | IntroduçãoDesign Editorial | Introdução
Design Editorial | Introdução
 
Redação
RedaçãoRedação
Redação
 
Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)Mídias digitais - Apresentação da Aula 01 (04/08/12)
Mídias digitais - Apresentação da Aula 01 (04/08/12)
 
Design Editorial | Estruturas
Design Editorial | EstruturasDesign Editorial | Estruturas
Design Editorial | Estruturas
 
Metodologia para Projeto de Design
Metodologia para Projeto de DesignMetodologia para Projeto de Design
Metodologia para Projeto de Design
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das Cores
 
Redação Publicitária - Associação de ideias na publicidade: criatividade
Redação Publicitária - Associação de ideias na publicidade: criatividadeRedação Publicitária - Associação de ideias na publicidade: criatividade
Redação Publicitária - Associação de ideias na publicidade: criatividade
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Diagramação de revistas
Diagramação de revistasDiagramação de revistas
Diagramação de revistas
 
Design de Cartazes
Design de CartazesDesign de Cartazes
Design de Cartazes
 
DiagramaçãO Jornal Standart
DiagramaçãO Jornal StandartDiagramaçãO Jornal Standart
DiagramaçãO Jornal Standart
 

Destaque

2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSSWillian Magalhães
 
Slide ingles 02 de outubro de 2013
Slide ingles 02 de outubro de 2013Slide ingles 02 de outubro de 2013
Slide ingles 02 de outubro de 2013carlosmurilonovais
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSWillian Magalhães
 
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...Meridiano Digital
 
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saef
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saefSensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saef
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saefigornarvaes
 
Bitmap x vetorial - Portal das Artes Gráficas
Bitmap x vetorial - Portal das Artes GráficasBitmap x vetorial - Portal das Artes Gráficas
Bitmap x vetorial - Portal das Artes GráficasUNESP
 
Natalia cancino portafolio 2012
Natalia cancino portafolio 2012Natalia cancino portafolio 2012
Natalia cancino portafolio 2012Natalia Cancino
 
Tech análise de pixels em fraudes digitais
Tech   análise de pixels em fraudes digitaisTech   análise de pixels em fraudes digitais
Tech análise de pixels em fraudes digitaisCarlos Goldani
 
Ferramentas de design_aula02_2010.05.17
Ferramentas de design_aula02_2010.05.17Ferramentas de design_aula02_2010.05.17
Ferramentas de design_aula02_2010.05.17Marco Aurelio Veiga
 
Atalhos e dicas para ilustrator
Atalhos e dicas para ilustratorAtalhos e dicas para ilustrator
Atalhos e dicas para ilustratormariia_babiichuk
 
Aula 2 formato de imagens
Aula 2 formato de imagensAula 2 formato de imagens
Aula 2 formato de imagensRafael Serra
 
2014 - Multimídia e Internet - 01 Introdução
2014 - Multimídia e Internet - 01 Introdução2014 - Multimídia e Internet - 01 Introdução
2014 - Multimídia e Internet - 01 IntroduçãoWillian Magalhães
 
Formatos de arquivo - PNG
Formatos de arquivo - PNGFormatos de arquivo - PNG
Formatos de arquivo - PNGGabriel Bemfica
 

Destaque (20)

2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
 
Slide ingles 02 de outubro de 2013
Slide ingles 02 de outubro de 2013Slide ingles 02 de outubro de 2013
Slide ingles 02 de outubro de 2013
 
Inglês´slide cacoal
Inglês´slide cacoalInglês´slide cacoal
Inglês´slide cacoal
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Aula
AulaAula
Aula
 
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...
PIXEL-DIGITAL ART 002 (Razão e Emoção; Grunge; Negativo/Colorido; Timelapse; ...
 
Introdução OpenCV (Pt-Br) com exemplos
Introdução OpenCV (Pt-Br) com exemplosIntrodução OpenCV (Pt-Br) com exemplos
Introdução OpenCV (Pt-Br) com exemplos
 
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saef
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saefSensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saef
Sensoriamento remoto aplicado à estudos florestais igor narvaes_iii_saef
 
Tutorial música digital
Tutorial música digitalTutorial música digital
Tutorial música digital
 
História Do Mp3
História Do Mp3História Do Mp3
História Do Mp3
 
Mp3
Mp3Mp3
Mp3
 
Bitmap x vetorial - Portal das Artes Gráficas
Bitmap x vetorial - Portal das Artes GráficasBitmap x vetorial - Portal das Artes Gráficas
Bitmap x vetorial - Portal das Artes Gráficas
 
Natalia cancino portafolio 2012
Natalia cancino portafolio 2012Natalia cancino portafolio 2012
Natalia cancino portafolio 2012
 
Tech análise de pixels em fraudes digitais
Tech   análise de pixels em fraudes digitaisTech   análise de pixels em fraudes digitais
Tech análise de pixels em fraudes digitais
 
Ferramentas de design_aula02_2010.05.17
Ferramentas de design_aula02_2010.05.17Ferramentas de design_aula02_2010.05.17
Ferramentas de design_aula02_2010.05.17
 
Atalhos e dicas para ilustrator
Atalhos e dicas para ilustratorAtalhos e dicas para ilustrator
Atalhos e dicas para ilustrator
 
O Ponto e o Pixel
O Ponto e o PixelO Ponto e o Pixel
O Ponto e o Pixel
 
Aula 2 formato de imagens
Aula 2 formato de imagensAula 2 formato de imagens
Aula 2 formato de imagens
 
2014 - Multimídia e Internet - 01 Introdução
2014 - Multimídia e Internet - 01 Introdução2014 - Multimídia e Internet - 01 Introdução
2014 - Multimídia e Internet - 01 Introdução
 
Formatos de arquivo - PNG
Formatos de arquivo - PNGFormatos de arquivo - PNG
Formatos de arquivo - PNG
 

Semelhante a 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

Informática Aplicada - Introdução
Informática Aplicada - IntroduçãoInformática Aplicada - Introdução
Informática Aplicada - IntroduçãoMarcio Duarte
 
Tipos de imagens digitais
Tipos de imagens digitaisTipos de imagens digitais
Tipos de imagens digitaisAline Okumura
 
Aula2_3_MTM.ppt
Aula2_3_MTM.pptAula2_3_MTM.ppt
Aula2_3_MTM.pptGumboScout
 
Modulo 0138 0138-caracterização de varios tipos e formatos de imagem
Modulo 0138 0138-caracterização de varios tipos e formatos de imagemModulo 0138 0138-caracterização de varios tipos e formatos de imagem
Modulo 0138 0138-caracterização de varios tipos e formatos de imagemSérgio Antao
 
Aula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosAula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosOsmar Rios
 
Imagem digital-www-radiologiaeinovacao-com-br
Imagem digital-www-radiologiaeinovacao-com-brImagem digital-www-radiologiaeinovacao-com-br
Imagem digital-www-radiologiaeinovacao-com-brAna Paula Moura
 
Tratamento de Imagens com Photoshop - Visao Geral
Tratamento de Imagens com Photoshop - Visao GeralTratamento de Imagens com Photoshop - Visao Geral
Tratamento de Imagens com Photoshop - Visao Geraldualpixel
 
Representação de imagens em formato digital
Representação de imagens em formato digitalRepresentação de imagens em formato digital
Representação de imagens em formato digitalHelinton Bruce
 
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - VetoresWillian Magalhães
 
Aula 09 imagens vetoriais
Aula 09   imagens vetoriaisAula 09   imagens vetoriais
Aula 09 imagens vetoriaisFábio Costa
 
Aula 09 imagens vetoriais
Aula 09   imagens vetoriaisAula 09   imagens vetoriais
Aula 09 imagens vetoriaisFábio Costa
 
Teoria das Cores para Sistemas Digitais
Teoria das Cores para Sistemas DigitaisTeoria das Cores para Sistemas Digitais
Teoria das Cores para Sistemas Digitaisesdsprojectox
 
Ti gimp
Ti   gimpTi   gimp
Ti gimp290839
 
Imagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriaisImagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriaisRuiCorgan
 

Semelhante a 2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps (20)

Informática Aplicada - Introdução
Informática Aplicada - IntroduçãoInformática Aplicada - Introdução
Informática Aplicada - Introdução
 
Tipos de imagens digitais
Tipos de imagens digitaisTipos de imagens digitais
Tipos de imagens digitais
 
Aula2_3_MTM.ppt
Aula2_3_MTM.pptAula2_3_MTM.ppt
Aula2_3_MTM.ppt
 
Modulo 0138 0138-caracterização de varios tipos e formatos de imagem
Modulo 0138 0138-caracterização de varios tipos e formatos de imagemModulo 0138 0138-caracterização de varios tipos e formatos de imagem
Modulo 0138 0138-caracterização de varios tipos e formatos de imagem
 
Aula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosAula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatos
 
Imagem digital-www-radiologiaeinovacao-com-br
Imagem digital-www-radiologiaeinovacao-com-brImagem digital-www-radiologiaeinovacao-com-br
Imagem digital-www-radiologiaeinovacao-com-br
 
Bitmap x Vetor
Bitmap x VetorBitmap x Vetor
Bitmap x Vetor
 
Tratamento de Imagens com Photoshop - Visao Geral
Tratamento de Imagens com Photoshop - Visao GeralTratamento de Imagens com Photoshop - Visao Geral
Tratamento de Imagens com Photoshop - Visao Geral
 
aula1_2.pdf
aula1_2.pdfaula1_2.pdf
aula1_2.pdf
 
Representação de imagens em formato digital
Representação de imagens em formato digitalRepresentação de imagens em formato digital
Representação de imagens em formato digital
 
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
 
Aula 09 imagens vetoriais
Aula 09   imagens vetoriaisAula 09   imagens vetoriais
Aula 09 imagens vetoriais
 
Aula 09 imagens vetoriais
Aula 09   imagens vetoriaisAula 09   imagens vetoriais
Aula 09 imagens vetoriais
 
Teoria das Cores para Sistemas Digitais
Teoria das Cores para Sistemas DigitaisTeoria das Cores para Sistemas Digitais
Teoria das Cores para Sistemas Digitais
 
ComputaçãO GráFica Para Designers
ComputaçãO GráFica Para DesignersComputaçãO GráFica Para Designers
ComputaçãO GráFica Para Designers
 
Ti gimp
Ti   gimpTi   gimp
Ti gimp
 
Imagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriaisImagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriais
 
RADIOLOGIA DIGITAL
RADIOLOGIA DIGITALRADIOLOGIA DIGITAL
RADIOLOGIA DIGITAL
 
Unidade_4.pdf
Unidade_4.pdfUnidade_4.pdf
Unidade_4.pdf
 
Apostila photoshop 7
Apostila photoshop 7 Apostila photoshop 7
Apostila photoshop 7
 

Mais de Willian Magalhães

2014 - Desenvolvimento Web - 01 Introdução
2014 - Desenvolvimento Web - 01 Introdução2014 - Desenvolvimento Web - 01 Introdução
2014 - Desenvolvimento Web - 01 IntroduçãoWillian Magalhães
 
2014 - Desenvolvimento Web - 02 HTML
2014 - Desenvolvimento Web - 02 HTML2014 - Desenvolvimento Web - 02 HTML
2014 - Desenvolvimento Web - 02 HTMLWillian Magalhães
 
2014 - Multimídia e Internet - 02 Textos
2014 - Multimídia e Internet - 02 Textos2014 - Multimídia e Internet - 02 Textos
2014 - Multimídia e Internet - 02 TextosWillian Magalhães
 
Desenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVADesenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVAWillian Magalhães
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLWillian Magalhães
 
Curso Desenvolvimento WEB com PHP - PHP (parte 1)
Curso Desenvolvimento WEB com PHP - PHP (parte 1)Curso Desenvolvimento WEB com PHP - PHP (parte 1)
Curso Desenvolvimento WEB com PHP - PHP (parte 1)Willian Magalhães
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLWillian Magalhães
 
Curso Photoshop 2009 - Aula 05
Curso Photoshop 2009 - Aula 05Curso Photoshop 2009 - Aula 05
Curso Photoshop 2009 - Aula 05Willian Magalhães
 
Curso Photoshop 2009 - Aula 04
Curso Photoshop 2009 - Aula 04Curso Photoshop 2009 - Aula 04
Curso Photoshop 2009 - Aula 04Willian Magalhães
 
Curso Photoshop 2009 - Aula 03
Curso Photoshop 2009 - Aula 03Curso Photoshop 2009 - Aula 03
Curso Photoshop 2009 - Aula 03Willian Magalhães
 
Curso Photoshop 2009 - Aula 02
Curso Photoshop 2009 - Aula 02Curso Photoshop 2009 - Aula 02
Curso Photoshop 2009 - Aula 02Willian Magalhães
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Willian Magalhães
 

Mais de Willian Magalhães (12)

2014 - Desenvolvimento Web - 01 Introdução
2014 - Desenvolvimento Web - 01 Introdução2014 - Desenvolvimento Web - 01 Introdução
2014 - Desenvolvimento Web - 01 Introdução
 
2014 - Desenvolvimento Web - 02 HTML
2014 - Desenvolvimento Web - 02 HTML2014 - Desenvolvimento Web - 02 HTML
2014 - Desenvolvimento Web - 02 HTML
 
2014 - Multimídia e Internet - 02 Textos
2014 - Multimídia e Internet - 02 Textos2014 - Multimídia e Internet - 02 Textos
2014 - Multimídia e Internet - 02 Textos
 
Desenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVADesenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVA
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Curso Desenvolvimento WEB com PHP - PHP (parte 1)
Curso Desenvolvimento WEB com PHP - PHP (parte 1)Curso Desenvolvimento WEB com PHP - PHP (parte 1)
Curso Desenvolvimento WEB com PHP - PHP (parte 1)
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Curso Photoshop 2009 - Aula 05
Curso Photoshop 2009 - Aula 05Curso Photoshop 2009 - Aula 05
Curso Photoshop 2009 - Aula 05
 
Curso Photoshop 2009 - Aula 04
Curso Photoshop 2009 - Aula 04Curso Photoshop 2009 - Aula 04
Curso Photoshop 2009 - Aula 04
 
Curso Photoshop 2009 - Aula 03
Curso Photoshop 2009 - Aula 03Curso Photoshop 2009 - Aula 03
Curso Photoshop 2009 - Aula 03
 
Curso Photoshop 2009 - Aula 02
Curso Photoshop 2009 - Aula 02Curso Photoshop 2009 - Aula 02
Curso Photoshop 2009 - Aula 02
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01
 

2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps

  • 1. Multimídia Imagem Digital - Bitmaps 2014 Prof. Willian Magalhães wmagalhaes@unipar.br
  • 3. • Bitmap é um termos em inglês que traduzido para o português significa mapa de bits • Imagens bitmaps também são conhecidas como imagens raster Bitmap = Mapas de Bits = Raster wmagalhaes@unipar.br Bitmaps
  • 5. Características • Geralmente corresponde a imagens fotográficas wmagalhaes@unipar.br Bitmaps
  • 6. Características • Imagens do tipo bitmap são formadas por uma matriz de pontos • Cada posição da matriz corresponde a uma cor / um ponto da tela • O número de bits que um pixel contem determina o intervalo de cores que este pode representar wmagalhaes@unipar.br Bitmaps
  • 8. Unidades de Medida Unidade Equivalência Símbolo Bit Menor unidade de medida ( 0 e 1 ) Byte 8 bits B Kilobyte 1024 Bytes KB Megabyte 1024 Kilobytes MB Gigabyte 1024 Megabytes GB Terabyte 1024 Gigabytes TB
  • 10. • A cor de um pixel depende do número de bits disponíveis para armazena-la • Este número de bits também é conhecido como pixel depht (profundidade do pixel) wmagalhaes@unipar.br Profundidade
  • 12. 12 Imagem com 1 bit  21 = 2 cores possíveis Profundidade
  • 13. Imagem com 4 bits  24 = 16 cores possíveis 13 Profundidade
  • 14. Imagem com 8 bits  28 = 256 cores possíveis 14 Profundidade
  • 15. Imagem com 24 bits  224 = 16,8 milhões de cores possíveis 15 Profundidade
  • 16. Como calcular? • Imagem com 4 bits de profundidade wmagalhaes@unipar.br Profundidade 2 Cores possíveisVariações de um bit (zero ou um) Quantidade de bits do pixel 4 = 2x2x2x2 = 16
  • 17. Podemos concluir que... • Quanto mais bits, mais cores na imagem • Quanto mais cores, mais informações • Quanto mais informações, maior tamanho físico wmagalhaes@unipar.br Profundidade
  • 19. Tamanho físico wmagalhaes@unipar.br Profundidade 1 bit = 2 cores Tamanho físico 58,5kb 24 bits = 16,8 milhões de cores Tamanho físico 1,37mb
  • 20. Calculo tamanho físico (sem compressão) • (640 x 480 x 1bit) / 8 = 38.400 bytes • (800 x 600 x 8bits) / 8 = 480.000 bytes • (1024 x 768 x 24bits) / 8 = 2.359.296 bytes wmagalhaes@unipar.br Profundidade 𝐵𝑦𝑡𝑒𝑠 = 𝐿𝐴𝑅𝐺𝑈𝑅𝐴 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴 𝑥 𝐵𝐼𝑇𝑆 8
  • 21. Unidades de Medida Unidade Equivalência Símbolo Bit Menor unidade de medida ( 0 e 1 ) Byte 8 bits B Kilobyte 1024 Bytes KB Megabyte 1024 Kilobytes MB Gigabyte 1024 Megabytes GB Terabyte 1024 Gigabytes TB
  • 23. • A resolução de uma imagem bitmap está relacionada à quantidade pixels que a imagem contém • Em imagens digitais a resolução é medida em megapixels wmagalhaes@unipar.br Resolução
  • 25. • Unidade de medida utilizada em câmeras digitais • Determina o grau da resolução / definição de uma imagem • Um megapixel corresponde a 1.000.000 (um milhão) de pixels wmagalhaes@unipar.br Megapixel
  • 26. Calculo Megapixel wmagalhaes@unipar.br Megapixel LARGURA (px) ALTURA (px) 𝐿𝐴𝑅𝐺𝑈𝑅𝐴 𝑝𝑥 𝑥 𝐴𝐿𝑇𝑈𝑅𝐴(𝑝𝑥) 1.000.000 = 𝑀𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙 700 𝑥 700 1.000.000 = 0,49 𝑚𝑒𝑔𝑎𝑝𝑖𝑥𝑒𝑙𝑠
  • 28. Samsung Galaxy SIII • Especificação no site do fabricante Megapixel na Prática wmagalhaes@unipar.br
  • 29. Nokia Lumia 1020 • Segundo o site Tudo Celular o smartphone Lumia 1020 da fabricante Nokia é capaz de capturar imagens com as dimensões de 7152x5368 pixels. Megapixel na Prática
  • 30. Nokia Lumia 1020 • Segundo o site Tudo Celular o smartphone Lumia 1020 da fabricante Nokia é capaz de capturar imagens com as dimensões de 7152x5368 pixels. Megapixel na Prática Qual a resolução desta câmera?
  • 31. E a resolução dos televisores?
  • 32. • NTSC – 720x480 pixels • PAL – 768x576 pixel • HDTV – 1280x720 pixels • HDTV FullHD – 1920x1080 pixels • UHDTV 4K – 3840x2160 pixels • UHDTV 8K – 7680x4320 pixels Resolução - Televisores wmagalhaes@unipar.br
  • 35. • É uma medida relacionada à composição de imagens • Geralmente medida em : • DPI – Dots Per Inch / Termo em inglês • PPP – Pontos Por Polegada / Termo em português Densidade wmagalhaes@unipar.br
  • 36. • Expressa o número de pontos individuais que existem em uma polegada linear na superfície onde a imagem é apresentada Densidade 1” = 2,54 10 DPI 1” = 2,54 20 DPI wmagalhaes@unipar.br
  • 37. É possível classificar as imagens de acordo com sua densidade (DPI), da seguinte maneira: • Pontos por polegada - imagens gravadas em algum suporte por uma impressora (ex. papel) • Pixels por polegada - imagens apresentadas em monitores de vídeo Densidade wmagalhaes@unipar.br
  • 38. Padrões • 72 dpi para exibição • 300 dpi para impressão Densidade wmagalhaes@unipar.br
  • 40. • Métodos específicos Compressão de Imagens BMP 2,301kb GIF 82kb JPG 251kb PNG 279kb wmagalhaes@unipar.br
  • 41. .BMP • Formato de codificação adotado pela Microsoft • Utilizado para armazenamento de imagens em memória • Gera arquivos não compactados Principais Formatos wmagalhaes@unipar.br
  • 42. .GIF • Abreviação de (Graphics Interchange Format) • Desenvolvido pela CompuServ para transmissão de imagens por linhas discadas • Utiliza codificação LZW para compressão de imagens Principais Formatos wmagalhaes@unipar.br
  • 43. .GIF • Suporte a fundos transparentes • Suporte a animações • Imagens com 8 bits de profundidade • Utiliza apenas 256 cores • Algoritmo de compactação proprietário Principais Formatos wmagalhaes@unipar.br
  • 45. .PNG • Portable Network Graphics • Surgiu em 1996 como substituto ao GIF • Formato livre • Permite compressão de imagens sem perda de qualidade • Formato recomendado pelo W3C Principais Formatos wmagalhaes@unipar.br
  • 46. .PNG • Suporta fundos transparentes • Não suporta animações Principais Formatos wmagalhaes@unipar.br
  • 48. .JPG • Método para comprimir fotografias • Padrão utilizado nas câmeras digitas domesticas • Profundidade de 8 a 24 bits • Extensões utilizadas JPG ou JPEG Principais Formatos wmagalhaes@unipar.br
  • 50. Existem diversos sistemas para se obter cores • RGB • CMYK • HSB • Lab • Entre outros Sistemas de Cores wmagalhaes@unipar.br • RGB • CMYK
  • 51. Sistema RGB • Utilizado em dispositivos eletrônicos como: • Monitores • TV • Projetores • Câmeras digitais Sistemas de Cores wmagalhaes@unipar.br
  • 52. Sistema RGB • O padrão RGB é composto da união das três cores primárias • RED - Vermelho • GREEN - Verde • BLUE - Azul Sistemas de Cores wmagalhaes@unipar.br
  • 53. Sistema RGB • No sistema RGB cada pixel é formado através de porções de cada uma das cores Sistemas de Cores wmagalhaes@unipar.br
  • 54. Sistema RGB Sistemas de Cores wmagalhaes@unipar.br
  • 55. Sistema RGB • Neste sistema o intervalo de cada cor pode ser representado de diversas maneiras • Entre 0 e 1 • Entre 0 e 100 (percentual) • Entre 0 e 255 • Entre 00 e FF (hexadecimal) Sistemas de Cores wmagalhaes@unipar.br
  • 56. Sistema CMYK • Sistema utilizado em impressoras • Baseado na mistura de tinta sobre o papel Sistemas de Cores wmagalhaes@unipar.br
  • 57. Sistema CMYK • O padrão CMYK é composto da união das cores seguintes: • CYAN - Ciano • MAGENTA - Magenta • YELLOW – Amarelo • BLACK - Preto Sistemas de Cores wmagalhaes@unipar.br
  • 58. Sistema CMYK • Nem todas as cores vistas no monitor podem ser conseguidas na impressão Sistemas de Cores wmagalhaes@unipar.br
  • 59. • PAULA FILHO, Wilson de Pádua. Multimídia: Conceitos e Aplicações. 1ª ed. Rio de Janeiro: LTC, 2000. • Slides Prof. Rodrigo Rocha. Disponível em: <http://www.bolinhabolinha.com> Acesso em janeiro de 2104 • Apostila Prof. Alexandre C. B. Ramos. Disponível em: <http://www.ebah.com.br/content/ABAAAAQWAAI/apostila-sistemas- multimidia> Acesso em janeiro de 2104 Referências
  • 60. • Samsung. Galaxy SIII. Disponível em: <http://www.samsung.com/br/consumer/cellular-phone/cellular-phone- tablets/smartphones/GT-I9300RWPZTM-spec> Acesso em março de 2014 • Tudo Celular. Nokia Lumia 1020. Disponível em: <http://www.tudocelular.com/Nokia/fichas-tecnicas/n2485/Nokia-Lumia- 1020.html> Acesso em março de 2014 Referências