Download - Aula 03 - elementos-basicos
![Page 1: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/1.jpg)
MATERIAIS E PROCESSOS III ELEMENTOS BÁSICOS DO DESIGN DIGITAL
Professor: Alan Vasconcelos
![Page 2: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/2.jpg)
O PIXEL
Definições e propriedades
![Page 3: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/5.jpg)
O PIXEL
Não é tão complexo como parece...
![Page 6: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/6.jpg)
O PIXEL
Não é tão complexo como parece...
É só um pouquinho mais! :O
![Page 7: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/7.jpg)
O PIXEL
No início...
![Page 8: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/8.jpg)
O PIXEL
![Page 9: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/9.jpg)
O PIXEL
Em seguida...
![Page 10: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/10.jpg)
O PIXEL
![Page 11: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/11.jpg)
O PIXEL
O pixel é a menor partícula da imagem.
![Page 12: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/12.jpg)
O PIXEL
Assim é melhor!!
#AquiÉGalo
![Page 13: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/13.jpg)
O PIXEL
Assim é melhor!!
#AquiÉGalo
48
20
48 x 20 = 960
![Page 14: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/14.jpg)
O PIXEL
Resolução. As câmeras e seus megapixels
![Page 15: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/18.jpg)
O PIXEL
Curiosidades: Pixel Chair
![Page 19: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/19.jpg)
O PIXEL
Curiosidades
![Page 20: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/20.jpg)
O PIXEL
Curiosidades
http://www.vivianchiudesigns.com/Pixel-Chair
![Page 21: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/21.jpg)
OS FORMATOS DE IMAGEM
![Page 22: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/25.jpg)
O PIXEL
Mas na tela é diferente
![Page 26: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/26.jpg)
O PIXEL
O tamanho “físico”
do pixel pode ser
configurado;
![Page 27: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/31.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/32.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/33.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/35.jpg)
O PIXEL
Curiosidades O Retina Display foi uma das últimas apresentações de Steve Jobs
![Page 36: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/36.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/37.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/38.jpg)
DESIGN PARA TELAS
![Page 39: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/39.jpg)
DESIGN PARA TELAS
Deve considerar os variados tamanhos, formatos e características dos dispositivos.
![Page 40: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/40.jpg)
DESIGN PARA TELAS
![Page 41: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/41.jpg)
?
![Page 43: Aula 03 - elementos-basicos](https://reader034.vdocuments.pub/reader034/viewer/2022052601/5590b02e1a28abef058b459e/html5/thumbnails/43.jpg)
Referências
• W3C – World Wide Web Consortium
• Apple Computer
• Samsung Electronics
• Negroponte, Nicholas. A vida digital. São Paulo: Companhia das Letras, 1995.