Cores Photoshop

(“PHOTOSHOP”)
NT Informática EDITORAÇÃO ELETRONICA

Caçapava – SP
(012) 3653 5983
Modulo I
Objetivo: Apresentar conceitos básicos do uso das cores
Por que as cores são importantes?
Representação planificada do cubo de cores
A cor é um elemento fundamental em qualquer processo de comunicação visual. É um componente com

grande influência no dia a dia de uma pessoa, interferindo nos sentidos, emoções e intelecto.
Normalmente, escolhemos as cores usando nossas emoções e intuição. Mas, no universo do computador
uma cor é muito mais que isto. A cor é matemática, ciência, além de uma forma de arte. Trabalhar com
cores é saber utilizar uma variedade de novos conceitos como código hexadecimal, cubo de cores,
pontilhamento, paletas, RGB, profundidade de bits, etc.
Além disso, as cores têm características próprias e podem se influenciar, modificando ou até alterando
tonalidades quando colocadas lado a lado. Combinando adequadamente as cores e sabendo utilizá-las,
de forma equilibrada e respeitando as características de cada uma, você pode criar uma página muito
atrativa.
CORES
As cores são classificadas em duas categorias: cor-luz e cor-pigmento. Na luz branca estão presentes
todas as cores. A ausência de luz é o preto. As cores primárias na cor-luz são diferentes na cor-pigmento.
O pigmento é o material que tinge uma superfície e com ele criamos uma infinidade de cores. No Círculo
Cromático encontramos as cores primárias, secundárias e terciárias. Quando se fala em teoria das cores é
importante fazer uma distinção entre cor-luz e cor-pigmento.
Cor-luz
Muitos estudiosos se interessaram pelo estudo das cores. O famoso pintor, inventor,
arquiteto e cientista Leonardo da Vinci (1452- ?) e Johann Wolfgang Goethe (1749-
1832) escritor e pintor alemão, estão entre aqueles que estudaram o tema.
Mas foi Isaac Newton (1642-1727), famoso cientista, físico e matemático inglês e depois Thomas
Young(1773-1829), outro físico inglês, que estabeleceram o princípio de que na luz branca estão
presentes todas as cores. Newton fechou-se num quarto escuro, deixando passar um pequeno feixe de
luz pela janela e verificou os efeitos dessa luz com algumas lentes e um cristal - um prisma de base
triangular - diante desse raio de luz. Resultado: o cristal decompôs a luz exterior branca nas cores do
espectro que ficaram visíveis ao incidir sobre uma parede próxima.
1
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Anos mais tarde, o físico Young realizou o experimento oposto e determinou, por investigação, que as
cores do espectro podem ser reduzidas às três cores básicas: o verde, o vermelho e o azul intenso. Com
essas três cores projetadas de forma a coincidir num mesmo espaço, conseguiu reproduzir a luz branca.
Assim, no experimento, ele recompôs a luz dividida por Newton.
Seus estudos, sob a ótica da Física, fundamentaram a teoria que hoje conhecemos.
Cor-pigmento
Não é possível pintar com luz, isto é, com cores óticas. Por isso os pigmentos são utilizados.
O pigmento, na realidade, não é uma cor. Ele é o material ou a substância que tinge uma superfície com
uma certa cor, e dependendo das características ou propriedades desse pigmento sua tonalidade pode
variar. Os pigmentos podem ser extraídos da natureza ou criados artificialmente em laboratório.
Tudo que nos rodeia tem pigmento: plantas, nossa pele, nossas roupas, as tintas que revestem as
paredes dos ambientes. Assim, tudo está colorido por pigmentos.
O ser humano, desde as mais remotas eras, extraiu os pigmentos da natureza, triturando sementes,
folhas, carvão, ossos, adicionando óleos vegetais, sangue de animais, misturando terras de diversas
cores, etc., e transformando-os em corantes ou tintas para as mais diversas necessidades, criando uma
variedade de tonalidades de cores para dar vazão ao seu potencial criativo e à sua necessidade de
expressão. Com a evolução das técnicas de pintura, modernamente os pigmentos não são apenas
extraídos da natureza, mas também são criados artificialmente. Pesquisas continuam sendo feitas e a
indústria vem constantemente procurando desenvolver novas tonalidades de cores em busca da exigência
do mercado.
As cores primárias geradoras

O que são cores primárias ?
São aquelas que não podem ser obtidas por mistura de outras cores. As cores primárias são cores puras
e elas são diferentes nas cores-luz e nas cores-pigmento.
Cores primárias na cor- luz
A cor-luz (também conhecida como cor energia) recebe esta denominação porque as cores estão contidas
na luz e por ela são refletidas. A soma das três cores-luz primárias ( vermelho -alaranjado, verde e azul
forte) produz a luz branca. Por isso elas também são chamadas de cores primárias aditivas.
A luz é emitida em ondas de várias freqüências diferentes, cada freqüência corresponde a uma cor
específica. Quando um feixe de luz branca atravessa um prisma, as freqüências são separadas e
podemos ver todas as cores num arco-íris. Este princípio é utilizado na eletrônica, na física e na
informática. É este o princípio que possibilita a você ver as cores em seu monitor.
2
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
O branco e o preto na cor-luz

Na luz branca estão presentes todas as cores, portanto, somando todas as cores produz-se o branco, que
é a luz pura. A ausência da luz é o preto.
Cores primárias na cor-pigmento
Quando utilizamos tintas, lápis-de-cor, canetas coloridas e outros materiais para tingir ou colorir estamos
utilizando cores-pigmento. Os pigmentos cromáticos são classificados em três categorias: primários,
secundários e terciários.
As cores primárias da cor pigmento são: vermelho-magenta, amarelo-cádmio e azul forte. Nas artes
gráficas e na fotografia usa-se o azul-ciano. O azul-ultramar ou da prússia é usado pelos artistas pintores
que trabalham com tinta a óleo, acrílica, guache, aquarela .
Com essas cores básicas é possível criar uma infinidade de tonalidades e assim, reproduzir as cores da
natureza. Este também é o princípio utilizado em sua impressora (modo CMYK).
O branco e o preto na cor-pigmento
Os pigmentos são classificados em duas categorias: pigmentos acromáticos e pigmentos cromáticos. O
branco, o preto e os cinzas, produzidos pela mistura do preto e do branco, são acromáticos porque não
contêm cor. Todos os outros pigmentos são cromáticos.
Quadro comparativo entre cor-luz e cor-pigmento.
Cor-luz Cor-pigmento
As primárias são:
vermelho-
vermelho
alaranjado
verde amarelo
azul forte azul
As secundárias são:
vermelho + azul vermelho + azul

magenta
violeta
azul + verde azul + amarelo

azul ciano verde
vermelho +
verde + vermelho
amarelo
amarelo alaranjado
3
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Produzir uma cor perfeita para ser impressa ou para ser exibida numa página da WEB não é tarefa fácil. É
importante entender como as cores são comunicadas pelo seu monitor e impressora para se reproduzir
com precisão aquilo que se deseja.
Por isso foram criados os modelos e modos de cores. Um modelo de cor é um sistema utilizado para
organizar e definir cores por exemplo, para uma impressora ou para um monitor. Um modo de cor
determina o número de cores exibido numa imagem e o tamanho do arquivo.
Veja os mais utilizados:
Cores do texto e fundo de página ( text and background colors)

Se você estiver criando um texto e quiser colocar um fundo de página colorido para ele, é bom lembrar
que:
1. Textos muito longos ou que requerem atenção precisam ser escritos sobre um fundo de página de
cor agradável para que os olhos não se cansem com a leitura. Assim, nunca empregue letras verdes
sobre um fundo vermelho ou letras alaranjadas sobre fundo azul forte, ou letras amarelas sobre um
fundo violeta, ou vice-versa para todos os exemplos.
Essa combinação de cores contrastantes é muito intensa e cria um efeito visual desagradável,
cansativo e em pouquíssimo tempo o observador acabará desistindo da leitura. Aparentemente,
poderá causar um efeito visual interessante, até chamativo, mas nada agradável para quem estiver
interessado em ler tudo o que você escreveu. Assim, não perca o trabalho que você teve e procure
empregar outras combinações. Respeite as características das cores.
Veja alguns exemplos e perceba a dificuldade para a leitura:
cores na web cores na web

2. Utilizar somente uma cor e algumas variações dela (harmonia monocromática), na criação de uma
página pode até ser interessante, mas ao mesmo tempo, pode-se acabar criando uma monotonia que
acabará por não despertar a atenção do observador. Mas você pode utilizar esse efeito, com um pouco de
habilidade e bom-senso.
3. Um fundo preto pode ser interessante para realçar cores primárias, fazendo com que as mesmas se
destaquem, mas evite usar cores muito vibrantes ou muito escuras para não cansar a leitura se o texto for
muito longo. Observe que amarela e verde são as mais visíveis:
4
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I

4. A cor vermelha é uma cor vibrante e intensa, assim como o laranja. Seu uso pode dar vida,
luminosidade a uma página, mas o emprego excessivo pode causar às pessoas mais sensíveis um mal
estar visual, até irritação. Assim, evite exageros quando empregar esta cor.

5. A cor cinza, neutra, é uma boa cor para um fundo de página com um texto longo, e combina bem com
todas as cores, pois permite uma leitura fácil, mas ... observe que as barras de navegação dos programas
também possuem esta cor. Portanto, evite usar cinza para todo o fundo de página, pois o usuário poderia
se confundir com a tela de navegação. Assim, procure criar uma "moldura" de outra cor se quiser usar o
cinza como plano de fundo.

6. A cor branca para plano de fundo é a que fornece maior legibilidade para um texto, porém o excesso de
brilho que o branco produz faz com que a vista se fatigue após certo tempo. Assim, evite textos longos sobre
fundo totalmente branco.
EXERCÍCIOS
1. Qual a diferença entre cor-luz e cor-pigmento?
2. O que são cores primárias?
3. O que é uma substância acromática?
4. De dois exemplos de cores primarias e secundárias.
5. Dê um exemplo de uma combinação inadequada de cores para textos.
5
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Objetivo: Apresentar os Conceitos de Cores na Internet
Compondo a página
Dos estudos sobre percepção e da experiência prática dos designers, observamos que, ao criar uma
página, deve-se levar em conta a boa organização das imagens, das letras, dos títulos e da cor do plano
de fundo. Independentemente do seu conteúdo, esses elementos, quando combinados entre si, exercem
um certo impacto sobre a atenção do observador.
O nível desse impacto depende de uma distribuição e combinação adequadas que só serão conseguidas
através da prática. Por isso é importante experimentar e testar os diferentes efeitos, pesquisar outros
sites, ler livros sobre o assunto, enfim, explorar ao máximo todas as possibilidades até se conseguir o
resultado desejado.
Ao compor uma página é interessante saber direcionar a atenção ou o olhar do observador para aquilo
que se quer. Na cultura ocidental, a dinâmica visual trabalha o olhar de cima para baixo e da esquerda
para a direita. Formas e cores adequadas devem direcionar a atenção para o estímulo principal, seja
imagem ou texto. Os estudos da percepção mostram que o olho humano não se fixa de forma contínua
em um texto, mas prefere "pular" de um conjunto de estímulos a outros. Em outras palavras, o olho "não
gosta" de grandes massas homogêneas para leitura, mas sim, de blocos menores e separados.
Entendendo o uso de cores - Mapeamento de cores

Em se tratando das imagens utilizadas no seu site é importante considerar dois pontos fundamentais:
profundidade de bits e paleta.
Profundidade de bits
É ela que define o número de cores que há em uma imagem. Em monitores coloridos, cada pixel pode
exibir um certo número de cores, que vão de 16 (4-bit) a 16 milhões ou mais. Devido ao fato de que
grande parte dos possíveis visitantes do seu site possuem monitores configurados para apresentar
somente 256 cores (placa colorida de 8 bits), é interessante você criar figuras para
serem exibidas desta forma.
48 bits para 3D ... 180 trilhões de cores 32 bits ... 4 bilhôes de cores
24 bits ... 16,7 milhões de cores 16 bits ... 65,5 mil cores
15 bits ... 32,8 mil cores 8 bits ......256 cores
7 bits ..... 128 cores 6 bits ..... 64 cores
1 bit ....... 2 cores
6
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Combinação de valores RGB

As cores do pixel podem ser mudadas combinando-se vários valores de vermelho, verde e azul.
Cada uma dessas três cores possui um intervalo que varia de zero até 255. Veja na tabela, a
combinação dos valores de:
RED GREEN BLUE COR COR
0 0 0 peto PRETO
123 123 123 cinza CINZA
255 255 255 branco BRANCO
No exemplo acima, ao misturar partes iguais das três cores, podemos sair do preto (quando
misturamos 0 das três cores - ausência de cor ) ao branco (quando misturamos 255 de cada uma
das cores - adição de todas as cores-luz). Valores intermediários irão gerar um cinza-médio.
Quando se combinam os 256 valores possíveis de vermelho, com os 256 valores de verde e os 256
de azul, obtém-se um total de 16,7 (256 x 256 x 256) milhões de cores, o que ainda é apenas uma
parte pequena das cores visíveis na natureza.
Contudo, tal número é suficiente para reproduzir boas imagens digitalizadas em um monitor
equipado com cores de 24 bits.
Exemplos:
Paleta de cores
Os navegadores para internet usam paletas diferentes para a exibição das imagens de uma página. Nas
paletas de 256 cores, os sistemas operacionais reservam 40 delas para uso próprio, sendo então que as
216 restantes são comuns em todas as plataformas. Assim, em um monitor configurado para 8 bits (256
cores), os navegadores automaticamente usam as cores existentes na paleta para substituir outras que
não estejam entre as fornecidas. Por isso, tome cuidado na escolha das cores para não ver as cores de
sua página substituídas por similares, que nem sempre causam o efeito desejado.
O monitor exibe luz sob a forma de pixels. O pixel é uma unidade de padrão de medida para imagens e
significa picture X element.
As cores do pixel são criadas a partir das luzes vermelha, verde e

azul que se misturam para formar outras cores.
Uma vez combinadas, essas três cores criam um modo de cor chamado RGB. O modo RGB permite uma
combinação de cores como as imagens Full Color (totalmente coloridas) e True Color (cores verdadeiras).
Os valores de 8 bits ( 0 a 255) para vermelho (Red), verde ( Green ) e azul ( Blue ), quando somados
formam um pixel de 24 bits ( 8 + 8 + 8 = 24 ), cerca de 16,7 milhões de cores.
7
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
RED GREEN BLUE COR COR
221 19 123 cor MAGENTA
0 146 64 cor VERDE
VIOLETA
145 105 161 violeta
AZULADO
255 153 0 cor ALARANJADO
0 255 255 ciancianoo CIANO
Paleta de cores indexadas

As imagens com no máximo 256 cores são denominadas indexadas (indexed colors) e possuem
uma paleta de cores associada ou uma tabela de consulta de cores (CLUT, Color Lookup Table),
que armazena e indexa as cores da imagem. Isto significa que, se uma cor da imagem original
não consta da tabela, o programa escolhe a mais próxima ou simula uma com as cores
existentes, para ser exibida na tela.
Valores hexadecimais
Em html - linguagem de programação para a WEB - valores hexadecimais são usados para
representar cores de plano de fundo, de texto e de link.
COR COR RGB HEXADECIMAL
FFF BRANCO 255-255-255 # FFFFFF
FF CINZA MÉDIO 123-123-123 # 999999
FF PRETO 0-0-0 # 000000
O hexadecimal é um cálculo matemático usado para converter valores RGB de maneira que o
html entenda quais cores você escolheu. Veja a correspondência dos valores de cores
especificados na tabela em RGB e em hexadecimal.
8
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
RGB 0 51 102 153 204 255

HEXADECIMAL 00 33 66 99 CC FF
Os hexadecimais especificam valores com uma combinação de dois dígitos para vermelho (Red), dois
dígitos para verde (Green) e dois dígitos para azul (Blue).
Exemplos:
VALOR
RED GREEN BLUE COR HEXADECIMAL
APROXIMADO
255 100 204 cor # FF66CC

153 102 204 cor # 9966CC
153 153 204 cor # 9999CC
A tabela abaixo pode ser usada para fazer as conversões quando os programas exigem porcentagens
de RGB, em vez de valores específicos.
% RGB HEX
100% 255 FF
No exemplo ao
80% 204 CC lado,
vemos uma
60% 153 99 representação da
40% 102 66
cor amarela em
modo RGB
20% 51 33 e em hexadecimal.
0% 0 00
Mais alguns exemplos de cores com valores hexadecimais:

c # FF0000 c # 0066FF c # 996600
c # 00FF00 c # FF00FF c # 99FFFF
c # 0000FF c # 9900FF c # 3399CC
c # FFFF00 c # FF9900 cc # 339933
c # 00FFFF c # CCFF99 c # 999900
c # FF00FF c # CC3366 c # 006666
Observação:
É possível criar e utilizar cores no design para Web fora dessas especificações de hexadecimal, pois
juntando-se os valores, mesmo de forma aleatória, sempre é possível criar uma nova tonalidade.
Exemplo: <body bgcolor="#0903EE" text="#436E79" link="#CF7B90" >.
Ou você pode usar os nomes das cores em inglês, assim: lightblue, darkviolet, etc
no lugar dos hexadecimais. Assim, <body bgcolor="#green" text="#white">.
Mas, tais combinações ou o nome das cores não são cores seguras (protegidas) e podem aparecer de
forma diferente do que você escolheu. As cores protegidas para navegadores são formadas sempre por
variações de 00, 33, 66, 99, CC e FF.
9
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Pontilhamento (em inglês, dithering) é o processo de se usar as cores disponíveis na paleta para
reproduzir outras cores. Às vezes, mesmo trabalhando com 256 cores é possível simular um número
maior de cores, criando uma difusão de pontos de uma cor sobre a outra.
Os programas que trabalham com imagens para WEB disponibilizam a opção dithering quando os
arquivos são compactados. Assim, as cores disponíveis "misturam-se em pequenos pontos" procurando
simular outras cores, as quais não estão disponíveis na paleta. Por exemplo, para se conseguir
determinado tom de verde azulado, pontos azuis podem ser dispersos sobre um fundo verde.
O pontilhamento aumenta o tamanho do arquivo e é mais recomendado para fotografias.
Exemplo de pontilhamento:
A imagem ao lado é uma simulação dos

Quando "misturam-se" criam uma
pixels de uma tonalidade dispersos
nova tonalidade de cor.
sobre uma outra tonalidade diferente.
Anti-serrilhamento (anti-aliasing) é o processo de adicionar cores próximas entre si para suavizar as

bordas serrilhadas observadas em imagens digitais. Geralmente, ele é utilizado para suavizar o contorno
das formas arredondadas para que elas tenham uma perfeita integração com o plano de fundo.
Para que essas bordas sejam suavizadas, alguns programas, que utilizam esses recursos, adicionam
grande quantidade de cores de tonalidade semelhante às bordas para misturá-las com o plano de fundo.
Conseqüentemente, aumenta-se o tamanho do arquivo. Mas, considerando a qualidade da imagem, este
é um procedimento recomendável.
Círculo sem anti-aliasing Círculo com anti-aliasing,

(com serrilhamento nas bordas). (sem serrilhamento nas bordas).
Tamanho da imagem 0.37 K. Tamanho da imagem 1.09 K.
EXERCÍCIOS
1. O que profundidade de bits?
2. O que é paleta de cores indexada?
3. Explique como criar cores no design para web.
4. O que é um pixel?
5. Descreva o que é anti-aliasing .
10
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Objetivo: Apresentar as Conceitos de Cores e Imagens
Cores e imagens
Uma imagem pode ser representada de várias formas, como por exemplo, uma pintura, fotografia, etc. No
universo do computador, uma imagem é uma coleção de pontos denominados "pixels" que se organizam
em uma grade retangular de linhas e colunas. Cada pixel é uma cor específica. O tipo mais simples de
imagem possui apenas pixels pretos e brancos e é denominada "imagem monocromática". Imagens -
"True Color" - contêm cerca de 16,7 milhões de cores.
Imagens e formatos de arquivos para Web

1. Quando você estiver criando suas imagens para a Web, converta-as sempre para o formato de arquivo
adequado. Imagens com formatos GIF e JPEG (ou JPG) por enquanto ainda são as ideais. As imagens
digitalizadas num scanner devem ter 72 dpi.
Não tente aumentar a resolução pensando que desta maneira suas imagens ficarão melhores. Isso só fará
com que suas páginas demorem mais para carregar e seus arquivos fiquem muito maiores. Páginas da
Web ainda não suportam maior resolução.
Porém, se você tem um bom conhecimento em tratamento de imagens e sabe como compactar esses
arquivos, você pode usar uma resolução maior para digitalizar as imagens. Assim, vá progressivamente
diminuindo o tamanho dessas imagens até obter o resultado desejado.
2. Se você estiver criando suas próprias imagens (desenhos) no Photoshop, no Fireworks, no Photopaint
ou outro programa, procure salvar as imagens no formato mais indicado. A qualidade das cores das
imagens apresentadas está intimamente ligada ao formato de arquivo escolhido. Faça testes entre
formatos JPEG ou GIF e compare os resultados, pois as cores sofrem alteração nesses dois formatos. De
forma geral, procure sempre compactar seus arquivos ao máximo.
A extensão JPEG ou JPG (formato de imagem raster definido pelo Joint

Photographic Experts Group) é a melhor maneira de salvar e comprimir
imagens fotográficas grandes, com número elevado de cores e
sobreamento. Porém, não permite transparência de fundo da imagem, ou
melhor, o plano de fundo de sua imagem não
será uma camada transparente. Conseqüentemente, defina antes a cor do
Imagem em arquivo JPEG plano de fundo que irá receber essa imagem.
Mas, depois de pronto evite redimensionar o arquivo
aumentando o tamanho, pois a definição perderá qualidade.
11
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Assim, calcule bem o tamanho da imagem que será colocada na página. Se precisar, poderá, sim,
diminuí-la, mas nunca aumentá-la.
O formato de arquivo GIF foi desenvolvido pela

CompuServe Inc. para ser usado em serviços on-line.
Arquivos GIF (Graphics Interchange Format) são
arquivos mapeados por cores que podem conter de 2 a
256 (imagens indexadas de até 8 bits - 256 cores).
A compactação de arquivos GIF é ideal para textos e
imagens de desenhos vetoriais. A imagem acima foi transformada
Esta compactação é feita quase sem perdas, o que em formato GIF
significa que a imagem compactada será bem próxima (transparente).
da original.
Este formato permite transparência do fundo da imagem (veja o exemplo acima), e quando você estiver
compactando seu arquivo não esqueça de marcar essa opção de transparência. Assim, aparecerá
somente o desenho o qual poderá ser colocado sobre qualquer cor de plano de fundo.
O formato GIF também permite um outro recurso: a animação.
Os GIFs animados não exigem plug-ins e são criados a partir de uma seqüência de diversas imagens
armazenadas num único documento GIF. As animações também oferecem o mesmo tipo de transparência
aceito pelas imagens estáticas. Arquivos GIF são adequados para imagens com poucas cores como
títulos, banners e botões.
3. Imagens entrelaçadas são as que chegam ao navegador em blocos igualmente espaçados. Assim que
o primeiro bloco é carregado, o navegador repete os dados daquele bloco inicial, apresentando uma
versão rudimentar da imagem final de modo que os internautas possam ter uma visualização antecipada
da imagem. Os blocos subseqüentes então completam a imagem em mais três passos. Esse recurso é útil
quando imagens grandes ou fotos são carregadas de forma que não interfiram na visualização, ou melhor,
não precisam estar completamente prontas para serem entendidas. Esse recurso permite que o usuário
tenha uma idéia da imagem e continue sua pesquisa de maneira mais rápida. Mas, imagens entrelaçadas
não são boas para textos.
Pois, para lê-los é necessário o carregamento total da imagem. Além disso, imagens entrelaçadas
aumentam levemente o tamanho do arquivo.
RGB - CMYK - HSB - LAB

Todos nós vemos as cores de maneira diferente. Produzir uma cor perfeita ou aquela que traduza
exatamente a visão que um artista tem da natureza, quer seja num papel, num quadro ou na tela de um
monitor não é tarefa fácil.
12
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
É importante entender como as cores são comunicadas pelo seu digitalizador, monitor e impressora para
se reproduzir com precisão aquilo que se deseja. Por isso foram criados os modelos de cores. Um modelo
de cor é um sistema utilizado para organizar e definir cores conforme um conjunto de propriedades
básicas que são reproduzíveis.
GAMUT de cores
Um gamut é a faixa de cores que um sistema de cores pode exibir ou imprimir.
O espectro de cores visto pelo olho humano é mais amplo do que o gamut disponível em modelos de
cores. Entre os modelos de cores usados o LAB apresenta o gamut mais amplo, englobando todas as
cores nos gamuts RGB e CMYK. Em geral, o gamut RGB contém um subconjunto de cores que pode ser
visualizado em um monitor de computador ou televisão (que emite luz vermelha, verde e azul). Portanto,
algumas cores, como ciano puro ou amarelo puro, não podem ser exibidas com precisão em um monitor.
O gamut CMYK consiste de cores que podem ser impressas usando tintas das cores de processo. Cores
exibidas na tela que não podem ser impressas são conhecidas como fora do gamut, ou seja, fora do
gamut CMYK.
Veja os modelos utilizados:
Modelo RGB
Uma grande porcentagem do espectro visível pode ser representada misturando-se luz vermelha, verde e
azul (RGB) em várias proporções e intensidades. Onde as cores se sobrepõem, surgem o ciano, o
magenta e o amarelo que são as cores secundárias da cor-luz.
As cores são criadas acrescentando-se luz. O monitor da televisão e do seu computador utiliza as
mesmas propriedades fundamentais da luz que ocorrem na natureza.
Como as cores RGB se combinam para criar o branco, também são denominadas cores aditivas. Juntar
todas as cores cria o branco, ou seja, toda a luz é refletida de volta ao olho. As cores aditivas são usadas
em iluminação, vídeo e monitores. O monitor, por exemplo, cria a cor emitindo luz através de fósforo
vermelho, verde e azul.
Imagens RGB usam três cores para reproduzir na tela até 16,7 milhões de cores.
Num monitor colorido as cores são formadas pela reunião de minúsculos pontos na tela chamados pixels.
A cada uma das três cores (RGB - red - green - blue) é atribuido um valor numérico de 0 a 255. Quanto
mais altos os valores, maior é a quantidade de luz branca. Assim, valores elevados de RGB resultam em
cores mais claras. Esse modelo de cor apresenta uma desvantagem: ele é dependente de dispositivo. Isto
significa que pode ocorrer variação de cores entre monitores e digitalizadores, podendo acarretar um
desvio em suas especificações, exibindo assim, as cores de maneira diferente.
13
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Modelo CMYK
As cores do monitor são reproduzidas numa impressora através dos pigmentos.
Os pigmentos criam as cores primárias azul, amarelo e vermelho, as quais, juntas, criam outras cores. O
método mais comum de reprodução de imagens coloridas em papel é pela combinação de pigmentos
ciano, magenta, amarelo e preto.
CMYK significa cian, magenta, yellow e black.
Nesse modelo cada cor é descrita com uma porcentagem (de 0 a 100).
Os pigmentos produzem cor refletindo determinados comprimentos de onda de luz e absorvendo outros.
Os pigmentos mais escuros absorvem mais luz. Porcentagens mais elevadas de cor resultam em cores
mais escuras.
Teoricamente, quando 100% de azul ciano, 100% de vermelho magenta e 100% de amarelo estão
combinados, a cor resultante é o preto. Na realidade, um marrom-escuro. Por isso o pigmento preto
precisa ser adicionado ao modelo de cor e ao processo de impressão para compensar as limitações de
cor. O modelo de cor CMYK é chamado de modelo subtrativo de cores porque cria cores absorvendo luz.
Modelo HSB
Sem luz todos os objetos ao nosso redor são desprovidos de cor. Com base na maneira como as pessoas
percebem as cores, o modelo de cor HSB define as cores com três atributos: matiz (H), saturação (S) e
brilho (B) - (H hue, S saturation, B brightness). Matiz é o nome que damos a uma cor na linguagem
comum. Os matizes formam o círculo das cores. Vermelho, azul, verde são matizes. Saturação ou croma
é a vivacidade da cor e o quanto de concentração de cor que o objeto contém. Quanto mais alta é a
saturação, mais intensa é a cor.
Brilho refere-se ao acréscimo ou remoção de branco de uma cor. As cores podem ser separadas em
claras e escuras quando seu brilho é comparado. O brilho é uma medida de intensidade da luz numa cor.
Baseado na percepção humana das cores, o modelo HSB descreve três características fundamentais da
cor:
- o Matiz é a cor refletida ou transmitida através de um objeto. É medida como uma localização no disco
de cores padrão e expressa em graus, variando de 0° a 360°. Geralmente, o matiz é identificado pelo
nome da cor, como vermelho, laranja ou verde.
- a Saturação, ou croma, é a força ou a pureza da cor. A saturação é a quantidade de cinza existente em
relação ao matiz, medida como uma porcentagem de 0% (cinza) a 100% (totalmente saturado). No disco
de cores padrão, a saturação aumenta do centro para a aresta.
14
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
- o Brilho é a luminosidade ou a falta de luminosidade relativa da cor, geralmente medida como uma
porcentagem de 0% (preto) a 100% (branco).
Modelo LAB
No começo do século XX muitas pesquisas sobre cores foram realizadas no sentido de se chegar a um
modelo de cor que seria utilizado de acordo com a tecnologia da época. Em 1931, o trabalho realizado
pela La Commision Internationale de L'Eclairage (CIE) definiu um modelo de cor baseado na maneira
como o olho humano percebe as cores. Em 1976, esse modelo de cores foi refinado para proporcionar
cores consistentes, independentes das características de qualquer componente de hardware. Em alguns
programas, como o Photoshop, por exemplo, esse modelo é utilizado para converter um modelo de cor
para outro. Assim, quando ele converte de RGB para CMYK, primeiro ele converte para LAB e, então, de
LAB para CMYK.
Bitmap - Tons de cinza - Cores indexadas

Cores RGB - Cores CMYK -Cores LAB
Modos de cor
O modo de cor determina o número de cores exibido numa imagem.
Além de determinar esse número, o modo de cor afeta o tamanho do arquivo de uma imagem. Veja alguns dos mais
utilizados:
Modo Bitmap
Usa um dos dois valores de cores (preto ou branco) para representar os pixels de uma imagem. Imagens no modo
Bitmap são chamadas bitmap ou imagens de 1 bit, pois sua profundidade em bits é 1. Também é chamado de
monocromático.
Modo tons de cinza
Imagens em tons de cinza podem conter as cores preto e branco e uma faixa de cinza. Imagens em tons de cinza de
16 cores (4 bits por pixel) contêm 16 tons de cinza variando do branco total ao preto total. Imagens em tons de cinza
de 256 cores (8 bits por pixel) possui um valor de brilho, variando de 0 (preto) a 255 (branco). Os valores de tons de
cinza também podem ser medidos como porcentagens de cobertura de tinta preta (0% é igual a branco, 100% a
preto). As imagens obtidas com scanners preto-e-branco ou em tons de cinza geralmente são exibidas no modo
Tons de Cinza. Imagens coloridas e do modo Bitmap podem ser convertidas em tons de cinza. Os níveis de cinza
(sombreado) dos pixels convertidos representam a luminosidade dos pixels originais coloridos. Ao converter tons de
cinza em RGB, os valores de cor de um pixel baseiam-se no valor anterior de cinza. Uma imagem em tons de cinza
também pode ser convertida em CMYK ou em imagem colorida Lab.
Modo de cores indexadas
Imagens indexadas, ou mapeadas por cor, têm suas cores especificadas por uma tabela de valores de cores. Podem
ser de 16 ou no máximo de 256 cores (16 - 4 bits por pixel ; 256 - 8 bits por pixel). Ao converter para cores
indexadas, em programas como o Photoshop e o Fireworks, uma tabela de consulta de cores (CLUT, Color Lookup
15
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Table) é criada, armazenando e indexando as cores da imagem. Se uma cor da imagem original não consta da
tabela, o programa escolhe a mais próxima ou simula uma com as cores existentes. Ao limitar a paleta de cores, as
cores indexadas podem reduzir o tamanho do arquivo e, ao mesmo tempo, manter a qualidade visual, como em um
aplicativo de animação multimídia ou em uma página da Web. Esse modo oferece edição limitada. Em caso de
edição extensiva, converta temporariamente para o modo RGB. Ao converter para cores indexadas, o programa cria
uma tabela de consulta de cores (CLUT, Color Lookup Table), que armazena e indexa as cores da imagem. Se uma
cor da imagem original não consta da tabela, o programa escolhe a mais próxima ou simula uma com as cores
existentes.
Modo de cores RGB
O modo RGB usa o modelo RGB, atribuindo um valor de intensidade a cada pixel, variando de 0 (preto) a 255
(branco) para cada componente RGB em uma imagem colorida. Por exemplo, um vermelho vivo pode ter um valor R
de 246, um valor G de 20 e um valor B de 50. Quando os valores dos três componentes são iguais, o resultado é um
tom de cinza. Quando o valor de todos os componentes é 255, o resultado é branco puro; quando o valor é 0, preto
puro.
Imagens RGB usam três cores para reproduzir na tela até 16,7 milhões de cores. Também são chamadas de
imagens True Color e usam 24 bits bits por pixel para representação, divididas em 8 bits para cada cor principal (8 x
3 - red, green, blue). Certos formatos de arquivos armazenam imagens True Color como imagens de 32 bits que
possuem 8 bits extra para armazenar informações de transparência ou camadas.
Os monitores sempre exibem cores no modelo RGB. Isso significa que, quando se trabalha em modos de cor
diferentes do RGB, como o CMYK, alguns programas (por exemplo, o Photoshop) temporariamente convertem os
dados para o modo RGB para mostrá-los na tela.
Modo de cores CMYK
No modo CMYK a cada pixel é atribuído um valor de porcentagem para cada tinta do processo. Às cores mais claras
(realce) são atribuídas pequenas porcentagens de cores das tintas de processo; às mais escuras (sombra),
porcentagens mais altas.
Por exemplo, vermelho vivo pode conter 2% de ciano, 93% de magenta, 90% de amarelo e 0% de preto. Em
imagens CMYK, branco puro é gerado quando o valor de todos os quatro componentes for 0%. Use o modo CMYK
ao preparar uma imagem para imprimir com cores de processo. A conversão de uma imagem RGB em CMYK cria
uma separação de cores.
Se você começa com uma imagem RGB, convém editar primeiro e depois converter para CMYK. Você também pode
usar o modo CMYK para trabalhar diretamente com imagens CMYK digitalizadas ou importadas de sistemas
sofisticados.
Modo de cores Lab
Cor Lab é o modelo de cores internas que programas, como o Photoshop, usam ao converter de um modo de cor
para outro. No modo Lab, o componente de luminosidade (L) pode variar de 0 a 100. O componente a (eixo verde-
vermelho) e o b (eixo azul-amarelo) podem variar de +120 a -120. Você pode usar esse modo para trabalhar com
imagens Photo CD, editar independentemente a luminescência e os valores de cor de uma imagem, mover imagens
entre sistemas e imprimir em impressoras PostScript®
Para imprimir imagens Lab em outros dispositivos coloridos, primeiro converta para CMYK.
16
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Cores e formas
1. Procure empregar as formas e as cores de maneira a despertar a atenção e direcionar o olhar
do visitante para os locais mais importantes do site. Não exagere no uso das cores para que o
usuário não se confunda com o que você está oferecendo. Cientificamente já foi provado que o
excesso de cores e formas fatiga a vista e provoca confusão no entendimento. O cérebro não é
capaz de entender e organizar informações rápida e eficientemente quando há um excesso de
cores e formas numa imagem. Lembre-se que a eficiência na rapidez de entendimento de uma
imagem é de suma importância numa página eletrônica.
2. O equilíbrio entre cores e formas é também um aspecto muito importante. Formas podem
parecer maiores ou menores de acordo com a cor que você preenchê-las. As cores também
podem aproximar, afastar ou destacar um texto ou um objeto. O equilíbrio cromático precisa ser
observado a fim de não fatigar o olhar. Normalmente, o olho procura identificar numa imagem as
cores semelhantes e quando há um emprego excessivo de cores numa imagem, ocorre uma
irritabilidade visual dificultando o entendimento dessa imagem. Na realidade, ocorre mesmo uma
intensa atividade muscular, pois o olho "salta" de uma cor para outra, devido ao acúmulo de
estímulos.
Observe que, embora do mesmo tamanho, o quadrado com o círculo
vermelho parecerá
mais próximo ou maior que o azul. Pois o vermelho é uma cor
quente, mais vibrante e intensa que o azul, destacando-se mais.
3. Toda cor irradia outra cor (cor complementar). Por isso, evite empregar formas muito próximas
preenchidas por cores complementares entre si (por exemplo, amarelo forte e roxo, ou azul e
laranja). Como no caso de textos e fundo de página, evite os alto-contrastes como estes:
Vermelho e verde
Laranja e azul
Roxo e amarelo
O contraste de cor é um choque entre duas cores incompatíveis, o que gera uma vibração visual
provocando uma desarmonia. Além disso, produz cansaço e irritação visual.
4. Se as imagens criadas por você estiverem associadas aos produtos que você estiver
oferecendo em seu site, utilize as cores mais apropriadas para reproduzir fielmente os produtos
17
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
oferecidos, bem como as cores do fabricante (logotipos das empresas, etc). Analise o produto,
pois é essencial que a cor esteja relacionada a ele, simbolicamente ou literalmente. O comprador
tem que identificar o produto para poder comprá-lo. Portanto, não o reinvente com as suas cores
prediletas!
5. Quando você estiver colorindo suas imagens, lembre-se que os
monitores não são iguais. Portanto, nem sempre é conveniente
criar cores espetaculares em seu monitor de última geração. Talvez
quem estiver vendo a página não conseguirá perceber o efeito
visual que você "inventou" devido às limitações do monitor (do
usuário). O ideal é utilizar imagens com 256 cores (para banners, links e botões). Isto fará com
que sua escolha de cores seja interpretada adequadamente pelo navegador do usuário. No
entanto, isso não se aplica a fotografias, que sempre devem ser salvas como arquivos JPEG, o
que permite um número maior de cores, muito além das 256.
EXERCÍCIOS
1. O que é o formato GIF e quais suas vantagens e desvantagens.
2. O que são imagens intrelaçadas?
3. O que é GAMUT de cores?
4. O que é o modelo CMYK? Onde ele é usado?
5. Explique como usar cores em um projeto para WEB.
18
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Objetivo: Apresentar introdução ao Photoshop
Introdução
Este módulo apresenta conceitos básicos do Software Adobe Photoshop , na criação e manipulação de
imagens a serem utilizadas em confecção de produtos W3.
O Adobe Photoshop é uma das mais poderosas ferramentas profissionais existentes hoje em dia para
pintura digital, retoques de fotografias, edição de imagens, gerenciamento de cores e desenvolvimento de
gráficos para impressão ou Internet.
Este treinamento tem como objetivo obter conhecimento básico das ferramentas e técnicas de tratamento
de imagens, criação de ícones para disponibilizá-los em Web Pages.
O Photoshop possui vários recursos, porém iremos apresentar um treinamento básico com o objetivo de
ensinar a vocês como fazer títulos, botões e banners para ilustrar uma home page, entre outras coisas.
Área de trabalho do Adobe Photoshop
Usando a caixa de ferramentas

As ferramentas da caixa de ferramentas permitem selecionar, pintar, editar e visualizar imagens.
Outros controles escolhem as cores do primeiro plano e do fundo, criam máscaras rápidas e
alteram o modo de exibição na tela.
A maioria das ferramentas têm paletas Pincéis e Opções associadas, que permitem definir os
efeitos de pintura e edição das ferramentas.
Para exibir a caixa de ferramentas:
19
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
 Escolha <Janela > Mostrar Ferramentas.

 Para mover a caixa de ferramentas:
 Arraste-a por sua barra de título.
...
01 - Ferramenta marca de seleção retangular
02 - Ferramenta laço
03 - Ferramenta aerógrafo
04 - Ferramenta carimbo
05 - Ferramenta borracha
06 - Ferramenta desfoque
07 - Ferramenta caneta
08 - Ferramenta medir
09 - Ferramenta lata de tinta
10 - Ferramenta mão
11 - Ferramenta zoom
12 - Ferramenta conta gota
13 - Ferramenta linear
14 - Ferramenta de Texto
15 - Ferramenta subexposição
16 - Ferramenta linha
17 - Ferramenta pincel história da arte
18 - Ferramenta pincel
19 - Ferramenta varinha mágica
20 - Ferramenta mover
21 - Cor do primeiro plano e cor do plano do fundo
23 - Editar no modo padrão e no modo máscara rápida
24 - Saltar para o aplicativo do editor gráfico padrão 1
25 - Padrões de tela de trabalho
2
Usando a barra de menu (arquivo)
Neste menu, encontram-se os comandos que permitem abrir um novo

arquivo ou imagem, salvar, escanear, configurar a impressão e
3
preferências do programa.
4
1-
(Novo) abre uma nova janela; (Abrir)
abre arquivo que já existe p/ editar seu conteúdo; 5
(Abrir
Como) abre um arquivo cuja a extensão está errada ou quando seu nome
não constar na lista apresentada na caixa do
comando Open. Utiliza as mesmas extensões do comando 6
anterior.
8
2 - (Fechar) fecha o arq. que estiver ativo, sem encerrar o 7
aplicativo. Se houverem modificações que não foram salvas, abre- se a
opção de salvá-las antes de fechá-lo;
9
(Salvar) permite salvar o arq. em disco atualizando-o caso não o tenha,
será pedido um nome através do mesmo comando Salvar Como;
(Savar como) permite salvar o arq. com nome diferente do10atual, 11
permitindo assim obter-se várias versões de um mesmo trabalho, ou com
o mesmo nome em outro diretório e/ou drive, ou ainda com extensões diferentes: *.PSD, *.PDD, *.JPG,
*.TIF, *.BMP, etc...
20
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
(Save a cópia) permite salvar uma cópia da imagem exibida;

(Savar para Web) permite definir as preferências de Gravação de Arquivos para web
(Reverter) permite retornar a imagem ao estado que se encontrava antes de gravada.
Atenção ao usar este comando, pois ele é irreversível.
3 - (Inserir) inserir imagens (EPS file, PDF file) ;
4 - (Importar) importar e exportar imagens;
5 - (Automatizar) Criar uma folha de contato , processar varias imagens em lote (simplifição de
comandos)
6 - Informações de arquivo...;
7 - Configura página e imprime; (imprimir) remete a página para impressão;
8 - Saltando do Photoshop para outros aplicativos
9 - (Preferências) configura as ferramentas e utilitários e Direções de cores;
(Configuração de cores) determina qual será o gerador de cores;
10 - (Adobe Onlin)
11 - Aqui temos os últimos arquivos acessados;
12 - (Sair)para finalizar o Photoshop.
Usando a barra de menu (editar)
Neste menu, estão os comandos que permitem a edição da imagem.
1- (Desfazer) este comando desfaz a última operação realizada ou

1
refaz a operação que acabou de ser desfeita (Refaz). Atenção: só
há um Undo/ Redo por operação.
2
2 - (Recortar) corta o item selecionado, (Copiar) cópia o ítem
selecionado, (Copiar mesclado) copiar fundindo e colar, (Colar)
3
insere a imagem , (Colar em) cola o objeto selecionado dentro de
uma área selecionada, (Apagar) Remover, limpar a área selecionada;
3 - Preenche a área selecionada com a cor, opacidade e modo4

escolhidos, permite também o preenchimento de uma borda ao redor da
área selecionada, como um contorno ou moldura.
5
4 - (Transformação livre e Transformação): Estes comandos permitem
girar, torcer, escalar e aplicar perspectiva
6
a um objeto ou a uma imagem inteira.
5 - (Define Padrão): Definir fundos especiais. Importante: o padrão definido não é salvo
automaticamente em nenhum diretório. Se você desejar criar uma biblioteca de padrões, crie um
diretório e recorte a àrea a ser definida como padrão (com o comando Crop ou ferramenta Crop) e salve
seu arquivo no diretório criado utilizando o comando Save As.
6 - (Descartar): Limpa todas as quatro opções ao mesmo tempo: Desfazer, Área de transferência, Padrão
, Históricos e Tudo. Esta opção têm uma desvantagem, você perde o acesso ao que estiver eliminado.
Portanto, não deve fazer descartar o conteúdo da Área de transferência se for preciso colar mais tarde o
21
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
que estiver nele. Além disso, depois de expurgar o buffer Undo, você não poderá desfazer a ação
imediatamente anterior ao expurgo.
Quando você clica com o mouse em um texto ou imagem de uma página, pode acessar outros textos com
outras imagens de outras páginas.
Essas ligações são chamadas de links, portanto o hipertexto interliga as páginas do mundo todo por meios
dos links. Assim é formada a WWW: milhares de páginas, utilizando os mais diversos recursos de
multimídia, interligadas por hipertexto.
EXERCÍCIOS
1. Abra o PhotoShop e investigue a barra de ferramentas ( faça um relatório de suas observações)
22
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Objetivo: Apresentar aula 2 - Photoshop
Usando a barra de menu (imagem)
Neste menu, estão os comandos que permitem a edição da imagem.
1
1- (Modo) Um modo de cor determina o modelo de cor
usado ao exibir e imprimir documentos do
Photoshop. Ele baseia seus modos de cor em 2
modelos
estabelecidos para descrever e reproduzir cores.
Modelos comuns incluem HSB (matiz,
saturação, brilho); RGB (vermelho, verde, azul); 3
CMYK
(ciano, magenta, amarelo, preto); e CIE L*a*b*.
4
O Photoshop inclui modos de saída especializada de cor, como cor
indexada e duotônicos.
5
2 - Ajusta a imagem ( em níveis, brilho, contraste ....
3 - (Duplicar) pode-se copiar uma imagem 6

inteira
(com todas as camadas, máscaras de camadas e
canais) para a memória disponível, sem salvar no
disco, usando o comando Duplicar ou 7
arrastando
e soltando.
Aplicar Imagem, Cálculos....
8
4 - (Tamanho da imagem) O número de pixels na altura e largura da imagem bitmap.
O tamanho da exibição da imagem é determinado pelas dimensões em pixel e do tamanho e
configuração do monitor. O tamanho do arquivo de uma imagem é proporcional a suas dimensões em
pixel. Um monitor de 14 polegadas exibe 640 pixels na horizontal e 480 na vertical.
Uma imagem com 640 por 480 preencheria esta pequena tela. Em monitor maior, com configuração de
640 por 480, a mesma imagem (dimensões em pixel de 640 por 480) ainda preencheria toda a tela, mas
cada pixel iria parecer maior. Ao alterar a configuração para 1152 por 870 pixels, a imagem seria exibida
com tamanho menor, ocupando apenas parte da tela.
Quando se prepara uma imagem para ser exibida on-line (por

exemplo, uma página da Web
que deverá ser visualizada em diferentes monitores), as
dimensões em pixel se tornam muito
importantes. Como esta imagem pode ser vista em um monitor de
13 polegadas, convém limitar
seu tamanho para um máximo de 640 por 480 pixels.
(Tamanho da Tela de Pintura) permite adicionar ou remover

espaço de trabalho em volta da imagem existente. Você pode
cortá-la, diminuindo a área da tela. A tela adicionada é mostrada
com a mesma cor ou transparência que a do plano de fundo.
23
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
(Corte demarcado) O comando Imagem > Corte Demarcado descarta a área fora da
seleção retangular e mantém a mesma resolução da original.
Usando a barra de menu (camadas)
Nesta caixa de menu, encontra-se opções de criação de novas

camadas para imagens elaboradas; duplicar uma camada e até
realizar ajustes nas camadas criadas.
Maiores informações serão abordadas nas series de exercícios
Usando a barra de menu (selecionar)
A maioria das Operações iniciam com uma seleção. Este comando permite selecionar partes da imagem
que não se tocam e você pode combinar seleções de várias maneiras. Você pode também fazer vários
modos, tais como pintar sobre a área selecionada ou usar a ferramenta Lápis para desenhar um contorno
preciso da área a ser selecionada. Você também pode salvar as seleções para o futuro.
1
1 - (Tudo) - seleciona toda a área da tela; (Desfazer
Seleção) remove toda seleção ; (Selecionar novamente) retorna
2 a
seleção removida e (Inverter) inverte a forma de seleção;
2 - (Escala de Cores) seleciona objetos pela faixa de cor;

3
3 - (Difusão) seleciona pela característica de área da imagem e
(Modificar) seleciona setores modificados;
4
4 - (Aumentar) aumenta área selecionada e 5
(Semelhante) seleciona áreas indênticas;
6
5 - (Transformar Seleção) transforma uma seleção.
Geralmente é difícil entender o efeito dessas
transformações em uma
seleção sem experimentá-la.
6 - (Carregar Seleção) leva a tela até a área

selecionada e (Salvar Seleção) grava á área selecionada.
Usando a barra de menu (filtro)
Neste menu contem diversos filtros que permitem acertar a imagem, encobrindo pequenos defeitos ou
aplicar efeitos especiais. Os cincos filtros blur permitem suavizar as áreas onde as arestas são agudas,
24
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
removendo o contraste;
Os filtros do Photoshop classificam-se em 14 categorias gerais. Além disso, filtros

de outros fornecedores aparecem na parte inferior do menu Filtro.
o Filtros Artísticos
o Filtros de Desfoque
o Filtros Traçados de Pincel
o Filtros de Distorção
o Filtros de Ruído
o Filtros de Pixelização
o Filtros de Acabamento
o Filtros de Nitidez
o Filtros de Croqui
o Filtros de Estilização
o Filtros de Textura
Exemplos de filtros:
Filtros de Desfoque
Suavizam uma seleção ou uma imagem.

Filtros de Desfoque são úteis para retoques.
Suavizam as transições criando pixels
intermediários próximos às arestas aguçadas de
linhas definidas e áreas sombreadas em uma
imagem.
Filtros Artísticos
Aplicam efeito de pintura ou especial a arte ou

projetos comerciais. Use Recorte de Arestas para
colagens ou tratamento de texto. Esses filtros
reproduzem efeitos de materiais naturais ou
tradicionais.
25
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Os elementos citados nesta página referente a camadas, caminhos, guias e grades terão no decorrer
deste treinamento, referências mais detalhadas. 1
1 - (Nova visualização) modifica a visualização do objeto;

2
2 - (Visualizar / alerta de Gamut) prévia CMYK e Alarme de
Gamut;
3
3 - (Zoom In) aumenta a imagem; (Zoom
Out) diminui a imagem; (Ajustar
4 à
tela) amplia ou reduz a imagem para visualização na tela; (Tamanho
original) amplia para o tamanho dos pixels e (Tamanho da
impressão) imprimir no tamanho;
5
4 - (Ocultar Arestas) remover ou exibir bordas; (Ocultar
Demarcador remover ou exibir caminhos; 6
5 - (Mostrar e ocultar réguas) exibir ou remover réguas na janela da
imagem;
7
6 - Exibir ou remover guias; Prender as guias; Ver guias
limpar guias;
7 - Exibir ou remover grade e Prender a grade.
1
Usando a barra de menu (janela)
1 - (Cascata) exibe imagens em cascata; (Tile) exibe 2imagens

de modo recortado; (Arrange Icons) organiza os ícones e (Close
All) fecha todas as janelas de imagens;
3
2 - (Ocultar Ferramentas) remove ou exibe as ferramentas na área
de trabalho;
4
3 - Os itens nestas áreas do menu View são relativos a exibição
ou remoção dos Roll-ups de auxílio que existem na área de trabalho
do Photoshop. 5
4 - Aqui temos também a exibição e informações das imagens

abertas no Photoshop. 6
5 - (Mostrar camadas) exibe a palheta de layers (camadas); ( Show

Channels) exibe diversos canais ao mesmo tempo; 7
6 - (Mostrar histórico) Desfazer mais de um comando; 8(Mostrar

Ações) Automatizar um série de passos
7 - Remove ou exibe a barra de status
26
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Usando a barra de menu (Ajuda)
Neste menu o usuário solicita as caixas de Diálogo

referentes a auxílio do manuseio do software ou
informações sobre o mesmo
Usando a Tecla de Atalho

D Selecione as cores padrão (foreground - preto/background - branco)
X Altera as cores foreground e background
Q Alterna entre os modos Quick Mask Mode e Standard Mode
CTRL + N Cria um novo arquivo
CTRL + O Abre um arquivo existente
CTRL + S Salva o arquivo atual
CTRL+ Shift + S Atribui um novo nome ao arquivo atual (salvar como)
CTRL+ P Aciona a janela de impressão
CTRL+ Shift + P Aciona a janela de configuração de página
CTRL+ Shift + V Cola a imagem/texto dentro de uma área previamente selecionada
CTRL + A Seleciona todo o layer/imagem ativa
CTRL + D Retira a seleção de qualquer área/objeto previamente selecionado
CTRL+ Shift + I Inverte a área selecionada
CTRL+ Shift + D Aciona a janela Feather
CTRL+ F Aplica o último filtro acionado
CTRL+ Alt + F Abre a janela do último filtro ativado para alteração nas suas caracteristícas
CTRL+ + Amplia (zoom) a área visualizada
CTRL+ - Reduz a área vizualizada
CTRL+ L Aciona a janela Levels (imagem/adjust - levels)
CTRL+ Shift + L Aplica Auto Levels (image/adjust - auto levels)
CTRL+ M Aciona a janela Curves (image/adjust - curves)
CTRL+ B Aciona a janela Balance (image/adjust - balance)
CTRL+ U Aciona a janela Hue-Saturation (image/adjust - hue-saturation)
CTRL+ I Aplica o efeito invert (negativo) na imagem (image/adjust - invert)
CTRL+ J Cria um novo layer com conteúdo baseado na seleção do layer atual
Dicas
 Os arquivos tem que ser pequenos para não prejudicar a transmissão de dados. Eles chegam através da
linha telefônica, que não foi construída com esse objetivo, e por isso não suportam grandes quantidades de
bytes. É fortemente recomendado que uma página não tenha mais do que 35Kb, incluindo as imagens.
 Além disso, existe o limite por causa da hospedagem da página no servidor, que tem seu preço de aluguel
diretamente ligado ao tamanho dos arquivos. Por exemplo, nos provedores, os clientes têm direito a uma
área grátis de 5 Mb. Se os arquivos ultrapassarem esse espaço, a área passa a ser cobrada.
 A resolução de imagens na Internet é muito baixa: 75 d.p.i, portanto a qualidade da imagem cai
drasticamente, comparando com uma imagem impressa tem uma grande diferença.
 A melhor coisa a fazer é salvar uma imagem nos dois formatos e ver qual fica com o menor tamanho em
bytes. Quanto menor o arquivo mais rápido e para carregar.
27
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
 Quando for construir uma imagem procure usar um tamanho (largura e altura) maior do que o desejado, pois
você pode ajustar o tamanho depois.
 Evite colocar muitas imagens numa página só, principalmente gifs animados. Lembre-se que uma página
não deve ultrapassar 35Kb. Se você tiver que mostrar uma imagem que tem que ser vista em tamanhos
maiores, use o recurso de Thumbnail, ou seja: coloque um a versão reduzida da foto, clicavel para uma
página com foto maior. Assim, a pessoa clicará se tiver interesse e já estará preparada para esperar. Não
coloque qualquer gif, em qualquer lugar sem função nenhuma, apenas porque ele é bonito ou engraçado.
Como mover uma imagem
1 - Escolha a ferramenta Mover .

2 - Dê um clique e arraste a imagem para
movê-la dentro de sua própria tela de
desenho.
3 - Arraste a imagem para outra janela a fim de
copiá-la para outro arquivo.
Com a ferramenta Move, pode mover uma

imagem dentro da sua janela ou arrastá-la para
outra janela de imagem. Em imagens sem
diversas camadas, a ferramenta Move
movimenta a imagem inteira; se existir diversas
camadas em uma imagem, a ferramenta Move
trabalha em camadas específicas ou camadas
vinculadas. ("Como trabalhar com camadas")
Dicas:
À medida que arrasta o cursor a fim de mover a
imagem em linha reta para cima ou para baixo
e para a esquerda ou direita, mantenha pressionada a tecla Shift.
Como criar um arquivo
1 - Escolha a opção Arquivo, Novo

2 - Digite um nome para o arquivo na caixa de dialogo Novo.
Escolha as unidades de medida e insira as dimensões para a altura do arquivo.
Digite uma resolução para o arquivo.
Em Conteúdo, selecione uma opção:
• Branco para preencher o plano de fundo com branco, a cor padrão do plano de fundo.
• Cor do Plano de Fundo para preencher uma imagem com a cor de fundo atual.
• Transparente para criar uma imagem contendo uma única camada sem valores de
cor.
Observação: Como as imagens criadas com a opção transparente contêm uma única camada, em vez de um fundo,
elas devem ser salvas no formato Photoshop. Photoshop é o único formato que suporta camadas.
3 - Área de Trabalho
28
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Cada imagem que você cria inicia com um arquivo novo. Ao criar o arquivo novo, você especifica suas dimensões,
resolução e modo de cor, dependendo do destino final do arquivo.
Use a opção RGB para a Web e imagens de apresentação na tela. Bitmap para imagens em preto e branco;
Grayscale para imagens em tons de cinza,tais como fotografias e CMYK para imagens que serão impressas.
Como salvar arquivos
O Photoshop oferece vários modos para salvar arquivos:
 O comando Salvar salva o arquivo no seu formato atual.
 O comando Salvar Como permite que você salve uma versão alternativa em um formato diferente.
 O comando Salvar uma Cópia permite salvar uma cópia do arquivo, deixando o original intacto.
Importante: Só o formato Photoshop (PSD) está disponível para arquivos com camadas.
Formatos de arquivos:
GIF (Graphics Interchange Format) é o formato de arquivo usado para exibir elementos gráficos e
imagens de cores indexadas e imagens em documentos em linguagem de marcação de hipertexto (HTML)
na World Wide Web e outros serviços on-line.
GIF é um formato com compactação projetado para minimizar o tamanho do arquivo e o tempo de
transferência eletrônica. Você pode converter arquivos para o formato GIF usando um dos seguintes
métodos:
29
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
 O comando Arquivo > Salvar Como permite que você salve uma imagem no modo Bitmap, em
tons de cinza ou cores indexadas no formato GIF e especifique exibição entrelaçada. Uma imagem
entrelaçada aparece gradualmente, cada vez com mais detalhes, à medida que é transferida da
Web, mas pode aumentar o tamanho do arquivo. Você não pode salvar canais alfa com a imagem.
 O comando Exportar para GIF89a permite que você converta uma imagem em RGB ou cores
indexadas para o formato GIF89a, especifique o entrelaçamento e defina a transparência do plano
de fundo.
JPG - ao salvar neste formato, você pode especificar a qualidade e o nível de compactação da imagem.
Para especificar a qualidade e a compactação da imagem, insira um valor entre 0 e 10 ou escolha uma
opção para Qualidade, ou arraste o controle dinâmico. Sempre há uma relação entre a qualidade da
imagem e o grau de compactação: imagens de qualidade mais alta usam menos compactação (e mais
espaço em disco) que imagens de qualidade mais baixa.
Você também pode selecionar uma opção de formato para o arquivo JPG.
 Selecione Linha de Base (“Padrão”) para usar um formato que pode ser reconhecido pela maioria
dos navegadores da Web.
 O formato Linha de Base Otimizada otimiza a qualidade de cores da imagem e pode produzir um
arquivo um pouco menor, mas não é suportado por todos os navegadores da Web.
 O formato Progressivo faz a imagem ser exibida à medida que é transferidaem uma série de
varreduras (você especifica quantas) mostrando versões cada vez mais detalhadas da imagem
inteira. Entretanto, arquivos de imagens JPEG progressivas têm tamanho ligeiramente maior,
exigem mais RAM para visualização e não são suportadas por todos os aplicativos e navegadores
da Web.
Como o formato JPEG descarta dados, é importante salvar arquivos JPEG apenas uma vez. Edite e salve
sua imagem em um formato que não descarte dados (como o Photoshop - PSD) e salve no formato JPEG
somente como passo final.
OBS: Canais Alfa são informações de cores que são criados automaticamente quando você abre uma
nova imagem. O modo de cor da imagem (não seu número de camadas) determina o número de canais
de cores criados. Por exemplo, uma imagem RGB possui três canais padrão, um para cada cor: vermelho,
verde e azul, além de um canal de composição usado para a edição da imagem.
30
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Arredondamento
1. Crie uma imagem de 300x300 pixels com fundo branco. Agora, crie uma seleção
retangular que ocupa aproximadamente 4/5 do espaço em branco, usando a ferramenta
"Marca de seleção retangular".
2. Pinte a área selecionada de preto usando a ferramenta lata de tinta. Agora desfaça a
seleção usando o menu Select > Deselect (tecla de atalho Ctrl+D).
3. Vá para o menu Filtro > Desfoque> desfoque Gaussiano. No parâmetro Raio, coloque
12,0 pixels. Isso fará com que o seu quadrado fique desfocado exatamente como o da
figura ao lado.
4. Para finalizar, vá para o menu Imagem > Ajustar > níveis. No parâmetro níveis de entrada,
insira os números 118/1,00/138 nos campos. Esses números serão usados em TODOS os
arredondamentos que você for fazer, independentemente da forma usada. Clique OK. Seu
retângulo com cantos arrendondados está pronto.
Photoshop: Formas básicas
Esse passos podem ser utilizados para criar formas retangulares e elipticas.
1) Crie uma nova imagem de 300x300 pixels com fundo

branco. Agora, selecione a Ferramenta "ferramenta marca
de seleção" localizada na sua barra de ferramentas
vertical. .
2) Com a ferramenta selecionada e o mouse posicionado na área da imagem, segure a

tecla Shift do teclado, clique e arraste o mouse para obter um círculo perfeito. Sua seleção
31
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
deverá estar como a seleção da imagem ao lado. Note que se

a tecla Shift não estiver sendo pressionada, você poderá criar
elipses de diversas proporções.
3) Selecione a cor azul clicando no botão da paleta de cores de primeiro

plano, localizada na Barra de Ferramentas vertical (Indicada na figura ao
lado).
4) Para pintar o círculo, selecione a Ferramenta " latinha de tinta",

localizada na sua barra de ferramentas verical.
5) Agora clique dentro da seleção circular. Agora deselecione a

sua seleção no menu Selecionar > Desfazer seleção (Ctrl+D).
Seu círculo deverá estar pronto, como na figura ao lado.
Círculo usando efeitos 3D
Não é necessário um programa 3D para faze-la.
1) Crie uma nova imagem de 300x300 pixels com fundo branco. Agora, selecione a Ferramenta "ferramenta marca
de seleção" localizada na sua barra de ferramentas vertical.
2) Escolha a cor laranja como cor do primeiro plano e branca como cor
do plano de fundo. Agora, selecione a Ferramenta "ferramenta degradê
radial" e nos seus parâmetros complete exatamente como na figura ao
lado.
3) Para usar a ferramenta, clique e segure o botão esquerdo do mouse no quivalente

ao ponto X da figura ao lado e desloque o ponteiro até o equivalente do ponto Y.
4) Sua esfera deverá estar parecendo com a esfera ao

lado. Para mudar a cor da esfera, vá no menu Imagem >
Ajustar > matiz/saturação> Cheque a opção colorir Agora, nos parâmetros Matiz,
Saturação e Luminosidade insira 235/55/-5, respectivamente.
32
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
5) Seu círculo está pronto. Basta deselecionar o círculo no menu Selecionar > Desfazer seleção (Ctrl+D).
(Atividade 06) Photoshop: Como trabalhar com camadas (Layers)
As camadas (Layers) permitem manter os diferentes elementos dentro de uma imagem organizadas para
que você possa mover, ocultar, duplicar e editar esses elementos sem afetar o resto da imagem. A
Palheta Layers do Photoshop é o centro de controle das camadas, permitindo que você reordene, oculte e
crie novas camadas. As camadas de ajuste especiais podem conter efeitos que existem
independentemente dos elementos de imagem, o que permite revisar os efeitos através do processo de
criação da imagem..
Para exibir a paleta Camadas:
Crie uma nova imagem de 200 x 200 com resolução de 75 pixels.

Vamos tentar fazer igual ao modelo para podermos ver a diferença das ferramentas:
Escolha Janela > Mostrar Camadas.
1- Escolha a opção Janela, Mostrar camadas para exibir a

palheta Camadas
2 - Para acrescentar uma camada, dê um clique no

botão Criar nova camada.
3 - Para excluir uma camada, arraste-a até o ícone da lixeira.
4 - Para alterar a ordem de empilhamento da

camada, arraste-a para cima ou para baixo na
palheta.
5 - Dê um clique na camada e escolha um modo no menu instantâneo para alterar um mistura de

camada
6 - Dê um clique na camada e insira uma nova porcentagem no campo Opacidade para alterar a opacidade de uma
camada
7 - Dê um clique no icone do olho ao lado do nome de uma camada para ocultá-la
8 - Área de trabalho
Na palheta Camadas (Layers) , a camada superior equivale à parte da frente e a camada inferior equivale à
parte de trás. Em outras palavras, a camada superior na palheta está na frente de todas as camadas mostradas
abaixo dela.
Achatando todas as camadas (layers)

Em uma imagem achatada, todas as camadas visíveis são mescladas no plano de fundo, reduzindo bastante o
tamanho do arquivo. Achatar uma imagem descarta todas as camadas ocultas e preenche as áreas transparentes
33
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
restantes com branco. Na maioria dos casos, não convém achatar um arquivo antes do final da edição das camadas
individuais.
Observação: Converter uma imagem entre alguns modos de cor achata o arquivo. Certifique-se de salvar uma cópia
do arquivo que inclua todas as camadas se quiser editar a imagem original após a conversão.
Para achatar uma imagem:
1 Certifique-se de que todas as camadas desejadas estejam visíveis.

2 Achate a imagem:
• Escolha Camada > Achatar Imagem.

• Escolha Achatar Imagem no menu da paleta Camadas.
Usando as ferramentas
As formas básicas do Photoshop (quadrado e círculo e outras...) são realmente simples de fazer.
O método para fazer um quadrado perfeito é exatamente o mesmo, mas com uma ferramenta de seleção diferente.
Nesse exercícios iremos usar várias ferramentas:
( mover, recortar, colar, girar, redimencionar...)
34
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Resultado do exercício
Photoshop: Criando grupos de corte
Em um grupo de corte, a camada inferior, ou camada base, age como máscara para todo o grupo.
Por exemplo, você pode ter uma forma em uma camada, uma textura na camada sobreposta e texto na superior. Se
você definir as três camadas como um grupo de corte, a textura e o texto aparecerão apenas pela forma da camada
base e assumirão a opacidade da camada base.
Observe que só camadas sucessivas podem ser incluídas em um grupo de corte. Ao criá-lo, linhas pontilhadas
aparecem entre camadas agrupadas da paleta Camadas.
O nome da camada base do grupo é sublinhado e miniaturas das demais são recuadas. Aplicar modo de mesclagem
à camada recuada afeta a mesclagem das camadas dentro do grupo. Aplicar modo de mesclagem à camada base
determina como o grupo de corte inteiro será mesclado com camadas subjacentes.
Crie uma nova imagem de 399 x 154 com resolução de 75 pixels.

Vamos tentar fazer igual ao modelo para podermos ver a diferença das ferramentas:
copiar a imagem no seu diretório..
35
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Vamos trabalhar com a ferramenta de extração.
Esta função é uma das novas opções contidas no Adobe Photoshop 5.5, sua principal função é isolar um objeto de
seu background.
1 - Copie esta imagem em seu diretório.
2 - Acesse a função:
Vamos remover o fundo que está por tras destas mãos, " (Imagem) >
(Extrair)" como ilustrado na imagem.
Janela da Função Extração
36
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
1 - É com esta ferramenta que demarcamos as arestas do objeto do qual

desejamos manter na imagem.
2 - Esta ferramenta preenche a área que desejamos manter.
3 - Apaga as faces traçadas com a ferramenta Edge Highlighter
4 - Ferramenta conta gotas
5 - Almenta ou diminui (mantendo a tecla ALT pressionada) a área de

visualização da imagem.
6 - Reposiciona a imagem na área útil da janela Extração
Passo 1
Função Extração e a seus parâmetros, será demonstrado como retirar o fundo de uma imagem, eliminando-o para
uma composição posterior.
Abra a imagem original e acione o Extração: " (Imagem) > (Extrair)".
Feito isso selecione a ferramenta "Realçador de arestas", sete o tamanho

do brush e traçe um contorno sobre a junção do fundo com o objeto,
como mostra a imagem.
Passo 2
Manter as maõs e eliminar o fundo atrás dela, portanto utilize a ferramenta

"Preenchimento" e preencha a área da mão, como mostra a imagem.
Passo 3
Agora devemos pedir um "visualizar" para ver se não deixamos alguma área sem ser selecionada, para isso clique
no botão "Visualizar".
Passo 4
Olhe que o fundo foi totalmente eliminado da imagem, após estar satisfeito com o resultado bastadar Ok. Teremos
como resultado do modelo acima.
37
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
Photoshop: Vamos trabalhar com as imagens
copiar a imagem no seu diretório
Vamos tentar fazer igual ao modelo para podermos ver os efeitos:
1 - Crie uma nova imagem de 374 x 224 com resolução de

75 pixels.
2 - Adicione na caixa de camadas um nova camada e

coloque um fundo preto.
3 - Abra a imagem que copiou no seu diretório
4 - Clique 2 vezes na ferramenta de seleção que abrirá a caixa de opções

da marca da seleção.
5 - Coloque o valor de difusão 50
6 - Selecione a Imagem ir p/ Menu "Editar" "Copiar" (ctrl+c)
38
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
7 - Volte p/ imagem que foi criada com um fundo preto e aplicar um "Editar" "Colar" (ctrl+v)
Photoshop: Vamos trabalhar com exemplo para fazermos um desenho de uma pagina de um site.
1 - Copiar a imagem no seu diretório
2 - Copiar no seu diretório esta imagem também
39
(“PHOTOSHOP”)
Caçapava – SP
(012) 3653 5983
Modulo I
3 - Vamos trabalhar com estas 2 imagens para ficar igual ao exemplo abaixo:
40

Cores Photoshop

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cores Photoshop

Uploaded by

Copyright:

Available Formats

(“PHOTOSHOP”)

NT Informática EDITORAÇÃO ELETRONICA

Objetivo: Apresentar conceitos básicos do uso das cores

Por que as cores são importantes?

Representação planificada do cubo de cores

A cor é um elemento fundamental em qualquer processo de comunicação visual. É um componente com

As cores primárias geradoras

Cores primárias na cor- luz

O branco e o preto na cor-luz

azul forte azul

vermelho + azul vermelho + azul

azul + verde azul + amarelo

Cores do texto e fundo de página ( text and background colors)

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

cores na web cores na web

2. O que são cores primárias?

3. O que é uma substância acromática?

4. De dois exemplos de cores primarias e secundárias.

5. Dê um exemplo de uma combinação inadequada de cores para textos.

Objetivo: Apresentar os Conceitos de Cores na Internet

Entendendo o uso de cores - Mapeamento de cores

Combinação de valores RGB

123 123 123 cinza CINZA

255 255 255 branco BRANCO

As cores do pixel são criadas a partir das luzes vermelha, verde e

RED GREEN BLUE COR COR

221 19 123 cor MAGENTA

0 146 64 cor VERDE

255 153 0 cor ALARANJADO

0 255 255 ciancianoo CIANO

Paleta de cores indexadas

RGB 0 51 102 153 204 255

255 100 204 cor # FF66CC

Mais alguns exemplos de cores com valores hexadecimais:

A imagem ao lado é uma simulação dos

Anti-serrilhamento (anti-aliasing) é o processo de adicionar cores próximas entre si para suavizar as

Círculo sem anti-aliasing Círculo com anti-aliasing,

2. O que é paleta de cores indexada?

3. Explique como criar cores no design para web.

5. Descreva o que é anti-aliasing .

Objetivo: Apresentar as Conceitos de Cores e Imagens

Imagens e formatos de arquivos para Web

A extensão JPEG ou JPG (formato de imagem raster definido pelo Joint

O formato de arquivo GIF foi desenvolvido pela

RGB - CMYK - HSB - LAB

Bitmap - Tons de cinza - Cores indexadas

2. O que são imagens intrelaçadas?

3. O que é GAMUT de cores?

4. O que é o modelo CMYK? Onde ele é usado?