O documento discute conceitos básicos de pixels, vetores, formatos de arquivos de imagens digitais como JPG, PNG, GIF e resolução de imagens medidas em DPI e PPI. Explica a diferença entre sistemas de cores RGB para dispositivos digitais e CMYK para impressão.

1. CONCEITOS
Prof.ª. Giorgia Barreto L. Parrião [2017]
APLICATIVOS GRÁFICOS

2. PIXEL
Profª Giorgia Barreto Lima Parrião 2
▪ Unidade básica de informação para um
monitor de computador ou imagem digital.
▪ Telas e imagens são divididas em grades
com quadrados, quanto maior o numero de
quadrados, maior será sua resolução
(qualidade).

3. O PIXEL E O PONTO
▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por
polegada” (dots per inch). Os dois termos servem para definir a resolução.
▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos pixels ou
pontos existem em uma polegada, mas sem especificar proporções ou dimensões.
▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são apenas
minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto não costuma ter
tamanho fixo, sendo que seu tamanho real é definido de acordo com a resolução.
Profª Giorgia Barreto Lima Parrião 3

4. DPI X PPI
▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por
polegada” (dots per inch). Os dois termos servem para definir a resolução.
▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos
pixels ou pontos existem em uma polegada, mas sem especificar proporções ou
dimensões.
▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são
apenas minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto
não costuma ter tamanho fixo, sendo que seu tamanho real é definido de acordo
com a resolução.

5. DPI – DOTCH PER INCH (PONTOS POR POLEGADA)
▪ O DPI é semelhante ao PPI, no DPI a
definição da imagem é determinada em
pontos por polegada, em vez de pixels,
ou seja, é a medida de resolução de
uma imagem impressa ou digital,
descrevendo seu grau de definição,
quanto mais pontos, maior a definição.
▪ já que estamos tratando da impressão
de imagens. Essa mudança de “unidade”
de medida é necessária, porque o pixel
é um elemento totalmente virtual, não
podendo ser impresso.

6. PPI – PIXELS PER INCH (PIXELS POR POLEGADA)
▪ indica a quantidade de pixels existentes em uma polegada quadrada de uma
imagem digital, independente se ela está na vertical ou na horizontal. reflete a
quantidade de informação contida na imagem.
Para calcular a densidade de uma determinada tela,
Use o site Pixel Density Calculator (Calculadora
densidade de pixels:
http://pixeldensitycalculator.com/), digite os valores
em pixels da altura e largura do display, informando o
tamanho em polegadas da diagonal do aparelho.

7. BITMAP
Profª Giorgia Barreto Lima Parrião 7
▪ Imagem formada por um numero fixo de pixels (pontos). Quanto mais frequentes e menores
foram os pontos, mais nítida e detalhada será a imagem.
▪ Suporta indexação ou TrueColor (mas não é compactado), mas não suporta canal alfa, nem
transparência.
▪ Podem ser facilmente coloridas para criar efeitos visuais intensos.
▪ A cor dos bitmaps (do fundo ou do objeto) pode ser alterada sem o uso de um programa de
manipulação de imagens (Photoshop).

8. FORMATOS DE ARQUIVOS - BITMAP
GIF - Graphics Interchange Format
▪ Formato de imagem de mapa de bits muito usado na web, quer para imagens fixas de baixa qualidade, quer para
animações. Foi um dos primeiros dois formatos de imagem comumente usado em sites da Web, sendo o outro a XBM
preto e branco. JPEG veio mais tarde com o navegador Mosaic.
▪ Suporta apenas imagens indexadas e transparência em lugar de canal alfa, ou seja, um pixel desta imagem pode
ser ou totalmente opaco ou totalmente transparente.
▪ Esse formato possibilita pequenas animações de forma simples , formadas por várias imagens GIF compactadas
numa só. É utilizado para compactar objetos em jogos eletrônicos, para usar como emoticon em mensageiros
instantâneos e para enfeitar sites na Internet.
Profª Giorgia Barreto Lima Parrião 8

9. JPG/JPEG - Joint Photographic Experts Group:
▪ É um método comum usado para comprimir imagens fotográficas seu grau de redução pode ser
ajustado permitindo o ajuste do tamanho de armazenamento sem perda de qualidade da
imagem na compressão .
▪ É indicado para imagens com gradação de pixel complexa(variação de cores, luz e sombras),
mas não para cores chapadas (para este caso é melhor GIF ou BMP).
Pontos negativos:
▪ A compactação causa perda de informação e isso se representa em danos à imagem, torna-o
inadequado quando não se trata da publicação do produto final.
▪ Também não suporta transparência nem canal alfa.
Profª Giorgia Barreto Lima Parrião 9

10. PNG - Portable Network Graphics:
▪ Formato de dados utilizado para imagens, criado para substituir o GIF, é livre e recomendado
pela W3C
▪ Suporta uma maior gama de profundidade de cores, alta compressão e é regulável. O que
permite comprimir imagens sem perda de qualidade e mantendo sua leveza.
▪ É possível retirar seu fundo (diferente da transparência do GIF), e definir o nível de opacidade
de cada pixel, o que permite sua adequação a background, sem serrilhamento, o que não se
consegue com os outros formatos.
▪ Suporta um grande número de informações: canal alfa, correção de gama, verificação de
integridade, suporte a imagens com paleta de cores ou truecolor e comprime com nível regulável
e sem perdas
Profª Giorgia Barreto Lima Parrião 10

11. VETOR
Profª Giorgia Barreto Lima Parrião 11
▪ É formado por coordenadas cartesianas (eixo X e Y) – cálculos matemáticos que definem
características à imagem e definido pelos seus atributos . Exemplo: direção, módulos e
sentidos.
▪ Podem ser ampliados sem perda de definição (qualidade) já que são alterados apenas os
atributos .

12. FORMATOS DE ARQUIVO - VETOR
Profª Giorgia Barreto Lima Parrião 12
PS – PostScript
▪ Linguagem de programação para visualização de informações, ou de descrição de páginas,
originalmente criada para impressão e posteriormente modificada para o uso com monitores
('display PostScript').
▪ Este formato é largamente suportado e pode, inclusive, ser enviado diretamente à maioria
das impressoras recentes o que permite uma melhor qualidade de impressão.
▪ não suporta canal alfa nem filtros e por este motivo não pode ser usado sempre como
formato intermediário para impressão.

13. EPS - Encapsulated PostScript :
▪ Formato digital para imagens que não contem representação direta de pixels, portanto, não
pode ser lido por programas de manipulação de imagens como o Photoshop (embora possa ser
lido por programas de editoração), mas apenas criado por eles para gerar saídas.
▪ É basicamente um PS com algumas restrições que ajudam na incorporação deste formato em
outros arquivos PostScript.
▪ Permitem redimensionamento, distorção e separação de cores.
Profª Giorgia Barreto Lima Parrião 13

14. TIFF - Tagged Image File Format:
▪ Formato de arquivo raster para imagens digitais, popularmente chamado de bitmap.
▪ Foi criado para uso no processo de impressão PostScript, é controlado pela Adobe.
▪ Transformou-se no formato padrão dos arquivos gráficos (32-bits) com elevada definição de
cores.
▪ É usado em softwares de manipulação de imagem: Photoshop, DTP e scanners .
▪ É o meio flexível para armazenar meios-tons e imagens fotográficas.
▪ Suporta canal alfa e tipos distintos de compactação. Também é possível usar sem compactação
e este é o uso mais comum.
Profª Giorgia Barreto Lima Parrião 14

15. VETOR X BITMAP
Profª Giorgia Barreto Lima Parrião 15

16. Profª Giorgia Barreto Lima Parrião 16
RASTERIZAÇÃO (CONVERSÃO)
▪ Processo de transformação de uma imagem vetorial em uma imagem bitmap (pixels),
também conhecida como raster. Neste caso, teremos uma imagem rasterizada.
▪ Em geral, isto é possível importando imagens, originalmente vetoriais, em programas que
trabalham com imagens bitmap.
▪ O Photoshop permite esse processo e, provavelmente, você utilizará muitas vezes, como, por
exemplo, para apresentar logotipos (usualmente concebidos como vetor) em páginas de
internet, como imagem jpg, gif ou png.
▪ Os programas vetoriais, como o CorelDraw, o InDesign e o Illustrator, também costumam
permitir a exportação para bitmap.

17. Profª Giorgia Barreto Lima Parrião 17
▪ Existem aplicativos que vetorizam automaticamente uma imagem bitmap, transformando-a em
vetor por um processo conhecido como auto-tracing.
▪ Funciona bem, em especial para elementos com contornos bem definidos.
▪ Designers, no entanto, trabalham muito com o que chamamos de: VETORIZAÇÃO MANUAL
▪ Como que decalcando um desenho (quando você coloca uma transparência sobre a imagem
original e desenha uma nova) e utilizando ferramentas adequadas de programas como
o Illustrator ou o CorelDraw, obtém-se uma imagem vetorizada mais perfeita e detalhada.
▪ Com este processo, você pode tanto obter uma ilustração realista (onde imagem vetorizada e
imagem bitmap parecem idênticas), ou uma simplificação (ilustração estilizada).

18. Profª Giorgia Barreto Lima Parrião 18
RGB (PROCESSO ADITIVO – LUZ – DIGITAL)
Cor = Luz
União = Branco
Ausência = Preto
▪ É o sistema aditivo de cores, ou seja, de
projeções de luz, como monitores e data shows,
em contraposição ao sistema subtrativo, que é o
das impressões(CMKY).
▪ A escala de RGB varia de 0 (mais escuro) a
255 (mais claro).

19. Profª Giorgia Barreto Lima Parrião 19
CORES DE 8 A 16 BITS
Utilizado para armazenar informações de imagens coloridas em um arquivo de imagem
digital.
No sistema 8 Bits, cada pixel é representado por 1 Byte de 8 Bits, fornecendo uma
exibição máxima de 256 cores.
Já o sistema de 16 bits, permite a exibição de até 65.536 cores.

20. Profª Giorgia Barreto Lima Parrião 20
CMYK (SUBTRATIVO – PIGMENTO – IMPRESSÃO )
▪ Sistema de cores baseado na síntese subtrativa,
segundo a qual, a mistura em partes iguais dos
três pigmentos primários subtrativos (ciano,
magenta e amarelo) resulta em preto.
▪ Funciona devido à absorção de luz. As cores
que são vistas vêm da parte da luz que não é
absorvida. Cor = Pigmento
União = Preto
Ausência = Branco

21. Profª Giorgia Barreto Lima Parrião 21
PANTONE (COR ESPECIAL – PIGMENTO – IMPRESSÃO )
Utilizado para reproduzir uma cor exata nos processos de impressão CMYK, permitindo
combinações de cores especificas utilizando a tabela de cor Pantone, que associa cada
tonalidade de cor a um código .

22. ATIVIDADE 1
1- Utilizando um software para ilustração vetorial, crie:
A. Pontos, linhas retas e curvas, polígonos, círculos e elipses.
B. Uma frase com no mínimo 4 palavras.
C. Aplique cores aos itens A e B.
2- Rasterize a imagem e em seguida exporte a ilustração produzida nos formatos: GIF, TIFF,
JPG, PNG.
3- Em seguida abra essas imagens exportadas em um softwares de edição de imagens, em
seguida salve 2 copias de cada imagem produzida aumentando (impressão) e diminuindo
(Web) sua DPI.
Profª Giorgia Barreto Lima Parrião 22

23. 4- Faça o mesmo utilizando PPI.
5- Nomeei os arquivos conforme nomenclatura abaixo:
SeuNome_SuaTurma_Data(ddmmaa)_1
SeuNome_SuaTurma_Data(ddmmaa)_ 2
SeuNome_SuaTurma_Data(ddmmaa)_ 3
SeuNome_SuaTurma_Data(ddmmaa)_4
SeuNome_SuaTurma_Data(ddmmaa)_5
Ex: Giorgia_1an_100915_1
6- Salve-os como PNG ou JPG no doretório TEMP em seu compurador na pasta
AplicativosGraficos.
Profª Giorgia Barreto Lima Parrião 23

24. Profª Giorgia Barreto Lima Parrião 24
BIBLIOGRAFIA
▪ COLLARO, Antônio. Projeto Gráfico: teoria e prática da diagramação. São Paulo:
Summus, 2000.
▪ FALLEIROS, Dario Pimentel. O mundo gráfico da informática. São Paulo: Futura, 2003.
▪ HORIE, Ricardo Minoru; PEREIRA, Ricardo Pagemaker. 300 superdicas de editoração,
design e artes gráficas. São Paulo: Senac, 2004.
▪ Psicodinâmica das Cores em Comunicação. Modesto Farina. Editora Edgard Blücher,
1982

25. 25
Obrigada!
Obrigada!!!
Prof.ª. Giorgia Barreto