Curso prático de Web Design

[helldanger1]

O design equilibrado. Os agrupamentos



Como os elementos web devem se agrupar para obter um resultado coerente.

Por Luciano Moreno


O ser humano, tanto por seu caráter racional como por herança cultural, tende a organizar os elementos que percebe ao redor como conjuntos significativos organizados. Esta inclinação a agrupar elementos relacionados em um fator que influi de forma notória na percepção que temos de nosso entorno, do que vemos ao nosso redor.

As composições gráficas não escapam a esta tendência, portanto um correto agrupamento de seus elementos lhes outorga um caráter lógico, racional, que aumenta seu valor comunicativo.

O agrupamento de nossos elementos gráficos e textuais pode se basear em diferentes critérios:

Proximidade: Tendemos a agrupar aqueles objetos que estão próximos, mais pertos entre si.
Semelhança: Tendemos a agrupar os elementos iguais ou parecidos.
Continuidade: Nossa mente tende a agrupar aqueles elementos que têm uma continuidade significativa.
Simetria: Tendemos a agrupar os elementos para que apareçam ordenados formando figuras conhecidas.

No caso concreto das páginas web, os agrupamentos são muito úteis e totalmente necessários, sobretudo no que diz respeito a elementos similares ou de funcionalidade análoga, como componentes de menus de navegação, ícones, dados relacionados, botões, etc.




Os agrupamentos também são muito úteis em casos de formulários ou fichas de muitos campos, sendo muito conveniente dividir estes em grupos de informação análoga, separando logo cada grupo dos demais mediante franjas horizontais ou verticais em branco.

Com isso, o formulário não só ganha em beleza visual, como também fica mais claro, lógico w fácil de completar pelo usuário

 

[helldanger1]

O design equilibrado. O reticulado
Como harmonizar os blocos de conteúdo que formarão a composição do desenho.

Por Luciano Moreno


Uma composição gráfica deve ser equilibrada não só em conteúdos, como também visualmente, até tal ponto que podemos dizer que a ordem na disposição espacial dos elementos da mesma é um dos fatores mais importantes para seu sucesso.

O espectador que contempla uma obra gráfica (folheto, cartaz tríptico ou página web) busca subconscientemente nela uma ordem e uam estabilidade que lhe permitam passear a vista pela mesma de forma organizada e limpa.

O sistema plano de referência habitual nos seres humanos é o formado por um eixo horizontal e outro vertical, ou seja, por duas retas que se cortam em um ângulo de 90º. Neste sistema, o eixo horizontal sugere equilíbrio e estabilidade, enquanto que o vertical facilita a elevação da vista, marcando prioridades ou níveis na composição.

Visto que as composições gráficas (e dentro delas, as páginas web) se representam em suportes planos, é fácil deduzir que este sistema de referência é também o mais adequado para a distribuição de seus elementos. Se a isto somamos o caráter eminentemente retangular da maioria dos suportes, obtemos por extensão o sistema de organização ideal para nossas composições: o reticulado.

Um reticulado ou rede é um sistema de referência formado por diferentes linhas horizontais e verticais que marcam a localização de elementos e zonas em uma composição gráfica, linhas que não tem porquê ter uma representação real (não têm porquê fazer parte do grafismo), mas sim mental. São as guias imaginárias sobre as que vamos ir colocando os elementos, a espinha dorsal de uma composição gráfica.

Mediante o reticulado, o designer vai situando com harmonia os blocos de conteúdo que formarão a composição: zonas principais e secundárias, títulos e subtítulos, blocos de texto, fotografias, ilustrações, gráficos, sistemas de navegação, botões, ícones, etc, dando com isso um estilo próprio visualmente lógico à mesma.

Uma composição gráfica não é um sistema padrão, único, e sim que os mesmos elementos se podem organizar segundo diferentes esquemas lógicos. Mas sempre deverão estar dispostos segundo uma retícula que lhes traga equilíbrio e estabilidade visual. É tarefa do designer buscar o conjunto localização-reticulado que melhor se adapte a sua obra.

A localização de elementos em uma composição segundo um reticulado determinado não requer a introdução dos elementos finais da mesma. Ou seja, se pode perfeitamente desenhar a organização de um grafismo simplesmente com retângulos de cores. Mais ainda, com retângulos de uma só cor. O que importa não é o aspecto visual final, e sim a organização lógica e regular dos elementos.

No caso concreto de uma página web, o designer pode perfeitamente distribuir em tela uma série de retângulos que representem as zonas que vão ter a página. Se a distribuição segue um reticulado conforme as zonas estão localizadas com lógica, a página que resultar disso terá um 50% de possibilidades de ser correta.

Esta estrutura lógica criada com o reticulado deve se manter logo em todas as páginas que formam website, proporcionando com isso consistência e homogeneidade ao mesmo.

Se definirmos uma separação entre o cabeçalho de uma formulário e o início dos elementos do mesmo de 15 pixels, todos os formulários, fichas, textos, etc, que tiverem cabeçalho, devem manter o mesmo espaço separador. Se definirmos umas margens vazias entre a página que desenharmos e as bordas da janela do navegador de 30 pixels, todas as páginas do site devem manter constantes essas margens.

Uma vantagem adicional de desenhar um reticulado correto será a comodidade na hora de construir depois a página com tabelas, já que a estrutura natural destas é reticular.

 

[helldanger1]

O design equilibrado. Os alinhamentos



Necessários para conseguir uma composição ordenada e lógica, assim como para relacionar elementos.

Por Luciano Moreno


Uma vez definido o reticulado que vamos usar em nossa composição, deveremos situar na mesma os elementos gráficos e textuais.

Neste ponto aparece o conceito de alinhamento, como a colocação de elementos gráficos e textuais segundo uma linha dada, que geralmente será horizontal ou vertical. Geralmente haverá várias linhas guias de alinhamento em uma composição.

Alinhar os elementos é uma operação imprescindível para conseguir uma composição ordenada e lógica, pois com isso se criam unidades visuais definidas e relações entre elementos.

Se o alinhamento é importante na hora de situar elementos gráficos, será ainda mais se se trata de conteúdos textuais. Efetivamente, os textos perfeitamente alinhados são mais fáceis de ler, não cansam a vista e produzem um efeito de equilíbrio que convida à leitura. Ao contrário, um texto sem alinhamento resulta confuso, difícil de ler, desmotivando ao espectador.

Tudo o que está sendo falado se acentua ainda mais se o suporte é uma página web, já que a forma do monitor e da janela do navegador impulsiona o uso de contornos retangulares, que unicamente se conseguem com alinhamentos perfeitos.

Ademais, muitas vezes devemos desenhar as páginas com um importante número de elementos, por isso se a disposição dos mesmos não for perfeitamente regular será muito difícil criar uma composição aceitável.

Os alinhamentos horizontais são imprescindíveis para conseguir um desenho em níveis estáveis, já que as linhas horizontais sugerem equilíbrio. Como podemos ter blocos lógicos de diferente altura, estes alinhamentos se definirão desde as bordas superiores dos blocos.

Quanto às verticais, o alinhamento mais comum é a esquerda, já que é a normal nos livros e demais suportes textuais, estando nossa vista educada para tratar com ela.

Os alinhamentos centralizados são pouco comuns, salvo no caso de tabelas de dados com colunas que admitam bem este tipo de alinhamento, sobretudo se todos os valores da coluna tiverem a mesma largura. Se não for assim, é preferível optar pelo alinhamento à esquerda


Quanto aos alinhamentos à direita, são pouco freqüentes, já que criam tensões visuais na maioria dos casos. Podem-se usar naqueles blocos cujo conteúdo deva se adaptar a um reticulado que defina uma linha vertical à direita do mesmo, como ocorre em muitos menus de navegação situados à esquerda da página.

Também são úteis nas colunas das tabelas que contiverem dados que devam seguir uma ordenação lógica a direitas, como é o caso de dados de moeda.

Adequando o alinhamento ao tipo de dados de cada campo

Existe outro tipo de alinhamento para textos, o justificado, no qual todas as linhas de texto têm a mesma largura, por isso ficam alinhadas tanto a esquerda quanto a direita, o que se consegue aumentando ou diminuindo o espaçado normal das letras. Este tipo de alinhamento é muito usado nos livros e jornais, porém nas páginas web há que aplicá-lo com precaução, destinando-o somente a blocos textuais de pouco largura (textos distribuídos em várias colunas, por exemplo).

Por último, vale dizer que se os alinhamentos são imprescindíveis, podem originar monotonia visual se forem seguidos ao pé da letra, ao produzir páginas quadradas e artificiais demais. Por isso, é bom introduzir alguns elementos que, sem romper o reticulado e os alinhamentos básicos, introduzam um pouco de variedade visual, de frescor no desenho. Buscar o equilíbrio entre alinhamentos e elementos que as rompam é uma das tarefas principais do web designer

 

[helldanger1]

O design equilibrado. As simetrias



Outro condicionante para que o design da web tenha uma organização natural.

Por Luciano Moreno

Se observarmos a Natureza, grande arquiteta e desenhista onde estiver, poderemos observar rapidamente que um dos elementos que mais utiliza para criar suas organismos é a simetria, manifestando-se em quase todos os seres que existem ao longo e largo de nosso planeta.

O Homem pretendeu imitar este desenho simétrico natural em todos e cada um de seus aspectos criadores, desde os primeiros objetos de artesanato até os modernos automóveis.

Se partirmos desta base, devemos aceitar que a busca de uma simetria estrutural, gráfica e textual deve ser uma das primeiras metas de todo web designer, já que confere às composições de uma organização natural a qual o espectador está acostumado.

Por definição, uma forma ou imagem é simétrica quando um eixo central pode dividi-la em duas partes iguais e opostas entre si. Este conceito, aplicado a uma composição gráfica pode se aplicar tanto aos próprios elementos individuais da mesma como a sua totalidade. Neste caso, obter uma simetria exata pode resultar difícil (inclusive inconveniente), porém sim que podemos buscar uma simetria de blocos e espaçamentos em nossa rede.

O design simétrico sugere estabilidade, equilíbrio, resultando estético, ordenado, atrativo e agradável de contemplar. Do contrário, o assimétrico mostra irregularidade, desigualdade nas formas e desequilíbrio.

Há que ter em conta que a simetria usada não deve de ser de todo exata, já que a simetria perfeita não é natural, é "perfeita" demais, vale a redundância, fazendo aparecer as composições artificiais e pré-meditadas. Pequenas variações na distribuição simétrica dão esse toque de ruptura que torna sua contemplação mais amena e natural.

No caso de uma página web, a concepção simétrica da mesma começa com o reticulado escolhido, já que será o que define a distribuição básica de elementos nela. Há que tender então a desenhar um reticulado o mais simétrico possível.




Uma forma aceitada de romper o esquema simétrico de uma página é criar blocos entortados visualmente para um lado, alternando-os na página de forma inversa, ou seja, o primeiro mais torto à direita, o segundo mais à esquerda, etc. Outra técnica é o uso de um único menu lateral de navegação, que descompensa o peso visual para a zona na qual se encontra.

Se na disposição de blocos no reticulado podemos ser algo permissivos, nos conteúdos de nossas páginas a simetria deve ser uma norma quase inflexível, sobretudo na construção de certos elementos. É missão fundamental de todo designer ser capaz de construir conteúdos simétricos sem que pareçam rígidos, artificiais.

Exemplos claros desta regra são a criação de formulários e de fichas. Constroem-se geralmente apoiando-se em uma tabela construtor, pela qual deveremos buscar a simetria nesta tabela, embora logo, devido às diferentes longitudes e natureza dos campos, o resultado final "pareça" não sê-lo.

Distribuição simétrica em uma ficha



Em relação aos textos, se nossa página é eminentemente textual, e em textos de uma só linha, como esta que vocês têm adiante, o conteúdo será simétrico por própria construção. Porém, se desejarmos distribuir o conteúdo em várias colunas, deveremos prestar especial atenção a que estas sejam equilibradas, evitando o remarcado forte de porções de texto ou de uma ou mais colunas mediante cores de fundo, textos em negrito, etc.

Colunas textuais e simetria

A regra geral é buscar sempre a harmonia, mesmo quando introduzamos pequenos elementos diferenciadores.

Outro aspecto fundamental é manter simetrias no tratamento dos ares em nossa página. Entendemos por "ar" o espaço livre que fica entre elementos e entre estes e os limites da página. É o que em qualquer documento chamamos "margens", porém estendido a todos os elementos e conteúdos.

Se nossa página tem um espaço livre entre sua margem esquerda e o primeiro conteúdo por esse lado, o mesmo ar deve ficar entre a margem direita e o conteúdo por esse lado. Igualmente, os espaços livres entre os elementos internos da página devem ser simétricos e iguais, buscando com isso o equilíbrio na composição.

Este conceito é aplicável a todos e cada um dos elementos de nossas páginas. Assim, se temos uma lista de conteúdos, podemos criar uns espaços entre cada 5-7 elementos, que evitarão a sensação de opressão produzida quando as listas têm muitos elementos. Então, deveremos repetir este espaço separador constantemente ao longo da lista.




Da mesma forma, quando trabalhamos com formulários é muito importante desenhá-los de tal forma que o ar que fique entre os diferentes elementos que o formem seja simétrico, criando um total claro e harmonioso.




E o mesmo podemos dizer dos demais elementos de nossa página: ares simétricos, bem repartidos, equilibrados.

 

[helldanger1]

O design equilibrado. O equilíbrio entre conteúdos



A organização espacial, primordial para atrair ao usuário.

Por Luciano Moreno


Em toda composição deve existir um adequado equilíbrio entre os diferentes elementos que a formam se quisermos atrair a atenção do espectador e mantê-la até que tenha assimilado a mensagem que quisermos lhe transmitir.

Para isso, é imprescindível manter em nossa obra gráfica uma correta organização espacial de conteúdos gráficos e textuais, assim como umas quantidades adequadas de cada um deles.

Os componentes gráficos contribuem à composição sensações visuais por meio de formas, cores e contrastes, enquanto que os textos fornecem informação, mensagens, embora isto não queira dizer que estas funcionalidades sejam excludentes, já que os gráficos podem trazer informação e os textos formas e cores (de fato, a Tipografia é uma ferramenta de desenho excelente).

As composições formadas por muitos elementos gráficos e pouco ou nenhum conteúdo textual podem criar rejeição naqueles espectadores que buscam o conteúdo substancial na obra, a informação prática que oferece. Este conteúdo textual é especialmente importante nas páginas web, já que os usuários comparecem a um site buscando sempre algum tipo de informação, abandonando-o rapidamente se não encontrar algum estímulo informativo que lhe motive.




No lado ao contrário, as composições nas quais se introduz um conteúdo eminentemente textual, com pouco ou nenhum conteúdo gráfico, costumam ser rejeitadas pelo espectador, que encontra tremendamente monótona e entediada uma obra que aparece à vista como uma mancha de cor indiferenciada, que exige ademais um elevado nível de concentração e muito tempo para resultar útil. Necessitamos então introduzir sensações visuais gráficas que motivem ao espectador a investigar o conteúdo textual.




No caso das páginas web, os tipos de conteúdos a oferecer aumentam consideravelmente com respeito aos de uma composição sobre papel já que podemos incluir nelas não só gráficos e textos, como também áudios, animações, vídeo, applets de Java, etc. Isto torna necessário um planejamento correto dos elementos a incluir em uma página, com objetivo de despertar a atenção do usuário, sim, mas oferecendo-lhe sempre informação relevante e nunca sobrecarregando de elementos supérfluos.

Ademais, devido às limitações próprias dos sistemas informáticos, da linguagem HTML, dos navegadores web e das conexões à Internet, o equilíbrio entre conteúdos deve contemplar também que o resultado final se possa visualizar corretamente.

De nada serve uma página com gráficos maravilhosos e animações espetaculares se o usuário deve esperar um minuto para poder vê-las. É mais, ele na verdade nunca esperará esse minuto.

É portanto preferível organizar as páginas web de forma equilibrada, oferecendo em cada uma delas as doses adequadas de elementos visuais e informativos. Como norma geral, sempre deve haver mais componentes textuais do que gráficos em uma página.




É melhor sempre ter duas páginas leves e equilibradas a uma recarregada de elementos incapazes de reter a atenção do usuário no verdadeiramente importante: a mensagem que desejamos transmitir.

 

[helldanger1]

O design equilibrado. A hierarquia visual
A organização guia ao usuário na contemplação de uma página web.

Por Luciano Moreno


Em toda composição gráfica deve-se criar uma hierarquia visual adequada, com o objetivo de que os elementos mais importantes da mesma se mostrem devidamente acentuados.

Mediante um design adequado, pode-se estabelecer um caminho visual que conduza o olho do espectador e que vá mostrando a informação contida na composição de forma organizada, lógica e confiável, que dirija sua percepção pela rota mais ideal.

A pessoa que contempla uma obra gráfica aprecia em primeiro lugar um conjunto completo de formas e cores, com os elementos situados em primeiro plano contrastando com o fundo da composição. Só depois desta primeira observação global, e se sua curiosidade tiver sido despertada, o espectador começará a analisar as partes individuais do todo, começando pelos elementos gráficos puros, e continuando logo com os elementos textuais, mais difíceis de interpretar, já que há que lê-los palavra por palavra.

Nos países ocidentais, lemos os documentos da esquerda à direita e desde a parte superior à inferior. Esta forma de proceder se estendeu à todas aquelas atividades nas que necessitamos visualizar algo (quando observamos a uma pessoa, geralmente começamos pela parte esquerda de sua cabeça).

Isto pode ser aproveitado para organizar o conteúdo de uma composição logicamente, situando nela os elementos mais importantes na zona superior esquerda da mesma, as seguintes em importância na lateral esquerda, as seguintes no corpo central e as menos relevantes na parte inferior.

Esta forma de proceder é comum não só em folhetos, documentos ou cartazes publicitários criados com um design clássico, assim como nas páginas web, que seguem esta estrutura hierárquica em 95% dos sites, que, ademais, são os que melhor aceitação tem pelo público.


Outro sistema de estabelecer uma hierarquia nos conteúdos é o uso de cores. Podemos enfatizar certas zonas da composição usando nelas cores primárias muito saturadas, que atraem de forma irresistível a atenção dos espectadores, tendo sempre cuidado de que os textos nelas contidos contrastem de forma clara com o fundo, para que possam ser lidos com comodidade. Neste caso, há que ter cuidado com não abusar destas cores "fortes", destinando-as somente à pequenas zonas especiais, já que sobrecarregam em excesso a vista, sobretudo o amarelo.

Para as zonas de segunda ordem, podemos usar as cores menos saturadas, secundárias ou terciárias, sendo uma boa opção aquelas presentes na natureza, já que são mais naturais e melhor aceitas pelos espectadores. Por último, as zonas menos importantes podemos não colori-las ou fazê-lo muito sutilmente, para que não atraia em excesso o olhar.

Esta variação cromática não é única, já que se pode usar qualquer jogo de cores que consiga estabelecer uma hierarquia visual adequada.

Também podemos percorrer na hora de estabelecer categorias de importância visual aos contrastes. Se situarmos próximas ou sobrepostas duas zonas de cores complementares ou que contrastem muito, a importância de ambas na composição se reforça, sobretudo se as zonas de contraste não forem muitas.


Sendo ao contrário, se as zonas são de cores análogas, pertencentes a uma mesma gama, a importância de ambas se diminui mesmo sendo cores vivas, já que se distinguirá uma zona de atração, porém seus elementos aparecerão esfumados, pouco relevantes.

Quanto aos elementos textuais, aos que também são aplicáveis os métodos de cor e contraste, podemos estabelecer uma hierarquia neles mediante os tamanhos relativos dos mesmos. Os títulos de página, os cabeçalhos ou os titulares de uma notícia ou seção podem ser destacados aumentando seu tamanho segundo sua importância na composição ou página web. Este método é sempre aconselhável, já que organiza de forma lógica o conteúdo textual e rompe a monotonia intrínseca dos textos.

Um elemento a evitar sempre em uma composição, salvo que nos convenha seu uso, são os enfeites gráficos visualmente impactantes, como zonas de cor intensa sem sentido, ícones que destaquem em excesso, linhas horizontais escandalosas, animações que tragam pouca informação, etc. Sua presença atrai a vista do espectador, sem lhe oferecer nada em troca e desvia seu interesse dos elementos textuais e gráficos que sim trazem verdadeira informação.

Isto não quer dizer que não possam se empregar. São às vezes muito úteis para romper a monotonia de uma composição introduzindo nela elementos que proporcionem frescor visual, porém devem ser usados sempre com moderação.

Os tamanhos excessivamente grandes nos textos é também um fator a ter em conta. Um cabeçalho de página ou de seção deve destacar o suficiente sobre o resto do conteúdo textual, porém nunca devem ser desproporcionadas nem atrair em excesso a atenção do usuário. Quanto à abundância deles, há que ter sempre em conta que um par de cabeçalhos de maior tamanho estabelece uns níveis de importância convenientes, porém uma multidão de textos de grande tamanho acrescenta confusão a uma composição, já que o usuário perde as referências sobre o que é importante na mesma.

Resumindo: É muito importante estabelecer uma organização hierárquica dos conteúdos de nossa composição, podendo-se usar para isso diferentes técnicas de design, porém tendo em conta que o mal uso ou o abuso delas pode converter a composição em algo que não desperta interesse do usuário ou transforma-se em uma "palhaçada", onde tudo é escandaloso e nada se destaca de forma clara.

 

[helldanger1]

Teoria da cor. Introdução



É uma parte fundamental da web, produtor de sensações.

Por Luciano Moreno


Estamos rodeados de cores. Estas fazem parte da própria, e o ser humano é um dos seres privilegiados da Natureza por poder desfrutar delas.

Quando vamos pela rua, quando estamos trabalhando ou desfrutando de nosso tempo livre ou quando estamos navegando pela Internet recebemos constantemente impressões de cor por meio de nossa vista, e estas impressões têm a faculdade de nos excitar, de nos tranqüilizar, de nos deixar de bom humor ou de nos inspirar pena. É o mundo de cor.

E se este aspecto da vida é importante em todas e cada uma de suas facetas, é ainda mais no mundo do design. É talvez uma de suas partes fundamentais, e ainda mais no web design, pois dispomos de muito pouco espaço e muito pouco tempo para poder expressar a alma de nosso site e captar adequadamente a atenção de nossos visitantes, e a cor é a primeira forma de comunicação entre uma página web e o usuário.

Está demonstrado que os nove primeiros segundos nos quais uma pessoa contempla nossa página são cruciais, e deles depende que esta continue com agrado navegando por nosso site, o faça com indiferença ou nos abandone. E do que vê nestes segundos, o que talvez mais chame e capte sua atenção seja a distribuição e a gama de cores de nossa página.

Esta importância da cor se estende a todas as artes, um pintor, por exemplo, dispõe de muito mais tempo que nós para se expressar com a cor. Este também conta com um leque de cores quase infinito, enquanto que nós, os web designers, dispomos somente de algumas cores para expressar o que desejamos (e já veremos mais adiante que poucas cores temos na verdade ao nosso alcance).






Neste capítulo veremos um pouco o mundo da cor em geral, sua aplicação ao design gráfico e as restrições que vamos ter na hora de trabalhar com cores no design de um web site.

 

[helldanger1]

Teoria da cor. Natureza da cor



Descrição formal da cor como um fenômeno físico.

Por Luciano Moreno


Teoria da cor. Natureza da cor

Podemos ver as cosas que nos rodeiam porque A Terra recebe a luz do Sol. Nossa estrela mãe nos inunda constantemente com sua luz, e graças a ela é também possível a vida em nosso planeta.

A luz do Sol está formada em realidade por um amplo espectro de radiações eletromagnéticas de diferentes longitudes de onda, formando um espectro contínuo de radiações, que compreende desde longitudes de onda muito pequenas, de menos de 1 picômetro (raios cósmicos), até longitudes de onda muito grandes, de mais de 1 kilômetro.

O ser humano somente é capaz de visualizar um subconjunto delas, as que vão desde 380 (violeta) a 780 nanômetros (vermelho), como podemos apreciar claramente se a fazemos passar por um prisma, efeito descoberto por Newton.

Cada longitude de onda define uma cor diferente (cores de emissão). A soma de todos as cores (longitudes de onda) dá como resultado a luz branca, sendo a cor preta ou a obscuridade, a ausência de cores.

Se uma vez descomposta a luz solar em suas longitudes de onda constituintes voltarmos a juntá-las com outro prisma, voltaremos a obter a luz branca.

 

[helldanger1]

Teoria da cor. A percepção da cor



Como o olho pode detectar e classificar as cores que chegam.

Por Luciano Moreno


Bem, já sabemos de onde vêm as cores, porém como o olho humano pode ver estas ondas e distingui-las umas de outras? A resposta a esta questão se encontra no olho humano, basicamente uma esfera de 2 cm de diâmetro que percorre a luz e a enfoca em sua superfície posterior.





No fundo do olho existem milhões de células especializadas em detectar as longitudes de onda procedentes de nosso ambiente. Estas maravilhosas células, principalmente os cones e os bastonetes, percorrem as diferentes partes do espectro de luz solar e as transformam em impulsos elétricos, que são enviados logo ao cérebro através dos nervos ópticos, sendo este o encarregado de criar a sensação da cor.

Os cones se concentram em uma região próxima do centro da retina chamada fóvea. Sua distribuição segue um ângulo ao redor de 2° contados desde a fóvea. A quantidade de cones é de 6 milhões e alguns deles têm uma terminação nervosa que vai ao cérebro.

Os cones são os responsáveis da visão da cor e acredita-se que há três tipos de cones, sensíveis as cores vermelho, verde e azul, respectivamente. Dada sua forma de conexão às terminações nervosas que se dirigem ao cérebro, são os responsáveis da definição espacial. Também são pouco sensíveis à intensidade da luz e proporcionam visão fotópica (visão a altos níveis).

Os bastonetes se concentram em zonas afastadas da fóvea e são os responsáveis da visão escotópica (visão a baixos níveis). Os bastonetes compartilham as terminações nervosas que se dirigem ao cérebro, sendo portanto, sua colaboração à definição espacial pouco importante. A quantidade de bastonetes se situa ao redor de 100 milhões e não são sensíveis à cor. Os bastonetes são muito mais sensíveis que os cones à intensidade luminosa, por isso contribuem à visão da cor aspectos como o brilho e o tom, e são os responsáveis da visão noturna.

Existem grupos de cones especializados em detectar e processar uma cor determinada, sendo diferente o total deles dedicados a uma cor e a outra. Por exemplo, existem mais células especializadas em trabalhar com as longitudes de onda correspondentes ao vermelho que a nenhuma outra cor, por isso que quando o ambiente em que nos encontramos nos envia bastante vermelho se produz uma saturação de informação no cérebro desta cor, originando uma sensação de irritação nas pessoas.

Quando o sistema de cones e bastonetes de uma pessoa não é o correto se podem produzir uma série de irregularidades na apreciação da cor, assim como as partes do cérebro encarregadas de processar estes dados estão prejudicadas. Esta é a explicação de fenômenos como o Daltonismo. Uma pessoa daltônica não aprecia as gamas de cores em sua justa medida, confundindo os vermelhos com os verdes.

Devido a que o processo de identificação de cores depende do cérebro e do sistema ocular de cada pessoa em concreto, podemos medir com toda exatidão a longitude de onda de uma cor determinada, porém o conceito da cor produzida por ela é totalmente subjetivo, dependendo da pessoa em si. Duas pessoas diferentes podem interpretar uma cor dada de forma diferente, e pode haver tantas interpretações de uma cor cmo quantas pessoas há.

Na verdade, o mecanismo de mescla e produção de cores produzido pela reflexão da luz sobre um corpo é diferente ao da obtenção de cores por mescla direta de raios de luz, como ocorre com o do monitor de um computador, porém a grandes traços e a nível prático são suficientes os conceitos estudados até agora.

 

[helldanger1]

Teoria da cor. Modelos de cor




Descrição dos tipos de cor conhecidos, assim como se aborda uma explicação de como os objetos adquirem as cores.

Por Luciano Moreno


As cores obtidas diretamente naturalmente por decomposição da luz solar ou artificialmente mediante focos emissores de luz de uma longitude de onda determinada se denominam cores aditivas.

Não é necessária a união de todas as longitudes do espectro visível para obter o branco, já que se misturarmos só o vermelho, verde e azul obteremos o mesmo resultado. É por isso que estas cores são denominadas cores primárias, porque a soma das três produz o branco. Ademais, todas as cores do espectro podem ser obtidas a partir delas.

As cores aditivas são as usadas em trabalho gráfico com monitores de computador, já que, segundo vimos quando falamos dos componentes gráficos de um computador, o monitor produz os pontos de luz partindo de três tubos de raios catódicos, um vermelho, outro verde e outro azul. Por este motivo, o modelo de definição de cores usado em trabalhos digitais é o modelo RGB (Red, Green, Blue).

Todas as cores que se visualizam no monitor estão em função das quantidades de vermelho, verde e azul utilizadas. Por isso, para representar uma cor no sistema RGB se atribui um valor entre 0 e 255 (notação decimal) ou entre 00 e FF (notação hexadecimal) para cada um dos componentes vermelho, verde e azul que o formam. Os valores mais altos de RGB correspondem a uma quantidade maior de luz branca. Por conseguinte, quanto mais altos são os valores RGB, mais claros são as cores.

Desta forma, uma cor qualquer virá representada no sistema RGB mediante a sintaxe decimal (R,G,B) ou mediante a sintaxe hexadecimal #RRGGBB. A cor vermelha pura, por exemplo, se especificará como (255,0,0) em notação RGB decimal e #FF0000 em notação RGB hexadecimal, enquanto que a cor rosa claro dada em notação decimal por (252,165,253) se corresponde com a cor hexadecimal #FCA5FD.

Esta forma aditiva de perceber a cor não é única. Quando a luz solar choca contra a superfície de um objeto, este absorve diferentes longitudes de onda de seu espectro total, enquanto que refletem outras. Estas longitudes de onda refletidas são precisamente as causadoras das cores dos objetos, cores que por ser produzidas por filtragem de longitudes de onda se denominam cores subtrativas.

Este fenômeno é o que se produz em pintura, onde a cor final de uma zona vai depender das longitudes de onda da luz incidente refletidas pelos pigmentos de cor da mesma.

Um carro é de cor azul porque absorve todas as longitudes de onda que formam a luz solar, exceto a correspondente à cor azul, que reflete, enquanto que um objeto é branco porque reflete todo o espectro de ondas que formam a luz, ou seja, reflete todas as cores, e o resultado da mistura de todas elas dá como produto o branco. Por sua vez, um objeto é negro porque absorve todas as longitudes de onda do espectro: o negro é a ausência de luz e de cor.

Nesta concepção subtrativa, as cores primárias são outras, concretamente o cian, o magenta e o amarelo. A partir destas três cores podemos obter quase todas as demais, salvo o branco e o negro.

Efetivamente, a mescla de pigmentos cian, magenta e amarelo não produz a cor branca, e sim uma cor cinza sujo, neutro. Quanto ao negro, tampouco é possível obtê-lo a partir dos primários, sendo necessário incluí-lo no conjunto de cores básicas subtrativos, obtendo-se o modelo CMYK (Cyan, Magenta, Yellow, Black).

O sistema CMYK, define as cores de forma similar a como funciona uma impressora de injeção de tinta ou uma imprensa comercial de quadricomia. A cor é da superposição ou de colocar juntas gotas de tinta semi-transparentes, das cores cian (um azul brilhante), magenta (uma cor rosa intenso), amarelo e negro, e sua notação se corresponde com o valor em tanto por cento de cada uma destas cores.

Desta forma, uma cor qualquer virá expressa no sistema CMYK mediante a expressão (C,M,Y,K), na que figuram os tantos por cento que a cor possui dos componentes básicos do sistema. Por exemplo, (0,0,0,0) é branco puro (o branco do papel), enquanto que (100,0,100,0) corresponde à cor verde.

As cores subtrativas são usadas em pintura, imprensa e, em geral, em todas aquelas composições nas que as cores se obtém mediante a reflexão da luz solar em mesclas de pigmentos (tintas, óleos, aquarelas, etc.). Nestas composições se obtém a cor branca mediante o uso de pigmentos dessa cor (pintura) ou usando um suporte de cor branca e deixando sem pintar as zonas da composição que devam ser brancas (imprensa).

Os sistemas RGB, CMYK se encontram relacionados, já que as cores primárias de um são os secundários do outro (as cores secundárias são as obtidas por mescla direta das primárias).

Outros modelos de definição da cor é o modelo HSV, que define as cores em função dos valores de três importantes atributos destes, matiz, saturação e brilho.

O matiz (Hue) faz referência à cor como tal, por exemplo, o matiz do sangue é vermelho. A saturação ou intensidade indica a concentração de cor no objeto. A saturação de vermelho de um morango é maior que a do vermelho de uns lábios. Por sua parte, o brilho (Value) denota a quantidade de claridade que tem a cor (tonalidade mais ou menos escura). Quando falamos de brilho fazemos referência ao processo mediante o qual se acrescenta ou se tira o branco a uma cor. Mais adiante estudaremos detalhadamente estes conceitos.

Por último, existem diferentes sistemas comerciais de definição de cores, sendo o mais conhecido deles o sistema Pantone.

Criado em 1963 e buscando um padrão para a comunicação e reprodução de cores nas artes gráficas, seu nome completo é Pantone Matching System, e se baseia na edição de uma série de catálogos sobre diversos substratos (superfícies a imprimir), que subministram uma codificação padronizada mediante um número de referência e uma cor específica.

 

[helldanger1]

Teoria da cor. Tipos de cor



Neste capítulo descreveremos como a partir das cores primárias se podem conseguir outras, e dependendo das tonalidades fazer diferentes classificações.

Por Luciano Moreno


O sistema de definição de cores aditivas RGB, usado em design gráfico digital e em web design, parte de três cores primárias, vermelho, verde e azul, a partir das quais é possível obter todas as demais de espectro.

Assim, por mescla direta das cores primárias obtemos as cores secundárias, cian, magenta e amarelo, e por mescla direta destas as cores terciárias.

Se continuarmos misturando cores vizinhas iremos obtendo novas cores, conseguindo uma representação destas muito importante no design, denominada círculo cromático, representativa da decomposição em cores da luz solar, que nos ajudará a classificar estas e a obter suas combinações ideais.

Partindo do círculo cromático podemos estabelecer diferentes classificações das cores, entre as que destacam:

Cores em cálidos e frios

As cores cálidas dão sensação de atividade, de alegria, de dinamismo, de confiança e amizade. Estas cores são o amarelo, o vermelho, o laranja e a púrpura em menor medida.

As cores frias dão sensação de tranqüilidade, de seriedade, de distanciamento. Cores deste tipo são o azul, o verde, o azul esverdeado, o violeta, cian, aqua, e às vezes o celeste. Uma cor azul aquoso é perfeita para representar superfícies metálicas. Verdes escuros saturados expressam profundidade.

Cores claras ou luminosas e escuras

As cores claras inspiram limpeza, juventude, jovialidade, como ocorre com amarelos, verdes e laranjas, enquanto que as escuras inspiram seriedade, madureza, calma, como é o caso dos tons vermelhos, azuis e negros.

Cores apagadas ou sujas e as cores pastel

Obtidos quando se aumenta ou diminui a luminosidade de todo o círculo cromático. As cores apagadas expressam obscuridade, morte, seriedade, enquanto que as cores pastel sugerem luz, frescor e naturalidade.

Gama de cinzas

São cores neutras, formadas por igual quantidade de vermelho, verde e azul.

As cores cinza têm toda uma expressão RGB hexadecimal do tipo #QQQQQQ, ou seja, os seis caracteres iguais.

O cinza são cores ideais para expressar seriedade, ambigüidade, elegância, embora seja por natureza cores um pouco tristes.

Em geral, as tonalidades da parte alta do espectro (vermelhos, alaranjados, amarelos) costumam ser percebidas como mais enérgicas e extrovertidas, enquanto que as das partes baixas (verdes, azuis, púrpuras) costumam parecer mais tranqüilas e introvertidas. Os verdes e os azuis se percebem acalmados, relaxados e tranqüilizantes. Por sua vez, os vermelhos, laranjas, e amarelos são percebidos como cores cálidas, enquanto que os azuis, verdes e violetas são considerados cores frias. As diferentes tonalidades também produzem diferentes impressões de distância: um objeto azul ou verde parece mais distante que um vermelho, laranja ou marrom.

NOTA: Há que ter em conta sempre que a percepção de uma cor depende em grande medida da área ocupada pela mesma, sendo muito difícil apreciar o efeito de uma cor determinada se esta se localiza em uma zona pequena, sobretudo se estiver rodeada de outras cores.

 

[helldanger1]

Teoria da cor. Propriedades das cores




As cores têm umas propriedades inerentes que lhes permite se distinguir de outras e gravar diferentes definições de tipo de cor.

Por Luciano Moreno


Toda cor possui uma série de propriedades que lhe fazem variar de aspecto e que definem sua aparência final. Entre estas propriedades cabe distinguir:

Matiz (Hue)

É o estado puro da cor, sem o branco ou o preto agregado, e é um atributo associado com a longitude de onda dominante na mistura das ondas luminosas. O Matiz se define como um atributo de cor que nos permite distinguir o vermelho do azul, e se refere ao percorrido que faz um tom para um ou outro lado do círculo cromático, pelo qual o verde amarelado e o verde azulado serão matizes diferentes do verde.

As 3 cores primárias representam as 3 matizes primárias, e mesclando estes podemos obter as demais matizes ou cores. Duas cores são complementares quando estão uma frente à outra no círculo de matizes (círculo cromático).

Saturação ou Intensidade

Também chamada Croma, este conceito representa a pureza ou intensidade de uma cor particular, a vivacidade ou palidez da mesma, e pode se relacionar com a largura de banda da luz que estamos visualizando. As cores puras do espectro estão completamente saturadas. Uma cor intensa é muito viva. Quanto mais se satura uma cor, maior é a impressão de que o objeto está se movendo.

Também pode ser definida pela quantidade de cinza que contém uma cor: quanto mais cinza ou mais neutra for, menos brilhante ou menos "saturada" é. Igualmente, qualquer mudança feita a uma cor pura automaticamente baixa sua saturação.

Por exemplo, dizemos "um vermelho muito saturado" quando nos referimos a um vermelho puro e rico. Porém, quando nos referimos aos tons de uma cor que tem algum valor de cinza, as chamamos de menos saturadas. A saturação da cor se diz que é mais baixa quando se adiciona seu oposto (chamado complemento) no círculo cromático.

Para não saturar uma cor sem que varie seu valor, há que mesclá-la com um cinza de branco e preto de seu mesmo valor. Uma cor intensa como o azul perderá sua saturação à medida que se adiciona branco e se converta em celeste.

Outra forma de não saturar uma cor, é misturá-la com seu complemento, já que produz sua neutralização. Baseando-se nestes conceitos podemos definir uma cor neutra como aquela na qual não se percebe com clareza sua saturação. A intensidade de uma cor está determinada por seu caráter de claro ou apagado.

Esta propriedade é sempre comparativa, já que relacionamos a intensidade em comparação com outras coisas. O importante é aprender a distinguir as relações de intensidade, já que esta muitas vezes muda quando uma cor está rodeada por outra.

Valor ou Brilho (Value)

É um termo que se usa para descrever que tão claro ou escuro parece uma cor, e se refere à quantidade de luz percebida. O brilho se pode definir como a quantidade de "obscuridade" que tem uma cor, ou seja, representa o claro ou escuro que é uma cor com respeito a sua cor padrão.

É uma propriedade importante, já que vai criar sensações espaciais por meio da cor. Assim, porções de uma mesma cor com fortes diferenças de valor (contraste de valor) definem porções diferentes no espaço, enquanto que uma mudança gradual no valor de uma cor (gradação) dará a sensação de contorno, de continuidade de um objeto no espaço.

O valor é o maior grau de claridade ou obscuridade de uma cor. Um azul, por exemplo, mesclado com branco, dá como resultado um azul mais claro, ou seja, de um valor mais alto. Também denominado tom, é diferente à cor, já que se obtém do agregado de branco ou negro a uma cor base.

À medida que se agrega mais preto a uma cor, se intensifica tal obscuridade e se obtém um valor mais baixo. À medida que se agrega mais branco a uma cor se intensifica a claridade da mesma, obtendo-se com isso valores mais altos. Duas cores diferentes (como o vermelho e o azul) podem chegar a ter o mesmo tom, se consideramos o conceito como o mesmo grau de claridade ou obscuridade com relação à mesma quantidade de branco ou preto que contenha segundo cada caso.

A descrição clássica dos valores corresponde a claro (quando contém quantidades de branco), médio (quando contém quantidades de cinza) e escuro (quando contém quantidades de preto). Quanto mais brilhante for a cor, maior será a impressão de que o objeto está mais perto do que em realidade está.

Estas propriedades da cor deram lugar a um sistema especial de representação destes, tal como vimos na seção anterior, sistema HSV. Para expressar uma cor neste sistema se parte das cores puras, e se expressam suas variações nestas três propriedades mediante um tanto por cento

Podemos usar estas propriedades na busca das gamas e contrastes de cores adequadas para nossas páginas, sendo possível criar contrastes no matiz, na saturação e no brilho, e é talvez este último o mais efetivo.

Grupos de cores

Com estes conceitos em mente e tomando como base a roda de cores podemos definir os seguintes grupos de cores, que nos criarão boas combinações em uma página web:

Cores acromáticas: aquelas situadas na zona central do círculo cromático, próximos ao centro deste, que perderam tanta saturação que não se aprecia nelas o matiz origina

Colores cromáticas cinzas: situadas perto do centro do círculo cromático, porém fora da zona de cores acromáticas, nelas se distingue o matiz original, embora muito pouco saturado.

Colores monocromáticas: variações de saturação de uma mesma cor (matiz), obtidas por deslocamento desde uma cor pura até o centro do círculo cromático.

Cores complementares: cores que se encontram simétricas com respeito ao centro da roda. O Matiz varia em 180 º entre um e outro.

Cores complementares próximas: tomando como base uma cor na roda e depois outras dois que eqüidistem do complementar do primeiro.

Duplos complementares: dois pares de cores complementares entre si.

Tríades complementares: três cores eqüidistantes tanto do centro da roda, como entre si, ou seja, formando 120º uma da outra.

Gamas múltiplas: escala de cores entre duas seguindo uma graduação uniforme. Quando as cores extremas estão muito próximas no círculo cromático, a gama originada é conhecida também com o nome de cores análogas.

Mescla brilhante-tênue: escolhe-se uma cor brilhante pura e uma variação tênue de seu complementar.

Todos estes grupos de cores formam paletas harmônicas, aptas para ser usadas em composições gráficas.

 

[helldanger1]

Teoria da cor. Contrastes de cor
O contraste é um fenômeno com o qual se podem diferenciar cores atendendo à luminosidade, à cor de fundo sobre a qual se projetam...

Por Luciano Moreno


Vimos no tema sobre o design equilibrado que o contrate entre elementos era um aspecto importante na hora de criar uma composição gráfica, e que uma das formas mais efetiva de consegui-lo era mediante a cor

Quando duas cores diferentes entram em contraste direto, o contraste intensifica as diferenças entre ambas. O contraste aumenta quanto maior for o grau de diferença e maior for o grau de contacto, chegando a seu máximo contraste quando uma cor está rodeada por outra.

O efeito de contraste é recíproco, já que afeta às duas cores que intervêm. Todas as cores de uma composição sofrem a influência das cores com as que entram em contato.

Existem diferentes tipos de contrastes:

Contraste de luminosidade

Também denominado contraste claro-escuro, se produz ao confrontar uma cor clara ou saturada com branco e uma cor escura ou saturada de preto.

É um dos mais efetivos, sendo muito recomendável para conteúdos textuais, que devem destacar com clareza sobre o fundo.

Contraste de valor

Quando se apresentam dois valores diferentes em contraste simultâneo, o mais claro parecerá mais alto e o mais escuro, mais baixo.

Por exemplo, ao colocar dois retângulos grenás, um sobre fundos esverdeados e o outro sobre fundo laranja, veremos mais claro o situado sobre fundo esverdeado.

A justaposição de cores primárias exalta o valor de cada um.

Contraste de saturação

Origina-se da modulação de um tom puro, saturando-o com branco, negro ou cinza. O contraste pode se dar entre cores puras ou então pela confrontação destes com outros não puros.

As cores puras perdem luminosidade quando se adiciona preto, e variam sua saturação mediante a adição do branco, modificando os atributos de calor e frieza. O verde é a cor que menos muda misturada tanto com o branco como com o preto.

Como exemplo, se situarmos sobre o mesmo fundo três retângulos com diferentes saturações de amarelo, contrastará sempre o mais puro.

Contraste de temperatura

É o contraste produzido ao confrontar uma cor cálida com outra fria.

A calidez ou a frieza de Uma cor é relativa, já que a cor é modificada pelas cores que a rodeiam. Sendo assim, um amarelo pode ser cálido com respeito a um azul e frio com respeito a um vermelho. E também um mesmo amarelo pode ser mais cálido se estiver rodeado de cores frias, e menos cálidas se o rodeiam com vermelho, laranja, etc.

Contraste de complementares

Duas cores complementares são as que oferecem juntas melhores possibilidades de contraste, embora resultem muito violentas visualmente combinar duas cores complementares intensas.

Para conseguir uma harmonia convém que um deles seja a sua cor pura, e a outra esteja modulado com branco ou preto.

Contraste simultâneo

É o fenômeno segundo o qual nosso olho, para uma cor dada, exige simultaneamente a cor complementar, e senão der, ele mesmo a produz.

A cor complementar engendrada no olho do espectador é possível vê-la, porém não existe na realidade. É devido a um processo fisiológico de correção no órgão da vista.

Outros contrastes

Uma cor pura e brilhante aplicado em uma grande extensão da página costuma ser irritante e cansativo (especialmente, o amarelo), enquanto que essa mesma cor, usada em pequenas proporções e sobre um fundo apagado pode cria a sensação de dinamismo.

Duas cores claras brilhantes colocadas uma ao lado de outra impactam nossa vista, produzindo um efeito de rejeição, enquanto que se situamos essas mesmas duas cores uma dentro da outra o efeito muda completamente, resultando agradável.

Uma mesma cor pode mudar muito seu aspecto visual dependendo da cor na qual se encontrar embutida. Este efeito dá mudança de aparência de uma cor dependendo da incidente sobre ela, do material de que está formado ou da diferente cor que lhe sirva de fundo recebe o nome de Metamerismo.

Neste exemplo vemos dois quadrados, um de cor de fundo azul, e outro preto, ambos com um quadrado amarelo dentro. O dois quadrados interiores são do mesmo amarelo, porém parecem diferentes: no fundo azul se mascara a pureza do amarelo, enquanto que no fundo preto o amarelo mostra toda sua pureza e frescor.

 

[helldanger1]

Teoria da cor. Estudo de algumas cores I
Neste capítulo descreveremos as sensações que produzem algumas cores como o vermelho, o verde e o azul, assim como seu possível uso e seu significado em uma web.

Por Luciano Moreno


Sabe-se bem pelos psicólogos a influência emocional que desencadeiam as cores no espírito humano. As respostas emocionais variam enormemente dependendo da cor e da intensidade desta, assim como das diferentes combinações de cores que se podem dar.

Normalmente cada cor individual leva associado um conjunto de emoções e associações de idéias que lhes são "próprias". Há que destacar que estas emoções associadas correspondem à cultura ocidental, já que em outras culturas as cores podem expressar sentimentos totalmente opostos aos acima indicados (por exemplo, no Japão a cor branca simboliza a morte).

As sensações que produzem as cores dependem de fatores culturais e ambientais, e muitas vezes dos próprios prejuízos do usuário. Ademais há que somar a isto que nem todas as pessoas vêem as cores da mesma forma, já que há pessoas que só podem ver bem a gama azul / laranja, outros o vermelho / verde e outras degeneram o branco / preto. Inclusive se percebem as cores de forma diferente com o olho direito que com esquerdo.

Vamos estudar a seguir as propriedades psicológicas das principais cores e suas combinações mais acertadas.

Vermelho

O vermelho é a única cor brilhante de verdade e pura em sua composição. É exultante e agressiva. É o símbolo da paixão ardente e desenfreada, da sexualidade e do erotismo. É uma cor cálida associada com o sol e o calor, de tal maneira que é possível se sentir mais aquecido em um ambiente pintado de vermelho, embora objetivamente a temperatura não tenha variado. Seu nome procede do latim "russus".

O vermelho é a cor do sangue, da paixão, da força bruta e do fogo. Utiliza-se nas festas do Espírito Santo, iluminando a chama do amor divino, e nas festas de Semana Santa e Pentecostes.

Cor fundamental, ligada ao princípio da vida, sugere vitalidade, entusiasmo, paixão, agitação, força, sexo, calor, fogo, sangue, amor, audácia, valor, coragem, cólera, crueldade, intensidade e virilidade, estando associado com sentimentos enérgicos, com a excitação apaixonada ou erótica. É a cor mais sensual de todo o círculo cromático.


mbém sugere alarme, perigo, violência, ira e aborrecimento. Muitos animais e plantas usam o vermelho para indicar sua periculosidade, e o homem o utiliza em todo tipo de indicações de proibição e perigo.

O vermelho é uma cor controvertida, podendo ser atrativa e sedutora como uns lábios de mulher pintados lábios de mulher pintados ou desencadear nojo ou enjôo, como quando se contempla uma poça de sangue.

Em uma composição pode ser usado para chamar a atenção, para incitar uma ação ou para marcar os elementos mais importantes de uma composição ou página web, porém quando é usado em grande quantidade cansa a vista em excesso.


Um problema associado ao uso da cor vermelha é a má gradação que oferece, já que ao modificar suas propriedades vamos obtendo cores rosadas, pouco aptas para seu uso na web.

Uma possível solução a este problema é deslocarmos no círculo cromático para os violetas ou para os laranjas, ou seja, usar o vermelho como centro da gama e completar esta com suas cores análogas.

Outra boa forma é combinar o vermelho cinza e com as cores de sua tríade. Quanto ao seu complementar, o verde, embora contraste muito bem com ele, juntos não criam um efeito visual adequado.

Verde

O verde é a cor mais tranqüila e sedativa de todas. É a cor da calma indiferente: não transmite alegria, tristeza ou paixão. Seu nome deriva do latim "viridis" (que tem seiva).

Está associado a conceitos como Natureza, saúde, dinheiro, frescor, crescimento, abundancia, fertilidade, plantas, bosques, vegetação, primavera, frescor, esmeralda, honra, cortesia, civismo e vigor. O verde que tende ao amarelo cobra força ativa e soleada; se nele predominar o azul será mais sombrio e sofisticado.

Significa a esperança, os bens que hão de vir, o desejo de vida eterna. É a cor própria do ano eclesiástico e de grande número de festas, assim como de certos domingos antes de Pentecostes.

Sua paleta de variações é rica em cores aproveitáveis para o design gráfico e a web.

Dizem que é a cor mais descansada para o olho humano e que tem poder de cura ( será por isso que o uniforme dos cirurgiões são verdes?).





É uma cor contraditória, pois a muitas pessoas lhes influi um caráter desagradável, enquanto qu a outras lhes sugere mais paixão que o vermelho.





Nas composições gráficas e páginas web dá um bom jogo. Seus degrades são bons e suas variações de tons também, formando gamas apropriadas para desenho.

Seu complementar é o vermelho e, embora contrastem muito bem, não costumam fazer boa combinação. Com seus análogos e sua tríade é possível obter paletas aceitáveis para uma página web.

Azul

A cor azul é o símbolo da profundidade. Imaterial e fria, suscita uma predisposição favorável. A sensação de placidez que provoca o azul é distinta da calma ou repouso terrestres, próprios do verde.

É uma cor reservada e entra dentro das cores frias. Expressa harmonia, amizade, fidelidade, serenidade, sossego, verdade, dignidade, confiança, masculinidade, sensualidade e comodidade. Seu nome é de origem incerta, porém parece que procede do sânscrito "rajavarta" (cacheado do rei).

Esta cor se associa com o céu, o mar e o ar. O azul claro pode sugerir otimismo. Quanto mais se clarifica mais perde atração e se torna indiferente e vazio. Quanto mais se escurece mais atrai para o infinito. Possui também a virtude de criar a ilusão óptica de retroceder.

É a cor do céu sem nuvens, sem ameaças, onde voam as aves com liberdade, da água cristalina, fonte de vida para animais e plantas, da Terra, nosso belo planeta azul.





Está associado a conceitos como seriedade, compromisso, lealdade, justiça e fidelidade, porém também pode expressar melancolia, tristeza, passividade e depressão.

Se for muito pálido pode inspirar frescor e incluso frio. Se for intermediário, dá a sensação de elegância, de frescor. Se for escuro dá a sensação de espiritualidade, de seriedade, de responsabilidade.

O azul é uma cor que oferece muitas possibilidades nas composições gráficas em geral e nas páginas web em concreto. É utilizado amplamente como cor corporativa, pela seriedade e confiança que inspira, e admite bons degrades, podendo ser a cor dominante em uma página.

Combina muito bem com seu complementar, o laranja, e com as variações deste, sendo típicos os fundos azuis com textos laranjas, sobretudo em dintéis com logotipo.





Também oferece uma boa gama de análogos e faz bons jogos com as cores de sua tríade.

É uma cor que influencia sobre o apetite, diminuindo este, certamente porque não há nenhum alimento azul na natureza, por isso não é aconselhável seu uso para uma página sobre receitas de cozinha ou produtos alimentícios.

 

[helldanger1]

Teoria da cor. Estudo de algumas cores II



Acabamos a sessão da teoria da cor com o estudo de mais cores, as sensações que produzem e sua conveniência de uso nos web sites.

Por Luciano Moreno


Continuamos com o estudo de diferentes cores.

Amarelo

A cor amarela é o símbolo da deidade em muitas culturas, e é a cor mais luminosa, mais cálida, ardente e expansiva.

É uma cor otimista, moderna, e denota alegria, entusiasmo, paixão, força, sexo, calor, primavera, inocência, infância, juventude. Também se usa para expressar perigo e precaução. Seu nome procede do latim "amàrus" (amargo). É a cor do sol, da luz e do ouro, e como tal é violento, intenso e agudo.

Se for muito brilhante pode indicar perigo, e se for muito suave pode sugerir delicadeza. Um ambiente amarelo médio ou pálido faz as pessoas se sentirem cômoda, quente.





Associa-se sempre o amarelo à intelectualidade e ao pensamento claro e há psicólogos que dizem que esta cor ajuda as pessoas a memorizarem dados.





O amarelo chama muito a atenção em um ambiente ou composição, utilizando-se muitas vezes em elementos que convém tornar invisíveis. Porém, há que ter em conta que é a cor que mais cansa à vista humana, podendo chegar a ser esmagadora, porque causa uma estimulação visual excessiva, podendo originar sensação de irritabilidade nas pessoas.





Com o amarelo se obtém melhores degrades do que com o vermelho, porém conforme vai se tirando saturação vai se tornando pouco perceptível sobre fundos claros.

Entretanto, é uma cor que combina bem com suas similares (verdes e alaranjados), podendo se obter com elas boas paletas para uma composição.





Com suas cores análogas combina muito bem, assim como com seu complementar, o roxo, porém com as de sua tríade cria às vezes um efeito visual pesado demais, devendo ser estudado com cuidado seu uso conjunto.

Como regra geral, seu uso em uma página web deve ficar limitado a elementos pontuais (fazendo parte de um logotipo ou ícone, em textos curtos sobre fundo escuro, etc), procurando sempre que ocupe uma zona limitada.

Laranja

A cor laranja tem um caráter acolhedor, cálido, estimulante e uma qualidade dinâmica muito positiva e energética. Possui uma força ativa, radiante e expansiva. Seu nome deriva do árabe "narandj".

Representa a alegria, a juventude, o calor, o verão. É a cor da carne e a cor amistosa do fogo do lar. É vibrante como a luz do sol, exótica como as frutas tropicais, suculenta como a laranja, sugere informalidade no trato e amizade. Porém, também pode expressar instabilidade, dissimulação e hipocrisia.

A paleta de variações do laranja é a mesma que a da cor marrom, já que ambas cores são de natureza similares.





É uma cor que destaca muito sobre o ambiente que lhe rodeia, por isso se pode usar para dar um maior peso visual a certos elementos de uma composição, embora há que ser comedido em seu uso, já que se for brilhante enche muito a vista do espectador.





Admite bons degrades e combina muito bem com sua cor complementar, dando bons contrastes, sobretudo quando um é claro e o outro escuro.

Pelo contrário, com as cores de sua tríade cria combinações que podem resultar coloridas demais, por isso, ao usá-las se deverão utilizar com sumo cuidado, deixando-as para elementos de pequenas dimensões.

Rosa

A cor rosa, uma espécie de púrpura pálida, sugere calma e tranqüilidade. Associado ao sexo feminino em nossa cultura, pode chegar a ser interpretado como debilidade em certos ambientes. Seu nome vem do latim "rosa", e sua paleta de variações que a mesma do púrpura, ao ser ambos cores similares em sua natureza.





É uma cor de uso complicado. Têm maus degrades e capta muito a atenção do espectador, sobretudo se for brilhante ou muito saturada, por isso fica indicado na web para zonas de pequena superfície ou elementos pontuais. Se for apagado ou pouco saturado, pode-se usar como fundo de página, sobretudo em páginas destinadas ao público feminino.





Púrpura

A púrpura se define cor como um vermelho que puxa a um violeta. É de natureza similar ao rosa, e ambas cores têm associada a mesma paleta de variações.

Seu nome vem de um molusco marinho que segrega uma tinta que ao contato com ar adquire uma cor vermelha mais ou menos escura, vermelho violeta, com a qual se preparava uma tinta custosa, com a qual se dava cor às próprias vestimentas de sumos sacerdotes, cônsules, reis, imperadores, etc. Por este motivo, na antiguidade era considerado o mais belo, o mais estável e a mais preciosa das cores.





É uma cor bastante contraditória. Sugere abundância, sofisticação, inteligência, espiritualidade, religiosidade, dignidade, tranqüilidade, mistério, aristocracia e paixão. Porém, também pode evocar frivolidade, artificialidade, luto, morte, náusea, orgulho e ostentação.





É uma cor que combina bem, permitindo gamas variadas, e contrasta fortemente com seu complementar, o amarelo.

Violeta

O violeta é um roxo claro, parecido ao da flor de mesmo nome, obtido misturando o vermelho e azul. Seu nome deriva do latim "viola".
É a cor da calmaria, da lucidez e da reflexão. É místico, melancólico e pode representar também a introversão. É a cor da penitência, e se emprega pelo Advento, em Quaresma, nas Vigílias, etc.

Quando o violeta deriva o lilás ou roxo, se simplifica e perde seu potencial de concentração positiva. Quando tende à púrpura projeta uma sensação de majestade.

Apresenta uma paleta de variações completa, porém não muito útil no webdesign, sobretudo em caso de zonas de tamanho médio e grande, já que é uma cor estranha.





Representa a fantasia, o jogo, a impulsividade e os estados de sonho, embora também pode sugerir pesadelos ou loucura.

Marrom

A cor marrom como tal é uma mescla na que predominam o vermelho e o verde, podendo se obter por desaturação do laranja ou por mescla dessa cor com o preto, que em diferentes tratados sobre a cor aparecem associadas ambas cores, sendo sua paleta de variações a mesma.





É uma cor masculina, severa, confortável, que evoca o ambiente outonal e dá a impressão de gravidade e equilíbrio. É a cor realista, talvez porque seja a cor da terra que pisamos. Seu nome procede do francês "marrón" (castanha comestível dessa cor), e sugere idade, coisas velhas, madeira, tijolo, pele, couro, lar.





Nas páginas web dá bons resultados, já que é uma cor suave, agradável à vista, cômoda, que gera uma gama extensa de cores aproveitáveis.

Preto, cinza e branco

A cor preta vem definida pela ausência de luz e cor, sendo seu código hexadecimal representativo #000000, embora quase todas as cores ao tirar brilho, tom ou saturação vão se aproximando ao preto. As superfícies de cor preta são aquelas que absorvem todas as longitudes de onda da luz solar, pelo qual não refletem nenhuma radiação visível. Seu nome procede do latim "níger".

O preto confere nobreza e elegância, sobretudo quando é brilhante, e é a cor da elegância, da sedução, do mistério, do silêncio, da noite, do corvo, do mal, do clandestino ou ilegal e, da tristeza e da melancolia, da infelicidade e desventura, do aborrecimento e da irritabilidade. Em nossa cultura é também a cor da morte e do luto, e se reserva para as missas de defuntos e a Sexta-Feira Santa.

É uma cor quase imprescindível em toda composição, podendo ser usada como cor do ambiente de certos elementos, em elementos separadores de espaços ou como cor de fundos, em cujo caso nos conteúdos da página deverão predominar as cores claras para que se possam visualizar corretamente.





É também a cor mais usada para os textos, devido ao alto contraste que oferece sobre fundos brancos ou claros.





O preto não possui degrades, ao ser uma cor pura (ou uma não-cor), e enquanto modificamos sua saturação obtemos cinzas, cores neutras, formadas por quantidades iguais de vermelho, verde e azul. Na pintura se obtém normalmente misturando o branco e o preto.

O cinza é uma cor neutra e passiva, que traz pouca ou nenhuma informação visual. É a cor do céu coberto, do ferro e do mercúrio, e sugere seriedade, maturidade, neutralidade, equilíbrio, indecisão, ausência de energia, dúvida e melancolia, e se usa para expressar as coisas ou pessoas carentes de atrativo ou singularidade. Seu nome parece derivar do provençal "gris".

É uma cor que pode resultar monótona se se usa em demasia em uma composição, e está muito associada às aplicações informáticas, talvez porque a maioria das interfaces gráficas é de cor cinza ou o contém.





Os cinzas meio-claros (ao redor do #CCCCCC) têm pouca atração visual, sendo ideais para fundos ou elementos de preenchimento que não trazem informação ao espectador.

Se vamos aumentando progressivamente a luminosidade do cinza chega um momento em que obtemos a cor branca, de código #FFFFFF, a luz pura, a união de 100% das três cores primários aditivas, vermelho, verde e azul.

O branco representa a pureza, a inocência, a limpeza, a leveza, a juventude, a suavidade, a paz, a felicidade, o triunfo, a glória e a imortalidade.. É a cor da neve, das nuvens limpas, do leite fresco. Emprega-se nas festas do Senhor, da Virgem, dos Santos e nas cerimônias nupciais.

É uma cor latente, capaz de potenciar as outras cores vizinhas, criando uma impressão luminosa de vazio positivo e de infinito. O branco é o fundo universal da comunicação gráfica.

Na imprensa não se costuma manejar cor, e sim que se aproveita para representá-lo a cor branca do suporte sobre o qual se imprime. Na web, a cor branca se produz no monitor enfocando nos pontos de tela os três canhões de cor à máxima intensidade.
É uma cor fundamental no design, já que, além de se usar como cor para os elementos gráficos e textuais, também define normalmente os espaços vazios da composição ou página web.





Estes espaços em branco são elementos de design tão importantes como os de cor, e se podem observar com facilidade afastando-se da tela do computador e entornando os olhos, com o que distinguiremos melhor as diferentes zonas visuais da página.





Não costuma ser conveniente para os textos, salvo que estejam situados sobre um fundo muito escuro sobre o que contrastem bem. Não esquecemos que os conteúdos textuais devem aparecer sempre perfeitamente legíveis em uma página.

NOTA: O significado da cor pode mudar nos diferentes países, culturas e religiões.

Por exemplo, na China o vermelho se associa com os casamentos e representa boa sorte e na Índia esta cor está unida ao cavalheirismo. Tradicionalmente se relaciona com os ciúmes, a inveja, a adolescência, o riso e o prazer, e inclusive em alguns casos se denomina como a cor da má sorte.

Por este motivo, na hora de usar as cores como fonte de impulsos psicológicos deveremos estudar detalhadamente o público objetivo ao que irá destinada a composição gráfica ou página web.

 

[helldanger1]

A cor na web. Cores disponíveis para a web



Descobriremos o número de cores que poderemos usar em uma web, e se são estes mesmos se a web se executa em um computador ou em outro.

Por Luciano Moreno


O olho humano pode distinguir aproximadamente entre 7 e 10 milhões de cores, o que faz com que a vista seja para nós o principal sentido que nos une com o exterior, podendo-se afirmar que ao redor de 80% da informação que recebemos do mundo exterior seja visual.





Pintores e designers gráficos utilizam esta capacidade humana de apreciar cores para criar obras que aprofundem na alma e que inspirem sentimentos nos seres que as contemplam. Porém, o que podemos fazer quando devemos nos expressar com um número limitado de cores?

Há poucos anos, a maioria dos computadores dos que dispunha o público em geral eram, com a visão que temos hoje em dia, umas máquinas grandes, lentas e com poucos serviços, não só ao nível de memórias e processadores, como também ao nível de serviços gráficos. E os periféricos eram ainda assim muito limitados. Tudo isso originava que a nível gráfico estas máquinas trabalhavam somente com 256 cores.

Atualmente, as máquinas informáticas aumentam dia a dia seus serviços, e o normal agora é trabalhar com milhões de cores e com monitores de altas precisões. A maioria das pessoas já dispõe de avançados cartões gráficos, com memórias de até 64 megas, que desenvolvem um trabalho de milhões de texels ( elemento de textura, é aos gráficos 3D o que o pixel é aos gráficos bidimensionais).

Porém, na hora da verdade, de quantas cores dispomos para trabalhar os web designers?

A resposta a esta pergunta é um pouco deprimente, já que nós dependemos na hora de mostrar nossas páginas de uns programas específicos, os navegadores ou browsers, que são os encarregados de apresentar em tela o conteúdo das páginas que lhe chegam desde o servidor mediante o protocolo HTTP.

Estes programas, além da grande diferença na hora de trabalhar que há entre eles, interagem com o sistema operacional no que correm, o que origina al final um galimatias que faz com que as cores de nossas páginas variem segundo o computador usado, segundo o navegador e segundo o sistema operacional no qual este está montado. Por tudo isto, os milhões de cores das que se dispõe para trabalhar ficam reduzidas a somente umas poucas (e muito poucas) na hora de criar páginas web.

O sistema operacional identifica três cores básicas, a partir das quais constrói todas as demais mediante um processo de mescla por unidades de tela (pixels). Estas cores, como vimos, são o vermelho, o azul e o verde, e o sistema por elas definido se conhece como RGB. Os bits de profundidade de cor marcam quantos bits de informação dispomos para definir as cores derivadas destas cores primárias.

Quanto mais bits, maior o número de variações de uma cor primária podemos ter. Para 256 cores precisa-se 8 bits, para obter milhares de cores necessitamos 16 bits (cor de alta densidade) e para obter milhões de cores são necessários 24 bits (cor verdadeira). Existe também outra profundidade de cor, 32 bits, porém com ela não se conseguem mais cores, e sim que as que usemos se mostrem mais rapidamente.

À princípio, a maioria dos usuários dispunha de monitores capazes de interpretar somente 256 cores (8 bits). Se levarmos em conta que o próprio sistema operacional fica com 40 para seu gerenciamento interno, o resultado é que restam 216 cores para apresentar gráficos em tela, cores que por outro lado não estavam definidas de forma padrão.

Em 1994 a empresa Netscape estabeleceu uma subdivisão do círculo cromático em 216 cores eqüidistantes entre si, obtendo um conjunto de cores que denominaram Netscape Color Cube.

Esta divisão do círculo se corresponde com 6 tons de vermelho, 6 de azul e 6 de verde, a partir dos quais se obtém, por mescla entre eles, as 216 cores possíveis, pelas quais todas elas terão um código hexadecimal na qual cada cor primária vem definida por uma dupla de valores iguais, devendo estes ser 00,33,66,99,CC ou FF.

Se usarmos uma profundidade de 24 bits, correspondente a milhões de cores, disporemos de uma ampla gama para trabalhar. Quando usamos uma profundidade de cor de 16 bits dispomos de milhares de cores, porém surge então o problema adicional de que a divisão desta gama de cores não se corresponde com a de 256 cores nem com a de milhões de cores, dando o mesmo código cores levemente diferentes. Por exemplo, #663399 é a mesma cor a 256 e a milhões, porém não é igual queo obtido com milhares de cores.

Com o tempo, adotou-se uma lista de cores às que se colocou um nome representativo em inglês, de tal forma que os modernos navegadores interpretam o mesmo e o traduzem internamente por seu valor hexadecimal equivalente.

 

[helldanger1]

A cor na web. Paletas de cor seguras.



Websafe e Reallysafe
As paletas de cores dão limitações na hora de apresentar as cores que contém a web. Neste capítulo veremos quais são estas limitações.

Por Luciano Moreno


A maioria das cores obtidas com 16 bits de profundidade são diferentes às obtidas com 8 e 24 bits. Ademais, se se usam 8 bits (256 cores), o monitor será incapaz de apresentar muitas das cores obtidas se a página tiver sido desenhada com milhares de cores.

Fica patente então, a necessidade de trabalhar com uma gama de cores compatíveis com todas as profundidades. Porém, quantas são estas cores?

Aqui vem a decepção do webdesigner, já que este número é na verdade muito baixo. Tradicionalmente se considerou como paleta de cores segura a que mencionamos antes, formada pelas 216 cores do tipo #aabbcc, onde a, b e c devem ser 0,3,6,9,C ou F, que recebe o nome de WebSafe.

Na verdade, esta paleta não é segura, devido ao problema com a profundidade de milhares de cores. Se acrescentarmos a isto a variável adicional de que cada sistema operacional e cada navegador interpretam as cores a sua vontade, o resultado final é que só dispomos de uma pequena paleta, formada por 22 cores. Esta paleta se conhece com o nome de ReallySafe.

Na seguinte imagem, vocês têm a paleta WebSafe. Dentro dela, destacados em cor vermelha, se encontram as cores da paleta ReallySafe.

Como compreenderão, trabalhar com somente as 22 cores da paleta ReallySafe não nos permite construir um web site muito atrativo, já que a limitação imposta resulta excessiva.

Como alternativa podemos trabalhar dirigindo-nos ao maior número de usuários possíveis, e para isso podemos desenhar nossas páginas usando bem a paleta de 216 cores, com o qual teremos coberto a categoria de usuários com sistemas de cor de 8 bits e de 24 bits.
Esta paleta WebSafe segundo o sistema operacional usado.

E também segundo o navegador web.

Estas limitações de cores podem parecer uma trava ao design de páginas web, porém não devemos dar mais importância que a devida. Em primeiro lugar, 216 cores bem utilizadas dão muito que fazer. E em segundo lugar, podemos desenhar nossas páginas com toda a gama de 24 bits (milhões de cores) já que atualmente a maioria de usuários maneja computadores de altos serviços.

Neste ponto, o sentido comum, a experiência e a testa da página em diferentes sistemas e navegadores são as melhores armas para conseguir o design buscado.

 

[helldanger1]

A cor na web. O problema das imagens



As cores das imagens podem sofrer mudanças se tiverem que estar encapsuladas em estruturas tais como tabelas, camadas, etc. Isto pode ter uma solução aproximada, porém não ótima. Veremos os problemas que se podem apresentar.

Por Luciano Moreno


Um problema adicional relacionado com as cores se produz quando desejamos inserir em nossa página uma imagem dentro da célula de uma tabela, de uma camada, etc., especialmente se se trata de uma imagem em formato GIF, já que estes tipos de gráfico têm limitados sua gama de cores a 256.

O fato é que frequentemente nos deparamos com que a cor de fundo da imagem não nos coincidirá com a cor de fundo da célula ou camada, embora o código hexadecimal empregado em ambos seja o mesmo.





Isto é devido a que às vezes o formato GIF não é capaz de interpretar devidamente cores que estão fora da paleta segura, em cujo caso pode optar por aproximá-lo à cor mais parecida de sua paleta ou tentar simular a cor pedida misturando duas cores das que dispõe, procedimento que se conhece pelo nome de dithering.

O problema se acentuará mais ainda se o usuário dispõe de um sistema de 256 cores, já que então o sistema não será capaz de interpretar corretamente nem a cor do fundo do GIF nem a cor de fundo da tabela ou container, com o qual o contraste entre imagem e célula ou camadas se acentua.

Para solucionar este problema podemos fazer três coisas:
Usar cores e fundo pertencentes à paleta WebSafe.
Usar imagens GIF de fundo transparente.
Situar as imagens fora de células de tabela ou camadas que devam ter cor de fundo.
Nenhuma destas soluções é excelente, mas são as únicas que dispomos.

Se optarmos por usar uma imagem de fundo transparente, deveremos pensar que se esta vai funcionar como um link e configurarmos um estilo para o estado hover destes elementos, a cor de fundo da imagem mudará quando o ponteiro do mouse se situar sobre ela.

Se estivermos desenhando para milhares de cores podemos salvar a imagem em formato PNG, que teoricamente suporta milhares de cores e transparências, embora haja ocasiões em que a interpretação da cor de fundo da imagem não é correta neste formato.

Portanto, a melhor solução ao problema das imagens é utilizar sempre para os fundos cores da paleta WebSafe, já que desta forma teremos garantida a compatibilidade entre fundos a 256 cores e a milhares de cores.

 

[helldanger1]

A cor na web. Escolha da paleta para um web site



É necessário escolher cores de acordo com o logotipo da página. Neste capítulo veremos relações possíveis para conseguir a funcionalidade esperada.

Por Luciano Moreno

Na hora construir uma página o primeiro que temos que ter claro é a gama de cores que vamos empregar em suas diferentes partes, e para isso devemos começar sempre com selecionar uma cor ou cores base, que será o que dará um espírito próprio ao nosso site.

É importante a escolha desta gama, que, por regra geral, será conveniente manter em todas as páginas do site, conseguindo com isso estabelecer uma identidade própria e uma continuidade entre todas as páginas que a formam.

Se tivermos escolhido ou imposto um logotipo, suas cores serão as que marquem como guia o resto da página, trabalhando nas diferentes partes da página com os degrades claros e escuros destas cores base.

Por ser necessária a introdução de outras cores (uma ou duas), teremos que escolher estas de forma que sejam equilibradas com as do logotipo e trabalhem juntas em boa harmonia.

É conveniente que nos baseemos em uma das gamas de cores estudadas no capítulo anterior (monocromáticas, análogos, tríades, etc.), sobretudo se não tivermos grande experiência no desenho com cores, e que apliquemos os conceitos já estudados (hierarquia visual, escala, contrastes, etc.).

Como exemplos, podemos considerar as seguintes paletas genéricas:

Ademais, podemos seguir uma série de regras generais que nos orientarão:

- As cores primárias, puras, brilhantes, são comuns demais, dando assim pouca informação ao olho. Por isto, não convém se basear nunca nelas para construir nossas páginas.

- A cor dos links convém que seja o azul padrão do navegador ou pelo menos permanecer sublinhados e com uma cor bem diferenciada das do resto de elementos textuais da página.





- Páginas destinadas a um público geral devem estar baseadas em combinações branco-preto- cor logotipo, em cores mais neutras, que a maioria possa gostar, como cores secundárias ou terciárias em tons pastel, ou em uma bem estudada gama de cinzas. É fundamental nestas páginas dar às páginas a identidade corporativa da empresa ou organização que representam.





- Páginas orientadas a um público jovem podem adotar cores vivas, primários, com altos contrastes entre fundo e conteúdo, ou então com fundos escuros e textos claros, com a inclusão de pequenas animações em Flash de tons vistosos.





- Páginas destinadas a um público adulto devem estar desenhadas com cores sérios, elegantes, frios, sem altos contrastes de tom, em cores neutras, inclusive puxando a cinza. Sempre podemos recorrer neste caso ao típico padrão de fundo branco e letras pretas ou cinza escuro.





- Páginas de empresa ou de instituições devem estar desenhadas de acordo com as cores corporativas da mesma, incluindo sempre o logotipo.





- Páginas de divulgação, como manuais e artigos, devem apresentar o texto de forma que destaque adequadamente sobre o fundo, sem usar cores escandalosas que cansem a vista, já que o objetivo fundamental destas páginas é ser lida. Conselho: fundo claro e letras escuras, que destaquem muito bem.





- Páginas exóticas e ao mesmo tempo elegantes podem ser obtidas com fundo preto ou cor muito escura e letras e/ou motivos dourados, brancos ou púrpura e vermelho.





- Páginas destinadas a ser impressas pelo usuário final não devem empregar core escuras como fundo, já que obrigaria a dar cores claras aos textos para que se pudesse visualizar. Se se faz assim e o usuário não tiver ativada a opção de imprimir as cores de fundo, não verá nada na página impressa, e se a tiver ativada, gastará muita tinta, obtendo de qualquer forma um mal resultado. Conselho: fundos brancos ou muito claros, com textos escuros, ou versão especial para impressão com estas cores.





Estas considerações gerais podem nos ajudar a manejar corretamente as cores em nossas páginas web. Porém, como sempre, a prática é o que manda, e afortunadamente podemos navegar pela Internet, visualizando páginas do tipo concreto que queremos desenhar para aprender e ver como diversos autores resolveram o desenho.

 

[helldanger1]

A cor na web. Ferramentas básicas para trabalhar com cores



Existe uma grande variedade de ferramentas que nos permitem manipular as características das cores para conseguir as que necessitemos. Abordamos uma ampla lista de programas neste capítulo.

Por Luciano Moreno


Existe no mercado uma infinidade de aplicações gráficas, tanto para trabalhar com gráficos vetoriais e animações como para retoque de imagens, algumas das quais estudaremos de forma geral ao final deste curso de Desenho Gráfico para a Web.

Porém, há também outras que, apesar de seu pouco preço e tamanho (algumas são gratuitas e ocupam muito poucos Kb), são muito úteis para o trabalho diário com cores em um computador, e imprescindíveis para um web designer.

Entre elas destacam por suas funcionalidades EyeDropper e 1 st QuickRes, das quais vamos falar um pouco.

EyeDropper

EyeDropper é basicamente um capturador de cores tela, capaz de obter o código de um ponto dado em diferentes modelos de cor. Ademais, permite também capturar uma zona de tela, copiando-a na área de transferência, com o qual fica disponível para seu uso em outras aplicações gráficas.

É propriedade da empresa Inetia, e pode-se fazer o download em inetia.com: Izdelava spletnih strani, gostovanje, registracija domen

É de fácil download e instalação, e atrás a mesma aparecerá um pequeno ícone do programa na barra de tarefas, junto ao relógio do sistema.





Para lançar a aplicação basta dar dois cliques sobre este ícone, com o qual aparecerá uma janela própria junto ao ponteiro do mouse, que acompanha a este em seu movimento pela tela. Esta janela se fecha dando novamente dois cliques sobre o ícone.

Em tal janela aparecerá aumentada a zona situada ao redor do ponteiro, assim como uma cruz que indica o ponto exato sobre o que se encontra, mostrando a cor do mesmo. Na parte direita aparecem os códigos da cor, tanto em formato RGB hexadecimal e decimal como em formato CMYK, e as coordenadas do ponto com respeito à esquina superior esquerda da tela ativa do monitor.

Se clicarmos com o botão direito do mouse sobre o ícone de EyeDropper aparecerá um menu emergente com a opção "Properties", que nos levará a uma janela de configuração com uma série de pestanas, entre as quais destacam as seguintes:

- Preferences: Define as propriedades gerais da aplicação.

Nesta janela, podemos observar em que modelo de cor desejamos que apareçam os códigos, se devem aparecer as coordenadas do ponto e se a aplicação deve se iniciar quando arrancarmos o sistema operacional (aconselhável).

- Clipboard: Configura o método de captura do código da cor na área de transferência.

A opção mais aconselhável para o web designer é definir a captura no modelo RGB hexadecimal, usando para isso as combinações padrão do sistema, que no caso do Windows são as teclas CTRL+C para copiar o código na área de transferência e CTRL+V para colá-lo em outras aplicações.

- Screen Capture: Estabelece a tecla que ativa a captura de uma zona da tela como uma imagem, assim como o método de finalização da mesma.

Como tecla de ativação é conveniente escolher alguma que não se use normalmente, como uma das teclas superiores F. Quanto ao método de finalização, o normal é estabelecer o evento up do botão esquerdo do mouse, habitual nos programas de captura.

Se definirmos como tecla de captura F2, por exemplo, para iniciar a capturar clicaremos tal tecla, logo, o botão esquerdo do mouse e, sem soltá-lo, definimos um retângulo em tela, que será a zona capturada. Para finalizar, soltamos o botão do mouse, ficando a imagem capturada na área de transferência, pronta para ser colada em qualquer outra aplicação, gráfica ou não (podemos colá-la em qualquer aplicação de Office, como Word ou Power Point).

- Convert Colors: Define o tipo de paleta em que queremos capturar a cor.

Seus possíveis valores são Normal (aconselhado), que utiliza a profundidade de cor ativa em nosso computador, Grayscale, que captura a cor em paleta de cinzas, e WebSafe, que o aproxima à cor mais próxima na paleta web segura de 256 cores.

Como se pode ver, EyeDropper é um programa muito útil, imprescindível para o designer, que com um pouco de prática facilita espetacularmente o trabalho com cores.

1 st QuickRes

Em seu trabalho diário, o web designer deve verificar como se visualizam as páginas que está criando as diferentes resoluções e profundidades de cor. Os sistemas operacionais oferecem um painel de configuração próprio para estas tarefas, porém acessar constantemente ao mesmo nos faz perder muito tempo.

Propriedade da empresa GreenParrots, 1 st QuickRes é uma pequena aplicação que nos ajuda a manejar as propriedade de nosso monitor de forma rápida e cômoda. Pode-se fazer o download através do endereço: Green Parrots Software - valuable software products for business and fun, utilities and tools, for PC and PalmPilot!

Uma vez instalada, a aplicação se lança desde um ícone situado na barra de tarefas, junto ao relógio do sistema, clicando sobre o mesmo com o botão direito do mouse.





Ao fazê-lo, aparece a janela da aplicação mostrando diferentes combinações resolução-profundidade de cor. Basta então clicar sobre uma delas para que a configuração de nosso monitor mude.

A aplicação também permite mudar o fundo de tela, o protetor de tela, a aparência visual do sistema operacional e a taxa de atualização (refresh) do monitor.

Outra das opções presentes na janela da aplicação é "Options", que vai nos permitir definir atalhos de teclado para lançar a janela ou para mudar rapidamente a resolução de tela. Convém que escolhamos para isto algumas das teclas que não se utilizam normalmente, como as do grupo F presentes na parte superior do teclado.

Um presentinho em Flash

Para finalizar, a empresa Mundidesign nos oferece uma pequena animação Flash que nos facilita a composição com cores, ao nos permitir visualizar o efeito de diferentes combinações de cor

Na esquina inferior direita você têm três opções de trabalho: combinação de três cores em vertical, combinação de três cores justapostas e combinação de cores em uma interfase web. Para definir as cores das diferentes partes, basta arrastá-las desde a paleta esquerda até a zona escolhida.