43
MATERIAIS E PROCESSOS III ELEMENTOS BÁSICOS DO DESIGN DIGITAL Professor: Alan Vasconcelos

Aula 03 - elementos-basicos

Embed Size (px)

Citation preview

Page 1: Aula 03 - elementos-basicos

MATERIAIS E PROCESSOS III ELEMENTOS BÁSICOS DO DESIGN DIGITAL

Professor: Alan Vasconcelos

Page 2: Aula 03 - elementos-basicos

O PIXEL

Definições e propriedades

Page 3: Aula 03 - elementos-basicos

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.

Page 4: Aula 03 - elementos-basicos

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.

Page 5: Aula 03 - elementos-basicos

O PIXEL

Não é tão complexo como parece...

Page 6: Aula 03 - elementos-basicos

O PIXEL

Não é tão complexo como parece...

É só um pouquinho mais! :O

Page 7: Aula 03 - elementos-basicos

O PIXEL

No início...

Page 8: Aula 03 - elementos-basicos

O PIXEL

Page 9: Aula 03 - elementos-basicos

O PIXEL

Em seguida...

Page 10: Aula 03 - elementos-basicos

O PIXEL

Page 11: Aula 03 - elementos-basicos

O PIXEL

O pixel é a menor partícula da imagem.

Page 12: Aula 03 - elementos-basicos

O PIXEL

Assim é melhor!!

#AquiÉGalo

Page 13: Aula 03 - elementos-basicos

O PIXEL

Assim é melhor!!

#AquiÉGalo

48

20

48 x 20 = 960

Page 14: Aula 03 - elementos-basicos

O PIXEL

Resolução. As câmeras e seus megapixels

Page 15: Aula 03 - elementos-basicos

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.

Page 16: Aula 03 - elementos-basicos

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.

Page 17: Aula 03 - elementos-basicos

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.

Page 18: Aula 03 - elementos-basicos

O PIXEL

Curiosidades: Pixel Chair

Page 19: Aula 03 - elementos-basicos

O PIXEL

Curiosidades

Page 20: Aula 03 - elementos-basicos

O PIXEL

Curiosidades

http://www.vivianchiudesigns.com/Pixel-Chair

Page 21: Aula 03 - elementos-basicos

OS FORMATOS DE IMAGEM

Page 22: Aula 03 - elementos-basicos

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

Page 23: Aula 03 - elementos-basicos

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.

Page 24: Aula 03 - elementos-basicos

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

Page 25: Aula 03 - elementos-basicos

O PIXEL

Mas na tela é diferente

Page 26: Aula 03 - elementos-basicos

O PIXEL

O tamanho “físico”

do pixel pode ser

configurado;

Page 27: Aula 03 - elementos-basicos

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.

Page 28: Aula 03 - elementos-basicos

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

Page 29: Aula 03 - elementos-basicos

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

Page 30: Aula 03 - elementos-basicos

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.

Page 31: Aula 03 - elementos-basicos

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.

Page 32: Aula 03 - elementos-basicos

O PIXEL

Anti-aliasing Pelo fato de consumir muita memória, essa técnica entrará em desuso

em breve.

Page 33: Aula 03 - elementos-basicos

O PIXEL

Retina display O fim do anti-aliasing mais breve do que você pensa!

iPhone 3GS iPhone 4

Page 34: Aula 03 - elementos-basicos

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.

Page 35: Aula 03 - elementos-basicos

O PIXEL

Curiosidades O Retina Display foi uma das últimas apresentações de Steve Jobs

Page 36: Aula 03 - elementos-basicos

O PIXEL

Curiosidades Super Mario, um personagem de apenas 16 pixels de altura,

é a franquia mais cara da história dos videogames.

Page 37: Aula 03 - elementos-basicos

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.

Page 38: Aula 03 - elementos-basicos

DESIGN PARA TELAS

Page 39: Aula 03 - elementos-basicos

DESIGN PARA TELAS

Deve considerar os variados tamanhos, formatos e características dos dispositivos.

Page 40: Aula 03 - elementos-basicos

DESIGN PARA TELAS

Page 41: Aula 03 - elementos-basicos

?

Page 42: Aula 03 - elementos-basicos

VALEU!

[email protected]

Page 43: Aula 03 - elementos-basicos

Referências

• W3C – World Wide Web Consortium

• Apple Computer

• Samsung Electronics

• Negroponte, Nicholas. A vida digital. São Paulo: Companhia das Letras, 1995.

[email protected]