FEAPA

Disciplina: Design grfico

Professor: Anderson Maia

andersontrindade@ufpa.br

Conceitos Bsicos
Digital: Sistema no qual a informao processada em forma
numrica, utilizando um sistema binrio.
Sistema Binrio: Sistema numrico que pode assumir apenas 2
valores, base para toda informao digital, representado pelos
valores 0 ou 1( ligado ou desligado).
Sistema Decimal:
1 2 3 4 5 6 7 8 9 10
Sistema Binrio:
0001 0010 0011 0100 0101 0110 0111 1000 1001 1010

Sistemas de Numerao
Bit menor partcula de informao no
computador, pode representar 0 ou 1. Esses
dois smbolos so opostos e mutuamente
exclusivos.

Byte conjunto de 8 bits.

Os Mltiplos do Byte so:
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)

Sistemas de Numerao
Existiram e existem diversos sistemas
de numerao.
No computador, serve para questes de
endereamento, armazenamento,
contedo de tabelas e representaes
grficas.
Bases diferentes usadas nos mais
diversos computadores.

Sistemas de Numerao
Bases

Binria
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 representao visual de um objeto

Imagem Digital

a
representao
de
uma
imagem
bidimensional
usando
nmeros
binarios
codificados
de
modo
a
permitir
seu
armazenamento, tranferncia, impresso ou
reproduo, e seu processamento por meios
eletrnicos.
Ex: Vetorial e Bitmaps

Imagens na Web
Pixel: Menor elemento que constitui a imagem. O gro da

imagem digital.
A palavra pixel oriunda da juno dos termos picture e element,
formando, ao p da letra, a expresso elemento de imagem.

Os pixels que formam uma imagem digitalizada (como arquivos JPEG usados
em pginas da Internet) podem ou no estar em uma correspondncia de "um
para um" com pixels da tela do computador, isso depende como o monitor do
computador est configurado para exibir uma imagem. Em computao, uma
imagem composta por pixels conhecida como uma imagem "bitmap"

Imagens na Web
A partir da noo do pixel como uma medida da
qualidade das imagens, foi propagado o termo
resoluo para atribuir quantos pixels em altura
e largura uma foto tem.

Imagens na Web
Nas cmeras
digitais, por
exemplo, comum
vermos a
concorrncia
gerada pelo
fabricante que
desenvolve, com
um bom preo, a
cmera com a
maior taxa de
Megapixels entre a

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 impresso ela
convertida
em
um
bitmap
adequado
as caractersticas do

Imagens Vetorial
A este processo de converso de
vetorial para bitmap chamamos de
rasterizao, e executado por um
RIP Raster Image Processor.

So utilizadas principalmente nas

fontes de texto, grficos, ilustraes
e preenchimento em dgrad.

Bitmap
Para descrever imagens, como as obtidas por
fotografia digital necessrio outra tcnica, 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
srie de linhas e colunas formadas por pixels.
Cada pixel (picture element) possui apenas uma
cor e no possui uma dimenso fixa: o tamanho
ser atribudo ao pixel no momento da impresso.

Resumindo
Bitmap caractersticas: trabalha as imagens
com variaes complexas de cores, tons ou
formas, como fotos ou gravuras ou imagens
digitalizadas de vdeo, cmeras fotogrficas
digitais ou escaneadas.

Vetorial caractersticas: trabalha os

desenhos em linhas geomtricas simples e
frmulas matemticas. Grficos e ilustraes a
mo livre, imagens em 2D e 3D. O tamanho do
arquivo tambm menor pois gravado em
ASCII.

O modelo de cores RGB

O sistema usado para a criao 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 RGB

No modelo de cores RGB, as cores dos pixels podem
ser mudadas combinando-se vrios valores de
vermelho, verde e azul. Cada uma das trs cores
primrias tem um intervalo de valores de 0 at 255.
Quando voc combina os 256 possveis valores de
cada cor, o nmero total de cores fica em
aproximadamente 16,7 milhes (256 X 256 X 256).

Tabela de Cores

Exemplo no HTML

Concluso RGB
Imagens RGB: Neste formato cada pixel contm

apenas uma trade de valores entre 0 e 255. Cada valor

da trade representado, respectivamente, as
intensidades das cores vermelho(R), verde(G) e azul(B),
que combinadas compem 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 no na
adio de luz, mas em sua subtrao. No
modelo RGB, as cores so criadas
acrescentando-se luz, o monitor (ou a
televiso) uma fonte de luz que pode
produzir cores.

O modelo de cores CMYK

uma pgina impressa no emite luz; ela absorve e
reflete luz. Ento, quando voc quiser transportar as
cores do monitor para o papel, ter de usar outro
modelo, o CMYK.

O modelo de cores CMYK

O modelo de cores CMYK a base do
processo
de
impresso
em
quatro
cores
(quadricromia), que usado principalmente para
imprimir imagens de tons contnuos (como as
fotografias digitalizadas) em uma grfica.

RGB x CMYK

Resoluo
Um pixel, por si s, no possui nenhuma
dimenso especifica. Contudo, ao visualizar,
ou imprimir um mapa de bits preciso
dimension-lo na rea de visualizao ou
impresso. Para isso utiliza-se o conceito de
resoluo.
A resoluo de um bitmap normalmente
dada em pixels por polegada, mas tambm
comum ser especificada em pontos por
polegada, ou DPI.

Resoluo
Exemplo: Se desejar que uma imagem de 600
pixels de largura seja impressa em trs polegadas
ter 100 dpi.
Assim, existe proporcionalidade inversa entre as
dimenses de uma impresso e a resoluo.
Aumentando o tamanho da impresso diminui a
resoluo, e vice versa.
Obs: a resoluo da impresso de uma imagem
deveria ser ppi. Mas caiu no uso comum o termo
dpi, que serve, a rigor, para medir a resoluo da
impressoras.

Resoluo
Para cada sistema de impresso existe uma
resoluo ideal.
Resolues acima dela resultaro arquivos
maiores sem ganhos de qualidade, menores
resultaro em perda de definio de detalhes e
pixelizao.
Resoluo ideal para monitores 72 dpi.
Resoluo ideal para impresso em alta
qualidade 300 dpi

Formato dos arquivos

Compresso: Tcnica utilizada para reduzir o
tamanho do arquivo para facilitar o tamanho e
transporte. Existem vrias formas, com e sem
perda de dados. O JPG usa taxa de compresso
varivel, desde as que perdas desprezveis de
dados at os que alteram profundamente a
imagem, gerando arquivos bem menores.
BMP(bitmap) Qualidade original, sem
compactao. Arquivo grande.

Formato dos arquivos

TIFF(Tagged Image File Format) Qualidade original,
sem compactao ou com compactao reduzida.
Arquivo grande. Ideal para imagens fotogrficas que
necessitam grandes ampliaes ou excelente
qualidade.
JPEG ou JPG(Join Photographic Experts Group) tima
compactao para fotos e degrads, onde a perda da
qualidade passa despercebida em meio a mirade de
cores que formam essas imagens. O grau de
compactao regulvel. No um formato adequado
para imagens de preciso ( como logotipos detalhados
e brases ou imagens de textos pequenos) devido a
perda de detalhes.

Formato dos arquivos

GIF(Graphics Interchange Format) No
apresenta perda de definio, a no ser de cores,
pode ser limitado a um mximo de 256 delas. Seu
sistema de compactao descreve bem reas
continuas iguais, o que torna esse formato ideal
para desenhos com reas chapadas. Tambm
ideal para desenhos onde a preciso 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.

Formato dos arquivos

EPS(encapsulated Postscript Subset) imagem
grande, qualidade original. Ideal para enviar para
as grficas.
CDR(Corel Draw) Imagem Vetorial.

Exerccio
1. Quais os modelos de cores mais utilizados?
2. O que voc entende por resoluo de uma
imagem?
3. O que significa a palavra pixel?
4. Quanto maior a resoluo melhor a qualidade da
imagem, isso acontece por qu?

Exerccio
5.Quais os tipos de imagens, diferencie-os?
6.Quais cores formam o modelo RGB e qual a sua
utilizao?
7. Quais cores formam o modelo CMYK e qual a sua
utilizao?

Bibliografia
BEAIRD, Jaison. Princpios do Web Design
Maravilhoso. So Paulo: Alta Books, 2008.
ANDERSON, Chris. A cauda longa. Rio de
Janeiro: Elsevier, 2006.