Cores Photoshop

NT Informática

Caçapava – SP (012) 3653 5983

(“PHOTOSHOP”) EDITORAÇÃO ELETRONICA

Modulo I

1

Objetivo:

AApprreesseennttaarr ccoonncceeiittooss bbáássiiccooss ddoo uussoo ddaass ccoorreess

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

2

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

3

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-alaranjado

vermelho

verde

amarelo

azul forte

azul

As secundárias são:

vermelho + azul magenta

vermelho + azul

violeta

azul + verde

azul ciano

azul + amarelo

verde

verde + vermelho amarelo

vermelho + amarelo

alaranjado

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

4

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:

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

5





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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

6

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

7

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.

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:

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

8

RED GREEN BLUE COR COR

221 19 123 cor MAGENTA

0 146 64 cor VERDE

145 105 161 violeta 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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

9

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:

RED GREEN BLUE COR VALOR

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

80% 204 CC

60% 153 99

40% 102 66

20% 51 33

0% 0 00

No exemplo ao lado,

vemos uma representação da cor amarela em

modo RGB e em hexadecimal.

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

10

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

pixels de uma tonalidade dispersos

sobre uma outra tonalidade diferente.

Quando "misturam-se" criam uma

nova tonalidade de cor.

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 (com serrilhamento nas bordas).

Tamanho da imagem 0.37 K.

Círculo com anti-aliasing, (sem serrilhamento nas bordas).

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 .

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

11

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.

Imagem em arquivo JPEG

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

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

12

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.

Esta compactação é feita quase sem perdas, o que

significa que a imagem compactada será bem próxima

da original.

A imagem acima foi transformada

em formato GIF

(transparente).

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

13

É 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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

14

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

15

- 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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

16

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

17

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

18

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

19

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:

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

20

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 25 - Padrões de tela de trabalho

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 preferências do programa. 1 - (Novo) abre uma nova janela; (Abrir) abre arquivo que já existe p/ editar seu conteúdo; (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 anterior.

2 - (Fechar) fecha o arq. que estiver ativo, sem encerrar o aplicativo. Se houverem modificações que não foram salvas, abre- se a opção de salvá-las antes de fechá-lo;

(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 do atual, 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...

1

3

4

5

6

78

9

10 11

2

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

21

(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 refaz a operação que acabou de ser desfeita (Refaz). Atenção: só há um Undo/ Redo por operação.

2 - (Recortar) corta o item selecionado, (Copiar) cópia o ítem selecionado, (Copiar mesclado) copiar fundindo e colar, (Colar) 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 modo escolhidos, permite também o preenchimento de uma borda ao redor da área selecionada, como um contorno ou moldura.

4 - (Transformação livre e Transformação): Estes comandos permitem girar, torcer, escalar e aplicar perspectiva 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

1

2

3

4

5

6

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

22

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)

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

23

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- (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 modelos estabelecidos para descrever e reproduzir cores. Modelos comuns incluem HSB (matiz, saturação, brilho); RGB (vermelho, verde, azul); CMYK (ciano, magenta, amarelo, preto); e CIE L*a*b*. O Photoshop inclui modos de saída especializada de cor, como cor indexada e duotônicos.

2 - Ajusta a imagem ( em níveis, brilho, contraste ....

3 - (Duplicar) pode-se copiar uma imagem 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 arrastando e soltando. Aplicar Imagem, Cálculos....

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.

1

2

3

4

5

6

7

8

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

24

(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 - (Tudo) - seleciona toda a área da tela; (Desfazer Seleção) remove toda seleção ; (Selecionar novamente) retorna a seleção removida e (Inverter) inverte a forma de seleção;

2 - (Escala de Cores) seleciona objetos pela faixa de cor;

3 - (Difusão) seleciona pela característica de área da imagem e (Modificar) seleciona setores modificados;

4 - (Aumentar) aumenta área selecionada e (Semelhante) seleciona áreas indênticas;

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,

1

2

3

4 5

6

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

25

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

26

Os elementos citados nesta página referente a camadas, caminhos, guias e grades terão no decorrer deste treinamento, referências mais detalhadas. 1 - (Nova visualização) modifica a visualização do objeto;

2 - (Visualizar / alerta de Gamut) prévia CMYK e Alarme de Gamut;

3 - (Zoom In) aumenta a imagem; (Zoom Out) diminui a imagem; (Ajustar à 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;

4 - (Ocultar Arestas) remover ou exibir bordas; (Ocultar Demarcador remover ou exibir caminhos;

5 - (Mostrar e ocultar réguas) exibir ou remover réguas na janela da imagem;

6 - Exibir ou remover guias; Prender as guias; Ver guias limpar guias;

7 - Exibir ou remover grade e Prender a grade.

Usando a barra de menu (janela)

1 - (Cascata) exibe imagens em cascata; (Tile) exibe imagens de modo recortado; (Arrange Icons) organiza os ícones e (Close All) fecha todas as janelas de imagens;

2 - (Ocultar Ferramentas) remove ou exibe as ferramentas na área de trabalho;

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.

4 - Aqui temos também a exibição e informações das imagens abertas no Photoshop.

5 - (Mostrar camadas) exibe a palheta de layers (camadas); ( Show Channels) exibe diversos canais ao mesmo tempo;

6 - (Mostrar histórico) Desfazer mais de um comando; (Mostrar Ações) Automatizar um série de passos

7 - Remove ou exibe a barra de status

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

27

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

28

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

29

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:

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

30

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

31

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

32

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

33

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

34

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...)

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

35

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..

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

36

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

37

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.

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

38

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)

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

39

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

NT Informática

Caçapava – SP (012) 3653 5983


Modulo I

40

3 - Vamos trabalhar com estas 2 imagens para ficar igual ao exemplo abaixo:

Documents

Cores Photoshop