26
Computação Gráfica para Designers Roze Anne Luiz da Vitória Gabriela de Oliveira Cotta Nilton Gonçalves Gamba Junior

ComputaçãO GráFica Para Designers

Embed Size (px)

Citation preview

Page 1: ComputaçãO GráFica Para Designers

Computação Gráfica para Designers

Roze Anne Luiz da VitóriaGabriela de Oliveira Cotta

Nilton Gonçalves Gamba Junior

Page 2: ComputaçãO GráFica Para Designers

Dois planetas, muitos problemas

Na década de 1980, a Disney lançou o 1º filme a usar computação gráfica – Tron – nele um programador de computador entra, literalmente, dentro da máquina. Para voltar ao mundo real, ele tem que superar uma série de desafios produzidos pelo "controle-mestre".

Page 3: ComputaçãO GráFica Para Designers

Atualmente, muitos desses desafios não são mais tão complicados porque os softwares estão mais potentes e as interfaces mais amigáveis.

Porém o Planeta Digital continua com suas regras e seu comportamento binário.

Page 4: ComputaçãO GráFica Para Designers

Ao imprimir um arquivo e ele sair pequeno demais, ao tentar ampliá-lo e ele ficar como um mosaico, esses são problemas que ainda enfrentamos.

O caminho para não acontecer esses conflitos entre o Planeta Material e o Digital são as caixinhas de diálogo.

Page 5: ComputaçãO GráFica Para Designers

Entendê-las é muito importante para criar um projeto gráfico eficaz.

Porém muitos usuários desconhecem seu correto preenchimento e quando se vêem diante delas, fecham-nas sem responder suas perguntas.

Page 6: ComputaçãO GráFica Para Designers

Planeta Material e Planeta Digital

Planeta Material é o ambiente fora do computador, mídia impressa, fotografias e as medidas são em centímetros, polegadas.

Planeta Digital é o ambiente dentro do computador, a imagem já digitalizada.

Page 7: ComputaçãO GráFica Para Designers

País Vetorial e País Mapa de Bits

País Mapa de Bits(mosaico)

No ambiente mapa de bits a imagem é formada por pontos individuais (bits).

Os bits são unidades da memória do computador que tem dois valores: um (ativado – branco) e zero (desativado – preto).

Page 8: ComputaçãO GráFica Para Designers

País vetorial(estrutura de arame)

No país vetorial a imagem é formada por formas e objetos ao invés de pontos, por isso podemos encontrar a expressão “aramado”, que é o contorno expresso pelo vetor.

Page 9: ComputaçãO GráFica Para Designers

O País Mapa de Bits

Pixel

Os pontos que compõem a imagem mapa de bits são denominados pixels, eles são quadrados e indivisíveis e por serem a menor unidade da imagem, eles se tornam a unidade de medida do planeta digital.

Page 10: ComputaçãO GráFica Para Designers

A profundidade de bits(quantidade de cores)

Na imagem colorida o bit não deixa de ser binário, porém para que ela tenha mais cores é necessário colocar mais bits atrás de cada pixel.

Para calcular a quantidade de combinações de cores usa-se um cálculo de análise combinatória:

2n = número de coresn = profundidade de bits

Page 11: ComputaçãO GráFica Para Designers

No planeta digital as imagens são exibidas em projeções luminosas no monitor, então ele trabalha com a síntese cromática aditiva, que significa que todas as cores juntas formarão o branco e a ausência delas é o preto.

Suas cores básicas são o vermelho, o azul e o verde (RGB – Red, green e blue)

Page 12: ComputaçãO GráFica Para Designers

Obs.: RGB – Projeção da luz / CMYK – Reflexão da luz

Já a síntese cromática subtrativa é dada por pigmentos e não por projeção, então a soma de todas as cores resulta no preto e a ausência delas é a cor do suporte – geralmente branco.

Suas cores básicas são o magenta, o cian e o amarelo (CMYK – cyan, magenta, yellow, black).

Page 13: ComputaçãO GráFica Para Designers

Redução/ aumento de cores

Ao reduzir a quantidade de cores é necessário fazer a redução não só quantitativa como também qualitativa.

O processo utilizado na redução é a paletização, isto é, definir uma paleta composta com menos cores do que a imagem original (24 bits para 8 bits = 16 milhões de cores para 256).

24 bits

8 bits

Page 14: ComputaçãO GráFica Para Designers

Ditherização ou reticulação

Ao reduzir a quantidade de cores o software utiliza um recurso para simular a passagem de um tom para o outro, já que ele não tem mais tantas cores disponíveis. Isto é chamado de reticulação ou ditherização.

A redução de cores é reversível, porém a qualidade da imagem não. Os dithers se manterão.

Page 15: ComputaçãO GráFica Para Designers

Memória Ocupada

Exemplo

Um arquivo com 3 pixels de altura, 3 pixels de largura e 3 bits de profundidade:

– Altura x Largura3 pixels x 3 pixels= 9 pixels

– Pixels x Bits9 pixels x 3 bits= 27 bits

Sendo 8 bits = 1 byte, a imagem tem 3,4 bytes ou 27 bits.

O cálculo da memória ocupada por um arquivo mapa de bits pode vir de uma analogia com o cálculo do volume.

Page 16: ComputaçãO GráFica Para Designers

50 pixels

Resolução(PPI)

A resolução é a relação entre duas medidas, a do Planeta Digital e a do Planeta Material.

A unidade utilizada é o PPI – pixel per inch – que quer dizer pixel por polegada.

100 pixels

2 polegadas

2 polegadas

0,02 PPIs

0,04 PPIs

Page 17: ComputaçãO GráFica Para Designers

Relacionando as variáveis de medida(PPI, pixels e polegadas)

D = Medida digital (pixels)M = Medida material (polegadas, milímetros,

centímetros, etc.)R = Resolução (PPI)R= D/M

Page 18: ComputaçãO GráFica Para Designers

Dialogando com as caixas de diálogo

Criando um arquivo mapa de bits- Comando Arquivo/Novo no Adobe Photoshop;

Redimensionando um arquivo mapa de bits- Comando Imagem/Tamanho da imagem (Image/Image Size);

Modificando a profundidade de bits- Comando Imagem/Modo (Image/Mode);

Criando um mapa de bits a partir de uma imagem vetorial PPI e DPI

PPI é igual a quantidade de pixel por polegadas. Está relacionado a arquivos.

DPI é igual a pontos por polegadas, tendo pontos uma representação esférica. Esta é relacionado à unidade óptica mínima de um aparelho, ao hardware. Um exemplo é a impressora e o scanner.

Page 19: ComputaçãO GráFica Para Designers

Monitorando as variáveis

No Adobe Photoshop

Bola-200-100 indica as dimensões digitais em pixels (200) e a resolução em PPI (100)

Page 20: ComputaçãO GráFica Para Designers

Mude a resolução de 100 para 200

Page 21: ComputaçãO GráFica Para Designers

No Corel Draw

Bola-200-100

Bola-200-200

Page 22: ComputaçãO GráFica Para Designers

No Adobe Photoshop

Page 23: ComputaçãO GráFica Para Designers

No Corel Draw

As três bolas se comportam de forma totalmente diferente quanto ao tamanho em cada um dos ambientes.

Bola-200-100

Bola-200-200

Bola-400-200

Page 24: ComputaçãO GráFica Para Designers

Ao aplicar o zoom vemos que uma bola tem um esfumaçado no seu contorno, isso ocorreu pois nesse arquivo modificamos a quantidade de pixels.

No Adobe Photoshop

Page 25: ComputaçãO GráFica Para Designers

Monitoração das variáveis do sistema operacional

O comportamento das interfaces de trabalho do Windows é semelhante ao do mapa de bits. Por isso as características dele podem influir na visualização da imagem.

Apesar do sistema operacional não alterar as variáveis de dimensão de um arquivo, eles podem exibi-las de forma bastante distintas.

Portanto é necessário levar em conta estas possíveis distorções.

Windows 1366 x 768

Windows 800 x 600

Page 26: ComputaçãO GráFica Para Designers

Além de utilizar os filtros e ferramentas de edição dos softwares, é possível interferir na imagem por meio de seus elementos estruturais.

A compreensão das relações entre o Planeta Digital e o Material será fundamental para lidar com qualquer imagem em qualquer contexto que utilize a edição digital.

Criando nos dois planetas