Transcript
Page 1: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Sobre imagens Sobre imagens bitmapbitmap e e gráficos gráficos vetoriaisvetoriais

Os elementos gráficos de um computador podem ser divididos em duas categorias principais -- bitmap e vetor.

Imagem bitmap Gráfico vetorial

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Imagem bitmap Gráfico vetorial

Page 2: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Imagens bitmap são ideais para a reprodução de gradações subtis de cores, como em fotografias. Podendo apresentar arestas irregulares quando impressas em tamanhos muito grandes ou exibidas com uma ampliação muito alta.

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Os gráficos vetoriais são ideais para a reprodução de contornos nítidos, como em logotipos ou ilustrações. Podem ser impressos ou exibidos em qualquer resolução sem que haja perda de detalhes.

Page 3: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Sobre o tamanho e a resolução de imagens

Dimensões em pixels:

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

É o tamanho da imagem (L x A) em pixels. Tem a ver com o tamanho do ecrã do computador. Por exemplo um ecrã de 15” tem cerca de 800 x 600 pixels. Uma imagem maior que esta não caberia no ecrã. Se se alterasse a resolução do monitor, a mesma imagem parecia menor.

Page 4: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Os exemplos acima mostram uma imagem de 620 por 400 pixels exibida em monitores de diversos tamanhos e resoluções.

Page 5: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Resolução da imagem

O número de pixels exibido por unidade de comprimento impresso na imagem, geralmente medido em pixels por polegada (ppi).

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Por exemplo, no Photoshop, é possível alterar a resolução de uma imagem, enquanto no ImageReady, essa resolução será sempre 72 ppi. Isso acontece porque o aplicativo ImageReady foi desenvolvido para a criação de imagens de media on-line, e não impressa.

Page 6: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Imagens de 72 ppi e 300 ppi.zoom da área interna 200%

Page 7: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Por exemplo, uma imagem de 1 polegada por 1 polegada, com uma resolução de 72 ppi, contém um total de 5.184 pixels.

A mesma imagem de 1 por 1 polegada, com uma resolução de 300 ppi, contém um total de 90.000 pixels.

Utilizar uma resolução muito baixa para uma imagem impressa resulta na pixelização - uma saída com pixels

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

impressa resulta na pixelização - uma saída com pixels grandes e de aparência grosseira.

Utilizar uma resolução muito alta (pixels menores do que os pixels que o dispositivo de saída pode produzir) aumenta o tamanho do arquivo e torna lenta a leitura do ficheiro / download da internet / impressão da imagem. Além disso, o dispositivo não conseguirá reproduzir os detalhes extras de uma imagem de resolução maior.

Page 8: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Resolução do monitor

Número de pixels ou pontos exibidos por unidade de comprimento no monitor, geralmente medido em pontos por polegada (dpi).

A resolução do monitor depende do tamanho do monitor e da sua configuração de pixels. A maioria dos novos

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

da sua configuração de pixels. A maioria dos novos monitores possui uma resolução de aproximadamente 96 dpi ou superior.

Compreender o que é a resolução do monitor ajuda a explicar porque o tamanho de exibição de uma imagem na tela geralmente é diferente do tamanho impresso.

Por exemplo, ao visualizar uma imagem de 1 por 1 polegada e 144 ppi num monitor de 72 dpi, ela é exibida numa área de 2 por 2 polegadas na tela. Como o monitor somente pode exibir 72 pixels por polegada, precisa de 2 polegadas para exibir os 144 pixels que compõem uma aresta da imagem…

Page 9: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Resolução da impressora

O número de pontos por polegada (dpi) de tinta produzida

Impressoras jato de tinta produzem um spray de tinta, e não pontos reais. Entretanto, a maioria

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

dessas impressoras possui uma resolução aproximada de 300 até 600 dpi, produzindo bons resultados ao imprimir imagens de 150 ppi.

Page 10: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Tamanho do ficheiro

O tamanho digital de uma imagem é medido em kilobytes (K), megabytes (MB) ou gigabytes (GB).

O tamanho do ficheiro é proporcional às dimensões em pixels da imagem.

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Outro fator que influencia o tamanho do ficheiro é seu formato de compactação GIF, JPEG, PNG...

Page 11: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Sobre a redefinição da resolução

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

A. Reduzido B. Original C. Re-ampliado (Pixels seleccionados exibidos para cada imagem.)

Page 12: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

CORCOR

O que é ?O que é ?

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

O que é ?O que é ?

Page 13: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Modelo aditivoModelo aditivo

Baseado na sobreposição de cores (primárias)Baseado na sobreposição de cores (primárias)

Destinado à impressão

CMYKCMYK (Cyan (Cyan –– Azul Azul ; Magenta; Yellow; Black); Magenta; Yellow; Black)

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

CMYKCMYK (Cyan (Cyan –– Azul Azul ; Magenta; Yellow; Black); Magenta; Yellow; Black)

Sobreposição das três (Cyan; Magenta; Yellow): Sobreposição das três (Cyan; Magenta; Yellow): -------------- PretoPreto

Ausência de todas: Ausência de todas: ------------------------------------------------------------------------------------ BrancoBranco

Aplicação: Aplicação: Impressão; Fotografia; Livros; Revistas; EstampariaImpressão; Fotografia; Livros; Revistas; Estamparia

Page 14: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Modelo Modelo SubtrativoSubtrativo

Baseado na composição do espectro (por emissão)Baseado na composição do espectro (por emissão)

Destinado à Web

RGBRGB ((RedRed; ; GreenGreen; ; BlueBlue))

Emissão de todas: Emissão de todas: -------------------------------------------------------------------------------------- BrancoBranco

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Emissão de todas: Emissão de todas: -------------------------------------------------------------------------------------- BrancoBranco

Ausência de todas: Ausência de todas: ------------------------------------------------------------------------------------ PretoPreto

Aplicações:Aplicações:Cores Cores projetadasprojetadas; Cinema; Televisão; Monitores; Web; Cinema; Televisão; Monitores; Web

Page 15: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Page 16: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Modo Cores IndexadasModo Cores Indexadas

Este modo utiliza no máximo 256 cores. Ao converterEste modo utiliza no máximo 256 cores. Ao converterem cores indexadas, o Photoshop cria uma tabelaem cores indexadas, o Photoshop cria uma tabelade consulta de cores (CLUT), que armazena e indexade consulta de cores (CLUT), que armazena e indexaas cores da imagem. Se uma cor da imagem originalas cores da imagem. Se uma cor da imagem originalnão aparece na tabela, o programa escolhe anão aparece na tabela, o programa escolhe a

Animação multimédia

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

não aparece na tabela, o programa escolhe anão aparece na tabela, o programa escolhe amais próxima ou simula a cor utilizando as coresmais próxima ou simula a cor utilizando as coresdisponíveis.disponíveis.

Ao limitar a paleta de cores, as cores indexadas

podem reduzir o tamanho do ficheiro mantendo a

qualidade visual — por exemplo, para um aplicativo

de animação multimédia ou uma página da Web.

Page 17: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

GamutsGamuts de cor (Photoshop)de cor (Photoshop)

Um gamut é a escala de cores que um sistema de cores pode exibir ou imprimir. O espectro de cores visto pelo olho humano é maior que o gamut disponível em qualquer modelo de cores.

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

O gamut de CMYK é menor, consistindo somente de cores que podem ser impressas utilizando tintas de cores de processo. Quando as cores que não podem ser impressas são exibidas na tela, são conhecidas como cores fora do gamut, isto é, fora do gamut de CMYK.

Page 18: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Sobre profundidade de bitsSobre profundidade de bitsProfundidade de bits (também chamada de profundidade de pixels ou de cores) mede a quantidade de informação de cores disponível para exibir ou imprimir cada pixel de uma imagem.

Maior profundidade de bits (mais bits de informação por pixel) significa mais cores disponíveis e uma representação de cores

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

mais precisa na imagem digital.

Por exemplo:

Um pixel com profundidade de bits igual a 1 possui dois valores possíveis: preto e branco.

Um pixel com profundidade de bits igual a 8 possui 28 ou 256 valores possíveis.

Page 19: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Na maioria dos casos, imagens Lab, RGB, em tons de cinza e CMYK possuem 8 bits de dados por canal de cor.

Isso é convertido numa profundidade de bits em:

- Lab de 24 bits (8 bits x 3 canais);

- RGB de 24 bits (8 bits x 3 canais);

- Tons de cinza de 8 bits (8 bits x 1 canal);

- CMYK de 32 bits (8 bits x 4 canais).

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

- CMYK de 32 bits (8 bits x 4 canais).

Nota 1: Todas as imagens do Adobe Photoshop possuem um ou mais canais, cada um armazenando informações sobre elementos de cores da imagem. O número de canais padrão de uma imagem depende de seu modo de cor. Por exemplo, uma imagem CMYK possui pelo menos quatro canais, um para cada informação de ciano, magenta, amarelo e preto. Imagine que um canal seja equivalente a uma chapa no processo de impressão, com uma chapa separada aplicando cada camada de cor.

Page 20: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Nota 2:

Além desses canais de cor padrão, canais extras,

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Além desses canais de cor padrão, canais extras, chamados de canais alfa, podem ser adicionados a uma imagem para armazenar e editar selecções como máscaras, e canais de cor spot podem ser adicionados para adicionar chapas de cor spot para impressão.

Page 21: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Convertendo entre profundidades de bits

Uma imagem de 16 bits por canal oferece distinções mais precisas na cor, mas pode ter duas vezes o tamanho do ficheiro de uma imagem de 8 bits por canal.

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Para converter entre 8 bits por canal e 16 bits por canal:

1 Primeiro achate a imagem

2 Escolha Imagem > Modo > 16 Bits/Canal ou 8 Bits/Canal.

Page 22: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Convertendo entre modos de cores (Photoshop)

Quando se escolhe um modo de cores diferente para uma imagem, os valores de cores da imagem são permanentemente alterados. Por exemplo, ao converter uma imagem RGB para o modo CMYK, os valores de cores RGB fora do gamut de CMYK são ajustados para se enquadrarem ao gamut. Consequentemente, antes de converter imagens, convém

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Consequentemente, antes de converter imagens, convém proceder da seguinte maneira:

1 - Faça quantas edições forem possíveis no modo original da imagem (geralmente RGB, na maioria dos scanners, ou CMYK).

2 - Salve uma cópia de backup antes de converter.

3 - Achate o arquivo antes de converter.

4- Escolha Imagem > Modo e o modo desejado no submenu.

Page 23: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Convertendo para cores indexadas (Photoshop)

Converter para cores indexadas reduz o número de cores da imagem para no máximo 256 (o número padrão de cores suportadas pelos formatos GIF e vários aplicativos de multimedia. Essa conversão reduz o tamanho do arquivo, pois exclui informações de cor da imagem.

Para converter em cores indexadas, é necessário iniciar com

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

uma imagem em tons de cinza ou RGB.

1 Escolha Imagem > Modo > Cores Indexadas.

Observação: A imagem deve ser achatada primeiro ou as camadas serão perdidas.

2 Selecione a caixa de diálogo Visualizar Cores Indexadas para exibir uma visualização das alterações.

Page 24: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Combinação de cores (regras)Combinação de cores (regras)

Mesma tonalidadeMesma tonalidade

00 00 FF FFFF FFCC CC FF FFFF FF

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

CC CC FF FFFF FF

3333 33 33 555533 33 33 33 6666

3434 AA AA 34343434 C1 C1 3434

Dois pares idênticos e iguais entre siDois pares idênticos e iguais entre si

Page 25: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Combinação de cores (regras)Combinação de cores (regras)

Mesma luminosidadeMesma luminosidade

00 00 FF 11FF 11CC CC FF 11FF 11

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

3333 44 44 555533 44 33 44 6666

3434 AA AA BBBB3434 C1 C1 BBBB

Dois pares idênticos mas diferentes entre siDois pares idênticos mas diferentes entre si

Page 26: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

Combinação de cores (regras)Combinação de cores (regras)

Cores complementaresCores complementares

3333 FF FF 3333FF FF 3333 FFFF

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

FF FF 3333 FFFF

6666 FF FF 33333333 FF FF 6666

Ordem complementarOrdem complementar

Page 27: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

MatizMatiz é a cor reflectida de um objecto ou é a cor reflectida de um objecto ou transmitida por meio dele. É medido como um transmitida por meio dele. É medido como um local no disco de cores padrão, expresso como um local no disco de cores padrão, expresso como um grau entre 0grau entre 0°°e 360e 360°°..Em uso comum, o matiz é identificado pelo nome Em uso comum, o matiz é identificado pelo nome

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

Em uso comum, o matiz é identificado pelo nome Em uso comum, o matiz é identificado pelo nome da cor como vermelho, laranja ou verde.da cor como vermelho, laranja ou verde.

Page 28: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

SaturaçãSaturaçãoo, é a intensidade ou pureza da cor. , é a intensidade ou pureza da cor. Representa a quantidade de cinza em proporção ao Representa a quantidade de cinza em proporção ao matiz, medida como uma percentagem de 0% (cinza) matiz, medida como uma percentagem de 0% (cinza) a 100% (completamente saturado). No disco de cores a 100% (completamente saturado). No disco de cores

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

a 100% (completamente saturado). No disco de cores a 100% (completamente saturado). No disco de cores padrão, a saturação aumenta do centro para a aresta.padrão, a saturação aumenta do centro para a aresta.

Page 29: Sobre imagens Sobre imagens bitmap bitmap e gráficos ...paulogarrido.weebly.com/.../design_grafico__conceitos_basicos.pdf · Imagem (Conceitos básicos) Formador: P. Garrido grandes

BrilhoBrilho é a luz ou sombra relativa da cor, normalmenteé a luz ou sombra relativa da cor, normalmentemedido como uma percentagem de 0% (preto) a medido como uma percentagem de 0% (preto) a 100% (branco).100% (branco).

Imagem (Conceitos básicos) Imagem (Conceitos básicos) Formador: P. GarridoFormador: P. Garrido

100% (branco).100% (branco).


Top Related