FERRAMENTAS PARA TRATAMENTO DE IMAGENS

Orientadora: Esp. Alexandra Falkalexandra@criatio.com

facebook.com/alexandra.falk.14

FERRAMENTAS PARA TRATAMENTO DE IMAGENS

Criar a interface do site a partir da captação, diagnóstico e tratamento de imagens para web, segundo fundamentos de

imagem digital, das características e aplicações das ferramentas de produção visual, dos princípios da teoria da cor e da forma, de tratamento de imagem e ergonomia de

software, das noções de desenhos bitmap e vetoriais e características de importação e exportação de arquivos,

para elaborar a composição visual do site.

Motivação• Imagens são muito atrativas,

expressam bem alguns sentimentos.• Imagens são um meio muito bom para

divulgação de um produto.• Imagens fazem parte do nosso dia a

dia.

O que é a cor?

O que é a cor?A cor existe por causa de três entidades: a luz, o objeto visualizado e o observador. Os físicos já provaram que a luz branca é composta pelos comprimentos de onda vermelha, verde e azul. O olho humano percebe as cores como sendo vários comprimentos de onda do vermelho, do verde e do azul, que são absorvidas ou refletidas pelos objetos. Por exemplo, suponha que você esteja fazendo um piquenique em um dia ensolarado, prestes a apanhar uma maçã vermelha. A luz do sol brilha na maçã e o comprimento de onda de vermelho da luz reflete-se da maçã para seus olhos. Os comprimentos de onda do azul e do verde são absorvidos pela maçã. Sensores em seus olhos reagem à luz refletida, enviando uma mensagem que é interpretada pelo seu cérebro como sendo a cor vermelha.

Sua percepção da cor vermelha depende da maçã, da luz e de você. Uma maçã absorverá mais verde e azul do que outra, assim a sua cor aparecerá avermelhada. Se nuvens encobrirem o sol, o vermelho da maçã aparecerá mais escuro. Sua interpretação da maçã também será afetada por sua própria fisiologia, por sua experiência em consumir essa fruta ou pelo fato de você não ter comido nada naquele dia.

“Para o artista gráfico, pintor ou produtor de vídeo, a criação da cor perfeita é essencial. Quando as cores não estão corretas, o conceito torna-se incompleto; a imagem talvez não consiga transmitir a informação; e a

experiência artística pode ser perdida.”

O que é a cor?

Cores primárias e secundárias

Quando as três cores primárias se sobrepõem, elas criam as cores secundárias: ciana, magenta e amarelo. As primárias e secundárias são complementos umas das outras. As cores complementares são as cores que mais se diferem umas das outras.

Modelos de Cores - RGB

O modelo RGB (Red, Green, Blue) é um modelo de cor aditivo, no qual são combinadas três cores claras principais (RGB), em várias intensidades, para produzir as demais cores. Duas cores principais, quando misturadas, produzem cores secundárias. É considerado um modelo aditivo, porque, ao adicionar as três cores primárias, cria o branco. Os modelos aditivos são utilizados em televisão, monitores de vídeo, digitalizadores, filmadoras e outros sistemas que geram cores por mistura deluz com comprimentos de onda diferentes. A tela do monitor é revestida de pontos de fósforo vermelho, verde e azul. Cada ponto pode ter um brilho diferente. Como os pontos estão muito próximos, o efeito visual é de um único ponto com a mistura da luz desses três pontos.

Componentes de Imagem

Canais RGB (Red, Green, Blue)• São canais que indicam a presença dessas cores

• Valor 255 para todos canais = branco puro; • Valor é 0 (zero) = preto puro.

Canal Alpha (Transparência)

Canal de Escala de Cinza (Gray)

• Canal que guarda as informações de transparência;• Nem sempre é suportado por todos os aplicativos;• Valores máximos representam maior opacidade;

• Determina a intensidade do cinza na imagem• Faz um transição entre o preto e o branco

O modelo de cor CMYK é um modelo subtrativo. Esse sistema produz cor quando a luz é refletida de um objeto ou de sua superfície. A cor vista é o resultado dessa luz refletida. A visão da luz branca ocorre quando o objeto está refletindo todos os comprimentos de onda de luz.Quando uma cor vermelha é visualizada, significa que o objeto ou superfície reflete o comprimento de onda correspondente ao vermelho e absorve todas as outras. As três cores principais do modelo subtrativo são cian, magenta e amarelo. Duas cores principais misturadas produzem cores secundárias verde, vermelho e azul (o oposto do RGB). A combinação dessas três cores principais produz o preto. O Modelo CMYK é utilizado em imagens para impressão profissional.

Modelos de Cores - CMYK (Cyan, Magenta, Yellow e Black)

HSV (Hue, Saturation, Value)

• Hue (Matiz) – Informa a cor predominante de um determinado pixel da imagem

• Saturation (Saturação) – Nível de pureza da cor • Value (Valor) – O brilho da cor

Original Saturação Matiz Valor

Modelos de Cores - Saturação

Vetorial e Bitmap - Conceitos BásicosImagem VetorialUma imagem vetorial é descrita por linhas plotadas num sistema de coordenadas cartesianas (equações matemáticas). Elas permitem redimensionamento em qualquer escala sem perda de qualidade, pois somente no momento da impressão ela é convertida em um bitmap adequado às características do equipamento - impressoras jato de tintas, laser e outras imprimem bitmaps, porque imprimem seqüências de pontos dispostos em linhas e colunas, cuja freqüência, por sua vez, define a resolução da impressora. A este processo de conversão de vetorial para bitmap chamamos de rasterização e é executado por um RIP – Raster Image Processor.

Imagens Vetoriais (Vector Drawing)

• Imagens formada a partir de vetores• Uso de algoritmos matemáticos• Suporta imagens raster misturadas a texto ou

formas geométricas• O tamanho do arquivo é menor• É escalonável• Fácil manipulação• Falta de compatibilidade • Falta de unificação dos formatos

Aplicações de Imagens Vetoriais

• Logotipo e Publicidade• Imagens que precisam ter tamanhos variados• Sites• Flash• Cartografia• Estatística• Dispositivos Móveis• Ícones de programas

Editores para Imagens Vetoriais

• CorelDraw• Inkscape• OpenDraw • Macromedia FreeHands• Illustrator

CorelDraw Inkscape FreeHands

Vetorial e Bitmap - Conceitos BásicosImagem BitmapA imagem obtida por fotografia digital ou escaneada é um bitmap, ou seja, mapeada por bits. Quer dizer que a imagem está organizada em uma série de linhas e colunas formadas por pixels. Cada pixel (picture element) possui apenas uma cor e não possui uma dimensão fixa: o tamanho será atribuído ao pixel no momento da impressão.

Aplicações de Imagens Bitmap• Texturas e sprites• Humor• Arte digital• Fotografias• Web• Desktop (Wallpaper, ícones)• Promoção de produtos

Editores para Imagens Raster

• Adobe Photoshop• Corel Photo-Paint• GIMP (Opensource) • Macromedia Fireworks

Photo-Paint

GIMP

Photoshop

Fireworks

O pixel é a menor unidade de uma imagem digital. O termo vem da contração da expressão picture element ("elemento da imagem", em inglês). Ao darmos um zoom máximo numa foto digital, veremos que ela é formada por vários quadradinhos - os pixels. A cor de cada pixel é fruto da combinação de três cores básicas: vermelha, verde e azul. Cada uma dessas três cores possui 256 tonalidades, da mais clara à mais escura, que, combinadas, geram mais de 16 milhões de possibilidades de cores. Os pixels são agrupados em linhas e colunas para formar uma imagem.

O que é um pixel?

O que é um pixel?Uma foto digital de 800 x 600 pixels, por exemplo, tem em sua composição 800 pixels de largura por 600 de altura, ou seja, é formada por 480 mil pixels, todos do mesmo tamanho. Quanto maior o número de pixels, maior o volume de informação armazenada. Em outras palavras, quanto mais pixels uma imagem tiver, melhor será a sua qualidade e, assim, mais fiel ela será ao objeto real.

Formatos de imagensJPEG GIFPNGBMPTIFFRAWSVG

WebPExif

O que cada formato pode oferecer?

Adobe PhotoShop CS6