Aula 06 – Inkscape

Design Digital

Profa. Dra. Paula Palomino

1
Imagens Digitais e para
Impressão
Formatos, Resolução e Tamanho

2
Imagens Digitais
• Exibidas em dispositivos eletrônicos, como monitores, telas de smartphones,
tablets e TVs.
• Utilizam o modelo de cor RGB (Red, Green, Blue) para exibir as cores.
• Medidas em PPI (pixels por polegada), relacionadas à densidade de pixels na
tela do dispositivo.
• Resolução típica para uso digital é de 72 PPI.
• Podem ser visualizadas em diferentes dispositivos e resoluções, o que pode
afetar a aparência da imagem.
• Não requerem tinta ou material físico para serem exibidas.

3
Imagens Impressas
• Reproduzidas em mídias físicas, como papel, tecido, vinil e outros materiais.
• Utilizam o modelo de cor CMYK (Cyan, Magenta, Yellow, Black) para reproduzir
as cores.
• Medidas em DPI (pontos por polegada), relacionadas à densidade de pontos
de tinta na mídia impressa.
• Resolução típica para impressão é de 300 DPI ou superior, dependendo da
qualidade desejada.
• A aparência da imagem impressa pode ser afetada pela qualidade da tinta, do
material e do processo de impressão.
• Requerem tinta e material físico para serem reproduzidas.

4
Resolução de Imagens
• Refere-se à quantidade de detalhes e informações visuais em uma imagem.
• Afeta a nitidez, clareza e qualidade geral da imagem.
• Imagens de alta resolução têm mais detalhes e são mais nítidas.
• Imagens de baixa resolução são menos detalhadas e podem parecer borradas
ou pixeladas.

5
DPI (pontos por polegada)
• Medida usada para descrever a resolução de uma imagem impressa.
• Indica a quantidade de pontos de tinta por polegada linear na mídia impressa.
• Quanto maior o DPI, mais detalhada e nítida será a imagem impressa.
• Resolução típica para impressão é de 300 DPI ou superior, dependendo da
qualidade desejada.

6
PPI (pixels por polegada)
• Medida usada para descrever a resolução de uma imagem digital.
• Indica a quantidade de pixels por polegada linear em uma tela de dispositivo
eletrônico.
• Quanto maior o PPI, mais detalhada e nítida será a imagem exibida na tela.
• Resolução típica para uso digital é de 72 PPI.

7
 • Vetoriais: baseadas em fórmulas matemáticas,
Imagens redimensionáveis sem perda de qualidade.
Vetoriais x
Raster(bitmap) • Raster (bitmap): baseadas em pixels,
redimensionamento limitado antes de perder qualidade.

8
Vantagens e
Desvantagens
• Vetoriais: ideais para
logotipos e ilustrações,
escaláveis, geralmente
menores em tamanho
de arquivo.

• Raster (bitmap): ideais

para fotografias e
imagens complexas, não
escaláveis, maiores em
tamanho de arquivo. 9
Formatos Comuns

• Vetoriais: AI (Adobe
Illustrator), EPS (Encapsulated
PostScript), SVG (Scalable
Vector Graphics), PDF
(Portable Document Format)

10
Formatos Comuns
• Raster: JPG (JPEG - Joint
Photographic Experts Group),
GIF (Graphics Interchange
Format), PNG (Portable
Network Graphics), TIFF
(Tagged Image File Format),
RAW, PSD (Adobe Photoshop
Document).

11
Conversão entre formatos de arquivos
• Vetor para raster: perda de escalabilidade, possível aumento no
tamanho do arquivo.

• Raster para vetor: possível perda de detalhes, redução no tamanho

do arquivo.

12
Otimização de imagens
• Processo de ajustar arquivos de imagem para diminuir o tamanho,
melhorar o tempo de carregamento e reduzir o uso de largura de
banda sem sacrificar a qualidade visual.

• Importante para melhorar a experiência do usuário e a velocidade de

carregamento em sites e aplicativos.

13
 Como reduzir o tamanho do arquivo sem
comprometer a qualidade
• Escolha o formato de imagem adequado (por exemplo, JPEG para
fotos, PNG para imagens com transparência, GIF para animações
simples).

• Ajuste o nível de compressão para equilibrar a qualidade da imagem e

o tamanho do arquivo.

14
 Compressão
• Reduza o tamanho do arquivo ao eliminar informações redundantes
ou menos importantes:

• Compressão sem perdas: mantém a qualidade da imagem original

(por exemplo, PNG).
• Compressão com perdas: sacrifica parte da qualidade da imagem em
troca de um tamanho de arquivo menor (por exemplo, JPEG).

15
 Redimensionamento
• Ajuste as dimensões da imagem (largura e altura) para reduzir o
número total de pixels.

• Mantenha a proporção para evitar distorções.

• Redimensione a imagem de acordo com as necessidades do projeto e

as dimensões de exibição.

16
 Eliminação de Meta Dados
• Elimine informações adicionais incorporadas na imagem, como dados
de câmera, localização e descrição.

• Reduza o tamanho do arquivo sem afetar a qualidade visual da

imagem.

17
 Ferramentas Populares para Otimização de
Imagens
• Adobe Photoshop: software de edição de imagem com recursos
avançados de otimização.
• GIMP: software de edição de imagem gratuito e de código aberto com
opções de otimização.
• TinyPNG e TinyJPG: serviços online para compressão de imagens PNG
e JPEG.

18
 Ferramentas Populares para Otimização de
Imagens
• ImageOptim: aplicativo para Mac que otimiza imagens removendo
metadados e aplicando compressão.
• RIOT (Radical Image Optimization Tool): aplicativo gratuito para
Windows com opções de otimização e compressão.

19
Boas práticas
• Sempre use imagens de alta resolução para garantir a melhor qualidade
possível.
• Para impressão, siga a regra de 300 DPI ou superior.
• Para uso digital, siga a regra de 72 PPI para a maioria das aplicações, mas
considere telas de alta resolução (como Retina displays), que podem exigir
imagens com maior resolução (por exemplo, 144 PPI ou superior).
• Escolha o formato de arquivo adequado para a finalidade da imagem (por
exemplo, JPEG para fotografias, PNG para imagens com transparência, SVG
para gráficos vetoriais).

20
Boas práticas
• Ao redimensionar imagens, mantenha a proporção (largura/altura) para evitar
distorções.
• Quando possível, use imagens vetoriais para logotipos e gráficos, pois podem
ser redimensionadas sem perda de qualidade.
• Evite ampliar imagens raster além de sua resolução original, pois isso pode
resultar em perda de qualidade e pixelização.
• Ao criar imagens para impressão, trabalhe no espaço de cor CMYK para
garantir a reprodução precisa das cores.
• Ao criar imagens para uso digital, trabalhe no espaço de cor RGB para garantir
a exibição correta das cores nos dispositivos eletrônicos.

21
Boas práticas
• Teste a aparência das imagens em diferentes dispositivos e
condições de impressão para garantir a qualidade e a consistência.

22
Trabalhando com Imagens
Vetoriais
Ferramenta Inkscape

23
Links úteis

• https://inkscape.org/

• https://inkscape.org/pt-br/aprender/

24
 Design Digital

Obrigada!
Dúvidas?

paula.palomino@fatec.sp.gov.br

25