José Manuel Russo
Escola Secundária Padre Alberto Neto
Parte 3
Introdução
A Cor é um factor importante em qualquer Web Site – não só reforça a identificação de uma Empresa como o ambiente psicológico pretendido (calma, acção, classe, modernidade, criatividade, etc.) – constituindo o meio de cativar o internauta, um potencial cliente, a voltar a consultar as suas páginas. Por outro lado, uma boa selecção de cores contribui para a funcionalidade das páginas, melhorando a leitura dos seus conteúdos e o sistema de navegação.
A Teoria da Cor
A cor exibida num Monitor (ou numa Televisão) baseia-se na mistura de 3 cores básicas (Cores Primárias), obtendo-se um quase infinito número de cores que reproduzem com grande fidelidade o mundo real.
Este processo assenta na Teoria Aditiva da Cor, em que o Vermelho (Red), o Verde (Green) e o Azul (Blue) são as Cores Primárias – por isso se denomina a este modelo RGB – e é nele que as imagens para a Web são concebidas (ao contrário do modelo CMYK – Cyan, Magenta, Yellow e Black – que se destina a trabalhos de impressão).
Profundidade de Cor
Na Informática o modelo RGB está condicionado pela linguagem e sistema de programação, pelo que a quantidade de cores reproduzidas obedece a regras – denominada
Profundidade Cor (Bit Depth):
1 Imagem de 24 bits
Resultante da linguagem binária (bit), utilizada pelos com-putadores, podem-se obter 16,7 milhões de cores – 8 bits por canal (RGB) dá um total de 8x3=24 bits, perfazendo 2 24=16,7 milhões.
Qualquer imagem fotográfica ou mesmo realizada directa-mente em computador, quando é rica cromaticadirecta-mente terá uma profundidade de cor de 24 bits.
2 Imagem de 8 bits
Em Imagens que possuam poucas cores pode-se reduzir para os 8 bits (ganhando-se ficheiros mais pequenos) – 2
8= 256. Algumas fotos suportam esta profundidade de cor,
mas outras ganham um aspecto “solarizado”, como no exemplo ao lado (na Parte 5 veremos alguns truques).
3 Imagem de 8 bits (monocromático)
Em Fotografias a Preto e Branco, os mesmos 8 bits darão uma paleta de 256 tons de cinzento (incluindo o branco e o preto), suficientes para reproduzir a imagem com rigor – denomina-se a este modo Grayscale (Tons de Cinza).
4 Image de 1 bit
As imagens a Preto e Branco, provenientes de desenhos a tinta da china, podem ser convertidos para 1 bit (Black & White), o que dá duas cores. Não se utiliza muito na Internet por se observar em demasia o efeito de escada (estas ima-gens são normalmente digitalizadas em resoluções maio-res para atenuar esse efeito).
Web Safe Colors
Muitos Web Designers projectam um Site sem atender a limitações ao número de cores, no entanto, uma vez mais considerando o público alvo, há que considerar os sistemas que apenas conseguem exibir 256 cores. É devido a este problema que surge o conceito de Cores Seguras para a Web (Web Safe ou Browse Safe Colors) – é uma paleta composta por apenas 216 cores porque o sistema operativo, Windows ou Mac, reservam 40 cores (256-40=216).
Se o Layout se basear neste sistema de cores, o Designer terá a garantia de uma reprodução correcta do Site (em ambiente Windows ou Mac) – apenas ficará dependente da qualidade e afinação do Monitor.
Como Identificar uma Cor
Para desenvolver o projecto Web é necessário identificar a referência de cada uma delas, para a utilizar no tratamento ou criação de imagens e na paginação html:
1 Identificação RGB
Cada Canal de Cor vai do valor 0 a 255 e indicam-se os três valores de cada canal pela ordem RGB (que nas Web Safe Colors usam-se apenas os múltiplos de 51).
2 Identificação Hexadecimal
Em programação, como em HTML, utiliza-se a linguagem Hexadecimal – nas Web Safe
Colors usam-se apenas os múltiplos de 3 (0 - 3 - 6 - 9 - C - F) e compõe-se de 6 números
(sendo os 2 primeiros relativos ao canal R, os 2 do meio ao G e os 2 últimos ao B).
3 Identificação HSL
Alguns Programas permitem identificar a Tonalidade (Hue), a Saturação (Saturation) e a Luminância (Lightness) – cada Tonalidade é identificada de 0 a 359 e os outros dois valores em percentagem de 0 a 100%. Neste caso poderão haver excepções nos valores.
Exemplos: RGB HEX HSL Cor
000.000.000 000000 160.000.000 Preto 051.152.255 3399FF 140.240.144 Dodger Blue 256.256.256 FFFFFF 160.000.240 Branco
Layout de Página – Cor
Seja qual for o sistema de Cor que se utilize, no estudo das Cores a aplicar a uma página Web deve-se ter em consideração um conjunto mínimo de 5/6 cores, destinadas a aplicar 1 ou 2 ao Fundo (Background), ao Texto e 3 aos Links – Link (Hiperligação), V(isited)Link e A(ctive)Link – como se exemplifica neste extrato da obra Coloring Webgraphics 2, de Lynda Weinman e Bruce Heavin, edição New Riders, 1977.
De facto, para quem não especialista na cor, a consulta de obras sobre a matéria ou a análise das cores aplicadas num site que nos agrade é um ponto de partida para conseguir um conjunto de cores harmoniosas. No entanto, existem algumas regras básicas sobre combinação de cores:
Cromatismo – utilização de uma cor (matiz) e variações em luminosidade (claro escuro); texto claro destaca-se em fundo escuro, e vice-versa;
Tons Próximos – as cores próxima do círculo cromático são harmoniosas;
Complementares – a um conjunto de tons próximos a cor Complemen-tar (oposta no círculo cromático) destaca-se;
Cores Primárias – as cores Primárias (Vermelho, Verde e Azul ou Magenta, Cyan e Amarelo) apresentam bom contraste entre si;
Quente-Frio – às cores Quentes (Vermelho, Laranja e Amarelo) opõem-se as cores Frias (Verde, Azul e Violeta).
Trabalhar com Web Safe Colors no Corel PhotoPaint
Para utilizar as Cores Seguras no Photo Paint será necessário tornar a Paleta respectiva disponível: • Execute o Corel PhotoPaint e inicie um novo desenho (New);
• Seleccione o menu Window →→→→→ Color Palettes →→→→→ Web-Safe Colors ;
• Na área de desenho surge a Barra com as cores, que poderá arrumar ao lado da outra barra de cores;
• Seleccione a Foreground ou Background Color conforme pretender – se tiver dúvidas sobre a cor correcta, pare o cursor do rato sobre uma cor semelhante para surgir a informação dessa cor (as cores estão disponíveis pela ordem do código).
Trabalhar com Web Safe Colors no Front Page
O Front Page disponibiliza à partida um conjunto de 16 Cores Web Safe. Para definir outras cores para o projecto de Web/Site terá de as personalizar:
• Execute o Front Page; (não é necessário abrir uma Web)
• Clique no triângulo do botão Cor de Texto (Text Color) ou Realçar (Highlight);
• Seleccione a opção Mais Cores... (More Colors...) na área que surge abaixo do botão; • Na janela Mais Cores seleccione uma cor – repare que em Valor (Value) tem a indicação
do código Hexadecimal);
• Clique no botão Personalizar (Custom) e na janela Cor
(Color) verifique o valor RGB (se for só esse valor que pos-sui);
• Clique no botão Adicionar às Cores Personalizadas (Add to Custom Colors) – aparecerá do lado esquerdo a cor adi-cionada; repita este processo para outras cores, seleccio-nando previamente um quadrado vazio.
De regresso à página, verificará que nas cores de Texto (ou Highlight) estarão disponíveis as cores personalizadas e as utilizadas na página.
Nota: as cores personalizadas apenas aparecerão no Computador
em que fez esta operação (não acompanham o documento). Para poder acompanhar esse conjunto de cores com a página, terá de as aplicar a texto (provisório) ou a outras formas.
Exercícios
Parte 1
Com base nas leituras anteriores, elabore um Estudo de cores a utilizar no projecto da sua página Modelo, tendo em, consideração não só a componente estética mas, sobretudo, a componente funcional – a fácil leitura do texto.
Escolha pelos menos 5 ou 6 cores a aplicar ao Fundo, Texto e Links, faça a sua identificação no PhotoPaint ou no Front Page e escreva os valores RGB e/ou HEX num documento de Word, podendo acrescentar uma amostra de cada cor (desenhando um rectângulo e aplicar a respectiva cor), como aqui se exemplifica.
Poderá guardar este ficheiro com o nome Estudo de Cor WD.doc .
Nota: existem dois Sites (para além de muitos outros relacionados com o tema) onde pode de uma forma
simples realizar estes estudos:
• http://www.visibone.com/colorlab →→→ permite escolher um conjunto de cores on-line e→→ observar a sua funcionalidade;
• http://www.colormix.com →→→→→ possui um programa para download, instalar no computa-dor e seleccionar cores para texto, links e fundo e visualizar uma amostra de aplicação.
Parte 2
Aplique o modelo de cor estudado na Parte 1 na sua página HTML:
• Execute o Front Page e abra a Web/Site que está a desenvolver (o FP2003 abre-a auto-maticamente);
• Abra a página modelo_wd.htm criada;
• Adicione, uma a uma, ao grupo de Cores Personalizadas (Custom Colors) as 5/6 cores escolhidas; (esta parte é opcional, se não pre-tender posteriormente procurá-las)
• Aplique ao Fundo (Background) a cor escolhida para esse fim: – Seleccione o menu Formatar →→→→→ Fundo (Format →→→→→ Background)
ou clique com o botão direito do rato na página de trabalho e seleccione a opção Propriedades de Página (Page Properties);
– Na área Cores, clique no campo Fundo (Background) e seleccio-ne a cor disponível para o fundo da página;
• Aplique às Hiperligações (Links) as cores respectivas:
– Seleccione o menu Ficheiro →→→→ Propriedades→ (File →→→→→ Properties) ou clique com o botão direito do rato na página de trabalho e seleccione a opção Propriedades de Página (Page Properties);
– Na Janela Propriedade de Página (Page Properties) seleccione o separador Fundo
(Background) ou Formatação (Formatting) na versão 2003; seleccione nos campos
Hiperligação (Hyperlink), Hiperligação Visitada (Visited Hyperlink) e Hiperligação Activa (Active Hyperlink) as cores respectivas;
• Para finalizar o trabalho, aplique ao campo Texto (Text) a cor respectiva; • Guarde a página com o nome modelo_cor_wd.htm.
