Web Design Aula03

FEAPADisciplina: Design gráfico

Professor: Anderson Maia

[email protected]

Conceitos Básicos

• Digital: Sistema no qual a informação é processada em forma numérica, utilizando um sistema binário.

• Sistema Binário: Sistema numérico que pode assumir apenas 2 valores, base para toda informação digital, representado pelos valores 0 ou 1( ligado ou desligado).

• Sistema Decimal: 1 2 3 4 5 6 7 8 9 10

• Sistema Binário: 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010

Sistemas de Numeração

• Bit – menor partícula de informação no computador, pode representar 0 ou 1. Esses dois símbolos são opostos e mutuamente exclusivos.

• Byte – conjunto de 8 bits.

• Os Múltiplos do Byte são:1. 1.024 bytes = 1 Kb (kilobyte)2. 1.024 Kb = 1MB (megabyte)3. 1024 Mb = 1 Gb (gigabyte)4. 1024 Gb = 1 Tb ( terabyte)


• Existiram e existem diversos sistemas de numeração.

• No computador, serve para questões de endereçamento, armazenamento, conteúdo de tabelas e representações gráficas.

• Bases diferentes usadas nos mais diversos computadores.


• Bases

– Binária • 0, 1

– Octal• 0, 1, 2, 3, 4, 5, 6, 7

– Decimal• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

– Hexadecimal• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Imagens

- Significa a representação visual de um objeto

Imagem Digital

• É a representação de uma imagem bidimensional usando números binarios codificados de modo a permitir seu armazenamento, tranferência, impressão ou reprodução, e seu processamento por meios eletrônicos.

• Ex: Vetorial e Bitmaps

Imagens na Web

• Pixel: Menor elemento que constitui a imagem. O ‘grão’ da imagem digital.• A palavra pixel é oriunda da junção dos termos picture e element, formando, ao

pé da letra, a expressão elemento de imagem.

Os pixels que formam uma imagem digitalizada (como arquivos JPEG usados em páginas da Internet) podem ou não estar em uma correspondência de "um para um" com pixels da tela do computador, isso depende como o monitor do computador está configurado para exibir uma imagem. Em computação, uma imagem composta por pixels é conhecida como uma imagem "bitmap"

Imagens na Web

• A partir da noção do pixel como uma medida da qualidade das imagens, foi propagado o termo “resolução” para atribuir quantos pixels em altura e largura uma foto tem.

Imagens na Web

Nas câmeras digitais, por exemplo, é comum vermos a concorrência gerada pelo fabricante que desenvolve, com um bom preço, a câmera com a maior taxa de Megapixels entre a concorrência.

Imagens Vetorial

• Uma imagem vetorial é descrita por linhas plotadas num sistema de coordenadas cartesianas.

• Permite redimensionamento em qualquer escala sem perda de qualidade, pois somente no momento da impressão ela é convertida em um bitmap adequado as características do equipamento .

Imagens VetorialA este processo de conversão de vetorial para bitmap chamamos de rasterização, e é executado por um RIP – Raster Image Processor.

São utilizadas principalmente nas fontes de texto, gráficos, ilustrações e preenchimento em dégradé.

Bitmap

Para descrever imagens, como as obtidas por fotografia digital é necessário outra técnica, o bitmap. A imagem obtida por fotografia digital ou escaneada é um bitmap, ou seja, mapeada por bits.

Bitmap

• No bitmap 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.

Resumindo

• Bitmap – características: trabalha as imagens com variações complexas de cores, tons ou formas, como fotos ou gravuras ou imagens digitalizadas de vídeo, câmeras fotográficas digitais ou escaneadas.

• Vetorial – características: trabalha os desenhos em linhas geométricas simples e fórmulas matemáticas. Gráficos e ilustrações a mão livre, imagens em 2D e 3D. O tamanho do arquivo também é menor pois é gravado em ASCII.

O modelo de cores RGB

• O sistema usado para a criação de cores em seu monitor baseia-se nas mesmas propriedades fundamentais da luz que ocorrem na natureza: essas cores podem ser criadas a partir do vermelho, do verde e do azul. Essa é a base do modelo de cores RGB

1

O modelo de cores RGBNo modelo de cores RGB, as cores dos pixels podem ser mudadas combinando-se vários valores de vermelho, verde e azul. Cada uma das três cores primárias tem um intervalo de valores de 0 até 255.Quando você combina os 256 possíveis valores de cada cor, o número total de cores fica em aproximadamente 16,7 milhões (256 X 256 X 256).

Tabela de Cores

Exemplo no HTML

Conclusão RGB

• Imagens RGB: Neste formato cada pixel contém apenas uma tríade de valores entre 0 e 255. Cada valor da tríade representado, respectivamente, as intensidades das cores vermelho(R), verde(G) e azul(B), que combinadas compõem a cor do pixel.

• Os canais representam a luminosidade, ‘intensidade das luzes’, vermelha, verde e azul respectivamente.

• Profundidade de cor = 24 bits por pixel. 24 bits por pixel (2 = 16.777.216 cores).

24

O modelo de cores CMYK

O modelo de cores CMYK baseia-se não na adição de luz, mas em sua subtração. No modelo RGB, as cores são criadas acrescentando-se luz, o monitor (ou a televisão) é uma fonte de luz que pode produzir cores.


uma página impressa não emite luz; ela absorve e reflete luz. Então, quando você quiser transportar as cores do monitor para o papel, terá de usar outro modelo, o CMYK.


O modelo de cores CMYK é a base do

processo de impressão em quatro cores (quadricromia), que é usado principalmente para imprimir imagens de tons contínuos (como as fotografias digitalizadas) em uma gráfica.

RGB x CMYK

Resolução

• Um pixel, por si só, não possui nenhuma dimensão especifica. Contudo, ao visualizar, ou imprimir um mapa de bits é preciso dimensioná-lo na área de visualização ou impressão. Para isso utiliza-se o conceito de resolução.

• A resolução de um bitmap é normalmente dada em pixels por polegada, mas também é comum ser especificada em pontos por polegada, ou DPI.

Resolução

• Exemplo: Se desejar que uma imagem de 600 pixels de largura seja impressa em três polegadas terá 100 dpi.

• Assim, existe proporcionalidade inversa entre as dimensões de uma impressão e a resolução. Aumentando o tamanho da impressão diminui a resolução, e vice versa.

• Obs: a resolução da impressão de uma imagem deveria ser ppi. Mas caiu no uso comum o termo dpi, que serve, a rigor, para medir a resolução da impressoras.

Resolução

• Para cada sistema de impressão existe uma resolução ideal.

• Resoluções acima dela resultarão arquivos maiores sem ganhos de qualidade, menores resultarão em perda de definição de detalhes e pixelização.

• Resolução ideal para monitores – 72 dpi.

• Resolução ideal para impressão em alta qualidade – 300 dpi

Formato dos arquivos

• Compressão: Técnica utilizada para reduzir o tamanho do arquivo para facilitar o tamanho e transporte. Existem várias formas, com e sem perda de dados. O JPG usa taxa de compressão variável, desde as que perdas desprezíveis de dados até os que alteram profundamente a imagem, gerando arquivos bem menores.

• BMP(bitmap) – Qualidade original, sem compactação. Arquivo grande.


• TIFF(Tagged Image File Format) – Qualidade original, sem compactação ou com compactação reduzida. Arquivo grande. Ideal para imagens fotográficas que necessitam grandes ampliações ou excelente qualidade.

• JPEG ou JPG(Join Photographic Experts Group) – Ótima compactação para fotos e degradês, onde a perda da qualidade passa despercebida em meio a miríade de cores que formam essas imagens. O grau de compactação é regulável. Não é um formato adequado para imagens de precisão ( como logotipos detalhados e brasões ou imagens de textos pequenos) devido a perda de detalhes.


• GIF(Graphics Interchange Format) – Não apresenta perda de definição, a não ser de cores, pode ser limitado a um máximo de 256 delas. Seu sistema de compactação descreve bem áreas continuas iguais, o que torna esse formato ideal para desenhos com áreas chapadas. Também é ideal para desenhos onde a precisão de contornos é importante.

• PSD(Photoshop) – Imagem grande, qualidade original. Preserva as camadas e outros elementos adicionados a imagem, pelas ferramentas especificas do programa adobe Photoshop.


• EPS(encapsulated Postscript Subset) – imagem grande, qualidade original. Ideal para enviar para as gráficas.

• CDR(Corel Draw) – Imagem Vetorial.

Exercício

1. Quais os modelos de cores mais utilizados?

2. O que você entende por resolução de uma imagem?

3. O que significa a palavra pixel?

4. Quanto maior a resolução melhor a qualidade da imagem, isso acontece por quê?

Exercício

5.Quais os tipos de imagens, diferencie-os?

6.Quais cores formam o modelo RGB e qual a sua utilização?

7. Quais cores formam o modelo CMYK e qual a sua utilização?

Bibliografia

• BEAIRD, Jaison. Princípios do Web Design Maravilhoso. São Paulo: Alta Books, 2008.

• ANDERSON, Chris. A cauda longa. Rio de Janeiro: Elsevier, 2006.

Documents

Web Design Aula03