SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
MATERIAIS E PROCESSOS III ELEMENTOS BÁSICOS DO DESIGN DIGITAL 
Professor: Alan Vasconcelos
O PIXEL 
Definições e propriedades
O PIXEL 
O menor componente de uma imagem digital 
•Pode ser encontrado tanto em imagens (digitais, claro!) quanto em dispositivos eletrônicos. 
•São as menores partes de um todo, ou seja, se ampliarmos a imagem, poderemos enxergar os pixels individualmente.
O PIXEL 
O significado depende do contexto 
Em um equipamento de captura (câmeras, scanners, etc) 
•Significa a quantidade de pontos (informação) capturada. Em um equipamento de exibição (monitores, displays, etc) 
•É o menor elemento manipulável da imagem, formado por outros 3 pontos menores, não manipuláveis. O RGB.
O PIXEL 
Não é tão complexo como parece...
O PIXEL 
Não é tão complexo como parece... 
É só um pouquinho mais! :O
O PIXEL 
No início...
O PIXEL
O PIXEL 
Em seguida...
O PIXEL
O PIXEL 
O pixel é a menor partícula da imagem.
O PIXEL 
Assim é melhor!!  
#AquiÉGalo
O PIXEL 
Assim é melhor!!  
#AquiÉGalo 
48 
20 
48 x 20 = 960
O PIXEL 
Resolução. 
As câmeras e seus megapixels
O PIXEL 
Resolução. 
As câmeras e seus megapixels 
No mercado, o termo “resolução” é atribuído à contagem de pixels em uma imagem. 
Ex.: Se uma câmera digital, consegue obter imagens com 3.888px de largura e 2.592px de altura, podemos dizer que sua resolução é de 10.077.696 pixels, ou simplesmente 10.1 megapixels.
O PIXEL 
Resolução. As câmeras e seus megapixels 
Dessa forma, quanto mais megapixels, maior o nível de detalhe na imagem que a câmera oferece.
O PIXEL 
Assim é melhor!!  
#AquiÉGalo 
48 
20 
48 x 20 = 960 
No fim das contas, 
resolução é uma “matriz” 
de pontos que formam a imagem.
O PIXEL 
Curiosidades: Pixel Chair
O PIXEL 
Curiosidades
O PIXEL 
Curiosidades 
http://www.vivianchiudesigns.com/Pixel-Chair
OS FORMATOS DE IMAGEM
O PIXEL 
Bitmap ou raster 
A cada ponto da imagem exibida na tela ou papel corresponde um pixel desta grade, de forma que a maioria das imagens requer um número muito grande de pixels para ser representada completamente. 
A imagem é uma grade/matriz em que cada pixel ocupa um lugar
O PIXEL 
Vetor 
A imagem é composta por curvas, elipses, polígonos, texto, entre outros elementos paramétricos, isto é, utilizam vetores matemáticos para sua descrição.
O PIXEL 
Raw e Jpeg 
Jpeg = Joint Photographic Experts Group 
O padrão mais popular de compactação que funciona melhor em fotografias e pinturas de cenas realistas com variações suaves de tom e cor. 
Para imagens com altos contrastes como ícones e textos, o ideal é usar os formatos de compactação sem perda como GIF, TIFF ou PNG (opensource) 
RAW (Cru) 
É considerado o “negativo” digital, ou seja, não é usado para o trabalho e sim, os jpegs gerados a partir dele. 
A profundidade de cor é imensa: 30~36bits/pixel
O PIXEL 
Mas na tela é diferente
O PIXEL 
O tamanho “físico” 
do pixel pode ser 
configurado;
O PIXEL 
O pixel já não é mais a menor porção da imagem; 
Cada pixel é formado por uma ou mais tríades. 
Cada tríade é composta por 3 pontos (dots) nas cores Vermelho, Verde e Azul (RGB) 
Aos curiosos: colocar uma gota d’água no seu monitor para ver a tríade.
O PIXEL 
Cada dot é formado por uma escala de 256 tons, o que significa que são necessários 8 bits para cada dot. 
Ex.: 11111111 = 256
O PIXEL 
Resolução x Densidade 
100 pixels por polegada 
ou 100ppi (pixel per inch) de densidade 
Em projetos de web, 72ppi são suficientes
O PIXEL 
Anti-aliasing 
O processo que transforma imagens serrilhadas em curvas suaves. 
É praticamente uma ilusão de ótica criada pela placa de vídeo.
O PIXEL 
Anti-aliasing 
São pixels de cores intermediárias próximos a regiões do contorno de um objeto. Desde curvas simples como um círculo até o detalhes de uma serifa tipográfica.
O PIXEL 
Anti-aliasing 
Pelo fato de consumir muita memória, essa técnica entrará em desuso em breve.
O PIXEL 
Retina display 
O fim do anti-aliasing mais breve do que você pensa! 
iPhone 3GS 
iPhone 4
O PIXEL 
Retina display 
A tela do iPhone4, que tem apenas 3,5 polegadas de diagonal, 
apresenta 326ppi de densidade!!! :O 
O limite da percepção humana é de 300ppi.
O PIXEL 
Curiosidades 
O Retina Display foi uma das últimas apresentações de Steve Jobs
O PIXEL 
Curiosidades 
Super Mario, um personagem de apenas 16 pixels de altura, é a franquia mais cara da história dos videogames.
O PIXEL 
Curiosidades 
Com o avanço da fotografia panorâmica, o termo Gigapixel já está se tornando comum. Nesse caso, a multiplicação dos pixels de largura pelos pixels de altura ultrapassa a escala do 1 bilhão de pixels.
DESIGN PARA TELAS
DESIGN PARA TELAS 
Deve considerar os variados 
tamanhos, formatos e características dos dispositivos.
DESIGN PARA TELAS
?
VALEU! 
alandbh@gmail.com
Referências 
•W3C – World Wide Web Consortium 
•Apple Computer 
•Samsung Electronics 
•Negroponte, Nicholas. A vida digital. São Paulo: Companhia das Letras, 1995. 
•alandbh@gmail.com

Mais conteúdo relacionado

Destaque

Música latino americana
Música latino americanaMúsica latino americana
Música latino americana
helenavf1
 
La Salve Dominicana
La Salve DominicanaLa Salve Dominicana
La Salve Dominicana
Tasha Michaud
 

Destaque (8)

Generos musicales
Generos musicales Generos musicales
Generos musicales
 
Musica popular Jamaica, Republica Dominicana y Cuba
Musica popular Jamaica, Republica Dominicana y CubaMusica popular Jamaica, Republica Dominicana y Cuba
Musica popular Jamaica, Republica Dominicana y Cuba
 
Música latino americana
Música latino americanaMúsica latino americana
Música latino americana
 
Géneros musicales
Géneros musicalesGéneros musicales
Géneros musicales
 
Historia de la musica cubana
Historia de la musica cubanaHistoria de la musica cubana
Historia de la musica cubana
 
La Salve Dominicana
La Salve DominicanaLa Salve Dominicana
La Salve Dominicana
 
Géneros musicales!!
Géneros musicales!!Géneros musicales!!
Géneros musicales!!
 
Los estilos musicales
Los estilos musicalesLos estilos musicales
Los estilos musicales
 

Semelhante a Aula 03 - elementos-basicos

Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
ViniciusGuedes
 
Atividade De Web Design
Atividade De Web DesignAtividade De Web Design
Atividade De Web Design
ViniciusGuedes
 
Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
ViniciusGuedes
 
Ti gimp
Ti   gimpTi   gimp
Ti gimp
290839
 
Cg ComputaçãO Grafica Para Designers
Cg ComputaçãO Grafica Para DesignersCg ComputaçãO Grafica Para Designers
Cg ComputaçãO Grafica Para Designers
lucasbas
 
Imagem Digital
Imagem DigitalImagem Digital
Imagem Digital
school
 
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
Osmar Rios
 

Semelhante a Aula 03 - elementos-basicos (20)

Bidimensional, Tridimensional, Pixel, Compressão de Imagem, Arte Digital, Pix...
Bidimensional, Tridimensional, Pixel, Compressão de Imagem, Arte Digital, Pix...Bidimensional, Tridimensional, Pixel, Compressão de Imagem, Arte Digital, Pix...
Bidimensional, Tridimensional, Pixel, Compressão de Imagem, Arte Digital, Pix...
 
O uso de imagens na educação
O uso de imagens na educaçãoO uso de imagens na educação
O uso de imagens na educação
 
Aula fotografia digital
Aula fotografia digitalAula fotografia digital
Aula fotografia digital
 
Aplicativos Gráficos Conceitos Introdutórios
Aplicativos Gráficos Conceitos IntrodutóriosAplicativos Gráficos Conceitos Introdutórios
Aplicativos Gráficos Conceitos Introdutórios
 
Edição de vídeos
Edição de vídeosEdição de vídeos
Edição de vídeos
 
Tipos de imagens digitais
Tipos de imagens digitaisTipos de imagens digitais
Tipos de imagens digitais
 
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
 
Imagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriaisImagens matriciais vs Imagens vectoriais
Imagens matriciais vs Imagens vectoriais
 
Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
 
Atividade De Web Design
Atividade De Web DesignAtividade De Web Design
Atividade De Web Design
 
Atividade de web design
Atividade de web designAtividade de web design
Atividade de web design
 
Ti gimp
Ti   gimpTi   gimp
Ti gimp
 
Aula 10--revisao
Aula 10--revisaoAula 10--revisao
Aula 10--revisao
 
Cg ComputaçãO Grafica Para Designers
Cg ComputaçãO Grafica Para DesignersCg ComputaçãO Grafica Para Designers
Cg ComputaçãO Grafica Para Designers
 
Imagem Digital
Imagem DigitalImagem Digital
Imagem Digital
 
Workshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRAWorkshop Técnico MUZIK 2019 - CASA PETRA
Workshop Técnico MUZIK 2019 - CASA PETRA
 
Aula2_3_MTM.ppt
Aula2_3_MTM.pptAula2_3_MTM.ppt
Aula2_3_MTM.ppt
 
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
 
Desktop publishing
Desktop publishingDesktop publishing
Desktop publishing
 
Tamanho resolução
Tamanho resoluçãoTamanho resolução
Tamanho resolução
 

Mais de Alan Vasconcelos

MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - Usabilidade
Alan Vasconcelos
 
Mta1 aula-06 - Design Universal
Mta1 aula-06 - Design UniversalMta1 aula-06 - Design Universal
Mta1 aula-06 - Design Universal
Alan Vasconcelos
 
Mta1 aula-05 Avaliação Heurística
Mta1 aula-05 Avaliação HeurísticaMta1 aula-05 Avaliação Heurística
Mta1 aula-05 Avaliação Heurística
Alan Vasconcelos
 
Mta1 aula-04 Framework DECIDE
Mta1 aula-04 Framework DECIDEMta1 aula-04 Framework DECIDE
Mta1 aula-04 Framework DECIDE
Alan Vasconcelos
 
MTA1 Aula-02. Acessibilidade
MTA1 Aula-02. AcessibilidadeMTA1 Aula-02. Acessibilidade
MTA1 Aula-02. Acessibilidade
Alan Vasconcelos
 
MTA1 Aula-01. Introdução
MTA1 Aula-01. IntroduçãoMTA1 Aula-01. Introdução
MTA1 Aula-01. Introdução
Alan Vasconcelos
 
Usabilidade Aula-06. Processos: User Stories
Usabilidade Aula-06. Processos: User StoriesUsabilidade Aula-06. Processos: User Stories
Usabilidade Aula-06. Processos: User Stories
Alan Vasconcelos
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: Personas
Alan Vasconcelos
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
Alan Vasconcelos
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
Alan Vasconcelos
 

Mais de Alan Vasconcelos (20)

Design Universal - Os 7 Principios
Design Universal - Os 7 PrincipiosDesign Universal - Os 7 Principios
Design Universal - Os 7 Principios
 
Design Universal e arquitetura hostil
Design Universal e arquitetura hostilDesign Universal e arquitetura hostil
Design Universal e arquitetura hostil
 
Cibercultura
CiberculturaCibercultura
Cibercultura
 
MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - Usabilidade
 
Ergo2 aula-14 Avaliação Heurística
Ergo2 aula-14 Avaliação HeurísticaErgo2 aula-14 Avaliação Heurística
Ergo2 aula-14 Avaliação Heurística
 
Mta1 aula-06 - Design Universal
Mta1 aula-06 - Design UniversalMta1 aula-06 - Design Universal
Mta1 aula-06 - Design Universal
 
Mta1 aula-05 Avaliação Heurística
Mta1 aula-05 Avaliação HeurísticaMta1 aula-05 Avaliação Heurística
Mta1 aula-05 Avaliação Heurística
 
Mta1 aula-04 Framework DECIDE
Mta1 aula-04 Framework DECIDEMta1 aula-04 Framework DECIDE
Mta1 aula-04 Framework DECIDE
 
MTA1 Aula-02. Acessibilidade
MTA1 Aula-02. AcessibilidadeMTA1 Aula-02. Acessibilidade
MTA1 Aula-02. Acessibilidade
 
MTA1 Aula-01. Introdução
MTA1 Aula-01. IntroduçãoMTA1 Aula-01. Introdução
MTA1 Aula-01. Introdução
 
Usabilidade Aula-06. Processos: User Stories
Usabilidade Aula-06. Processos: User StoriesUsabilidade Aula-06. Processos: User Stories
Usabilidade Aula-06. Processos: User Stories
 
Usabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicasUsabilidade Aula-05. Processos: heuristicas
Usabilidade Aula-05. Processos: heuristicas
 
Usabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: PersonasUsabilidade aula-04. Processos: Personas
Usabilidade aula-04. Processos: Personas
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 
Aula 07 - Web
Aula 07 - WebAula 07 - Web
Aula 07 - Web
 
Aula 04 - Prototipação
Aula 04 - PrototipaçãoAula 04 - Prototipação
Aula 04 - Prototipação
 
Aula 06 - variabilidade
Aula 06 - variabilidadeAula 06 - variabilidade
Aula 06 - variabilidade
 
Aula 02 - Introducao
Aula 02 - IntroducaoAula 02 - Introducao
Aula 02 - Introducao
 

Aula 03 - elementos-basicos

  • 1. MATERIAIS E PROCESSOS III ELEMENTOS BÁSICOS DO DESIGN DIGITAL Professor: Alan Vasconcelos
  • 2. O PIXEL Definições e propriedades
  • 3. O PIXEL O menor componente de uma imagem digital •Pode ser encontrado tanto em imagens (digitais, claro!) quanto em dispositivos eletrônicos. •São as menores partes de um todo, ou seja, se ampliarmos a imagem, poderemos enxergar os pixels individualmente.
  • 4. O PIXEL O significado depende do contexto Em um equipamento de captura (câmeras, scanners, etc) •Significa a quantidade de pontos (informação) capturada. Em um equipamento de exibição (monitores, displays, etc) •É o menor elemento manipulável da imagem, formado por outros 3 pontos menores, não manipuláveis. O RGB.
  • 5. O PIXEL Não é tão complexo como parece...
  • 6. O PIXEL Não é tão complexo como parece... É só um pouquinho mais! :O
  • 7. O PIXEL No início...
  • 9. O PIXEL Em seguida...
  • 11. O PIXEL O pixel é a menor partícula da imagem.
  • 12. O PIXEL Assim é melhor!!  #AquiÉGalo
  • 13. O PIXEL Assim é melhor!!  #AquiÉGalo 48 20 48 x 20 = 960
  • 14. O PIXEL Resolução. As câmeras e seus megapixels
  • 15. O PIXEL Resolução. As câmeras e seus megapixels No mercado, o termo “resolução” é atribuído à contagem de pixels em uma imagem. Ex.: Se uma câmera digital, consegue obter imagens com 3.888px de largura e 2.592px de altura, podemos dizer que sua resolução é de 10.077.696 pixels, ou simplesmente 10.1 megapixels.
  • 16. O PIXEL Resolução. As câmeras e seus megapixels Dessa forma, quanto mais megapixels, maior o nível de detalhe na imagem que a câmera oferece.
  • 17. O PIXEL Assim é melhor!!  #AquiÉGalo 48 20 48 x 20 = 960 No fim das contas, resolução é uma “matriz” de pontos que formam a imagem.
  • 18. O PIXEL Curiosidades: Pixel Chair
  • 20. O PIXEL Curiosidades http://www.vivianchiudesigns.com/Pixel-Chair
  • 21. OS FORMATOS DE IMAGEM
  • 22. O PIXEL Bitmap ou raster A cada ponto da imagem exibida na tela ou papel corresponde um pixel desta grade, de forma que a maioria das imagens requer um número muito grande de pixels para ser representada completamente. A imagem é uma grade/matriz em que cada pixel ocupa um lugar
  • 23. O PIXEL Vetor A imagem é composta por curvas, elipses, polígonos, texto, entre outros elementos paramétricos, isto é, utilizam vetores matemáticos para sua descrição.
  • 24. O PIXEL Raw e Jpeg Jpeg = Joint Photographic Experts Group O padrão mais popular de compactação que funciona melhor em fotografias e pinturas de cenas realistas com variações suaves de tom e cor. Para imagens com altos contrastes como ícones e textos, o ideal é usar os formatos de compactação sem perda como GIF, TIFF ou PNG (opensource) RAW (Cru) É considerado o “negativo” digital, ou seja, não é usado para o trabalho e sim, os jpegs gerados a partir dele. A profundidade de cor é imensa: 30~36bits/pixel
  • 25. O PIXEL Mas na tela é diferente
  • 26. O PIXEL O tamanho “físico” do pixel pode ser configurado;
  • 27. O PIXEL O pixel já não é mais a menor porção da imagem; Cada pixel é formado por uma ou mais tríades. Cada tríade é composta por 3 pontos (dots) nas cores Vermelho, Verde e Azul (RGB) Aos curiosos: colocar uma gota d’água no seu monitor para ver a tríade.
  • 28. O PIXEL Cada dot é formado por uma escala de 256 tons, o que significa que são necessários 8 bits para cada dot. Ex.: 11111111 = 256
  • 29. O PIXEL Resolução x Densidade 100 pixels por polegada ou 100ppi (pixel per inch) de densidade Em projetos de web, 72ppi são suficientes
  • 30. O PIXEL Anti-aliasing O processo que transforma imagens serrilhadas em curvas suaves. É praticamente uma ilusão de ótica criada pela placa de vídeo.
  • 31. O PIXEL Anti-aliasing São pixels de cores intermediárias próximos a regiões do contorno de um objeto. Desde curvas simples como um círculo até o detalhes de uma serifa tipográfica.
  • 32. O PIXEL Anti-aliasing Pelo fato de consumir muita memória, essa técnica entrará em desuso em breve.
  • 33. O PIXEL Retina display O fim do anti-aliasing mais breve do que você pensa! iPhone 3GS iPhone 4
  • 34. O PIXEL Retina display A tela do iPhone4, que tem apenas 3,5 polegadas de diagonal, apresenta 326ppi de densidade!!! :O O limite da percepção humana é de 300ppi.
  • 35. O PIXEL Curiosidades O Retina Display foi uma das últimas apresentações de Steve Jobs
  • 36. O PIXEL Curiosidades Super Mario, um personagem de apenas 16 pixels de altura, é a franquia mais cara da história dos videogames.
  • 37. O PIXEL Curiosidades Com o avanço da fotografia panorâmica, o termo Gigapixel já está se tornando comum. Nesse caso, a multiplicação dos pixels de largura pelos pixels de altura ultrapassa a escala do 1 bilhão de pixels.
  • 39. DESIGN PARA TELAS Deve considerar os variados tamanhos, formatos e características dos dispositivos.
  • 41. ?
  • 43. Referências •W3C – World Wide Web Consortium •Apple Computer •Samsung Electronics •Negroponte, Nicholas. A vida digital. São Paulo: Companhia das Letras, 1995. •alandbh@gmail.com