Você está na página 1de 163

Curso prtico

de
Web Design
Um manual que trata o design orientado web, com uma
interessante introduo ao design em geral e o desenvolvimento
do design na web em particular.
http://www.criarweb.com/webdesign/
2 de 163
Captulos do manual
.! "ntroduo ao design gr#ico
A histria do design grfico, desde as origens da humanidade at o aparecimento da web e da Internet.
$.! Design gr#ico
Uma aproximao ao design grfico em geral, com uma descrio dos elementos que compem habitualmente
um desenho e as caractersticas principais que podemos encontrar neles.
%.! Design gr#ico na web
O design web vai mais alm do design tradicional, pois existem muitos limitadores relacionados com o meio
onde se apresentam as pginas: Internet. Conheceremos as caractersticas fundamentais do design na web.
&.! Componentes gr#icos de um computador
Descrio dos principais componentes grficos de um computador: O carto grfico e o monitor.
'.! (esoluo de tela
Consideraes relativas aos distintos tipos de tela que os visitantes possam ter e o espao disponvel para cada
caso.
).! Cores em um computador
Como trabalham os computadores para codificar uma cor. O formato RGB.
*.! Calibragem do monitor
Uma composio grfica pode ser vista com diferentes tonalidades dependendo da configurao do monitor.
Temos que calibrar o monitor para que o aspecto de nossa obra seja o mesmo em todos os computadores.
+.! ,ormas bsicas em design gr#ico
A linguagem visual atravs de grafismos pode se descompor em entidades bsicas, onde cada uma delas tem
por si mesma um significado prprio, porm unidas de diferentes formas podem constituir elementos
comunicativos distintos.
-.! . ponto
O ponto a unidade mnima de informao visual, e est caracterizado por sua forma, tamanho, cor e
localizao.
/.! 0 lin1a
A linha o elemento bsico de todo grafismo e um dos mais usados. Representa a forma de expresso mais
simples e pura, porm tambm a mais dinmica e variada.
.! . contorno
O contorno o objeto grfico criado quando o trao de uma linha se une em um mesmo ponto.
$.! . quadrado
Elementos de desenho: o quadrado.
%.! 0 circun#er2ncia
Elementos de design: a circunferncia.
&.! Contornos mistos
Elementos de design: contornos mistos, que so os que esto compostos por vrios tipos de contornos.
'.! Contornos org3nicos
Elementos de design: contornos orgnicos, que esto formados por curvas livres.
).! . design equilibrado. "ntroduo
Estudo das regras bsicas do design grfico. No existe uma frmula que d um design infalvel, porm sim
umas existem umas regras bsicas.
*.! . design equilibrado. 0s propor4es
3 de 163
Devemos ter em conta a definio a utilizar, os elementos grficos e as propores...
+.! . design equilibrado. 0 escala
Entende-se por escala a relao entre as propores dos elementos visuais de uma composio.
-.! . design equilibrado. . contraste
O contraste permite ressaltar o peso visual, podemos consegui-lo atravs de diversos meios: tons, cores,
contornos e escala.
$/.! . design equilibrado. .s agrupamentos
Como os elementos web devem se agrupar para obter um resultado coerente.
$.! . design equilibrado. . reticulado
Como harmonizar os blocos de contedo que formaro a composio do desenho.
$$.! . design equilibrado. .s alin1amentos
Necessrios para conseguir uma composio ordenada e lgica, assim como para relacionar elementos.
$%.! . design equilibrado. 0s simetrias
Outro condicionante para que o design da web tenha uma organizao natural.
$&.! . design equilibrado. . equilbrio entre conte5dos
A organizao espacial, primordial para atrair ao usurio.
$'.! . design equilibrado. 0 1ierarquia visual
A organizao guia ao usurio na contemplao de uma pgina web.
$).! 6eoria da cor. "ntroduo
uma parte fundamental da web, produtor de sensaes.
$*.! 6eoria da cor. 7ature8a da cor
Descrio formal da cor como um fenmeno fsico.
$+.! 6eoria da cor. 0 percepo da cor
Como o olho pode detectar e classificar as cores que chegam.
$-.! 6eoria da cor. 9odelos de cor
Descrio dos tipos de cor conhecidos, assim como se aborda uma explicao de como os objetos adquirem as
cores.
%/.! 6eoria da cor. 6ipos de cor
Neste captulo descreveremos como a partir das cores primrias se podem conseguir outras, e dependendo das
tonalidades fazer diferentes classificaes.
%.! 6eoria da cor. :ropriedades das cores
As cores tm umas propriedades inerentes que lhes permite se distinguir de outras e gravar diferentes
definies de tipo de cor.
%$.! 6eoria da cor. Contrastes de cor
O contraste um fenmeno com o qual se podem diferenciar cores atendendo luminosidade, cor de fundo
sobre a qual se projetam...
%%.! 6eoria da cor. ;studo de algumas cores "
Neste captulo descreveremos as sensaes que produzem algumas cores como o vermelho, o verde e o azul,
assim como seu possvel uso e seu significado em uma web.
%&.! 6eoria da cor. ;studo de algumas cores ""
Acabamos a sesso da teoria da cor com o estudo de mais cores, as sensaes que produzem e sua
convenincia de uso nos web sites.
%'.! 0 cor na web. Cores disponveis para a web
Descobriremos o nmero de cores que poderemos usar em uma web, e se so estes mesmos se a web se
executa em um computador ou em outro.
4 de 163
%).! 0 cor na web. :aletas de cor seguras. Websa#e e (eall<sa#e
As paletas de cores do limitaes na hora de apresentar as cores que contm a web. Neste captulo veremos
quais so estas limitaes.
%*.! 0 cor na web. . problema das imagens
As cores das imagens podem sofrer mudanas se tiverem que estar encapsuladas em estruturas tais como
tabelas, camadas, etc. Isto pode ter uma soluo aproximada, porm no tima. Veremos os problemas que se
podem apresentar.
%+.! 0 cor na web. Cores e partes de uma pgina
importante saber escolher as cores que definiro uma parte da pgina para que seja factvel o cometido desta.
Veremos que cores so as mais apropriadas para cada seo do site.
%-.! 0 cor na web. ;scol1a da paleta para um web site
necessrio escolher cores de acordo com o logotipo da pgina. Neste captulo veremos relaes possveis para
conseguir a funcionalidade esperada.
&/.! 0 cor na web. ,erramentas bsicas para trabal1ar com cores
Existe uma grande variedade de ferramentas que nos permitem manipular as caractersticas das cores para
conseguir as que necessitemos. Abordamos uma ampla lista de programas neste captulo.
&.! 6ipogra#ia. "ntroduo
Nesta seo vamos falar dos contedos textuais das pginas web, e neste primeiro captulo, faremos uma
introduo a este estudo.
&$.! 6ipogra#ia. Um pouco de 1ist=ria
Vamos ver como evoluiu a escritura desde os tempos dos babilnios at nossos dias, passando pelo
acontecimento tipogrfico mais importante: a inveno da imprensa.
&%.! 9edidas tipogr#icas
Continuamos com um pouco mais de histria da tipografia, neste caso com suas medidas e como se foram
adaptando s necessidades atuais.
&&.! :artes de uma letra
Vamos conhecer as partes fundamentais de uma letra e saber distingui-las no caso de ter que criar famlias
tipogrficas.
&'.! ,amlias tipogr#icas
Vamos conhecer as famlias tipogrficas e seus grupos e classificaes.
&).! ,ontes >eri# e #ontes >ans >eri#
Vemos a classificao de fontes tipogrficas em Serif e Sans Serif.
&*.! 6ipogra#ia digital
Vemos como podemos "interletrar e desenhar caracteres de melhor qualidade.
&+.! ,ontes para impresso e #ontes para tela
Vemos tcnicas e tipos de fontes tipogrficas para tipos de resolues de tela e impresso.
"ntroduo ao design gr#ico
A histria do design grfico, desde as origens da humanidade at o aparecimento da web e da Internet.
Por Luciano Moreno
5 de 163
Publicado em: $)??/*
5 votos
O ser humano sempre teve a necessidade de se comunicar com seus semelhantes, at
tal ponto que podemos afirmar que se o homem o ser mais avanado da natureza,
devido, em grande parte facilidade que teve para fazer partcipe aos demais de suas
idias de uma forma ou de outra.
As primeiras formas comunicativas foram mediante elementos visuais. Antes de
desenvolverem capacidades de expresso mediante a linguagem falada, os homens
utilizaram seu corpo para comunicar aos demais estados de nimo, desejos e inquietudes
atravs de intenes, expresses e signos, que com o tempo adquiriram a condio de
"linguagem", ao converter-se em modelos de comunicao.
Embora posteriormente a linguagem falada passara a ser o meio de intercmbio de
informao mais direto, a linguagem visual continuou tendo um importante peso nas
relaes comunicativas, sobretudo a partir do uso de diversos materiais e suportes como
meios de "modelar" mensagens visuais, como demonstram uma infinidade de desenhos
em pedra e pinturas rupestres que chegaram aos nossos dias, nas quais representam
elementos naturais, atividades cotidianas e diferentes signos artificiais com significado
prprio.
:intura rupestre @Cova de 0ltamira, ;span1aA
A representao de idias mediante grficos teve seu maior avance com o aparecimento
das linguagens escritas, que permitiram expressar cadeias estruturadas de pensamentos
mediante um conjunto de elementos grficos de significado prprio dispostos segundo
uma estrutura definida, capazes de transmitir mensagens entendveis pela comunidade.
Estas linguagens escritas estavam baseadas na representao de elementos tomados da
natureza, aos que se atribua uma interpretao particular, e tambm um conjunto
artificial de smbolos inventados: os alfabetos. Cada um destes signos isolados tinha s
vezes um significado incerto, porm unido a outros, permitiam representar graficamente
a linguagem falada por cada povo ou cultura.
6 de 163
Bravura em pedra com 1ierogl#ico @;gitoA
Como suporte fsico, foi utilizada inicialmente a pedra, porm, rapidamente se buscaram
outros tipos de materiais que permitiram uma maior facilidade de uso e uma maior
portabilidade, como os papiros ou os pergaminhos.
:apiro dos mortos
Tambm se comearam a usar diferentes tipos de pigmentos naturais para dar um maior
colorido e expresso s obras escritas e composies artsticas, e a dispor os diferentes
elementos textuais e grficos de forma harmoniosa e equilibrada, j que se apreciou que
com isso se ganhava poder comunicativo, clareza e beleza. Isto pode ser apreciado na
confeco dos incunbulo realizados nos monastrios, nos que se observa de forma clara
a importncia da "FORMA" (design) para transmitir uma mensagem.
7 de 163
"ncunbulo medieval
Posteriormente, Johann Gutenberg inventou a imprensa, artefato capaz de reproduzir em
grandes quantidades e de forma cmoda um original, o que tornou possvel que os
documentos impressos e a mensagem que continham fossem acessveis a um grande
nmero de pessoas.
:rimeiro livro impresso
Logo comearam a aparecer imprensas que reproduziam todo tipo de obras, cada vez
mais elaboradas. Comearam-se a usar novos materiais como suporte, novas tintas e
novos tipos de letras, originando o aparecimento de profissionais especializados em seu
manejo, os tipgrafos e os impressores, talvez os primeiros designers grficos como tal,
j se encarregavam de compor e construir os diferentes elementos que formariam uma
obra de forma que resultasse lgica, clara, harmoniosa e bela.
Outro grande impulsor do desenvolvimento do design grfico foi a Revoluo Industrial.
Surgiram as fbricas e a economia de mercado, um grande nmero de pessoas se
deslocou s cidades para trabalhar, aumentaram as lojas e os comrcios e comeou a
concorrncia entre empresas por se tornarem uma parte do mercado. Com isso,
apareceu e se desenvolveu uma nova tcnica comercial, a publicidade, encarregada de
8 de 163
fazer chegar aos consumidores mensagens especficas que lhes convencessem de que
um produto dado era melhor que outros anlogos.
Carta8 publicitrio
O desenvolvimento da publicidade trouxe consigo um desenvolvimento paralelo do
design grfico e dos suportes de comunicao. Havia que convencer ao pblico das
vantagens de um produto ou marca, e para isso nada melhor que mensagens concisas,
carregados de componentes psicolgicos, com desenhos cada vez mais elaborados, que
chegava ao maior nmero possvel de pessoas. O como se transmitia a informao
chegou inclusive a superar em importncia mesma informao transmitida.
No se tratava j de apresentar mensagens visuais belas, e sim, efetivas, que vendiam,
e para isso, no duvidaram em realizar grandes investimentos, tornando possvel um
grande avance nas tcnicas de design e no aparecimento de profissionais dedicados
exclusivamente a desenvolve-las e coloca-las em prtica: os designers grficos.
No sculo XX, surgiram os computadores, mquinas em um princpio destinadas a um
grupo reduzido de tcnicos e especialistas, mas que pouco a pouco foram ganhando
popularidade e que com o aparecimento do computador pessoal se estenderam a todos
os ambientes e grupos sociais.
O computador til porque permite o uso de programas informticos capazes de realizar
uma infinidade de tarefas. Porm, estes programas tm uma estrutura interna muito
complexa, que na maioria das vezes vai mais pra l dos conhecimentos que possuem os
usurios dos mesmos.
Isto deu lugar introduo de uns elementos intermedirios, denominados "Interfaces de
Usurio", cuja misso era isolar o usurio das consideraes tcnicas e processos
internos dos programas, permitindo-lhes realizar tarefas com eles por meio de uma
"linguagem" intermediria, mais fcil de ser entendida pelo usurio.
"nter#ace de usurio em modo teCto
9 de 163
princpio, estes programas se manejavam de forma textual, mediante comandos
crpticos, que somente "experts" na matria podiam entender. Porm, com o acesso
informtica de todo tipo de pessoas tornou-se necessrio uma simplificao no manejo
das aplicaes, surgindo o conceito de "Interface Grfica de Usurio" em toda sua
extenso, como um meio capaz de tornar entendveis e usveis estas aplicaes atravs
de elementos visuais comuns, que apresentados na tela do computador permitiam ao
usurio mdio realizar as tarefas prprias de cada programa concreto.
"nter#ace Br#ica de Usurio
O trabalho de desenhar estas IGU correspondeu inicialmente aos prprios programadores
que desenvolveram as aplicaes, porm logo foi visto que seu conceito de interface de
usurio no correspondia com a que necessitavam os usurios finais.
Faltavam profissionais de design que se encarregariam de conceber as interfaces, porm
os designers grficos clssicos no estavam acostumados a construir obras com
capacidades de interao e navegabilidade, pelo qual tiveram que se reciclar,
aprendendo conceitos e funcionalidades novas.
Com a entrada em cena da Internet e as pginas web, tornou-se ainda mais patente a
defasagem dos designers grficos com o novo meio. Faltava agora desenhar e construir
interfaces de usurio muito especiais, condicionadas a pequenos tamanhos de arquivo e
a um meio concreto de apresentao, os navegadores web, que impunham srias
limitaes ao design, que necessitavam sistemas de navegao entre pginas simples e
entendveis.
"nter#ace web
10 de 163
Se a isto somamos a necessidade dos criadores de interfaces web de conhecer a fundo
diferentes linguagens de marcas e de programao (HTML, JavaScript, DHTML),
evidente que era necessria o aparecimento de um novo profissional, o webdesigner,
hbrido entre o designer grfico clssico e o programador de aplicaes para Internet.
http://www.criarweb.com/artigos/711.php
Design gr#ico
Uma aproxima!o ao design grfico em gera", com uma descri!o dos e"ementos #ue comp$em habitua"mente um desenho e as
caracter%sticas principais #ue podemos encontrar ne"es.
Por Luciano Moreno
Publicado em: $)??/*
3 votos
Podemos definir o design grfico como o processo de programar, projetar, coordenar,
selecionar e organizar uma srie de elementos para produzir objetos visuais destinados a
comunicar mensagens especficas a determinados grupos.
A funo principal do design grfico ser ento transmitir uma informao determinada
por meio de composies grficas, que chegam ao pblico destinatrio atravs de
diferentes suportes, como folhetos, cartazes, trpticos, etc.
O design grfico busca transmitir as idias essenciais da mensagem de forma clara e
direta, usando para isso diferentes elementos grficos que dem forma mensagem e o
faam facilmente entendvel pelos destinatrios do mesmo.
O design grfico no significa criar um desenho, uma imagem, uma ilustrao, uma
fotografia. algo mais que a soma de todos esses elementos, embora para conseguir
comunicar visualmente uma mensagem de forma efetiva o designer deve conhecer a
fundo os diferentes recursos grficos a sua disposio e ter a imaginao, a experincia,
o bom gosto e o sentido comum necessrios para combina-los de forma adequada.
O resultado final de um design grfico denomina-se grafismo, e uma unidade por si
mesma, embora esteja composto por uma infinidade de elementos diferentes. Podemos
estabelecer uma analogia entre um grafismo e um prato de cozinha. Ambos esto
compostos por diferentes elementos individuais que, unidos corretamente e com
sabedoria, compem uma obra final nica e definida que vai mais alm da soma das
partes que a formam.
11 de 163
,ormas, cores e teCtos em um gra#ismo
Toda obra de comunicao visual nasce da necessidade de transmitir uma mensagem
especfica. Um designer grfico no um criador de formas, e sim um criador de
comunicaes, um profissional que mediante um mtodo especfico (design) constri
mensagens (comunicao) com meios visuais (grafismos). No o criador da
mensagem, e sim seu intrprete.
O principal componente de toda composio grfica ento a mensagem a interpretar, a
informao que se deseja fazer chegar ao destinatrio atravs do grafismo. Esta
informao deve-se representar por meio de diferentes elementos grficos, que podem
ser muitos e variados, embora os mais comuns sejam:
Elementos grficos simples: pontos e linhas de todo tipo (livres, retas, quebradas
curvas, etc.)
Elementos geomtricos, com ou sem contorno: polgonos, crculos, elipses, ovais,
etc.
Tipos: letras de diferentes formas e estrutura, utilizadas para apresentar
mensagens textuais.
Grficos vrios: logotipos, icones, etc.
Ilustraes
Fotografias
Qualquer outro elemento visual apto para comunicar uma mensagem.
12 de 163
Um desen1o limpo
Estes elementos bsicos combinam-se uns com outros em um grafismo, e desta
combinao surge um resultado final no qual tm muita importncia uma srie de
conceitos prprios do design grfico, entre os quais se destacam:
Os agrupamentos: conjuntos de elementos relacionados mediante proximidade,
semelhana, continuidade ou simetrias.
A #orma: forma de cada elemento grfico isolado e dos agrupamentos de
elementos.
Os contornos: partes limtrofes dos elementos, que permitem distingui-los dos
demais e do fundo, podendo estar definidos mediante border, mudanas de cor ou
mudanas de saturao.
A locali8ao: lugar que ocupa cada elemento grfico ou agrupamento deles no
espao do grafismo.
O taman1o: tamanho relativo de cada elemento grfico com respeito aos que lhe
rodeiam. Escalas.
A corD cor de cada elemento individual, cores de cada agrupamento de elementos,
conjunto total de cores usado em um grafismo, disposio relativa dos elementos
com cor e harmonia entre cores.
O contraste: intensidade de visualizao de cada elemento com relao aos que
lhe rodeiam e ao grafismo completo.
O equilbrio: cada grafismo implica um sistema de referncia espacial que
consegue um nvel de equilbrio maior ou menor.
A simetria : disposio espacial regular e equilibrada dos elementos que formam
a composio grfica.
Os diferentes elementos de um grafismo so percebidos pelo destinatrio de acordo com
a influncia que exercem cada um destes conceitos a nvel individual, grupal e total.
Porm, a unio de todos eles, a obra grfica, uma entidade comunicativa individual e
completa, carregada de complexos elementos humanos associados com a linguagem, a
experincia, a idade, a aprendizagem, a educao e a memria.
http://www.criarweb.com/artigos/712.php
13 de 163
Design gr#ico na web
& design web 'ai mais a"m do design tradiciona", pois existem muitos
"imitadores re"acionados com o meio onde se apresentam as pginas(
Internet. )onheceremos as caracter%sticas fundamentais do design na web.
Por Luciano Moreno
Publicado em: $)??/*
3 votos
O design grfico de uma pgina web somente uma parte do design da mesma, j que,
ademais, h que considerar um conjunto mais ou menos extenso de condicionantes que
vo limitar a livre criatividade do designer.
Em primeiro lugar, as pginas web tm que ser baixadas de um servidor web remoto
atravs da Internet, pelo qual a largura de banda das conexes dos usurios vem a ser
um fator chave na velocidade de visualizao. A maioria dos usurios se conecta ainda
na Internet com um modem, com velocidades tericas de 56 Kbps, embora na prtica
no supera os 10-15 Kbps no melhor dos casos.
Os elementos grficos, j tendo formato de mapa de bits ou vetorial, costumam ser
traduzidos em arquivos de bastante peso, dependendo do tamanho da imagem e do
formato em que se salve. Isto origina que as pginas que contm em seu desenho
muitas imagens, ou poucas porm de grande tamanho, demorem muito tempo para ser
baixadas desde o servidor web e apresentadas na janela do computador do usurio, que
no costuma ser muito paciente.
Estudos realizados demonstram que o tempo mximo de pacincia de uma pessoa que
espera o download de uma pgina costuma ser de uns 10 segundos, passados os quais
prefere abandonar nosso website e buscar outro mais rpido. Portanto, o nmero de
elementos grficos que podemos introduzir em uma pgina web fica bastante limitado,
tendo que buscar alternativas mediante o uso imaginativo de fontes e cores.
Outro aspecto a ter em conta que as pginas web so visualizadas em umas aplicaes
especficas, os navegadores web, que impem grandes limitaes ao design das mesmas.
A janela de um navegador eminentemente retangular, com umas medidas concretas
(dadas pela resoluo empregada pelo usurio em seu monitor) e com umas capacidades
de interpretao de cores que variam muito segundo o computador usado, o sistema
operacional, o monitor e o carto grfico.
Estes fatores impem fortes limitaes ao webdesigner, que deve buscar sempre que
suas pginas possam ser visualizadas corretamente pelo maior nmero de usurios.
14 de 163
Design de um #ormulrio web
Em segundo lugar, os navegadores existentes no mercado tm uma forma particular de
apresentar o contedo das pginas. Internet Explorer interpreta em muitas ocasies uma
pgina web de forma muito diferente a Netscape Navigator 4x, e este por sua vez o faz
de forma diferente a Netscape Navigator 6x.
Para tentar solver estas diferenas, o webdesigner deve trabalhar com vrios
navegadores ao mesmo tempo, desenhando suas pginas de tal forma que a
interpretao delas seja parecida em todos, o que impe novas limitaes ao desenho.
Por outro lado, uma pgina web no um design grfico esttico, e sim que contm
diferentes elementos que tm a capacidade de interagir com o usurio, como menus de
navegao, links, formulrios, etc. Alm disso, uma pgina isolada no existe, porque faz
parte de um conjunto de pginas inter-relacionadas entre s (o website), que devem
apresentar-se ao usurio com o mesmo "estilo", embora sua funcionalidade seja muito
diferente.
A isto h que somar que as pginas desenhadas devem logo ser construdas em uma
linguagem especfica, o HTML, que por si mesmo muito limitado, o que faz com que o
webdesigner tenha que estar sempre pensando se a interface que est desenhando
graficamente vai poder ser logo construda.
Por ltimo, uma pgina web costuma ocultar, na maioria dos casos, uma srie de
processos complexos que se executam sem que o usurio seja consciente deles
(execuo de cdigos de linguagens de programao tanto em cliente como em servidor,
acesso ao banco de dados em servidores remotos, etc.), processos que adicionam tempo
apresentao das pginas e que muitas vezes costumam afetar de forma importante o
desenho destas, j que designer no sabe de antemo que contedos concretos vo ter.
(esumindo: o webdesign vai mais alm do design grfico, ao influir nele uma infinidade
de fatores que limitam as possibilidades do desenho, porm tambm outros que
15 de 163
acrescentam interatividade e funcionalidades a uma pgina web que um cartaz, folheto
ou revista no tm.
http://www.criarweb.com/artigos/713.php
Componentes gr#icos de um computador
*escri!o dos principais componentes grficos de um computador( & cart!o
grfico e o monitor.
Por Luciano Moreno
Publicado em: %?$?/*
3 votos
Os principais componentes de um computador encarregados de interpretar e apresentar
as cores so o carto grfico e o monitor.
O carto gr#ico ou de vdeo o componente hardware encarregado de processar os
dados grficos que envia o processador, interpreta-los e codifica-los em voltagens
adequadas que so enviados logo ao monitor para sua apresentao em tela.
Carto gr#ico
Existem diferentes modelos de carto grfico, que vo desde os mais simples, includos
na placa base, at os mais avanados, verdadeiros mini-computadores, com seu prprio
processador, memria, bus, etc.
Os monitores so os dispositivos encarregados de apresentar ao usurio as interfaces das
aplicaes que se executam no computador. Todos sabemos como um monitor por
fora, j que estamos acostumados aos monitores das televises, algo to comum em
nossas casas. Interiormente, os monitores variam uns dos outros em funo de sua
qualidade, da forma de manejar de voltagens e da tecnologia grfica empregada.
9onitor C(6
16 de 163
Os monitores mais comuns so os CRT ou de raios catdicos, formados por um tubo
cujo interior foi feito vazio, em um dos extremos se situam trs canhes de eltrons, um
por cada cor primria, e no outro em uma tela de vidro, cuja parte externa a que v o
usurio.
6ubo de raios cat=dicos de um monitor C(6
Os eltrons gerados nos canhes por aquecimento so impulsionados at a parte interna
da tela, que se encontra recoberta por pequenos grupos de fsforo pigmentado em cada
uma das trs cores primrias (vermelho, verde e azul). Estes grupos recebem o nome de
tradas, e se correspondem com um ponto da tela, denominado pxel, que aparecer de
uma cor ou de outra segundo a intensidade dos eltrons que chegarem em cada canho.
Uma caracterstica importante o passo de ponto (dot pitch), distncia diagonal entre
dois pontos vizinhos da mesmo cor, que determina o mnimo tamanho de um detalhe que
capaz de resolver uma tela. Quanto menor for esta distncia, maior ser a nitidez.
Mede-se em pontos por polegada (ppp).
A resoluo mxima distinguvel em uma tela de 800x600 de 72 ppp e em uma de
1024x768 de 93 ppp. Estes so valores tericos e na prtica so algo maiores.
:asso de ponto e pCel
17 de 163
Segundo a resoluo empregada, os pxels (unidade mnima de informao) so
representados em tela por uma ou mais tradas, com o que a adaptao s diferentes
resolues muito boa.
Com objetivo de que os eltrons cheguem de forma ordenada e causem impacto
justamente no ponto adequado, entre a tela e os canhes, situa-se uma mscara ou rede
que filtra os eltrons e os dirige a seus pontos destino de forma adequada.
A representao de uma imagem em tela se realiza mediante varreduras dos raios de
eltrons, que percorrem toda a tela de esquerda direita e de cima para baixo. A
velocidade com a que se realiza esta operao denomina-se freqncia de refresh
vertical ou refresh de tela, e mede-se em Hz (hertzs) e deve estar por cima de 60 Hz,
preferivelmente 70 ou 80. A partir desta cifra, a imagem na tela sumamente estvel,
sem piscadas apreciveis, com o qual a vista sofre muito menos.
A freqncia de refresh vertical de nosso monitor pode ser averiguada acessando tela
de configurao do monitor, a qual se acessa em sistemas Windows mediante as
selees:
Iniciar > Painel de control > Tela > Configurao > Opes avanadas > Monitor
Tambm podemos mudar nesta tela a freqncia de refresh, porm antes de faze-lo
aconselhvel consultar o manual do monitor, j que uma freqncia incorreta pode ser
bastante prejudicial.
9onitor ECD
Outro tipo de monitore o LCD ou de cristal lquido, que se diferencia dos anteriores
porque nele as tradas esto formadas por cristal lquido ao invs de fsforo pigmentado,
e os eltrons so guiados por polarizao magntica. Ademais, os monitores LCD
trabalham com uma trama de pxels concreta, sendo fixo o tamanho de cada um,
portanto ao mudar uma resoluo inferior podem ficar franjas de pxels desativadas.
Seja qual for o tipo de carto grfico e monitor usado, fundamental ter instalados e
atualizados os drivers prprios destes componentes.
Um driver um conjunto de bibliotecas de software especficas encarregadas de
configurar e controlar os dispositivos de hardware. Cada componente necessita para
funcionar bem os drivers adequados, que geralmente vm junto com este em um
disquete ou em um CD.
Com o avano das funcionalidades dos sistemas operacionais e dos demais componentes
de software e hardware das mquinas informticas, torna-se necessrio uma atualizao
constante dos drivers dos monitores e cartes de vdeo.
18 de 163
Estas verses atualizadas costumam ser oferecidas pelos diferentes fabricantes em seus
web sites, por isso muito importante visitar estes a cada certo tempo para baixar as
verses atualizadas dos drivers e instala-los em nossa mquina, com o objetivo de no
perder capacidades e de evitar incompatibilidades com os novos sistemas operacionais.
Se tivermos instalado um carto grfico em nosso computador, geralmente os drivers
desta (controlador) so os responsveis de manejar de forma adequada o monitor. Para
acessar s propriedades do controlador, basta seguir a rota:
Iniciar> Painel de controle > Tela > Configurao > Opes avanadas > Monitor
> Propriedades > Controlador
Atravs desta janela podemos ver o tipo de controlador instalado e se est funcionando
bem ou se tem algum problema. Tambm atualiza-lo, para o que for necessrio ter
previamente nos novos drivers, j que teremos que indicar sua localizao em nossos
discos rgidos.
Uma considerao importante: h que estar certo de que o driver que iremos instalar se
corresponde com o de nosso carto grfico ou monitor, j que um driver inadequado
pode originar um mal funcionamento dos componentes grficos.
http://www.criarweb.com/artigos/725.php
(esoluo de tela
)onsidera$es re"ati'as aos distintos tipos de te"a #ue os 'isitantes possam
ter e o espao dispon%'e" para cada caso.
Por Luciano Moreno
Publicado em: /?%?/*
Valorize este artigo:
4 votos
As aplicaes encarregadas de apresentar as pginas web so os navegadores
(browsers), entre os quais, cabe destacar por sua importncia e difuso, Internet
Explorer, Netscape Navigator, Opera e Mozilla Firefox.
A interface de um navegador, em seu modo padro, apresenta ao usurio uma ou mais
barras superiores (de menus, de endereos, etc.), uma barra inferior (a barra de estado)
e um espao principal, a janela, na qual so apresentadas as pginas web.
A forma desta janela sempre retangular, porm seu tamanho varia, dependendo do
monitor e do carto grfico. Podemos falar de dois tamanhos de tela diferentes:
6aman1o absoluto: o tamanho "real" da janela do monitor, medido
geralmente em polegadas. Depende do monitor.
(esoluo ou taman1o relativo : vem determinado pelo nmero de pixels que
se mostram na janela do monitor, sendo o pxel a unidade mnima de informao
que pode se apresentar em tela, de forma geralmente retangular. Depende do
carto grfico.
19 de 163
O tamanho absoluto costuma se expressar em polegadas de diagonal (1 polegada = 25,4
mm). O mais comum atualmente o de 17'' em computadores de mesa, embora ainda
existam bastantes mquinas antigas com monitores de 15'' e existem no mercado
bastantes de 19'' e de 21''. O tamanho absoluto dos monitores dos laptops costuma ser
de 14-15''.
Quanto resoluo, os valores mais comuns so de 800x600 e de 1024 x768 pixels,
embora existam ainda usurios que trabalhem por baixo da mdia a 640x480, e por
cima, a resolues de 1152x864 e 1280x960 pixels.
O tamanho absoluto e a resoluo devem estar em concordncia para uma visualizao
correta, sendo valores aceitveis os seguintes:
14" - 15": Resoluo mxima aprecivel: 800x600
17": Resoluo mxima aprecivel: 800x600 ou 1024x768
19'' e 21": A partir de 1024 x 768
As possveis resolues de trabalho de uma mquina dependem, sobretudo da qualidade
do monitor e do carto grfico do computador, e se configuram, em sistemas
operacionais Windows, clicando com o boto direito do mouse sobre o escritrio,
selecionando a opo Propriedades e acessando aba Configurao, ou tambm atravs
de Iniciar > Painel de controle > Visualizao.
A importncia da resoluo de tela sobre a forma de ser visualizadas as pginas web na
janela do navegador muito importante. A maior resoluo se dispe de mais pontos de
informao para apresentar os elementos na tela, porm estes pontos so menores, com
o qual os elementos da interface (textos, imagens, objetos de formulrio, etc.) se vem
menores.
6aman1o de pgina e resolu4es
Se desenhamos uma pgina para uma resoluo dada, ocupando toda a janela do
navegador, aqueles usurios que a visualizarem em resolues menores no tero
espao na tela para conter toda a pgina, por conta disso se veriam obrigados a usar as
barras de deslocamento do navegador. Sendo ao contrrio, aqueles usurios que a
visualizarem a resolues maiores tero muito espao na tela para to pouca pgina,
deixando assim bastante espao vazio, sem contedos.
Para solucionar estas diferenas, o normal que se desenhem as pginas web para uma
resoluo base, geralmente a mais usada na atualidade pela maioria (800x600), e se
construam internamente mediante tabelas ou camadas de tamanhos relativos, com
20 de 163
larguras definidas em %, com o qual se consegue que ao ser visualizadas em monitores
de mais resoluo se "abram", ocupando todo o espao de tela disponvel.
Os problemas que tm este sistema so que no d suporte aos usurios que utilizam
resolues menores e que, no caso de resolues maiores, o design da pgina poder ser
visto seriamente afetado ao modificar seus elementos das dimenses originais.
Outra possibilidade projetar toda a pgina dentro de um container-pai (uma tabela ou
camada) e atribuir a este um alinhamento centralizado, com o qual a pgina ficaria no
centro da tela se se usa uma resoluo maior que a do desenho.
http://www.criarweb.com/artigos/739.php
Cores em um computador
)omo traba"ham os computadores para codificar uma cor. & formato +,-.
Por Luciano Moreno
Publicado em: $/?%?/*
Valorize este artigo:
3 votos
O olho humano pode distinguir aproximadamente entre 7 e 10 milhes de cores. Devido
a isto a vista para ns o principal sentido que nos une com o exterior, de tal forma que
sobre 80% da informao que recebemos do mundo exterior visual.
Pintores e designers grficos utilizam esta capacidade humana de apreciar cores para
criar obras que aprofundem na alma e que inspirem sentimentos nos seres que as
contemplam. Porm, o que podemos fazer quando devemos nos expressar com um
nmero limitado de cores?
Os computadores trabalham com trs cores bsicas, a partir das quais constroem todas
as demais, mediante um processo de mistura por unidades de ecr, denominadas pixels.
Estas cores so o vermelho, o azul e o verde, e o sistema definido conhecido como
sistema RGB (Red, Green, Blue).
Cada pixel tem reservada uma posio na memria do computador para armazenar a
informao sobre a cor que deve apresentar. Os bits de profundidade de cor marcam
quantos bits de informao dispomos para armazenar o nmero da cor associada
segundo a paleta usada. Com esta informao, o carto grfico do computador gera uns
sinais de voltagem adequados para representar a correspondente cor no monitor.
Quanto mais bits por pixel, maior nmero de variaes de uma cor primria podemos
ter. Para 256 cores precisam-se 8 bits (sistema bsico), para obter milhares de cores
necessitamos 16 bits (cor de alta densidade) e para obter milhes de cores falta 24 bits
(cor verdadeira). Existe tambm outra profundidade de cor, 32 bits, porm com ela no
se conseguem mais cores, e sim que as que usarmos se mostraro mais rpido, j que
para o processador mais fcil trabalhar com registros que sejam potncia de 2
(lembremos que trabalha com nmeros binrios).
21 de 163
Quanto maior for o nmero de cores, maior ser a quantidade de memria necessria
para armazen-los e maiores os recursos necessrios para processa-los. Por este motivo,
os computadores antigos dispem de paletas de poucas cores, normalmente 256, por
no ter capacidade para manejar mais sem uma perda notvel de prestaes.
Para representar uma cor no sistema RGB utilizam-se duas formas de codificao
diferentes, a decimal e a hexadecimal, correspondendo-se os diferentes valores com a
porcentagem de cada cor bsica que tem uma cor determinada.
:orcentagens de cor e c=digos
Por exemplo, um vermelho puro (100% de vermelho, 0% de verde e 0% de azul) se
expressaria como (255,0,0) em decimal, e como #FF0000 em hexadecimal (antes do
cdigo de uma cor em hexadecimal sempre situa-se um smbolo almofadinha).
Das 256 cores bsicas, o prprio sistema operacional fica com 40 para sua gesto
interna, com o qual dispomos de 216 cores. Delas, 18 correspondem-se com as gamas
das cores primrias, correspondentes a 6 tons de vermelho, 6 de azul e 6 de verde:
Bamas de cores primrios
E o resto, as cores secundrias, so combinaes destas gamas de cores primrias:
22 de 163
Cores secundrias
Se usamos uma profundidade de cor de 24 bits, correspondente a milhes de cores,
dispomos de uma ampla gama para trabalhar, porm sempre tendo em conta que s
sero compatveis as cores que tiverem sua equivalente no sistema de 256 cores, ou
seja, aquelas nas que cada cor primria vem definida por uma dupla de valores iguais,
devendo estas ser 00,33,66,99,CC ou FF.
Quando usamos uma profundidade de cor de 16 bits dispomos de milhares de cores,
porm o problema que devido diviso desta gama de cores, os valores obtidos no se
correspondem com os equivalentes em 256 cores nem em milhes de cores. Por
exemplo, #663399 a mesma cor que 256 e que milhes, mas no igual que o obtido
com milhares de cores.
Como o cdigo de uma cor dada pode ser difcil de lembrar, foi adotada uma lista de
cores as quais foi colocado um nome representativo no idioma ingls (red, yellow, olive,
etc.), de tal forma que os navegadores modernos interpretam a mesma e a traduzem
internamente por seu valor hexadecimal equivalente.
http://www.criarweb.com/artigos/751.php
Calibragem do monitor
Uma composi!o grfica pode ser 'ista com diferentes tona"idades
dependendo da configura!o do monitor. .emos #ue ca"ibrar o monitor para
#ue o aspecto de nossa obra se/a o mesmo em todos os computadores.
Por Luciano Moreno
Publicado em: ?&?/*
Valorize este artigo:
3 votos
As composies grficas podem aparecer de maneira diferente nos distintos monitores,
devido principalmente diferena nos parmetros que definem a qualidade e as
caractersticas luminosas e cromticas de cada um deles.
Isto pode originar, por exemplo, que ao realizar uma composio sejamos ns mesmos
os enganados, ao no corresponder s cores que vemos em tela s reais que estamos
codificando no grafismo. Ou que o aspecto visual de uma pgina web desenhada em um
monitor mal configurado no corresponda com o que logo vero os usurios, com a
conseguinte perda de controle e de qualidade que isso supe.
Para evitar estes erros preciso utilizar uns valores padres dos parmetros de
configurao, que tornam disponvel que o aspecto de uma obra grfica seja o mesmo
em qualquer computador configurado segundo os mesmos valores. Estes valores
costumam se com os que trazem um monitor ao sair de fbrica, e a recuperao dos
mesmos recebe o nome de calibragem.
A calibragem o processo de ajuste da configurao da converso de cor do monitor a
um nvel padro, de forma que a imagem se apresente de maneira igual em diferentes
monitores.
23 de 163
O mtodo mais simples de calibragem passa pelo uso de imagens "cartas de ajuste",
similares s que apareciam no televisor antes de comear a emisso. So imagens
formadas por diferentes linhas de cores, umas finas e outras mais grossas, que se podem
tomar como referncia para realizar um ajuste totalmente manual, usando para isso os
controles que possui o monitor. um mtodo pouco confivel, j que os ajustes so
totalmente subjetivos.
Outro mtodo de calibragem mais avanado so as ferramentas de gesto da cor que
facilitam certos programas de aplicao, como Adobe Photoshop, que inclui uma
ferramenta bsica, denominada Adobe Gamma, que pode ser utilizada para eliminar
tonalidades de cor e padronizar a apresentao das imagens. Acessa-se a esta
ferramenta atravs do menu Ajuda > Administrao da cor > Abrir Adobe Gamma, com o
qual acessamos a uma tela que nos permite ajustar os valores diretamente ou por meio
de um assistente. Uma vez calibrado o monitor, os valores podem ser armazenados em
um arquivo para as sucessivas re-configuraes.
24 de 163
Calibrador de monitor
Porm sem dvida a melhor forma de calibrar um monitor utilizar o hardware especfico
para isso. O funcionamento varia segundo o dispositivo usado. Alguns se conectam
diretamente ao monitor para coleta de dados binrios, permitindo um ajuste individual
direto de cada um dos canhes. Outros se baseiam em situar frente tela do monitor
diferentes medidores (calormetros, colormetros, etc.) para colher dados, fornecendo
uma leitura dos valores atuais e proporcionando os valores idneos de configurao.
Seja qual for o mtodo escolhido, para uma correta configurao do monitor deveremos
ajustar uma srie de parmetros, entre os quais se incluem os seguintes:
Fril1o
Tambm chamado, luminosidade, define a relao no linear entre a tenso de entrada e
a luminancia de sada, intrnseco da fsica do ambiente dos canhes de eltrons e no
depende da iluminao ambiente.
De outra forma, o brilho a intensidade de luz emitida sobre uma rea especfica, pela
qual as mudanas de brilho podem escurecer ou clarear todo o contedo da tela.
Os monitores tradicionais (CRT) geram aproximadamente de 80 a 100 cd/m (candela
por metro quadrado). No caso de monitores LCD, no se admitem valores inferiores a
150 cd/m .
Quanto ao tipo de computador, em um PC o brilho no se corrige internamente, por isso
se uma imagem se v bem no PC onde se cria, se ver igualmente bem em todos. Nos
Mac, ao contrrio, existe uma correo adaptada ao das primeiras impressoras laser
para Mac, por isso uma imagem criada em um Mac se v algo mais escuro em um PC.
O brilho tpico de um monitor de PC de 2,35 (+/- 0,1). O de um sistema Mac de 1,8.
Para Internet pode-se criar as imagens ajustando a gama a um valor intermedirio
ponderado entre PC e Mac.
0Gustes do bril1o
Se o valor do brilho em um monitor baixo, as colores luminosas se escureceram,
parecendo cinzas. Ao contrrio, se o brilho for elevado, sero as cores escuras as que
perdem profundidade, tornando-se cinzas.
25 de 163
Contraste
O contraste a relao existente entre a intensidade luminosa do ponto mais claro e o
mais escuro de uma imagem. Quanto maior for o valor de contraste, melhor ser a
legibilidade.
Se tivermos uma fotografia com um ponto branco e outro negro e estes mesmos
estiverem em um monitor, geralmente o contraste no monitor (170:1) superior ao que
se d em uma fotografia (100:1), mas se o ambiente estiver muito iluminado, o ponto
negro deixa de ser negro e a relao de contraste pode baixar bastante (hasta 50:1).
Esta situao se agrava quando h reflexos na tela que, ademais, produzem cansao ao
usurio.
0Gustes do contraste
Para uma correta calibragem de contraste h que buscar valores de 100:1, ou seja, que
o ponto branco tenha 100 vezes mais luminosidade que o ponto negro (valor prximo a
2,2).
Cor
A cor em um monitor produzida pela soma de diferentes intensidades das cores bsicas
(vermelho, verde e azul), mediante um processo denominado adio de cores.
A calibragem da cor consiste no processo de ajustar a cor de um dispositivo a um padro
estabelecido para conseguir que as cores de uma composio grfica se apreciem igual
em todos os monitores calibrados.
0Gustes da tonalidade
Devero se ajustar os diferentes parmetros que definem as qualidades das cores, como
tom, saturao, gama, equilbrio de cores primrias, etc.
(esumindo: muito importante que na hora de desenhar nossas pginas web e seus
elementos grficos tenhamos nosso monitor bem configurado, j que em caso contrrio,
os resultados que obtenhamos no sero reais, produzindo diferenas apreciveis entre o
que v os usurios em seus computadores e o trabalho que tivermos desenvolvido, com
a conseguinte perda de controle e de qualidade que isso implica.
http://www.criarweb.com/artigos/767.php
26 de 163
,ormas bsicas em design gr#ico
A "inguagem 'isua" atra's de grafismos pode se descompor em entidades
bsicas, onde cada uma de"as tem por si mesma um significado prprio,
porm unidas de diferentes formas podem constituir e"ementos
comunicati'os distintos.
Por Luciano Moreno
Publicado em: /?'?/*
Valorize este artigo:
2 votos
Estamos acostumados a nos comunicar com nossos semelhantes mediante a linguagem
falada, verbal, formada por uma srie de elementos bsicos (letras, palavras, frases,
etc.) que, combinados, formam entidades comunicativas complexas.
De igual forma, a linguagem visual atravs de grafismos pode se descompor em
entidades bsicas, onde cada uma delas tem por si mesma um significado prprio, porm
unidas de diferentes formas podem constituir elementos comunicativos distintos.
Estas entidades grficas constituem a substncia bsica do que vemos. Portanto, so
muito importantes e todo designer deve conhece-las e maneja-las perfeitamente.
As formas bsicas do design grfico so poucas: o ponto, a linha e o contorno. Porm,
a matria-prima de toda informao visual que contribui para uma composio.
Cada uma delas possui um conjunto de caractersticas prprias que as modificam e
condicionam, entre as quais destacam-se:
,orma: definida por disposio geomtrica. A forma de uma zona ou contorno vai nos
permitir reconhece-las como representaes de objetos reais ou imaginrios.
Direo: projeo plana ou espacial de uma forma, continuao imaginria da mesma
mesmo depois de sua finalizao fsica. Pode ser horizontal, vertical ou inclinada em
diferentes graus.
27 de 163
Cor: talvez a mais importante e evidente, pode imprimir um forte carter e dinamismo
aos elementos aos que se aplica. Toda forma ou zona ter em geral duas cores
diferentes, o de seu contorno e o de sua parte interna, podendo se aplicar tanto cores
puras como degrades de cores.
6eCtura: modificao ou variao da superfcie dos materiais, serve para expressar
visualmente as sensaes obtidas mediante o sentido do tato ou para representar um
material dado. A textura est relacionada com a composio de uma substncia atravs
de variaes diminutas na superfcie do material, e se consegue em uma composio
grfica mediante a repetio de luzes e sombras ou de motivos iguais ou similares.
;scala: tamanho relativo de uma zona com respeito s demais e ao total da obra. Os
diferentes tamanhos das diferentes zonas modificam e definem as propriedades de cada
uma delas.
28 de 163
Dimenso: capacidade tridimensional de um elemento ou zona. A dimenso s existe no
espao real tridimensional, porm se pode simular em uma composio grfica plana
mediante tcnicas de perspectiva, sombreado ou sobreposio. Tambm, mediante o uso
de fotografias, que introduzem espaos tridimensionais na composio.
9ovimento: propriedade muito importante, que aporta conotaes de dinamismo e
fora. Nas obras grficas puras no existe movimento real, porm sim, encontra-se
implcito em certos elementos e se pode conseguir com certas tcnicas que enganam ao
olho humano (design cintico, pintura cintica) ou representando elementos que
realmente existem no mundo real.
Podemos introduzir nas pginas web animaes grficas que aportam sensaes de
movimento muito maiores, como animaes Flash, gifs animados, camadas dinmicas,
elementos de vdeo, etc.
http://www.criarweb.com/artigos/783.php
. ponto
& ponto a unidade m%nima de informa!o 'isua", e est caracteri0ado por
sua forma, tamanho, cor e "oca"i0a!o.
Por Luciano Moreno
Publicado em: *?'?/*
Valorize este artigo:
2 votos
O ponto a unidade mnima de informao visual, e est caracterizado por sua forma
(geralmente circular, porm tambm pode ser retangular, como ocorre nos monitores,
triangular ou uma mancha sem forma definida), por seu tamanho, por sua cor e pela
localizao que tenha dentro da composio grfica.
29 de 163
As principais caractersticas do ponto so:
Tem um grande poder de atrao visual, criando tenso sem direo.
Quando se situam prximos dois pontos podem produzir sensaes de tenso ou
de direo, criando na mente do espectador uma linha reta imaginria que os
une.
Se se situam diferentes pontos em prolongamento sugerem uma direo, um
caminho, mais acentuado quanto mais prximos estejam os pontos entre si.
Quando se agrupam vrios pontos podem definir formas, contornos, tons ou cores
(pensemos na pintura impressionista).
Os pontos isolados so pouco usado no web design. Entretanto, as sucesses de pontos
prximos so um bom elemento para dirigir a ateno do visitante, para guiar sua olhada
a uma zona concreta, para estabelecer relaes entre elementos ou para separar zonas
da pgina.
http://www.criarweb.com/artigos/797.php
0 lin1a
A "inha o e"emento bsico de todo grafismo e um dos mais usados.
+epresenta a forma de express!o mais simp"es e pura, porm tambm a
mais din1mica e 'ariada.
Por Luciano Moreno
Publicado em: $/?)?/*
Valorize este artigo:
3 votos
A linha o elemento bsico de todo grafismo e um dos mais usados, tendo tanta
importncia em um grafismo como a letra em um texto. Representa a forma de
expresso mais simples e pura, porm tambm a mais dinmica e variada.
30 de 163
formada pela unio de vrios pontos em sucesso, podendo se parecer trajetria
seguida de um ponto em movimento, por ter muita energia e dinamismo. Sua presena
cria tenso e afeta ao resto de elementos prximos a ela.
As principais propriedade da linha so:
Contm grande expressividade grfica e muita energia.
Quase sempre expressa dinamismo, movimento e direo.
Cria tenso no espao grfico em que se encontra.
Cria separao de espaos no grafismo.
A repetio de linhas prximas gera planos e texturas.
Em uma composio define direcionamento, que estar mais acentuado quanto mais
linhas paralelas houver. Esta qualidade pode ser usada para dirigir a ateno em uma
direo concreta, fazendo com que o espectador observe o lugar adequado.
Uma linha divide ou circunda uma rea, encontra-se na borda de uma forma. Expressa
separao de planos, permitindo ao designer usa-la como elemento delimitador de nveis
e reas na composio.
As propriedades de uma linha viro definidas pela sua grossura, sua longitude, sua
orientao (direo) com respeito pgina, sua localizao (posio), sua forma (reta ou
curva) e sua cor. Estas propriedades se vero afetadas tambm pelo nmero de linhas
que houver na composio, sua proximidade e a orientao relativa entre elas.
A linha considerada como tal enquanto a relao largura/comprimento no superar
uma proporo determinada. Uma linha mais larga que a metade de seu comprimento
perde a expresso dinmica do trao e adquire a esttica de uma superfcie quadrada.
A unio sucessiva de linhas forma um trao. O traos do volume aos objetos que
desenhamos e permitem representar simbolicamente objetos na composio, eliminando
deles toda informao suprflua e deixando s o essencial.
31 de 163
A linha pode ter as bordas lisas ou denteadas, com extremidades retas, arredondadas ou
em ponta. Seu corpo pode ser slido ou com textura, e sua direo pode ser curva ou
reta. E cada uma destas caractersticas diversificar a forma em que interpretada uma
linha pelo espectador.
Podemos considerar diferentes tipos de linhas, cada um dos quais tem suas prprias
qualidades:
Ein1a reta
Define o caminho mais curto entre dois pontos. pouco freqente na natureza, onde
predominam as linhas curvas (o universo em sua totalidade curvo), porm muito
abundante no ambiente humano, que necessita delas para dar estabilidade a suas
criaes.
A linha reta horizontal expressa equilbrio, calma, equilbrio estvel. No existe
estabilidade sem uma reta horizontal de referncia, uma linha de horizonte, j que nos
movemos em um plano horizontal.
As linhas retas horizontais so muito usadas nas pginas web, tanto que a linguagem
HTML proporciona uma etiqueta especfica para introduzi-las, HR. Utilizam-se
principalmente como elemento delimitador de blocos de contedo em pginas de pouco
contedo grfico, sendo conveniente no apresenta-las com efeito tridimensional, e sim
como uma simples linha plana (atributo noshade).
A linha reta vertical sugere elevao, movimento ascendente, atividade. Tambm
expressa equilbrio, porm instvel, como se estivesse a ponto de cair. Isto pode se
corrigir trabalhando as linhas verticais com outras horizontais de apoio, que lhes daro a
estabilidade de que carecem.
32 de 163
Em uma pgina web, as linhas retas verticais podem ser usadas para separar colunas
textuais ou blocos de contedos, assim como as linhas frontais, com uma cor que
destaque o suficiente sobre o fundo, ou como linhas de fundo, da mesma cor que este,
separando zonas de uma cor diferente.
A linha reta inclinada, pelo contrrio, expressa tenso, instabilidade, desequilbrio.
Parecem que esto a ponto de cair. Dentro das linhas inclinadas, a que forma 45 com a
horizontal a mais estvel e reconhecvel.
Ein1a curva
a linha mais livre e a mais dinmica de todas, podendo sugerir desde um movimento
perfeitamente definido at um movimento catico, sem regras.
Est bastante associada ao ser humano, que escreve e desenha quase sempre com
linhas curvas.
As curvas mais comumente usadas em design grfico digital so as curvas Bzier. Este
tipo de curva foi desenvolvido por Pierre Bzier por encomenda da empresa Renault, que
buscava uma famlia de curvas representveis matemticamente (so curvas de terceiro
grau) que permitiram representar as curvaturas suaves que desejavam dar a seus
automveis.
33 de 163
Uma curva Bzier fica totalmente definida por quatro pontos caractersticos, os pontos
inicial e final da curva e dois pontos de controle (manejadores) que definem sua forma.
Para modificar sua forma, basta mudar de posio um de seus pontos de controle.
So curvas de manejo pouco complexo e muito elegantes, com um desenvolvimento
muito suave, capazes de se adaptar a quase qualquer forma imaginvel, portanto so
muito usadas para desenhar logotipos e cones e para copiar qualquer figura.
Tambm so enormemente versteis, podendo adotar desde curvaturas muito suaves
(quase linhas retas) a curvaturas muito fortes (curvas complexas), passando por todos
os valores intermedirios. Podem, inclusive, mudar de cncavas a convexas ao redor de
um ponto.
No desenho web, o uso de linhas curvas isoladas est muito limitado. mais comum
encontra-las como partes integrantes de formas mais complexas, sendo teis, por
exemplo, para suavizar a dureza de uma forma retangular em um ou mais de seus lados
(como os botes).
Um fator a ter em conta sempre que se trabalhe com linhas curvas em uma pgina web
o efeito de escalado produzido ao no ser capaz o sistema grfico dos computadores de
representar com exatido formas curvas por meio de pxels. o tpico efeito de "dentes
de serra" que aparece em todos os objetos com partes curvas, efeito que aumenta com o
tamanho do objeto.
34 de 163
Uma soluo a este problema visual incluir as linhas curvas como imagens em formato
web (GIF, JPG, PNG, etc.) e aplicar-lhes o processo de rastreado, disponvel em quase
todas as aplicaes grficas, por meio do qual se criam um ou mais pxels entre as
bordas da linha e o fundo, de uma cor intermediria entre elas.
6rao
Um trao o elemento linear formado pela unio sucessiva de diferentes linhas. talvez
a forma grfica mais humana, a que melhor representa nossa forma natural de desenhar.
Um trao herdar as propriedades das linhas que o criam, existindo traos retos, curvos
ou mistos.
http://www.criarweb.com/artigos/814.php
. contorno
& contorno o ob/eto grfico criado #uando o trao de uma "inha se une em
um mesmo ponto.
Por Luciano Moreno
Publicado em: %?*?/*
Valorize este artigo:
2 votos
Podemos definir o contorno como o objeto grfico criado quando o trao de uma linha se
une em um mesmo ponto. Ou seja, quando uma linha continua, comea e acaba em um
mesmo ponto.
35 de 163
Todo contorno delimita duas zonas, uma demarcada (o contorno e seu interior) e outra
infinita (o fundo), criando-se um sub-mundo grfico particular em cada forma definida
por cada contorno.
A linha base de um contorno define a complexidade dessa e suas propriedades. Quando
uma linha se fecha sobre ela mesma, o contorno criado determina um espao interno,
criando-se uma tenso entre este espao e seus limites, outorgando linha criadora um
grande poder de atrao visual.
As qualidades grficas de um contorno estaro definidas pelas linhas que o criam e as
propriedades destas.
Os principais contornos so o quadrado, a circunferncia e o tringulo, aos que podemos
acrescentar os contornos mistos e os orgnicos.
http://www.criarweb.com/artigos/contorno.html
. quadrado
2"ementos de desenho( o #uadrado.
Por Luciano Moreno
Publicado em: $)?*?/*
Valorize este artigo:
2 votos
O quadrado a figura geomtrica formada por quatro linhas retas de mesma longitude,
denominados lados, que formam ngulos perfeitamente retos nos pontos de unio entre
elas (esquinas a 90).
36 de 163
O quadrado uma figura muito estvel e de carter permanente, associada a conceitos
como estabilidade, permanncia, honestidade, retido, limpeza, esmero e equilbrio.
A figura derivada do quadrado por modificao de seus lados o retngulo, de
propriedades anlogas ao quadrado, apesar de sugerir menos perfeio e estabilidade.
O quadrado expressa direcionamento horizontal e vertical, referncia primria com
respeito ao equilbrio e o bem-estar. menos proponente e mais neutro que os
retngulos, porm mais slido. Convida a olhar seu centro e passear a olhada em espiral
em volta desse ponto.
Os retngulos horizontais aportam solidez, estabilidade, do a sensao de ser difceis de
inverter. Quando so de tamanho grande permitem que o olhar do espectador passeie de
um lado ao outro, em sentido horizontal.
Os retngulos verticais, pelo contrrio, d a sensao de menos solidez, menos estvel,
37 de 163
parece que pode se inverter a qualquer momento. Neles, o olhar do espectador no pode
passear de um lado ao outro, porm, pode mover-se verticalmente, dando sensao de
elevao, e apto para representar aqueles objetos que na verdade tm uma forma
ascendente.
Os quadrados e retngulos tero suas qualidades visuais modificadas segundo sua forma,
tamanho, cor do contorno e rea interna, localizao, escala, etc.
A projeo tridimensional do quadrado o hexaedro ou o cubo, corpo geomtrico muito
associado s obras prprias do ser humano, como os edifcios.
Os retngulos so as formas mais naturais para um computador, j que o monitor e as
janelas dos sistemas operacionais grficos so todos retngulos horizontais. Uma pgina
web possui uma forma claramente retangular, definida pela janela do navegador.
Ademais, os elementos web (tabelas, camadas, animaes Flash, applets de Java, etc.)
so de forma retangular.
Isto faz com que os retngulos sejam especialmente adequados para seu uso nas
pginas web, proporcionando equilbrio e estabilidade s mesmas.
Entretanto, conveniente seguir uma srie de pautas na hora de usar retngulos, a fim
de evitar a monotonia e o aspecto artificial de uma pgina quadriculada demais:
38 de 163
Cada retngulo deve estar alinhado com os demais objetos da pgina que lhe
rodeiam.
O tamanho do retngulo deve ser maior que o contedo do mesmo, o suficiente
como para que este se apresente livre, com espaamentos convenientes pelos
quatro lados.
No usar nas tabelas bordas padronizadas, ou seja, cinzas e com efeitos de
relevo. Se forem usadas para separar logicamente registros, melhor lhes atribuir
uma borda fina (sobre 1 pxel) de uma cor que contraste suficientemente com a
borda, porm que no seja chamativa demais. De qualquer forma, prefervel
utilizar outros mtodos para obter a separao, como filas de duas cores
alternativas (pijamas).
Se desejar situar na pgina vrios retngulos de funcionalidade anloga (caso de
elementos de um menu de navegao, por exemplo), prefervel posiciona-los
em sries horizontais, j que se percebero mais como uma linha do que como
um conjunto retangular.
A dureza visual dos retngulos pode-se suavizar adicionando-lhes outros elementos que
os modifiquem em parte. Um exemplo disso, so as tabelas ou botes com esquinas
arredondadas, que rompem a monotonia da forma retangular.
Outra forma de compensar a rigidez das formas retangulares combina-las na
composio com formas curvas que aportem liberdade e dinamismo.
http://www.criarweb.com/artigos/!adrado.html
0 circun#er2ncia
2"ementos de design( a circunfer3ncia.
Por Luciano Moreno
Publicado em: /-?+?/*
Valorize este artigo:
2 votos
A circunferncia um contorno continuamente curvado, cujos pontos esto todos na
mesma distncia de um ponto central, chamado centro do crculo. A distncia constante
de qualquer ponto da circunferncia se denomina radio.
39 de 163
A circunferncia representa a rea que contm e seu interior, denominada crculo, a
forma mais enigmtica de todas, considerada perfeita por nossos antepassados. Sua
direcionalidade a curva, associada ao movimento, ao enquadramento, repetio e ao
calor.
A forma circular produz um movimento de rotao evidente, possui um grande valor
simblico, especialmente seu centro, e tem conotaes psicolgicas como proteo,
inestabilidade, totalidade, movimento contnuo ou infinito. tpico representar tambm
os espaos fechados, hermticos, com circunferncias ou crculos.
Contornos derivados da circunferncia so o oval e ovalado, com qualidades parecidas,
mas que expressam ainda mais instabilidade e dinamismo, embora o movimento perfeito
seja uma qualidade prpria da circunferncia.
A projeo tridimensional da circunferncia a esfera, o corpo geomtrico mais perfeito,
o que contm um maior volume em um menor espao, o que define a forma tanto dos
tomos como dos corpos celestes.
A circunferncia e o crculo so talvez os elementos geomtricos mais perfeitos e
estveis, embora carregados de uma grande carga dinmica.
As formas circulares so muito difcies de representar em uma pgina web, j que todos
os elementos que nos facilita a linguagem HTML so retangulares, embora aparentem
no ser. Ademais, as formas curvas se visualizam muito mal nos monitores, devido
interpretao grfica mediante pixels, que origina efeitos de escalamento indesejveis.
Outro inconveniente de usar crculos no desenho web deriva precisamente de ser a forma
que contm mais rea no menor permetro, j que a maioria das vezes interessa ao
designer exatamente o contrrio, reduzir ao mnimo a rea e maximizar ao mximo o
permetro.
40 de 163
Talvez a nica forma de incluir uma forma circular completa em uma pgina seja
incluindo-a em uma imagem. Porm, qualquer imagem por si s retangular como
objeto HTML, o que nos obrigar a desperdiciar todo o espao compreendido entre o
contorno circular e as bordas da imagem, aparecendo espaos sem contedo no
desejveis na maioria dos casos.
Este efeito negativo pode-se atenuar incluindo dentro da imagem a forma circular e os
demais objetos que lhe rodeiam na composio e que se encontram dentro dos limites do
retngulo que define a imagem, mas ento, esses elementos sero estticos, fixos, sem
possibilidade de serem modificados se no for mudado todo o contedo da imagem.
Uma soluo melhor incluir a imagem que contm o contorno circular (ou curvo em
geral) como fundo da pgina ou de um elemento que contenha a mesma (tabela, clula
de tabela, pargrafo, camada, etc.), o que nos permitir apresentar outros objetos HTML
ocupando espaos vazios ao redor da forma circular.
Formas mais sutis e efetivas de incluir curvas em uma pgina podem ser recortando
imagens em forma oval ou circular, e inclusive simulando caminhos curvos mediante
elementos textuais ou grficos dispostos sucessivamente.
http://www.criarweb.com/artigos/circ!n"erencia.html
Contornos mistos
2"ementos de design( contornos mistos, #ue s!o os #ue est!o compostos
por 'rios tipos de contornos.
Por Luciano Moreno
41 de 163
Publicado em: $/?+?/*
Valorize este artigo:
2 votos
Mediante combinaes dos elementos bsicos e contornos anteriores, pode-se construir
todas as formas imaginveis, cada uma das quais ter umas propriedades dependentes
das partes que a formam, de sua orientao, de seu tamanho, de espessura do trao
limite, de sua cor e de sua localizao.
H que ter em conta, em qualquer caso, que o predomnio da referncia horizontal-
vertical d uma sensao de equilbrio, enquanto que o domnio da direo diagonal
aporta instabilidade.
Os contornos mistos so muito usados nas pginas web, as que aportam variedade no
design e definio de espaos de informao, rompendo a monotonia visual das formas
retangulares puras.
O nico inconveniente que as linhas curvas se devem implementar mediante imagens,
geralmente em formato GIF, que se podem incluir como sees curvas nas clulas
extremas de uma tabela ou como imagens completas em uma camada, sobre a que se
situa outra camada com o texto.
Tambm possvel inclui-las como arquivos SWF (Macromedia Flash), que aportam
grande definio s zonas curvas, sem produzir efeitos de escala, al ser tratadas como
grficos vetoriais. O inconveniente ento a atualizao dos contedos textuais, j que
para isso faz falta acessar o arquivo FLA fonte do grfico.
http://www.criarweb.com/artigos/contornos#mistos.html
Contornos org3nicos
2"ementos de design( contornos org1nicos, #ue est!o formados por cur'as
"i'res.
42 de 163
Por Luciano Moreno
Publicado em: $-?+?/*
Valorize este artigo:
2 votos
Os contornos orgnicos so aqueles formados por curvas livres.
So os contornos mais abundantes na natureza, e sugere fluidez, desenvolvimento,
humanidade, inspirando sensaes favorveis no espectador.
Os contornos orgnicos so utilizados abundantemente em pintura e desenho artstico, j
que so a base para representar figuras humanas, natureza, paisagens, etc.
Entretanto, so muito difceis de incluir em uma pgina web, tanto por aspectos tcnicos
(devem se incrustar como imagens) como por seu aspecto visual, que pode chocar com a
natureza prpria de uma pgina, composio ordenada na que predominam as formas
retangulares. No obstante, bem usados podem dar um toque natural ou humano
pgina.
Uma possvel soluo, se desejarmos introduzir em uma pgina contornos orgnicos,
adapta-los o mximo possvel a um contorno misto, transformando as curvas livres em
43 de 163
curvas Bzier, pores de circunferncias ou linhas retas. Outra soluo introduzir
fotografias ou ilustraes que os contenham.
http://www.criarweb.com/artigos/contornos#organicos.html
. design equilibrado. "ntroduo
2studo das regras bsicas do design grfico. 4!o existe uma frmu"a #ue d3 um design infa"%'e", porm sim umas existem umas
regras bsicas.
Por Luciano Moreno
Publicado em: /'?-?/*
Valorize este artigo:
3 votos
Podemos definir o design de uma composio grfica como a adequao de diferentes
elementos grficos previamente selecionados dentro de um espao visual, combinando-
os de tal forma que todos eles possam contribuir um significado mesma, conseguindo o
conjunto transmitir uma mensagem clara ao espectador.
O design grfico h de ter em conta os aspectos psicolgicos da percepo humana e as
significaes culturais que possam ter certos elementos, escolhendo estes de forma que
cada um deles tenha um porqu na composio e buscando um equilbrio lgico entre as
sensaes visuais e a informao oferecida.
O mais importante de toda composio a mensagem que est nas entrelinhas.
trabalho do designer buscar a mxima eficcia comunicativa, transmitindo essa
mensagem por meio de uma composio que cause impacto visualmente ao espectador e
lhe torne receptivo.
44 de 163
Agora tambm, sem uma disposio adequada das formas, cores e agrupamentos, sem
um equilbrio global na composio, a mensagem no chegar de forma adequada ao
espectador.
No existe um mtodo mgico que consiga uma composio bem-sucedida, mas sim que
existem umas regras bsicas de design que facilitam a transmisso de uma mensagem
por meio de uma composio grfica de forma efetiva.
Estas regras so aplicveis igualmente ao design de pginas web, embora sujeitas s
limitaes que impe este formato e modificadas para adapta-las interatividade e s
possibilidades multimdia do mesmo.
Este ser o tema deste captulo de nosso curso, estudar as regras bsicas de design
grfico efetivo e equilibrado: propores, escalas, contrastes, agrupamentos, reticulados,
alinhamentos, simetrias, equilbrio entre contedos e hierarquia visual.
45 de 163
http://www.criarweb.com/artigos/design#e!ilibrado#introd!cao.html
. design equilibrado. 0s propor4es
*e'emos ter em conta a defini!o a uti"i0ar, os e"ementos grficos e as
propor$es...
Por Luciano Moreno
Publicado em: $*?-?/*
Valorize este artigo:
3 votos
Na hora de comear uma composio, o primeiro que devemos saber o tamanho que
esta ter.
Se o suporte final de nosso grafismo vai ser o papel, poderemos desenhar para uma
grande variedade de tamanhos, desde os menores (cartes de visita, pequenos folhetos)
at os maiores (posters, cartazes para anncios publicitrios), embora quase sempre
desenharemos am algum dos formatos DIN.
9edidas papel #ormato D"7
modelo taman1o relao
DIN A4 210*297 0.0625 m(x/y=0.707)
DIN A3 420*297 0.125 m (x/y=1.4142)
DIN A2 420*594 0.25 m (x/y=0.707)
DIN A1 840*594 0.5 m (x/y=1.4142)
DIN A0 840*1188 1.0 m (x/y=0.707)
A relao visual entre os diferentes formatos DIN a seguinte:
No caso de uma pgina web, os tamanhos possveis so muito poucos, geralmente dois
(800x600 e 1024x768 pixels), porm de suma importncia decidir para qual deles se
vai trabalhar, j que, embora seja possvel desenhar uma pgina para que seja
46 de 163
compatvel com ambas resolues, somente em uma delas se visualizar tal como a
desenhamos.
O segundo passo ser escolher os elementos grficos e textuais que usaremos na
composio. Esta escolha se deve basear em variveis como a pessoa ou empresa que
deseja transmitir a mensagem, a prpria mensagem, o tipo de espectadores
destinatrios da composio e as caractersticas funcionais e comunicativas de cada
elemento.
Agora devemos definir que partes da rea do desenho devem estar ocupadas por
elementos e que partes vo ficar vazias, sem nenhum contedo. Se deixarmos muitos
espaos vazios, a composio pode ser descordenada j que ser difcil estabelecer
relaes globais entre os elementos ou entre os grupos deles. Porm, se o nmero de
componentes for elevado, podemos obter uma obra sobrecarregada, difcil de entender,
na qual no se distingue com clareza o que cada coisa e qual a mensagem que quer
transmitir.
Comearemos a situar ento os elementos em cena, como se fossem atores de nossa
particular obra de teatro, combinando-os de diferentes formas at obtermos um
resultado satisfatrio. Neste ponto muito importante ter em conta que cada elemento
visual tem uma funo determinada dentro da composio.
A informao visual que traz um elemento pode mudar segundo o faam as propriedades
47 de 163
do mesmo, como seu tamanho, forma ou cor, porm, sobretudo sua proporo, o peso
visual que tiver no total da composio.
Indubitavelmente, a forma mais direta de marcar propores mediante o tamanho
relativo dos elementos. Os elementos maiores, altos ou longos tm uma carga visual
superior aos menores, curtos ou finos, criando zonas de atrao mais intensas.
Tambm podemos delimitar propores em um grafismo mediante a cor, com a qual
podemos definir diferentes reas de tons teis para distribuir de forma adequada toda a
informao grfica. Neste sentido, as cores puras e saturadas tm um maior peso visual
que as secundrias neutras, e estas, maior que as tercirias pouco saturadas.
Outra tcnica para definir propores o uso de agrupamentos de elementos e a correta
distribuio destas no cenrio, o que nos vai permitir estruturar de uma forma ou outra a
composio.
:roporo por agrupamentos
Este sistema costuma dar bons resultados, sempre que no abusemos dele criando um
excessivo nmero de blocos significativos, j que ento se diminuiria importncia uns a
outros e se perderia a proporcionalidade buscada.
Mais regras prticas referentes proporo so:
As formas regulares tm menor peso que as irregulares.
48 de 163
As formas alongadas e angulares alongam o campo de viso, criando zonas dominantes.
Sejam quais forem os elementos usados em uma composio deveremos sempre buscar
umas propores adequadas entre eles, com o objetivo de que cada um cumpra seu
papel comunicativo de forma adequada.
http://www.criarweb.com/artigos/design#e!ilibrado#proporcoes.html
. design equilibrado. 0 escala
2ntende5se por esca"a a re"a!o entre as propor$es dos e"ementos 'isuais
de uma composi!o.
Por Luciano Moreno
Publicado em: /?/?/*
Valorize este artigo:
3 votos
Entende-se por escala a relao entre as propores dos elementos visuais de uma
composio.
Todos os elementos tm a capacidade de modificar e se definir uns a outros segundo as
relaes que se definam entre as propriedades anlogas deles. Portanto, o conceito de
escala no se refere s relao entre tamanhos de dois ou mais elementos, como
tambm relao entre cores, formas, etc.
Um elemento grande ou pequeno segundo o tamanho dos elementos que lhe
acompanham no cenrio. A cor de uma forma brilhante ou apagada segundo a cor de
fundo sobre a qual se encontra.
49 de 163
Ou seja, as propriedades de um elemento visual no so absolutas, e sim relativas, j
que dependem das do resto de elementos que lhe acompanham na composio.
A proporo relativa entre elementos deve ser equilibrada, o que implica o uso de uma
escala correta na composio. As escalas so utilizadas desta forma em planos e mapas,
para conseguir representar os objetos reais o mais corretamente possvel, com as
propores adequadas entre eles.
Em uma composio grfica a escala usada igualmente importante, tanto para
distribuir o espao de desenho de forma acertada como para dar equilbrio de propores
aos elementos, usando-se s vezes diferentes mtodos de distribuio de eficcia
provada, como a regra Aurea ou o mtodo de Corbusier.
A regra Aurea, inventada por Vitruvio, se utiliza para obter cenrios de trabalho de
propores equilibradas, e se baseia em contemplar um espao retangular dividido em
terceiras partes, tanto horizontal como verticalmente, conseguindo com isso secionar os
espaos em partes iguais.
50 de 163
Por sua parte, o mtodo de propores criado pelo arquiteto francs Le Corbusier utiliza
como unidade modular de escala o tamanho do homem, estabelecendo com ela as
alturas corretas dos objetos que usamos e dos elementos de uma construo
arquitetnica.
No caso do web design, o tamanho da rea de trabalho fixo, porm sim que deveremos
estabelecer uma escala de trabalho adequada para dimensionar os elementos de nossa
pgina.
;scala proporcionada entre logotipo,
op4es de menu e conte5do
Assim, o logotipo deve ter um tamanho relativo adequado pgina, os sistemas de
navegao (menus) devem ser o suficientemente grandes como para ser vistos e
manejados com facilidade, mas no entanto, que restem importncia ao contedo
informativo da pgina, etc.
51 de 163
Um erro muito comum neste sentido o dos cones, que devem ser suficientemente
grandes como para que no percam seus traos diferenciadores, nem sua zona ativa se
atuam como links, porm nunca tanto que destaquem em excesso, sobretudo se vo
acompanhados de um texto explicativo.
http://www.criarweb.com/artigos/design#e!ilibrado#a#escala.html
. design equilibrado. . contraste
& contraste permite ressa"tar o peso 'isua", podemos consegui5"o atra's de di'ersos meios( tons, cores, contornos e esca"a.
Por Luciano Moreno
Publicado em: *?/?/*
Valorize este artigo:
3 votos
O contraste o efeito que permite ressaltar o peso visual de um ou mais elementos ou
zonas de uma composio mediante a oposio ou diferena aprecivel entre elas,
permitindo-nos atrair a ateno de espectador para eles.
O contraste pode ser conseguido atravs de diferentes oposies entre elementos:
Contraste de tons
Obtemos contraste entre elementos que possuem tons (claridade-escurido) opostos.
Neste caso, o maior peso ter o elemento mais escuro, destacando o mais claro sobre ele
com mais intensidade quanto maior for a diferena tonal.
52 de 163
Conforme se diminui a tonalidade do elemento mais escuro o contraste vai perdendo
intensidade, sendo necessrio redimension-lo se quisermos manter o mesmo contraste.
Este tipo de contraste talvez o mais intenso, e muito usado em composies grficas.
Contraste de cores
Dois elementos com cores complementares se reforam entre si, assim como uma cor
quente e outra fria.
O contraste criado entre duas cores ser maior quanto mais afastadas estiverem no
crculo cromtico. As cores opostos contrastam muito, enquanto que as anlogas apenas
fazem, perdendo importncia visual ambas.
53 de 163
Este efeito pode ser usado para dar maior dimenso ou sensao de proximidade a um
elemento em uma composio, situando-o sobre uma cor que contraste com ele.
Este tipo de contraste especialmente indicado para os contedos textuais, nos quais
deve primar pela facilidade de leitura. O ideal ser o texto negro sobre fundo branco, j
que o que mais contraste cria (contraste de tom). Porm, em certos elementos, nos
quais este jogo de cores no for possvel, haver que buscar sempre um texto clido
sobre um fundo frio ou vice-versa.
Contraste de contornos
Os contornos irregulares destacam de forma importante sobre os regulares ou
reconhecveis.
Este tipo de contrastes adequado para dirigir a ateno do usurio a certos elementos
de uma composio ou pgina web, como botes importantes, banners publicitrios, etc.
No obstante, h que ser comedidos em seu uso, sobretudo se se combinam com outros
tipos de contraste, j que podem ser um foco de atrao visual potente demais. Alm
disso, criam muita tenso no espao que lhes rodeia.
54 de 163
Contraste de escala
o produzido pelo uso de elementos a diferentes escalas das normais ou de propores
irreais, conseguindo-se o contraste por negao da percepo aprendida.
Este sistema de contraste no muito usado nas pginas web, onde se busca sempre a
escala adequada, porm sim freqente em fotografia e pintura, conseguindo atrair a
ateno do espectador de forma muito efetiva.
http://www.criarweb.com/artigos/design#e!ilibrado#contraste.html
. design equilibrado. .s agrupamentos
)omo os e"ementos web de'em se agrupar para obter um resu"tado coerente.
Por Luciano Moreno
Publicado em: %/?/?/*
Valorize este artigo:
3 votos
O ser humano, tanto por seu carter racional como por herana cultural, tende a
organizar os elementos que percebe ao redor como conjuntos significativos organizados.
Esta inclinao a agrupar elementos relacionados em um fator que influi de forma notria
na percepo que temos de nosso entorno, do que vemos ao nosso redor.
As composies grficas no escapam a esta tendncia, portanto um correto
agrupamento de seus elementos lhes outorga um carter lgico, racional, que aumenta
seu valor comunicativo.
O agrupamento de nossos elementos grficos e textuais pode se basear em diferentes
critrios:
:roCimidadeD Tendemos a agrupar aqueles objetos que esto prximos, mais
pertos entre si.
55 de 163
>emel1anaD Tendemos a agrupar os elementos iguais ou parecidos.
ContinuidadeD Nossa mente tende a agrupar aqueles elementos que tm uma
continuidade significativa.
>imetriaD Tendemos a agrupar os elementos para que apaream ordenados
formando figuras conhecidas.
No caso concreto das pginas web, os agrupamentos so muito teis e totalmente
necessrios, sobretudo no que diz respeito a elementos similares ou de funcionalidade
anloga, como componentes de menus de navegao, cones, dados relacionados,
botes, etc.
Os agrupamentos tambm so muito teis em casos de formulrios ou fichas de muitos
campos, sendo muito conveniente dividir estes em grupos de informao anloga,
separando logo cada grupo dos demais mediante franjas horizontais ou verticais em
branco.
56 de 163
Com isso, o formulrio no s ganha em beleza visual, como tambm fica mais claro,
lgico w fcil de completar pelo usurio.
http://www.criarweb.com/artigos/design#e!ilibrado#agr!pamentos.html
. design equilibrado. . reticulado
)omo harmoni0ar os b"ocos de conte6do #ue formar!o a composi!o do
desenho.
Por Luciano Moreno
Publicado em: /&??/*
Valorize este artigo:
3 votos
Uma composio grfica deve ser equilibrada no s em contedos, como tambm
visualmente, at tal ponto que podemos dizer que a ordem na disposio espacial dos
elementos da mesma um dos fatores mais importantes para seu sucesso.
O espectador que contempla uma obra grfica (folheto, cartaz trptico ou pgina 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 referncia 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 equilbrio e estabilidade, enquanto que o vertical
facilita a elevao da vista, marcando prioridades ou nveis na composio.
Visto que as composies grficas (e dentro delas, as pginas web) se representam em
suportes planos, fcil deduzir que este sistema de referncia tambm o mais
adequado para a distribuio de seus elementos. Se a isto somamos o carter
eminentemente retangular da maioria dos suportes, obtemos por extenso o sistema de
organizao ideal para nossas composies: o reticulado.
Um reticulado ou rede um sistema de referncia formado por diferentes linhas
horizontais e verticais que marcam a localizao de elementos e zonas em uma
57 de 163
composio grfica, linhas que no tem porqu ter uma representao real (no tm
porqu fazer parte do grafismo), mas sim mental. So as guias imaginrias sobre as que
vamos ir colocando os elementos, a espinha dorsal de uma composio grfica.
Mediante o reticulado, o designer vai situando com harmonia os blocos de contedo que
formaro a composio: zonas principais e secundrias, ttulos e subttulos, blocos de
texto, fotografias, ilustraes, grficos, sistemas de navegao, botes, cones, etc,
dando com isso um estilo prprio visualmente lgico mesma.
Uma composio grfica no um sistema padro, nico, e sim que os mesmos
elementos se podem organizar segundo diferentes esquemas lgicos. Mas sempre
devero estar dispostos segundo uma retcula que lhes traga equilbrio e estabilidade
visual. tarefa do designer buscar o conjunto localizao-reticulado que melhor se
adapte a sua obra.
A localizao de elementos em uma composio segundo um reticulado determinado no
requer a introduo dos elementos finais da mesma. Ou seja, se pode perfeitamente
desenhar a organizao de um grafismo simplesmente com retngulos de cores. Mais
ainda, com retngulos de uma s cor. O que importa no o aspecto visual final, e sim a
organizao lgica e regular dos elementos.
No caso concreto de uma pgina web, o designer pode perfeitamente distribuir em tela
uma srie de retngulos que representem as zonas que vo ter a pgina. Se a
distribuio segue um reticulado conforme as zonas esto localizadas com lgica, a
pgina que resultar disso ter um 50% de possibilidades de ser correta.
58 de 163
(eticulado de 6erra
Esta estrutura lgica criada com o reticulado deve se manter logo em todas as pginas
que formam website, proporcionando com isso consistncia e homogeneidade ao mesmo.
Se definirmos uma separao entre o cabealho de uma formulrio e o incio dos
elementos do mesmo de 15 pixels, todos os formulrios, fichas, textos, etc, que tiverem
cabealho, devem manter o mesmo espao separador. Se definirmos umas margens
vazias entre a pgina que desenharmos e as bordas da janela do navegador de 30 pixels,
todas as pginas do site devem manter constantes essas margens.
(eticulado em um #ormulrio construdo com tabela
Uma vantagem adicional de desenhar um reticulado correto ser a comodidade na hora
de construir depois a pgina com tabelas, j que a estrutura natural destas reticular.
http://www.criarweb.com/artigos/design#e!ilibrado#retic!lado.html
. design equilibrado. .s alin1amentos
4ecessrios para conseguir uma composi!o ordenada e "gica, assim como
para re"acionar e"ementos.
Por Luciano Moreno
Publicado em: '??/*
Valorize este artigo:
3 votos
59 de 163
Uma vez definido o reticulado que vamos usar em nossa composio, deveremos situar
na mesma os elementos grficos e textuais.
Neste ponto aparece o conceito de alinhamento, como a colocao de elementos grficos
e textuais segundo uma linha dada, que geralmente ser horizontal ou vertical.
Geralmente haver vrias linhas guias de alinhamento em uma composio.
Alinhar os elementos uma operao imprescindvel para conseguir uma composio
ordenada e lgica, pois com isso se criam unidades visuais definidas e relaes entre
elementos.
Se o alinhamento importante na hora de situar elementos grficos, ser ainda mais se
se trata de contedos textuais. Efetivamente, os textos perfeitamente alinhados so mais
fceis de ler, no cansam a vista e produzem um efeito de equilbrio que convida
leitura. Ao contrrio, um texto sem alinhamento resulta confuso, difcil de ler,
desmotivando ao espectador.
Tudo o que est sendo falado se acentua ainda mais se o suporte uma pgina 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 pginas com um importante nmero de
elementos, por isso se a disposio dos mesmos no for perfeitamente regular ser
muito difcil criar uma composio aceitvel.
Os alinhamentos horizontais so imprescindveis para conseguir um desenho em nveis
estveis, j que as linhas horizontais sugerem equilbrio. Como podemos ter blocos
lgicos de diferente altura, estes alinhamentos se definiro desde as bordas superiores
dos blocos.
0lin1amentos 1ori8ontais em ;res9as
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.
60 de 163
0lin1amentos de teCtos esquerda
Os alinhamentos centralizados so 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 no for assim, prefervel optar pelo
alinhamento esquerda.
;lementos centrali8ados em uma tabela
Quanto aos alinhamentos direita, so pouco freqentes, j que criam tenses visuais
na maioria dos casos. Podem-se usar naqueles blocos cujo contedo deva se adaptar a
um reticulado que defina uma linha vertical direita do mesmo, como ocorre em muitos
menus de navegao situados esquerda da pgina.
Tambm so teis nas colunas das tabelas que contiverem dados que devam seguir uma
ordenao lgica a direitas, como o caso de dados de moeda.
0dequando o alin1amento ao tipo de dados de cada campo
Existe outro tipo de alinhamento para textos, o justificado, no qual todas as linhas de
texto tm a mesma largura, por isso ficam alinhadas tanto a esquerda quanto a direita, o
que se consegue aumentando ou diminuindo o espaado normal das letras. Este tipo de
alinhamento muito usado nos livros e jornais, porm nas pginas web h que aplic-lo
com precauo, destinando-o somente a blocos textuais de pouco largura (textos
distribudos em vrias colunas, por exemplo).
61 de 163
Por ltimo, vale dizer que se os alinhamentos so imprescindveis, podem originar
monotonia visual se forem seguidos ao p da letra, ao produzir pginas quadradas e
artificiais demais. Por isso, bom introduzir alguns elementos que, sem romper o
reticulado e os alinhamentos bsicos, introduzam um pouco de variedade visual, de
frescor no desenho. Buscar o equilbrio entre alinhamentos e elementos que as rompam
uma das tarefas principais do web designer.
http://www.criarweb.com/artigos/design#e!ilibrado#alinhamentos.html
. design equilibrado. 0s simetrias
&utro condicionante para #ue o design da web tenha uma organi0a!o natura".
Por Luciano Moreno
Publicado em: ?$?/*
Valorize este artigo:
3 votos
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.
62 de 163
O Homem pretendeu imitar este desenho simtrico natural em todos e cada um de seus
aspectos criadores, desde os primeiros objetos de artesanato at os modernos
automveis.
Se partirmos desta base, devemos aceitar que a busca de uma simetria estrutural,
grfica e textual deve ser uma das primeiras metas de todo web designer, j que confere
s composies de uma organizao natural a qual o espectador est acostumado.
Por definio, uma forma ou imagem simtrica quando um eixo central pode dividi-la
em duas partes iguais e opostas entre si. Este conceito, aplicado a uma composio
grfica pode se aplicar tanto aos prprios elementos individuais da mesma como a sua
totalidade. Neste caso, obter uma simetria exata pode resultar difcil (inclusive
inconveniente), porm sim que podemos buscar uma simetria de blocos e espaamentos
em nossa rede.
O design simtrico sugere estabilidade, equilbrio, resultando esttico, ordenado, atrativo
e agradvel de contemplar. Do contrrio, o assimtrico mostra irregularidade,
desigualdade nas formas e desequilbrio.
H que ter em conta que a simetria usada no deve de ser de todo exata, j que a
simetria perfeita no natural, "perfeita" demais, vale a redundncia, fazendo aparecer
as composies artificiais e pr-meditadas. Pequenas variaes na distribuio simtrica
do esse toque de ruptura que torna sua contemplao mais amena e natural.
No caso de uma pgina web, a concepo simtrica da mesma comea com o reticulado
escolhido, j que ser o que define a distribuio bsica de elementos nela. H que
tender ento a desenhar um reticulado o mais simtrico possvel.
63 de 163
Uma forma aceitada de romper o esquema simtrico de uma pgina criar blocos
entortados visualmente para um lado, alternando-os na pgina de forma inversa, ou
seja, o primeiro mais torto direita, o segundo mais esquerda, etc. Outra tcnica o
uso de um nico menu lateral de navegao, que descompensa o peso visual para a zona
na qual se encontra.
Se na disposio de blocos no reticulado podemos ser algo permissivos, nos contedos
de nossas pginas a simetria deve ser uma norma quase inflexvel, sobretudo na
construo de certos elementos. misso fundamental de todo designer ser capaz de
construir contedos simtricos sem que paream rgidos, artificiais.
Exemplos claros desta regra so a criao de formulrios 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 "parea" no s-lo.
Distribuio simHtrica em uma #ic1a
Em relao aos textos, se nossa pgina eminentemente textual, e em textos de uma s
linha, como esta que vocs tm adiante, o contedo ser simtrico por prpria
construo. Porm, se desejarmos distribuir o contedo em vrias colunas, deveremos
prestar especial ateno a que estas sejam equilibradas, evitando o remarcado forte de
pores de texto ou de uma ou mais colunas mediante cores de fundo, textos em
negrito, etc.
64 de 163
Colunas teCtuais 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 pgina.
Entendemos por "ar" o espao livre que fica entre elementos e entre estes e os limites da
pgina. o que em qualquer documento chamamos "margens", porm estendido a todos
os elementos e contedos.
Se nossa pgina tem um espao livre entre sua margem esquerda e o primeiro contedo
por esse lado, o mesmo ar deve ficar entre a margem direita e o contedo por esse lado.
Igualmente, os espaos livres entre os elementos internos da pgina devem ser
simtricos e iguais, buscando com isso o equilbrio na composio.
Este conceito aplicvel a todos e cada um dos elementos de nossas pginas. Assim, se
temos uma lista de contedos, podemos criar uns espaos entre cada 5-7 elementos, que
evitaro a sensao de opresso produzida quando as listas tm muitos elementos.
Ento, deveremos repetir este espao separador constantemente ao longo da lista.
Da mesma forma, quando trabalhamos com formulrios muito importante desenh-los
de tal forma que o ar que fique entre os diferentes elementos que o formem seja
simtrico, criando um total claro e harmonioso.
65 de 163
E o mesmo podemos dizer dos demais elementos de nossa pgina: ares simtricos, bem
repartidos, equilibrados.
http://www.criarweb.com/artigos/design#e!ilibrado#simetrias.html
. design equilibrado. . equilbrio entre conte5dos
A organi0a!o espacia", primordia" para atrair ao usurio.
Por Luciano Moreno
Publicado em: -?$?/*
Valorize este artigo:
5 votos
Em toda composio deve existir um adequado equilbrio entre os diferentes elementos
que a formam se quisermos atrair a ateno do espectador e mant-la at que tenha
assimilado a mensagem que quisermos lhe transmitir.
Para isso, imprescindvel manter em nossa obra grfica uma correta organizao
espacial de contedos grficos e textuais, assim como umas quantidades adequadas de
cada um deles.
Os componentes grficos contribuem composio sensaes visuais por meio de
formas, cores e contrastes, enquanto que os textos fornecem informao, mensagens,
embora isto no queira dizer que estas funcionalidades sejam excludentes, j que os
grficos podem trazer informao e os textos formas e cores (de fato, a Tipografia uma
ferramenta de desenho excelente).
As composies formadas por muitos elementos grficos e pouco ou nenhum contedo
textual podem criar rejeio naqueles espectadores que buscam o contedo substancial
na obra, a informao prtica que oferece. Este contedo textual especialmente
importante nas pginas web, j que os usurios comparecem a um site buscando sempre
algum tipo de informao, abandonando-o rapidamente se no encontrar algum estmulo
informativo que lhe motive.
No lado ao contrrio, as composies nas quais se introduz um contedo eminentemente
textual, com pouco ou nenhum contedo grfico, costumam ser rejeitadas pelo
espectador, que encontra tremendamente montona e entediada uma obra que aparece
vista como uma mancha de cor indiferenciada, que exige ademais um elevado nvel de
concentrao e muito tempo para resultar til. Necessitamos ento introduzir sensaes
visuais grficas que motivem ao espectador a investigar o contedo textual.
66 de 163
No caso das pginas web, os tipos de contedos a oferecer aumentam consideravelmente
com respeito aos de uma composio sobre papel j que podemos incluir nelas no s
grficos e textos, como tambm udios, animaes, vdeo, applets de Java, etc. Isto
torna necessrio um planejamento correto dos elementos a incluir em uma pgina, com
objetivo de despertar a ateno do usurio, sim, mas oferecendo-lhe sempre informao
relevante e nunca sobrecarregando de elementos suprfluos.
Ademais, devido s limitaes prprias dos sistemas informticos, da linguagem HTML,
dos navegadores web e das conexes Internet, o equilbrio entre contedos deve
contemplar tambm que o resultado final se possa visualizar corretamente.
De nada serve uma pgina com grficos maravilhosos e animaes espetaculares se o
usurio deve esperar um minuto para poder v-las. mais, ele na verdade nunca
esperar esse minuto.
portanto prefervel organizar as pginas 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 grficos em uma pgina.
melhor sempre ter duas pginas leves e equilibradas a uma recarregada de elementos
incapazes de reter a ateno do usurio no verdadeiramente importante: a mensagem
que desejamos transmitir.
67 de 163
http://www.criarweb.com/artigos/e!ilibrio#entre#conte!dos.html
. design equilibrado. 0 1ierarquia visual
A organi0a!o guia ao usurio na contemp"a!o de uma pgina web.
Por Luciano Moreno
Publicado em: /%??/+
Valorize este artigo:
5 votos
Em toda composio grfica 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 informao contida na composio de forma
organizada, lgica e confivel, que dirija sua percepo pela rota mais ideal.
A pessoa que contempla uma obra grfica aprecia em primeiro lugar um conjunto
completo de formas e cores, com os elementos situados em primeiro plano contrastando
com o fundo da composio. S depois desta primeira observao global, e se sua
curiosidade tiver sido despertada, o espectador comear a analisar as partes individuais
do todo, comeando pelos elementos grficos puros, e continuando logo com os
elementos textuais, mais difceis de interpretar, j que h que l-los palavra por palavra.
68 de 163
Nos pases 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
comeamos pela parte esquerda de sua cabea).
Isto pode ser aproveitado para organizar o contedo de uma composio logicamente,
situando nela os elementos mais importantes na zona superior esquerda da mesma, as
seguintes em importncia na lateral esquerda, as seguintes no corpo central e as menos
relevantes na parte inferior.
Esta forma de proceder comum no s em folhetos, documentos ou cartazes
publicitrios criados com um design clssico, assim como nas pginas web, que seguem
esta estrutura hierrquica em 95% dos sites, que, ademais, so os que melhor aceitao
tem pelo pblico.
69 de 163
Iierarquia visual por posicionamento em pgina web
Outro sistema de estabelecer uma hierarquia nos contedos o uso de cores. Podemos
enfatizar certas zonas da composio usando nelas cores primrias muito saturadas, que
atraem de forma irresistvel a ateno 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 no 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, secundrias
ou tercirias, sendo uma boa opo aquelas presentes na natureza, j que so mais
naturais e melhor aceitas pelos espectadores. Por ltimo, as zonas menos importantes
podemos no colori-las ou faz-lo muito sutilmente, para que no atraia em excesso o
olhar.
Esta variao cromtica no nica, j que se pode usar qualquer jogo de cores que
consiga estabelecer uma hierarquia visual adequada.
Tambm podemos percorrer na hora de estabelecer categorias de importncia visual aos
contrastes. Se situarmos prximas ou sobrepostas duas zonas de cores complementares
ou que contrastem muito, a importncia de ambas na composio se refora, sobretudo
se as zonas de contraste no forem muitas.
70 de 163
Iierarquia visual por contrastes de cores @a8ul, laranGa e brancoA
Sendo ao contrrio, se as zonas so de cores anlogas, pertencentes a uma mesma
gama, a importncia de ambas se diminui mesmo sendo cores vivas, j que se
distinguir uma zona de atrao, porm seus elementos aparecero esfumados, pouco
relevantes.
Quanto aos elementos textuais, aos que tambm so aplicveis os mtodos de cor e
contraste, podemos estabelecer uma hierarquia neles mediante os tamanhos relativos
dos mesmos. Os ttulos de pgina, os cabealhos ou os titulares de uma notcia ou seo
podem ser destacados aumentando seu tamanho segundo sua importncia na
composio ou pgina web. Este mtodo sempre aconselhvel, j que organiza de
forma lgica o contedo textual e rompe a monotonia intrnseca dos textos.
Iierarquia visual em elementos teCtuais
Um elemento a evitar sempre em uma composio, salvo que nos convenha seu uso, so
os enfeites grficos visualmente impactantes, como zonas de cor intensa sem sentido,
cones que destaquem em excesso, linhas horizontais escandalosas, animaes que
tragam pouca informao, etc. Sua presena atrai a vista do espectador, sem lhe
oferecer nada em troca e desvia seu interesse dos elementos textuais e grficos que sim
trazem verdadeira informao.
Isto no quer dizer que no possam se empregar. So s vezes muito teis para romper
71 de 163
a monotonia de uma composio introduzindo nela elementos que proporcionem frescor
visual, porm devem ser usados sempre com moderao.
Os tamanhos excessivamente grandes nos textos tambm um fator a ter em conta. Um
cabealho de pgina ou de seo deve destacar o suficiente sobre o resto do contedo
textual, porm nunca devem ser desproporcionadas nem atrair em excesso a ateno do
usurio. Quanto abundncia deles, h que ter sempre em conta que um par de
cabealhos de maior tamanho estabelece uns nveis de importncia convenientes, porm
uma multido de textos de grande tamanho acrescenta confuso a uma composio, j
que o usurio perde as referncias sobre o que importante na mesma.
(esumindoD muito importante estabelecer uma organizao hierrquica dos contedos
de nossa composio, podendo-se usar para isso diferentes tcnicas de design, porm
tendo em conta que o mal uso ou o abuso delas pode converter a composio em algo
que no desperta interesse do usurio ou transforma-se em uma "palhaada", onde tudo
escandaloso e nada se destaca de forma clara.
http://www.criarweb.com/artigos/design#e!ilibrado#hierar!ia#$is!al.html
6eoria da cor. "ntroduo
7 uma parte fundamenta" da web, produtor de sensa$es.
Por Luciano Moreno
Publicado em: &??/+
Valorize este artigo:
3 votos
Estamos rodeados de cores. Estas fazem parte da prpria, 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
impresses de cor por meio de nossa vista, e estas impresses tm a faculdade de nos
excitar, de nos tranqilizar, 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 espao e muito pouco tempo para poder
72 de 163
expressar a alma de nosso site e captar adequadamente a ateno de nossos visitantes,
e a cor a primeira forma de comunicao entre uma pgina web e o usurio.
Est demonstrado que os nove primeiros segundos nos quais uma pessoa contempla
nossa pgina so cruciais, e deles depende que esta continue com agrado navegando por
nosso site, o faa com indiferena ou nos abandone. E do que v nestes segundos, o que
talvez mais chame e capte sua ateno seja a distribuio e a gama de cores de nossa
pgina.
Esta importncia da cor se estende a todas as artes, um pintor, por exemplo, dispe de
muito mais tempo que ns para se expressar com a cor. Este tambm conta com um
leque de cores quase infinito, enquanto que ns, 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).
73 de 163
Neste captulo veremos um pouco o mundo da cor em geral, sua aplicao ao design
grfico e as restries que vamos ter na hora de trabalhar com cores no design de um
web site.
http://www.criarweb.com/artigos/teoria#da#cor#introd!cao.html
6eoria da cor. 7ature8a da cor
*escri!o forma" da cor como um fen8meno f%sico.
Por Luciano Moreno
Publicado em: $%??/+
Valorize este artigo:
2 votos
6eoria da cor. 7ature8a da cor
Podemos ver as cosas que nos rodeiam porque A Terra recebe a luz do Sol. Nossa estrela
me nos inunda constantemente com sua luz, e graas a ela tambm possvel a vida
em nosso planeta.
A luz do Sol est formada em realidade por um amplo espectro de radiaes
eletromagnticas de diferentes longitudes de onda, formando um espectro contnuo de
radiaes, que compreende desde longitudes de onda muito pequenas, de menos de 1
picmetro (raios csmicos), at longitudes de onda muito grandes, de mais de 1
kilmetro.
74 de 163
O ser humano somente capaz de visualizar um subconjunto delas, as que vo desde
380 (violeta) a 780 nanmetros (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 emisso). A soma de todos as
cores (longitudes de onda) d como resultado a luz branca, sendo a cor preta ou a
obscuridade, a ausncia 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.
75 de 163
http://www.criarweb.com/artigos/teoria#da#cor#nat!re%a#da#cor.html
6eoria da cor. 0 percepo da cor
)omo o o"ho pode detectar e c"assificar as cores #ue chegam.
Por Luciano Moreno
Publicado em: %??/+
Valorize este artigo:
3 votos
Bem, j sabemos de onde vm as cores, porm como o olho humano pode ver estas
ondas e distingui-las umas de outras? A resposta a esta questo se encontra no olho
humano, basicamente uma esfera de 2 cm de dimetro que percorre a luz e a enfoca em
sua superfcie posterior.
No fundo do olho existem milhes de clulas especializadas em detectar as longitudes de
onda procedentes de nosso ambiente. Estas maravilhosas clulas, principalmente os
cones e os bastonetes, percorrem as diferentes partes do espectro de luz solar e as
transformam em impulsos eltricos, que so enviados logo ao crebro atravs dos nervos
pticos, sendo este o encarregado de criar a sensao da cor.
Os cones se concentram em uma regio prxima do centro da retina chamada fvea. Sua
distribuio segue um ngulo ao redor de 2 contados desde a fvea. A quantidade de
cones de 6 milhes e alguns deles tm uma terminao nervosa que vai ao crebro.
Os cones so os responsveis da viso da cor e acredita-se que h trs tipos de cones,
sensveis as cores vermelho, verde e azul, respectivamente. Dada sua forma de conexo
76 de 163
s terminaes nervosas que se dirigem ao crebro, so os responsveis da definio
espacial. Tambm so pouco sensveis intensidade da luz e proporcionam viso fotpica
(viso a altos nveis).
Os bastonetes se concentram em zonas afastadas da fvea e so os responsveis da
viso escotpica (viso a baixos nveis). Os bastonetes compartilham as terminaes
nervosas que se dirigem ao crebro, sendo portanto, sua colaborao definio espacial
pouco importante. A quantidade de bastonetes se situa ao redor de 100 milhes e no
so sensveis cor. Os bastonetes so muito mais sensveis que os cones intensidade
luminosa, por isso contribuem viso da cor aspectos como o brilho e o tom, e so os
responsveis da viso 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
clulas 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 saturao de informao no
crebro desta cor, originando uma sensao de irritao nas pessoas.
Quando o sistema de cones e bastonetes de uma pessoa no o correto se podem
produzir uma srie de irregularidades na apreciao da cor, assim como as partes do
crebro encarregadas de processar estes dados esto prejudicadas. Esta a explicao
de fenmenos como o Daltonismo. Uma pessoa daltnica no aprecia as gamas de cores
em sua justa medida, confundindo os vermelhos com os verdes.
77 de 163
Devido a que o processo de identificao de cores depende do crebro e do sistema
ocular de cada pessoa em concreto, podemos medir com toda exatido a longitude de
onda de uma cor determinada, porm 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 interpretaes de uma cor cmo quantas
pessoas h.
Na verdade, o mecanismo de mescla e produo de cores produzido pela reflexo da luz
sobre um corpo diferente ao da obteno de cores por mescla direta de raios de luz,
como ocorre com o do monitor de um computador, porm a grandes traos e a nvel
prtico so suficientes os conceitos estudados at agora.
http://www.criarweb.com/artigos/teoria#da#cor#percepcao#da#cor.html
6eoria da cor. 9odelos de cor
*escri!o dos tipos de cor conhecidos, assim como se aborda uma
exp"ica!o de como os ob/etos ad#uirem as cores.
Por Luciano Moreno
Publicado em: $?$?/+
Valorize este artigo:
3 votos
As cores obtidas diretamente naturalmente por decomposio da luz solar ou
artificialmente mediante focos emissores de luz de uma longitude de onda determinada
se denominam cores aditivas.
No necessria a unio de todas as longitudes do espectro visvel para obter o branco,
j que se misturarmos s o vermelho, verde e azul obteremos o mesmo resultado. por
isso que estas cores so denominadas cores primrias, porque a soma das trs produz o
branco. Ademais, todas as cores do espectro podem ser obtidas a partir delas.
As cores aditivas so as usadas em trabalho grfico com monitores de computador, j
que, segundo vimos quando falamos dos componentes grficos de um computador, o
monitor produz os pontos de luz partindo de trs tubos de raios catdicos, um vermelho,
outro verde e outro azul. Por este motivo, o modelo de definio de cores usado em
trabalhos digitais o modelo RGB (Red, Green, Blue).
78 de 163
Todas as cores que se visualizam no monitor esto em funo 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 (notao decimal) ou entre 00 e FF (notao 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 so os valores RGB, mais claros so 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 notao RGB decimal e #FF0000 em
notao RGB hexadecimal, enquanto que a cor rosa claro dada em notao decimal por
(252,165,253) se corresponde com a cor hexadecimal #FCA5FD.
Esta forma aditiva de perceber a cor no nica. Quando a luz solar choca contra a
superfcie de um objeto, este absorve diferentes longitudes de onda de seu espectro
total, enquanto que refletem outras. Estas longitudes de onda refletidas so
precisamente as causadoras das cores dos objetos, cores que por ser produzidas por
filtragem de longitudes de onda se denominam cores subtrativas.
Este fenmeno 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
ausncia de luz e de cor.
Nesta concepo subtrativa, as cores primrias so outras, concretamente o cian, o
magenta e o amarelo. A partir destas trs cores podemos obter quase todas as demais,
salvo o branco e o negro.
79 de 163
Efetivamente, a mescla de pigmentos cian, magenta e amarelo no produz a cor branca,
e sim uma cor cinza sujo, neutro. Quanto ao negro, tampouco possvel obt-lo a partir
dos primrios, sendo necessrio inclu-lo no conjunto de cores bsicas 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
injeo de tinta ou uma imprensa comercial de quadricomia. A cor da superposio 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 notao 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 expresso
(C,M,Y,K), na que figuram os tantos por cento que a cor possui dos componentes bsicos
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 so usadas em pintura, imprensa e, em geral, em todas aquelas
composies nas que as cores se obtm mediante a reflexo da luz solar em mesclas de
pigmentos (tintas, leos, aquarelas, etc.). Nestas composies se obtm 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 composio que devam ser brancas (imprensa).
80 de 163
Os sistemas RGB, CMYK se encontram relacionados, j que as cores primrias de um so
os secundrios do outro (as cores secundrias so as obtidas por mescla direta das
primrias).
Outros modelos de definio da cor o modelo HSV, que define as cores em funo dos
valores de trs importantes atributos destes, matiz, saturao e brilho.
O matiz (Hue) faz referncia cor como tal, por exemplo, o matiz do sangue vermelho.
A saturao ou intensidade indica a concentrao de cor no objeto. A saturao de
vermelho de um morango maior que a do vermelho de uns lbios. 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 referncia 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 definio de cores, sendo o mais
conhecido deles o sistema Pantone.
81 de 163
Criado em 1963 e buscando um padro para a comunicao e reproduo de cores nas
artes grficas, seu nome completo Pantone Matching System, e se baseia na edio de
uma srie de catlogos sobre diversos substratos (superfcies a imprimir), que
subministram uma codificao padronizada mediante um nmero de referncia e uma cor
especfica.
http://www.criarweb.com/artigos/teoria#da#cor#modelos#de#cor.html
6eoria da cor. 6ipos de cor
4este cap%tu"o descre'eremos como a partir das cores primrias se podem
conseguir outras, e dependendo das tona"idades fa0er diferentes
c"assifica$es.
Por Luciano Moreno
Publicado em: $?$?/+
Valorize este artigo:
3 votos
O sistema de definio de cores aditivas RGB, usado em design grfico digital e em web
design, parte de trs cores primrias, vermelho, verde e azul, a partir das quais
possvel obter todas as demais de espectro.
82 de 163
Assim, por mescla direta das cores primrias obtemos as cores secundrias, cian,
magenta e amarelo, e por mescla direta destas as cores tercirias.
Se continuarmos misturando cores vizinhas iremos obtendo novas cores, conseguindo
uma representao destas muito importante no design, denominada crculo cromtico,
representativa da decomposio em cores da luz solar, que nos ajudar a classificar
estas e a obter suas combinaes ideais.
Partindo do crculo cromtico podemos estabelecer diferentes classificaes das cores,
entre as que destacam:
Cores em clidos e #rios
83 de 163
As cores clidas do sensao de atividade, de alegria, de dinamismo, de confiana e
amizade. Estas cores so o amarelo, o vermelho, o laranja e a prpura em menor
medida.
As cores frias do sensao de tranqilidade, de seriedade, de distanciamento. Cores
deste tipo so o azul, o verde, o azul esverdeado, o violeta, cian, aqua, e s vezes o
celeste. Uma cor azul aquoso perfeita para representar superfcies metlicas. 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 suGas e as cores pastel
84 de 163
Obtidos quando se aumenta ou diminui a luminosidade de todo o crculo cromtico. As
cores apagadas expressam obscuridade, morte, seriedade, enquanto que as cores pastel
sugerem luz, frescor e naturalidade.
Bama de cin8as
So cores neutras, formadas por igual quantidade de vermelho, verde e azul.
As cores cinza tm toda uma expresso RGB hexadecimal do tipo #QQQQQQ, ou seja, os
seis caracteres iguais.
O cinza so cores ideais para expressar seriedade, ambigidade, elegncia, 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 enrgicas e extrovertidas, enquanto que as das
partes baixas (verdes, azuis, prpuras) costumam parecer mais tranqilas e
introvertidas. Os verdes e os azuis se percebem acalmados, relaxados e tranqilizantes.
Por sua vez, os vermelhos, laranjas, e amarelos so percebidos como cores clidas,
enquanto que os azuis, verdes e violetas so considerados cores frias. As diferentes
tonalidades tambm produzem diferentes impresses de distncia: um objeto azul ou
verde parece mais distante que um vermelho, laranja ou marrom.
85 de 163
NOTA: H que ter em conta sempre que a percepo de uma cor depende em grande
medida da rea ocupada pela mesma, sendo muito difcil apreciar o efeito de uma cor
determinada se esta se localiza em uma zona pequena, sobretudo se estiver rodeada de
outras cores.
http://www.criarweb.com/artigos/teoria#da#cor#tipos#de#cor.html
6eoria da cor. :ropriedades das cores
As cores t3m umas propriedades inerentes #ue "hes permite se distinguir de
outras e gra'ar diferentes defini$es de tipo de cor.
Por Luciano Moreno
Publicado em: $+?$?/+
Valorize este artigo:
3 votos
Toda cor possui uma srie de propriedades que lhe fazem variar de aspecto e que
definem sua aparncia final. Entre estas propriedades cabe distinguir:
9ati8 @IueA
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 crculo cromtico, pelo qual o verde
amarelado e o verde azulado sero matizes diferentes do verde.
As 3 cores primrias representam as 3 matizes primrias, e mesclando estes podemos
obter as demais matizes ou cores. Duas cores so complementares quando esto uma
frente outra no crculo de matizes (crculo cromtico).
>aturao ou "ntensidade
Tambm 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 esto completamente
86 de 163
saturadas. Uma cor intensa muito viva. Quanto mais se satura uma cor, maior a
impresso de que o objeto est se movendo.
Tambm pode ser definida pela quantidade de cinza que contm uma cor: quanto mais
cinza ou mais neutra for, menos brilhante ou menos "saturada" . Igualmente, qualquer
mudana feita a uma cor pura automaticamente baixa sua saturao.
Por exemplo, dizemos "um vermelho muito saturado" quando nos referimos a um
vermelho puro e rico. Porm, quando nos referimos aos tons de uma cor que tem algum
valor de cinza, as chamamos de menos saturadas. A saturao da cor se diz que mais
baixa quando se adiciona seu oposto (chamado complemento) no crculo cromtico.
Para no 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 saturao
medida que se adiciona branco e se converta em celeste.
Outra forma de no saturar uma cor, mistur-la com seu complemento, j que produz
sua neutralizao. Baseando-se nestes conceitos podemos definir uma cor neutra como
aquela na qual no se percebe com clareza sua saturao. A intensidade de uma cor est
determinada por seu carter de claro ou apagado.
87 de 163
Esta propriedade sempre comparativa, j que relacionamos a intensidade em
comparao com outras coisas. O importante aprender a distinguir as relaes de
intensidade, j que esta muitas vezes muda quando uma cor est rodeada por outra.
Jalor ou Fril1o @JalueA
um termo que se usa para descrever que to 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 padro.
uma propriedade importante, j que vai criar sensaes espaciais por meio da cor.
Assim, pores de uma mesma cor com fortes diferenas de valor (contraste de valor)
definem pores diferentes no espao, enquanto que uma mudana gradual no valor de
uma cor (gradao) dar a sensao de contorno, de continuidade de um objeto no
espao.
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. Tambm denominado tom, diferente cor, j que se obtm 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 obtm
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 relao mesma
quantidade de branco ou preto que contenha segundo cada caso.
A descrio clssica dos valores corresponde a claro (quando contm quantidades de
branco), mdio (quando contm quantidades de cinza) e escuro (quando contm
quantidades de preto). Quanto mais brilhante for a cor, maior ser a impresso de que o
objeto est mais perto do que em realidade est.
Estas propriedades da cor deram lugar a um sistema especial de representao destes,
tal como vimos na seo anterior, sistema HSV. Para expressar uma cor neste sistema se
parte das cores puras, e se expressam suas variaes nestas trs propriedades mediante
um tanto por cento.
88 de 163
Podemos usar estas propriedades na busca das gamas e contrastes de cores adequadas
para nossas pginas, sendo possvel criar contrastes no matiz, na saturao e no brilho,
e talvez este ltimo o mais efetivo.
Brupos de cores
Com estes conceitos em mente e tomando como base a roda de cores podemos definir os
seguintes grupos de cores, que nos criaro boas combinaes em uma pgina web:
Cores acromticas: aquelas situadas na zona central do crculo cromtico, prximos ao
centro deste, que perderam tanta saturao que no se aprecia nelas o matiz original.
Colores cromticas cinzas: situadas perto do centro do crculo cromtico, porm fora da
zona de cores acromticas, nelas se distingue o matiz original, embora muito pouco
saturado.
89 de 163
Colores monocromticas: variaes de saturao de uma mesma cor (matiz), obtidas por
deslocamento desde uma cor pura at o centro do crculo cromtico.
Cores complementares: cores que se encontram simtricas com respeito ao centro da
roda. O Matiz varia em 180 entre um e outro.
90 de 163
Cores complementares prximas: tomando como base uma cor na roda e depois outras
dois que eqidistem do complementar do primeiro.
Duplos complementares: dois pares de cores complementares entre si.
Trades complementares: trs cores eqidistantes tanto do centro da roda, como entre si,
ou seja, formando 120 uma da outra.
Gamas mltiplas: escala de cores entre duas seguindo uma graduao uniforme. Quando
as cores extremas esto muito prximas no crculo cromtico, a gama originada
conhecida tambm com o nome de cores anlogas.
91 de 163
Mescla brilhante-tnue: escolhe-se uma cor brilhante pura e uma variao tnue de seu
complementar.
Todos estes grupos de cores formam paletas harmnicas, aptas para ser usadas em
composies grficas.
http://www.criarweb.com/artigos/teoria#da#cor#propriedades#das#cores.html
6eoria da cor. Contrastes de cor
& contraste um fen8meno com o #ua" se podem diferenciar cores
atendendo 9 "uminosidade, 9 cor de fundo sobre a #ua" se pro/etam...
Por Luciano Moreno
Publicado em: /?%?/+
Valorize este artigo:
3 votos
92 de 163
Vimos no tema sobre o design equilibrado que o contrate entre elementos era um
aspecto importante na hora de criar uma composio grfica, 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
diferenas entre ambas. O contraste aumenta quanto maior for o grau de diferena e
maior for o grau de contacto, chegando a seu mximo contraste quando uma cor est
rodeada por outra.
O efeito de contraste recproco, j que afeta s duas cores que intervm. Todas as
cores de uma composio sofrem a influncia das cores com as que entram em contato.
Existem diferentes tipos de contrastes:
Contraste de luminosidade
Tambm 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 recomendvel para contedos textuais, que devem
destacar com clareza sobre o fundo.
Contraste de valor
Quando se apresentam dois valores diferentes em contraste simultneo, o mais claro
parecer mais alto e o mais escuro, mais baixo.
93 de 163
Por exemplo, ao colocar dois retngulos grens, um sobre fundos esverdeados e o outro
sobre fundo laranja, veremos mais claro o situado sobre fundo esverdeado.
A justaposio de cores primrias exalta o valor de cada um.
Contraste de saturao
Origina-se da modulao de um tom puro, saturando-o com branco, negro ou cinza. O
contraste pode se dar entre cores puras ou ento pela confrontao destes com outros
no puros.
As cores puras perdem luminosidade quando se adiciona preto, e variam sua saturao
mediante a adio 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 trs retngulos com diferentes
saturaes de amarelo, contrastar sempre o mais puro.
Contraste de temperatura
o contraste produzido ao confrontar uma cor clida com outra fria.
94 de 163
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 clido com respeito a um azul e frio com
respeito a um vermelho. E tambm um mesmo amarelo pode ser mais clido se estiver
rodeado de cores frias, e menos clidas se o rodeiam com vermelho, laranja, etc.
Contraste de complementares
Duas cores complementares so as que oferecem juntas melhores possibilidades de
contraste, embora resultem muito violentas visualmente combinar duas cores
complementares intensas.
Para conseguir uma harmonia convm que um deles seja a sua cor pura, e a outra esteja
modulado com branco ou preto.
Contraste simult3neo
o fenmeno segundo o qual nosso olho, para uma cor dada, exige simultaneamente a
cor complementar, e seno der, ele mesmo a produz.
A cor complementar engendrada no olho do espectador possvel v-la, porm no
existe na realidade. devido a um processo fisiolgico de correo no rgo da vista.
95 de 163
.utros contrastes
Uma cor pura e brilhante aplicado em uma grande extenso da pgina costuma ser
irritante e cansativo (especialmente, o amarelo), enquanto que essa mesma cor, usada
em pequenas propores e sobre um fundo apagado pode cria a sensao de dinamismo.
Duas cores claras brilhantes colocadas uma ao lado de outra impactam nossa vista,
produzindo um efeito de rejeio, enquanto que se situamos essas mesmas duas cores
uma dentro da outra o efeito muda completamente, resultando agradvel.
Uma mesma cor pode mudar muito seu aspecto visual dependendo da cor na qual se
encontrar embutida. Este efeito d mudana de aparncia 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 9etamerismo.
Neste exemplo vemos dois quadrados, um de cor de fundo azul, e outro preto, ambos
com um quadrado amarelo dentro. O dois quadrados interiores so do mesmo amarelo,
96 de 163
porm parecem diferentes: no fundo azul se mascara a pureza do amarelo, enquanto que
no fundo preto o amarelo mostra toda sua pureza e frescor.
http://www.criarweb.com/artigos/teoria#da#cor#contrastes#de#cor.html
6eoria da cor. ;studo de algumas cores "
4este cap%tu"o descre'eremos as sensa$es #ue produ0em a"gumas cores
como o 'erme"ho, o 'erde e o a0u", assim como seu poss%'e" uso e seu
significado em uma web.
Por Luciano Moreno
Publicado em: $/?%?/+
Valorize este artigo:
3 votos
Sabe-se bem pelos psiclogos a influncia emocional que desencadeiam as cores no
esprito humano. As respostas emocionais variam enormemente dependendo da cor e da
intensidade desta, assim como das diferentes combinaes de cores que se podem dar.
Normalmente cada cor individual leva associado um conjunto de emoes e associaes
de idias que lhes so "prprias". H que destacar que estas emoes associadas
correspondem cultura ocidental, j que em outras culturas as cores podem expressar
sentimentos totalmente opostos aos acima indicados (por exemplo, no Japo a cor
branca simboliza a morte).
As sensaes que produzem as cores dependem de fatores culturais e ambientais, e
muitas vezes dos prprios prejuzos do usurio. Ademais h que somar a isto que nem
todas as pessoas vem 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 psicolgicas das principais cores e suas
combinaes mais acertadas.
Jermel1o
O vermelho a nica cor brilhante de verdade e pura em sua composio. exultante e
agressiva. o smbolo da paixo ardente e desenfreada, da sexualidade e do erotismo.
uma cor clida associada com o sol e o calor, de tal maneira que possvel se sentir mais
aquecido em um ambiente pintado de vermelho, embora objetivamente a temperatura
no tenha variado. Seu nome procede do latim "russus".
97 de 163
O vermelho a cor do sangue, da paixo, da fora bruta e do fogo. Utiliza-se nas festas
do Esprito Santo, iluminando a chama do amor divino, e nas festas de Semana Santa e
Pentecostes.
Cor fundamental, ligada ao princpio da vida, sugere vitalidade, entusiasmo, paixo,
agitao, fora, sexo, calor, fogo, sangue, amor, audcia, valor, coragem, clera,
crueldade, intensidade e virilidade, estando associado com sentimentos enrgicos, com a
excitao apaixonada ou ertica. a cor mais sensual de todo o crculo cromtico.
Tambm sugere alarme, perigo, violncia, ira e aborrecimento. Muitos animais e plantas
usam o vermelho para indicar sua periculosidade, e o homem o utiliza em todo tipo de
indicaes de proibio e perigo.
98 de 163
O vermelho uma cor controvertida, podendo ser atrativa e sedutora como uns lbios de
mulher pintados lbios de mulher pintados ou desencadear nojo ou enjo, como quando
se contempla uma poa de sangue.
Em uma composio pode ser usado para chamar a ateno, para incitar uma ao ou
para marcar os elementos mais importantes de uma composio ou pgina web, porm
quando usado em grande quantidade cansa a vista em excesso.
Um problema associado ao uso da cor vermelha a m gradao que oferece, j que ao
modificar suas propriedades vamos obtendo cores rosadas, pouco aptas para seu uso na
web.
Uma possvel soluo a este problema deslocarmos no crculo cromtico para os
violetas ou para os laranjas, ou seja, usar o vermelho como centro da gama e completar
esta com suas cores anlogas.
99 de 163
Outra boa forma combinar o vermelho cinza e com as cores de sua trade. Quanto ao
seu complementar, o verde, embora contraste muito bem com ele, juntos no criam um
efeito visual adequado.
Jerde
O verde a cor mais tranqila e sedativa de todas. a cor da calma indiferente: no
transmite alegria, tristeza ou paixo. Seu nome deriva do latim "viridis" (que tem seiva).
Est associado a conceitos como Natureza, sade, dinheiro, frescor, crescimento,
abundancia, fertilidade, plantas, bosques, vegetao, primavera, frescor, esmeralda,
honra, cortesia, civismo e vigor. O verde que tende ao amarelo cobra fora ativa e
soleada; se nele predominar o azul ser mais sombrio e sofisticado.
Significa a esperana, os bens que ho de vir, o desejo de vida eterna. a cor prpria do
ano eclesistico e de grande nmero de festas, assim como de certos domingos antes de
Pentecostes.
Sua paleta de variaes rica em cores aproveitveis para o design grfico e a web.
100 de 163
Dizem que a cor mais descansada para o olho humano e que tem poder de cura ( ser
por isso que o uniforme dos cirurgies so verdes?).
uma cor contraditria, pois a muitas pessoas lhes influi um carter desagradvel,
enquanto qu a outras lhes sugere mais paixo que o vermelho.
101 de 163
Nas composies grficas e pginas web d um bom jogo. Seus degrades so bons e
suas variaes de tons tambm, formando gamas apropriadas para desenho.
Seu complementar o vermelho e, embora contrastem muito bem, no costumam fazer
boa combinao. Com seus anlogos e sua trade possvel obter paletas aceitveis para
uma pgina web.
08ul
A cor azul o smbolo da profundidade. Imaterial e fria, suscita uma predisposio
favorvel. A sensao de placidez que provoca o azul distinta da calma ou repouso
terrestres, prprios do verde.
uma cor reservada e entra dentro das cores frias. Expressa harmonia, amizade,
fidelidade, serenidade, sossego, verdade, dignidade, confiana, masculinidade,
sensualidade e comodidade. Seu nome de origem incerta, porm parece que procede
do snscrito "rajavarta" (cacheado do rei).
Esta cor se associa com o cu, o mar e o ar. O azul claro pode sugerir otimismo. Quanto
mais se clarifica mais perde atrao e se torna indiferente e vazio. Quanto mais se
102 de 163
escurece mais atrai para o infinito. Possui tambm a virtude de criar a iluso ptica de
retroceder.
a cor do cu sem nuvens, sem ameaas, 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, justia e fidelidade,
porm tambm pode expressar melancolia, tristeza, passividade e depresso.
Se for muito plido pode inspirar frescor e incluso frio. Se for intermedirio, d a
sensao de elegncia, de frescor. Se for escuro d a sensao de espiritualidade, de
seriedade, de responsabilidade.
103 de 163
O azul uma cor que oferece muitas possibilidades nas composies grficas em geral e
nas pginas web em concreto. utilizado amplamente como cor corporativa, pela
seriedade e confiana que inspira, e admite bons degrades, podendo ser a cor dominante
em uma pgina.
Combina muito bem com seu complementar, o laranja, e com as variaes deste, sendo
tpicos os fundos azuis com textos laranjas, sobretudo em dintis com logotipo.
Tambm oferece uma boa gama de anlogos e faz bons jogos com as cores de sua
trade.
104 de 163
uma cor que influencia sobre o apetite, diminuindo este, certamente porque no h
nenhum alimento azul na natureza, por isso no aconselhvel seu uso para uma pgina
sobre receitas de cozinha ou produtos alimentcios.
http://www.criarweb.com/artigos/teoria#da#cor#est!do#alg!mas#cores.html
6eoria da cor. ;studo de algumas cores ""
Acabamos a sess!o da teoria da cor com o estudo de mais cores, as sensa$es #ue produ0em e sua con'eni3ncia de uso nos web
sites.
Por Luciano Moreno
Publicado em: /$?&?/+
Valorize este artigo:
2 votos
Continuamos com o estudo de diferentes cores.
0marelo
A cor amarela o smbolo da deidade em muitas culturas, e a cor mais luminosa, mais
clida, ardente e expansiva.
uma cor otimista, moderna, e denota alegria, entusiasmo, paixo, fora, sexo, calor,
primavera, inocncia, infncia, juventude. Tambm se usa para expressar perigo e
precauo. Seu nome procede do latim "amrus" (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 mdio ou plido faz as pessoas se sentirem cmoda, quente.
105 de 163
Associa-se sempre o amarelo intelectualidade e ao pensamento claro e h psiclogos
que dizem que esta cor ajuda as pessoas a memorizarem dados.
O amarelo chama muito a ateno em um ambiente ou composio, utilizando-se muitas
vezes em elementos que convm tornar invisveis. Porm, h que ter em conta que a
cor que mais cansa vista humana, podendo chegar a ser esmagadora, porque causa
uma estimulao visual excessiva, podendo originar sensao de irritabilidade nas
pessoas.
106 de 163
Com o amarelo se obtm melhores degrades do que com o vermelho, porm conforme
vai se tirando saturao vai se tornando pouco perceptvel sobre fundos claros.
Entretanto, uma cor que combina bem com suas similares (verdes e alaranjados),
podendo se obter com elas boas paletas para uma composio.
Com suas cores anlogas combina muito bem, assim como com seu complementar, o
roxo, porm com as de sua trade cria s vezes um efeito visual pesado demais, devendo
ser estudado com cuidado seu uso conjunto.
Como regra geral, seu uso em uma pgina 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.
EaranGa
107 de 163
A cor laranja tem um carter acolhedor, clido, estimulante e uma qualidade dinmica
muito positiva e energtica. Possui uma fora ativa, radiante e expansiva. Seu nome
deriva do rabe "narandj".
Representa a alegria, a juventude, o calor, o vero. a cor da carne e a cor amistosa do
fogo do lar. vibrante como a luz do sol, extica como as frutas tropicais, suculenta
como a laranja, sugere informalidade no trato e amizade. Porm, tambm pode
expressar instabilidade, dissimulao e hipocrisia.
A paleta de variaes do laranja a mesma que a da cor marrom, j que ambas cores
so de natureza similares.
108 de 163
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 composio, 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 contrrio, com as cores de sua trade cria combinaes que podem resultar coloridas
demais, por isso, ao us-las se devero utilizar com sumo cuidado, deixando-as para
elementos de pequenas dimenses.
(osa
A cor rosa, uma espcie de prpura plida, sugere calma e tranqilidade. 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 variaes que a
mesma do prpura, ao ser ambos cores similares em sua natureza.
109 de 163
uma cor de uso complicado. Tm maus degrades e capta muito a ateno do
espectador, sobretudo se for brilhante ou muito saturada, por isso fica indicado na web
para zonas de pequena superfcie ou elementos pontuais. Se for apagado ou pouco
saturado, pode-se usar como fundo de pgina, sobretudo em pginas destinadas ao
pblico feminino.
:5rpura
A prpura se define cor como um vermelho que puxa a um violeta. de natureza similar
ao rosa, e ambas cores tm associada a mesma paleta de variaes.
110 de 163
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 prprias vestimentas de sumos
sacerdotes, cnsules, reis, imperadores, etc. Por este motivo, na antiguidade era
considerado o mais belo, o mais estvel e a mais preciosa das cores.
uma cor bastante contraditria. Sugere abundncia, sofisticao, inteligncia,
espiritualidade, religiosidade, dignidade, tranqilidade, mistrio, aristocracia e paixo.
Porm, tambm pode evocar frivolidade, artificialidade, luto, morte, nusea, orgulho e
ostentao.
111 de 163
uma cor que combina bem, permitindo gamas variadas, e contrasta fortemente com
seu complementar, o amarelo.
Jioleta
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 reflexo. mstico, melanclico e pode representar
tambm a introverso. a cor da penitncia, e se emprega pelo Advento, em Quaresma,
nas Viglias, etc.
Quando o violeta deriva o lils ou roxo, se simplifica e perde seu potencial de
concentrao positiva. Quando tende prpura projeta uma sensao de majestade.
112 de 163
Apresenta uma paleta de variaes completa, porm no muito til no webdesign,
sobretudo em caso de zonas de tamanho mdio e grande, j que uma cor estranha.
Representa a fantasia, o jogo, a impulsividade e os estados de sonho, embora tambm
pode sugerir pesadelos ou loucura.
9arrom
A cor marrom como tal uma mescla na que predominam o vermelho e o verde,
podendo se obter por desaturao 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 variaes a mesma.
113 de 163
uma cor masculina, severa, confortvel, que evoca o ambiente outonal e d a
impresso de gravidade e equilbrio. a cor realista, talvez porque seja a cor da terra
que pisamos. Seu nome procede do francs "marrn" (castanha comestvel dessa cor), e
sugere idade, coisas velhas, madeira, tijolo, pele, couro, lar.
Nas pginas web d bons resultados, j que uma cor suave, agradvel vista, cmoda,
que gera uma gama extensa de cores aproveitveis.
:reto, cin8a e branco
A cor preta vem definida pela ausncia de luz e cor, sendo seu cdigo hexadecimal
representativo #000000, embora quase todas as cores ao tirar brilho, tom ou saturao
vo se aproximando ao preto. As superfcies de cor preta so aquelas que absorvem
todas as longitudes de onda da luz solar, pelo qual no refletem nenhuma radiao
visvel. Seu nome procede do latim "nger".
O preto confere nobreza e elegncia, sobretudo quando brilhante, e a cor da
114 de 163
elegncia, da seduo, do mistrio, do silncio, 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 tambm a cor da morte e do luto, e
se reserva para as missas de defuntos e a Sexta-Feira Santa.
uma cor quase imprescindvel em toda composio, podendo ser usada como cor do
ambiente de certos elementos, em elementos separadores de espaos ou como cor de
fundos, em cujo caso nos contedos da pgina devero predominar as cores claras para
que se possam visualizar corretamente.
tambm a cor mais usada para os textos, devido ao alto contraste que oferece sobre
fundos brancos ou claros.
O preto no possui degrades, ao ser uma cor pura (ou uma no-cor), e enquanto
modificamos sua saturao obtemos cinzas, cores neutras, formadas por quantidades
iguais de vermelho, verde e azul. Na pintura se obtm normalmente misturando o branco
e o preto.
O cinza uma cor neutra e passiva, que traz pouca ou nenhuma informao visual. a
cor do cu coberto, do ferro e do mercrio, e sugere seriedade, maturidade,
neutralidade, equilbrio, indeciso, ausncia de energia, dvida e melancolia, e se usa
115 de 163
para expressar as coisas ou pessoas carentes de atrativo ou singularidade. Seu nome
parece derivar do provenal "gris".
uma cor que pode resultar montona se se usa em demasia em uma composio, e
est muito associada s aplicaes informticas, talvez porque a maioria das interfaces
grficas de cor cinza ou o contm.
Os cinzas meio-claros (ao redor do #CCCCCC) tm pouca atrao visual, sendo ideais
para fundos ou elementos de preenchimento que no trazem informao ao espectador.
Se vamos aumentando progressivamente a luminosidade do cinza chega um momento
em que obtemos a cor branca, de cdigo #FFFFFF, a luz pura, a unio de 100% das trs
cores primrios aditivas, vermelho, verde e azul.
O branco representa a pureza, a inocncia, a limpeza, a leveza, a juventude, a
suavidade, a paz, a felicidade, o triunfo, a glria 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 cerimnias nupciais.
uma cor latente, capaz de potenciar as outras cores vizinhas, criando uma impresso
luminosa de vazio positivo e de infinito. O branco o fundo universal da comunicao
grfica.
Na imprensa no 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 trs canhes de cor mxima intensidade.
uma cor fundamental no design, j que, alm de se usar como cor para os elementos
grficos e textuais, tambm define normalmente os espaos vazios da composio ou
pgina web.
116 de 163
Estes espaos em branco so elementos de design to 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 pgina.
No costuma ser conveniente para os textos, salvo que estejam situados sobre um fundo
muito escuro sobre o que contrastem bem. No esquecemos que os contedos textuais
devem aparecer sempre perfeitamente legveis em uma pgina.
7.60: O significado da cor pode mudar nos diferentes pases, culturas e religies.
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
cimes, a inveja, a adolescncia, 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 psicolgicos
deveremos estudar detalhadamente o pblico objetivo ao que ir destinada a composio
grfica ou pgina web.
http://www.criarweb.com/artigos/teoria#da#cor#est!do#alg!mas#cores#ii.html
0 cor na web. Cores disponveis para a web
*escobriremos o n6mero de cores #ue 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
Publicado em: *?&?/+
Valorize este artigo:
2 votos
117 de 163
O olho humano pode distinguir aproximadamente entre 7 e 10 milhes de cores, o que
faz com que a vista seja para ns o principal sentido que nos une com o exterior,
podendo-se afirmar que ao redor de 80% da informao que recebemos do mundo
exterior seja visual.
Pintores e designers grficos utilizam esta capacidade humana de apreciar cores para
criar obras que aprofundem na alma e que inspirem sentimentos nos seres que as
contemplam. Porm, o que podemos fazer quando devemos nos expressar com um
nmero limitado de cores?
H poucos anos, a maioria dos computadores dos que dispunha o pblico em geral eram,
com a viso que temos hoje em dia, umas mquinas grandes, lentas e com poucos
servios, no s ao nvel de memrias e processadores, como tambm ao nvel de
servios grficos. E os perifricos eram ainda assim muito limitados. Tudo isso originava
que a nvel grfico estas mquinas trabalhavam somente com 256 cores.
Atualmente, as mquinas informticas aumentam dia a dia seus servios, e o normal
agora trabalhar com milhes de cores e com monitores de altas precises. A maioria
das pessoas j dispe de avanados cartes grficos, com memrias de at 64 megas,
que desenvolvem um trabalho de milhes de texels ( elemento de textura, aos grficos
3D o que o pixel aos grficos bidimensionais).
Porm, na hora da verdade, de quantas cores dispomos para trabalhar os web designers?
A resposta a esta pergunta um pouco deprimente, j que ns dependemos na hora de
mostrar nossas pginas de uns programas especficos, os navegadores ou browsers, que
so os encarregados de apresentar em tela o contedo das pginas que lhe chegam
desde o servidor mediante o protocolo HTTP.
Estes programas, alm da grande diferena 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 pginas variem segundo o computador usado,
segundo o navegador e segundo o sistema operacional no qual este est montado. Por
tudo isto, os milhes de cores das que se dispe para trabalhar ficam reduzidas a
somente umas poucas (e muito poucas) na hora de criar pginas web.
118 de 163
O sistema operacional identifica trs cores bsicas, a partir das quais constri todas as
demais mediante um processo de mescla por unidades de tela (pixels). Estas cores,
como vimos, so 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 informao dispomos
para definir as cores derivadas destas cores primrias.
Quanto mais bits, maior o nmero de variaes de uma cor primria podemos ter. Para
256 cores precisa-se 8 bits, para obter milhares de cores necessitamos 16 bits (cor de
alta densidade) e para obter milhes de cores so necessrios 24 bits (cor verdadeira).
Existe tambm outra profundidade de cor, 32 bits, porm com ela no se conseguem
mais cores, e sim que as que usemos se mostrem mais rapidamente.
princpio, a maioria dos usurios dispunha de monitores capazes de interpretar
somente 256 cores (8 bits). Se levarmos em conta que o prprio sistema operacional fica
com 40 para seu gerenciamento interno, o resultado que restam 216 cores para
apresentar grficos em tela, cores que por outro lado no estavam definidas de forma
padro.
Em 1994 a empresa Netscape estabeleceu uma subdiviso do crculo cromtico em 216
cores eqidistantes entre si, obtendo um conjunto de cores que denominaram Netscape
Color Cube.
Esta diviso do crculo se corresponde com 6 tons de vermelho, 6 de azul e 6 de verde, a
partir dos quais se obtm, por mescla entre eles, as 216 cores possveis, pelas quais
todas elas tero um cdigo hexadecimal na qual cada cor primria vem definida por uma
dupla de valores iguais, devendo estes ser 00,33,66,99,CC ou FF.
Com o passar do tempo os computadores foram aumentando seus servios grficos,
sendo comum, na atualidade, profundidades de cor de 16, 24 e 32 bits.
Se usarmos uma profundidade de 24 bits, correspondente a milhes de cores,
disporemos de uma ampla gama para trabalhar. Quando usamos uma profundidade de
cor de 16 bits dispomos de milhares de cores, porm surge ento o problema adicional
de que a diviso desta gama de cores no se corresponde com a de 256 cores nem com
119 de 163
a de milhes de cores, dando o mesmo cdigo cores levemente diferentes. Por exemplo,
#663399 a mesma cor a 256 e a milhes, porm no igual queo obtido com milhares
de cores.
Com o tempo, adotou-se uma lista de cores s que se colocou um nome representativo
em ingls, de tal forma que os modernos navegadores interpretam o mesmo e o
traduzem internamente por seu valor hexadecimal equivalente.
http://www.criarweb.com/artigos/cores#disponi$eis#para#web.html
0 cor na web. :aletas de cor seguras. Websa#e e (eall<sa#e
As pa"etas de cores d!o "imita$es na hora de apresentar as cores #ue
contm a web. 4este cap%tu"o 'eremos #uais s!o estas "imita$es.
Por Luciano Moreno
Publicado em: $+?&?/+
Valorize este artigo:
2 votos
A maioria das cores obtidas com 16 bits de profundidade so 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 pgina tiver sido desenhada com milhares de cores.
Fica patente ento, a necessidade de trabalhar com uma gama de cores compatveis com
todas as profundidades. Porm, quantas so estas cores?
Aqui vem a decepo do webdesigner, j que este nmero 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 no segura, devido ao problema com a profundidade de
milhares de cores. Se acrescentarmos a isto a varivel adicional de que cada sistema
operacional e cada navegador interpretam as cores a sua vontade, o resultado final que
120 de 163
s dispomos de uma pequena paleta, formada por 22 cores. Esta paleta se conhece com
o nome de ReallySafe.
Na seguinte imagem, vocs tm a paleta WebSafe. Dentro dela, destacados em cor
vermelha, se encontram as cores da paleta ReallySafe.
Como compreendero, trabalhar com somente as 22 cores da paleta ReallySafe no nos
permite construir um web site muito atrativo, j que a limitao imposta resulta
excessiva.
Como alternativa podemos trabalhar dirigindo-nos ao maior nmero de usurios
possveis, e para isso podemos desenhar nossas pginas usando bem a paleta de 216
cores, com o qual teremos coberto a categoria de usurios com sistemas de cor de 8 bits
e de 24 bits.
Esta paleta WebSafe segundo o sistema operacional usado.
121 de 163
E tambm segundo o navegador web.
122 de 163
Estas limitaes de cores podem parecer uma trava ao design de pginas web, porm
no devemos dar mais importncia que a devida. Em primeiro lugar, 216 cores bem
utilizadas do muito que fazer. E em segundo lugar, podemos desenhar nossas pginas
com toda a gama de 24 bits (milhes de cores) j que atualmente a maioria de usurios
maneja computadores de altos servios.
Neste ponto, o sentido comum, a experincia e a testa da pgina em diferentes sistemas
e navegadores so as melhores armas para conseguir o design buscado.
http://www.criarweb.com/artigos/paletas#de#cor#seg!ras#websa"e#reall&sa"e.html
0 cor na web. . problema das imagens
As cores das imagens podem sofrer mudanas se ti'erem #ue estar
encapsu"adas em estruturas tais como tabe"as, camadas, etc. Isto pode ter
uma so"u!o aproximada, porm n!o tima. :eremos os prob"emas #ue se
podem apresentar.
Por Luciano Moreno
Publicado em: /*?'?/+
Valorize este artigo:
2 votos
Um problema adicional relacionado com as cores se produz quando desejamos inserir em
nossa pgina uma imagem dentro da clula de uma tabela, de uma camada, etc.,
especialmente se se trata de uma imagem em formato GIF, j que estes tipos de grfico
tm limitados sua gama de cores a 256.
O fato que frequentemente nos deparamos com que a cor de fundo da imagem no nos
coincidir com a cor de fundo da clula ou camada, embora o cdigo hexadecimal
empregado em ambos seja o mesmo.
Isto devido a que s vezes o formato GIF no capaz de interpretar devidamente cores
que esto 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
dispe, procedimento que se conhece pelo nome de dithering.
123 de 163
O problema se acentuar mais ainda se o usurio dispe de um sistema de 256 cores, j
que ento o sistema no 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
clula ou camadas se acentua.
Para solucionar este problema podemos fazer trs coisas:
Usar cores e fundo pertencentes paleta WebSafe.
Usar imagens GIF de fundo transparente.
Situar as imagens fora de clulas de tabela ou camadas que devam ter cor de
fundo.
Nenhuma destas solues excelente, mas so 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 transparncias, embora haja
ocasies em que a interpretao da cor de fundo da imagem no correta neste
formato.
Portanto, a melhor soluo 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.
http://www.criarweb.com/artigos/cor#na#web#o#problema#das#imagens.html
0 cor na web. Cores e partes de uma pgina
7 importante saber esco"her as cores #ue definir!o uma parte da pgina
para #ue se/a fact%'e" o cometido desta. :eremos #ue cores s!o as mais
apropriadas para cada se!o do site.
Por Luciano Moreno
Publicado em: )?'?/+
Valorize este artigo:
2 votos
124 de 163
Cada elemento de uma pgina web e cada agrupamento deles, deve desempenhar na
mesma um papel perfeitamente definido, que ademais deve se corresponder com seu
peso visual dentro do total da pgina. Uma das ferramentas mais potentes com as quais
o web designer conta para cumprir este objetivo o uso adequado das cores.
Nos casos de pginas mais complexas, e desde o ponto de vista do que o usurio
observa, podemos dividir estas em corpo ou seo principal, dintel, menu e rodap da
pgina.
Sem dvida alguma a parte mais importante das mencionadas o corpo da pgina, j
que ele vai figurar a informao que queremos transmitir ao visitante. Por isto, as cores
dominantes nela devem permitir uma leitura de contedos clara e amena, assim como
uma perfeita visualizao de seus elementos grficos. Para isso, deveremos usar uma cor
para o texto que contraste adequadamente sobre o do fundo da pgina.
Bons contrastes se obtm: - Com fundos claros e textos escuros, ou ao contrrio.
- Com fundos frios e textos clidos, ou ao contrrio, sempre que no sejam anlogos.
O tema do contraste entre fundo e texto difcil de manejar nas pginas web, devido
fundamentalmente pouca resoluo que temos na tela do monitor, que costuma ser de
uns 5.200 pontos por polegada quadrada, quase 300 vezes menos que a resoluo que
tem uma pgina de revista tradicional.
Por isso, o tpico conjunto fundo branco-texto preto continua sendo nas pginas web o
mais ideal para conseguir um timo contraste. Os fundos pretos ou muito escuros podem
dar um bom contraste com quase qualquer cor de texto que seja luminoso, enquanto os
fundos coloridos podem chegar a trabalhar bem se so apagados e de baixa saturao,
como o caso de tons pastis, cinzas ou terra.
Por outro lado, no recomendvel usar imagens de fundo nas pginas web, salvo se
esta for de uma cor e tom muito apagados e com pouco contedo grfico por unidade de
tela, j que distraem muito o usurio e mascaram excessivamente o texto e os demais
elementos da pgina. S se devem usar quando se realiza um bom estudo do mesmo por
um profissional do web designer, j que alm do exposto antes desacelera muito o
carregamento da pgina.
Os links representados nesta seo devem ser claramente diferenciados pelo usurio,
sobretudo se a pgina for dirigida a um pblico muito geral. Se no usamos as cores de
link padro (azuis vivos com texto sublinhado), sim que deveremos usar uma cor que
destaque claramente do texto informativo e do fundo.
125 de 163
O dintel se localiza por costume na parte superior da pgina, e nele costuma-se (na
verdade deve-se) exibir o logotipo de nossa pgina, associao ou empresa.
importante a presena de um logotipo, j que cria um signo de continuidade e de
identidade em nossas pginas, mostrando aos visitantes rapidamente onde se
encontram. A cor deste deve ser tal que destaque claramente sobre o fundo.
Nos idiomas ocidentais se lem as pginas de cima para baixo e da esquerda para
direita, motivo pelo qual o logotipo se situa quase sempre na esquina superior esquerda.
Se a cor de nosso logo for parecida ao que vamos dar ao fundo da pgina podemos criar
um ambiente ao redor do mesmo que permita sua correta viso, o que se costuma
conseguir situando uma banda na zona superior da pgina, com uma cor de fundo
diferente ao do corpo da mesma e tal que o logo destaque adequadamente sobre ele.
Tambm normal situar nesta zona, direita do logo, uma mensagem clara e direta
sobre a identidade e o contedo da pgina.
O menu de navegao talvez o elemento mais interativo de uma pgina, facilitando ao
visitante uma rpida navegao por todo o contedo do web site. Seus links devem
126 de 163
reunir o ser facilmente visveis com o no ser impactantes demais, j que no devem
tirar importncia nem ao cabealho nem ao texto do corpo.
Podemos criar para esta zona uma banda vertical de uma cor diferente ao do corpo, que
pode ser igual ao do cabealho ou no. Seus links podem se fundir um pouco com o
fundo, dando assim uma sensao de continuidade. Muitos designers se baseiam nos
menus de imagens para conseguir isto, pois lhes permitem ter um maior controle sobre o
resultado final. Em contrapartida, demoraro mais em carregar.
Uma boa soluo o uso de textos ou imagens que inicialmente no destacam demais
sobre o fundo, mas que ao situar o cursor sobre elas se iluminam ou mudam a cor,
produzindo-se um efeito positivo com isso.
Tambm corrente usar a parte baixa do dintel para inserir nela o menu de navegao.
Neste caso, sua cor no deve destacar em excesso sobre o do dintel, devendo buscar
sempre a plena integrao visual entre ambos.
127 de 163
Por ltimo, o rodap de pgina o elemento menos importante da pgina, de tal forma
que muitos autores nem sequer o consideram. Caso de se use, no convm que sua cor
mude com respeito ao fundo do corpo, e se o faz deve ser muito ligeiramente, j que
seno podemos distrair a ateno do usurio e criar um corpo de pgina estreito.
No rodap da pgina costuma-se colocar links de tipo tercirio, links de correio ou
acessos a servios secundrios que proporcione nosso web site.
http://www.criarweb.com/artigos/cores#e#partes#de#!ma#pagina.html
0 cor na web. ;scol1a da paleta para um web site
7 necessrio esco"her cores de acordo com o "ogotipo da pgina. 4este
cap%tu"o 'eremos re"a$es poss%'eis para conseguir a funciona"idade
esperada.
Por Luciano Moreno
Publicado em: $-?'?/+
Valorize este artigo:
2 votos
Na hora construir uma pgina o primeiro que temos que ter claro a gama de cores que
vamos empregar em suas diferentes partes, e para isso devemos comear sempre com
selecionar uma cor ou cores base, que ser o que dar um esprito prprio ao nosso site.
importante a escolha desta gama, que, por regra geral, ser conveniente manter em
todas as pginas do site, conseguindo com isso estabelecer uma identidade prpria e
uma continuidade entre todas as pginas que a formam.
Se tivermos escolhido ou imposto um logotipo, suas cores sero as que marquem como
guia o resto da pgina, trabalhando nas diferentes partes da pgina com os degrades
claros e escuros destas cores base.
Por ser necessria a introduo 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 captulo
anterior (monocromticas, anlogos, trades, etc.), sobretudo se no tivermos grande
experincia no desenho com cores, e que apliquemos os conceitos j estudados
(hierarquia visual, escala, contrastes, etc.).
Como exemplos, podemos considerar as seguintes paletas genricas:
128 de 163
129 de 163
130 de 163
Ademais, podemos seguir uma srie de regras generais que nos orientaro:
- As cores primrias, puras, brilhantes, so comuns demais, dando assim pouca
informao ao olho. Por isto, no convm se basear nunca nelas para construir nossas
pginas.
- A cor dos links convm que seja o azul padro do navegador ou pelo menos
131 de 163
permanecer sublinhados e com uma cor bem diferenciada das do resto de elementos
textuais da pgina.
- Pginas destinadas a um pblico geral devem estar baseadas em combinaes branco-
preto- cor logotipo, em cores mais neutras, que a maioria possa gostar, como cores
secundrias ou tercirias em tons pastel, ou em uma bem estudada gama de cinzas.
fundamental nestas pginas dar s pginas a identidade corporativa da empresa ou
organizao que representam.
- Pginas orientadas a um pblico jovem podem adotar cores vivas, primrios, com altos
contrastes entre fundo e contedo, ou ento com fundos escuros e textos claros, com a
incluso de pequenas animaes em Flash de tons vistosos.
132 de 163
- Pginas destinadas a um pblico adulto devem estar desenhadas com cores srios,
elegantes, frios, sem altos contrastes de tom, em cores neutras, inclusive puxando a
cinza. Sempre podemos recorrer neste caso ao tpico padro de fundo branco e letras
pretas ou cinza escuro.
- Pginas de empresa ou de instituies devem estar desenhadas de acordo com as cores
corporativas da mesma, incluindo sempre o logotipo.
133 de 163
- Pginas de divulgao, 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 pginas ser lida. Conselho: fundo claro e
letras escuras, que destaquem muito bem.
- Pginas exticas e ao mesmo tempo elegantes podem ser obtidas com fundo preto ou
cor muito escura e letras e/ou motivos dourados, brancos ou prpura e vermelho.
134 de 163
- Pginas destinadas a ser impressas pelo usurio final no 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 usurio no tiver ativada a opo de imprimir as cores de
fundo, no ver nada na pgina 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 verso especial para impresso com estas cores.
Estas consideraes gerais podem nos ajudar a manejar corretamente as cores em
nossas pginas web. Porm, como sempre, a prtica o que manda, e afortunadamente
podemos navegar pela Internet, visualizando pginas do tipo concreto que queremos
desenhar para aprender e ver como diversos autores resolveram o desenho.
http://www.criarweb.com/artigos/escolha#paleta#para#website.html
0 cor na web. ,erramentas bsicas para trabal1ar com cores
135 de 163
2xiste uma grande 'ariedade de ferramentas #ue nos permitem manipu"ar
as caracter%sticas das cores para conseguir as #ue necessitemos.
Abordamos uma amp"a "ista de programas neste cap%tu"o.
Por Luciano Moreno
Publicado em: /-?)?/+
Valorize este artigo:
2 votos
Existe no mercado uma infinidade de aplicaes grficas, tanto para trabalhar com
grficos vetoriais e animaes como para retoque de imagens, algumas das quais
estudaremos de forma geral ao final deste curso de Desenho Grfico para a Web.
Porm, h tambm outras que, apesar de seu pouco preo e tamanho (algumas so
gratuitas e ocupam muito poucos Kb), so muito teis para o trabalho dirio com cores
em um computador, e imprescindveis para um web designer.
Entre elas destacam por suas funcionalidades EyeDropper e 1 st QuickRes, das quais
vamos falar um pouco.
;<eDropper
EyeDropper basicamente um capturador de cores tela, capaz de obter o cdigo de um
ponto dado em diferentes modelos de cor. Ademais, permite tambm capturar uma zona
de tela, copiando-a na rea de transferncia, com o qual fica disponvel para seu uso em
outras aplicaes grficas.
propriedade da empresa Inetia, e pode-se fazer o download em
http://eyedropper.inetia.com/
de fcil download e instalao, e atrs a mesma aparecer um pequeno cone do
programa na barra de tarefas, junto ao relgio do sistema.
Para lanar a aplicao basta dar dois cliques sobre este cone, com o qual aparecer
uma janela prpria 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.
136 de 163
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 cdigos 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 boto direito do mouse sobre o cone de EyeDropper aparecer um
menu emergente com a opo "Properties", que nos levar a uma janela de configurao
com uma srie de pestanas, entre as quais destacam as seguintes:
- Preferences: Define as propriedades gerais da aplicao.
Nesta janela, podemos observar em que modelo de cor desejamos que apaream os
cdigos, se devem aparecer as coordenadas do ponto e se a aplicao deve se iniciar
quando arrancarmos o sistema operacional (aconselhvel).
- Clipboard: Configura o mtodo de captura do cdigo da cor na rea de transferncia.
137 de 163
A opo mais aconselhvel para o web designer definir a captura no modelo RGB
hexadecimal, usando para isso as combinaes padro do sistema, que no caso do
Windows so as teclas CTRL+C para copiar o cdigo na rea de transferncia e CTRL+V
para col-lo em outras aplicaes.
- Screen Capture: Estabelece a tecla que ativa a captura de uma zona da tela como uma
imagem, assim como o mtodo de finalizao da mesma.
Como tecla de ativao conveniente escolher alguma que no se use normalmente,
como uma das teclas superiores F. Quanto ao mtodo de finalizao, o normal
estabelecer o evento up do boto 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 boto esquerdo do mouse e, sem solt-lo, definimos um retngulo em
tela, que ser a zona capturada. Para finalizar, soltamos o boto do mouse, ficando a
138 de 163
imagem capturada na rea de transferncia, pronta para ser colada em qualquer outra
aplicao, grfica ou no (podemos col-la em qualquer aplicao de Office, como Word
ou Power Point).
- Convert Colors: Define o tipo de paleta em que queremos capturar a cor.
Seus possveis valores so 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 prxima na paleta web segura de 256 cores.
Como se pode ver, EyeDropper um programa muito til, imprescindvel para o
designer, que com um pouco de prtica facilita espetacularmente o trabalho com cores.
st KuicL(es
Em seu trabalho dirio, o web designer deve verificar como se visualizam as pginas que
est criando as diferentes resolues e profundidades de cor. Os sistemas operacionais
oferecem um painel de configurao prprio para estas tarefas, porm acessar
constantemente ao mesmo nos faz perder muito tempo.
Propriedade da empresa GreenParrots, 1 st QuickRes uma pequena aplicao que nos
ajuda a manejar as propriedade de nosso monitor de forma rpida e cmoda. Pode-se
fazer o download atravs do endereo: http://www.greenparrots.com
Uma vez instalada, a aplicao se lana desde um cone situado na barra de tarefas,
junto ao relgio do sistema, clicando sobre o mesmo com o boto direito do mouse.
Ao faz-lo, aparece a janela da aplicao mostrando diferentes combinaes resoluo-
profundidade de cor. Basta ento clicar sobre uma delas para que a configurao de
nosso monitor mude.
139 de 163
' aplica()o tamb*m permite m!dar o "!ndo de tela+ o protetor de tela+ a apar,ncia $is!al do
sistema operacional e a ta-a de at!ali%a()o .re"resh/ do monitor.
0!tra das op(1es presentes na 2anela da aplica()o * 30ptions3+ !e $ai nos permitir de"inir
atalhos de teclado para lan(ar a 2anela o! para m!dar rapidamente a resol!()o de tela.
4on$*m !e escolhamos para isto alg!mas das teclas !e n)o se !tili%am normalmente+ como
as do gr!po 5 presentes na parte s!perior do teclado.
Um presentinho em Flash
6ara "inali%ar+ a empresa 7!ndidesign nos o"erece !ma pe!ena anima()o 5lash !e nos
"acilita a composi()o com cores+ ao nos permitir $is!ali%ar o e"eito de di"erentes combina(1es
de cor.
140 de 163
Na esquina inferior direita voc tm trs opes de trabalho: combinao de trs cores
em vertical, combinao de trs cores justapostas e combinao de cores em uma
interfase web. Para definir as cores das diferentes partes, basta arrast-las desde a
paleta esquerda at a zona escolhida.
A verso on-line desta animao est disponvel no endereo:
http://www.mundidesign.com/webct/webct.html
Onde se encontra tambm outras animaes sobre o tema, incluindo uma muito boa
sobre os princpios gerais do desenho grfico. Muito recomendvel.
http://www.criarweb.com/artigos/"erramentas#basicas#para#trabalhar#cores.html
6ipogra#ia. "ntroduo
4esta se!o 'amos fa"ar dos conte6dos textuais das pginas web, e neste
primeiro cap%tu"o, faremos uma introdu!o a este estudo.
Por Luciano Moreno
Publicado em: $&?)?/+
Valorize este artigo:
2 votos
A misso de uma composio grfica transmitir uma mensagem determinada aos
espectadores que a visualizam. Para isso, o designer dispe de duas ferramentas
principais: as imagens e os contedos textuais.
As imagens ou contedos grficos trazem sem dvida um aspecto visual muito
141 de 163
importante a toda composio, sendo capazes de transmitir por si s uma mensagem de
forma adequada. Agora tambm, o melhor meio de transmisso de idias a um grande
nmero de pessoas por excelncia a palavra escrita, o que faz com que os contedos
textuais em uma composio sejam to mais importantes quanto mais informao se
deseja transmitir.
A essncia do bom design grfico consiste em comunicar idias por meio da palavra
escrita, combinada muitas vezes com desenhos ou com fotografias.
As representaes visuais dos contedos textuais so basicamente as letras, elementos
formadores dos abecedrios dos diferentes idiomas. Com as letras se formam palavras,
com as palavras frases, e com as frases se representam idias e conceitos.
Alm de seu componente significativo, cada letra de uma palavra por si mesma um
elemento grfico, que traz riqueza composio final. Por este motivo, o aspecto visual
de cada uma das letras que formam os textos de uma composio grfica ou uma pgina
web muito importante, intervindo nos mesmos conceitos similares aos que
caracterizam qualquer outro componente grfico: forma, tamanho, cor, escala, etc.
Deste planejamento se deriva que o designer grfico deve empregar as letras em uma
composio tanto para comunicar idias quanto para configurar o aspecto visual da
mesma, sendo necessrio para isso conhecer a fundo os diferentes tipos existentes e
suas propriedades, conhecimentos que se agrupam na cincia ou arte da Tipografia.
Denomina-se Tipografia ao estudo, desenho e classificao dos tipos (letras) e as fontes
142 de 163
(famlias de letras com caractersticas comuns), assim como ao desenho de caracteres
unificados por propriedades visuais uniformes, enquanto que as tcnicas destinadas ao
tratamento tipogrfico e a medir os diferentes textos so conhecidas com o nome de
Tipometria.
Tradicionalmente o estudo das letras, suas famlias e seus tipos foram desenvolvidos
pelas impressoras e, mais modernamente, por designers grficos que realizam trabalhos
para ser logo impressos. Porm, com o aparecimento dos computadores e da Internet foi
necessrio um replanejamento da Tipografia clssica, visto que as fontes que trabalham
em imprensa no se adaptam corretamente ao trabalho em um monitor de computador.
http://www.criarweb.com/artigos/tipogra"ia#introd!cao.html
6ipogra#ia. Um pouco de 1ist=ria
:amos 'er como e'o"uiu a escritura desde os tempos dos babi"8nios at
nossos dias, passando pe"o acontecimento tipogrfico mais importante( a
in'en!o da imprensa.
Por Luciano Moreno
Publicado em: $+?)?/+
Valorize este artigo:
2 votos
A origem de nossos atuais alfabetos (sistemas de signos abstratos que representam
udios articulados) h que busc-los na remota antiguidade, no primognito uso de
signos e smbolos para representar elementos naturais e atividades cotidianas.
O primeiro pictograma (desenho representando um objeto ou uma idia sem que a
pronunciao de tal objeto ou idia seja tida em conta) do qual temos constncia se
remonta ao ano 3.500 a.C., e uma ripa em pea encontrada na cidade de Kish
(Babilnia).
Mais tarde, os sumrios desenvolveram ideogramas (smbolos que representam idias
associadas menos concretas), sistema que foi se desenvolvendo at dar lugar ao sistema
cuneiforme sumrio de escritura, baseado em slabas que imitavam a linguagem falada.
Um exemplo de escritura deste tipo a ripa encontrada em Ur, datada entorno de 2900-
2600 a. C., que descreve uma entrega de cevada e comida a um templo.
143 de 163
A evoluo posterior deste sistema silbico deu lugar escritura cuneiforme (2.800 a.C.),
que utiliza o que podemos considerar como o primeiro alfabeto, cujas letras se
imprimiam sobre argila usando uma alavanca.
Desta poca datam uma infinidade de ripas que contm textos econmicos, religiosos,
poticos, e legais, como o famoso cdigo de Hammurabi, um dos documentos jurdicos
mais antigos que existem.
Sobre o ano 1.500 a.C. se desenvolveram em Egito trs alfabetos (hieroglfico, hiertico
e demtico). Deles, o hieroglfico (misto ideogrfico e consonntico), baseado em 24
smbolos consoantes, era o mais antigo.
144 de 163
Os fencios adotaram este alfabeto egpcio 1.000 anos antes de Cristo, usando para
escrever peles e ripas enceradas, e tambm o transmitiram pelo mundo civilizado, de tal
forma que pouco depois foi adotado tambm pelos hebreus e os arameos, sofrendo com
o tempo uma evoluo prpria em cada uma destas culturas.
O alfabeto fencio foi tambm adotado por etruscos e gregos, e deles tambm foi pelos
romanos, que no sculo I j manejavam um alfabeto idntico ao atual, falta da J, a W e
a V.
O Imprio Romano foi decisivo no desenvolvimento do alfabeto ocidental, por criar um
alfabeto formal realmente avanado, e por dar a adequada difuso a este alfabeto por
toda Europa conquistada, j que muitas lnguas que no tinham sistema prprio de
escritura adotaram o alfabeto romano ou latino.
A escritura romana adotou trs estilos fundamentais: Quadrata (maisculas quadradas
romanas, originalmente cinzeladas em pedra), Rstica (verses menos formais e mais
rpidas em sua execuo) e Cursiva (modalidades de inclinao das maisculas).
Partindo do modelo fencio se desenvolveu tambm, ao redor do sculo IV d. C, o
alfabeto rabe, formado por 28 consoantes e no qual, assim como o resto de alfabetos
semticos, se escreve sem vogais, da direita esquerda.
145 de 163
No ocidente, o alfabeto romano foi evoluindo e, no sculo X, no monastrio de St. Gall,
em Sua, se desenvolveu um novo tipo de letra comprimida e angulosa, a letra gtica,
mais rpida de escrever e que aproveitava melhor o papel, fatores importantes em um
momento que a demanda de escritos tinha se incrementado notavelmente, escritos que
se realizavam a mo, primeiramente em pergaminhos e logo, a partir do ano 1.100, em
papel.
A letra gtica se difundiu por toda Europa, surgindo diferentes variantes (Textura, Littera
Moderna, Littera Antiqua, Minscula de Niccoli,, etc.).
Em 1.450 se produziu um dos fatos mais importantes para o desenvolvimento da
Tipografia e da cultura humana: Johann Gutenberg (1398 - 1468) inventa ao mesmo
tempo os caracteres mveis e a imprensa, criando a imprensa. O primeiro texto ocidental
impresso, a "Bblia de 42 linhas" de Mazarino, sai em 1.456, ao parecer da imprensa de
Gutenberg.
O trabalho de impresso possibilitou o uso de novos tipos de letra. Em 1470 Nicolas
Jenson grava o primeiro tipo em estilo romano inspirando-se nas Quadratas romanas, em
1.495 Francesco Griffo desenha o tipo conhecido como Bembo, em 1.501 Francesco de
Bolonia desenha para o veneciano Aldo Manucio o primeiro tipo mecnico cursivo e em
1.545 o impressor francs Claude Garamond cria uma fundio e comea a fundir um
tipo mais informal que a letra romana trajana, baseado no trao da pluma de ave.
146 de 163
Desde ento, uma infinidade de tipgrafos colaboram com seu grozinho de areia
criao de novas fontes, entre os que destacam Alberto Durero, Giambattista Bodoni,
Fournier, Didot, Caslon, Baskerville, Bodoni e, j nosculo XX, Max Meidinger (criador da
fonte Helvetica em 1.957), Cooperplate e Novarese.
http://www.criarweb.com/artigos/tipogra"ia#!m#po!co#de#historia.html
9edidas tipogr#icas
)ontinuamos com um pouco mais de histria da tipografia, neste caso com
suas medidas e como se foram adaptando 9s necessidades atuais.
Por Luciano Moreno
Publicado em: '?*?/+
Valorize este artigo:
2 votos
A partir da inveno da imprensa por Gutenberg, se comearam a desenhar e fundir
diferentes tipos de letra segundo as necessidades tcnicas de cada desenhista, sem
nenhum tipo de norma comum que marcasse as caractersticas das letras.
Cada tipo era conhecido pelo nome que seu prprio criador lhe dava (geralmente seu
prprio nome), sendo seu tamanho total (denominado corpo) e o de suas partes
totalmente arbitrrios. Conseqncia direta desta liberdade de criao foi que as
imprensas no podiam intercambiar material tipogrfico entre elas.
Uma das primeiras unidades tipogrficas foi a pica, nome dado na Inglaterra do sculo
XV a uns livros destinados a regular o ritual das festas eclesisticas. Aparentemente se
compuseram em um corpo de letra que acabou se chamando como eles. Equivale a 1/6
de polegada ou 12 pontos (4'233 mm.).
Martn Domingo Fertel e Claude Garamond buscaram j estabelecer pautas na fundio
de tipos, porm foi Pierre Simon Fournier, quem publicou em 1737 seu Manuel
147 de 163
Typographique, no qual definiu um sistema de propores para a fundao sistemtica
dos caracteres, que chamou duodecimal. Para isso, tornou o tipo de letra menor do que
comumente se usava, chamado nomparela, e o dividiu em seis partes, a cada uma das
quais deu o nome de ponto; e a base deste comeou a fabricar, desde 1742, todo o
material tipogrfico que fundia. medida 12 pontos (o dobro da nomparela, equivalente
a 4,512 mm) a chamou ccero , j que era similar ao corpo empregado na edio da
obra Cicern, de Oratore, que realizou o impressor Schffer a finais do sculo XV.
Em 1760 Francois Ambroise Didot prope melhoras ao sistema de Fournier, adotando
como base o p de rei, medida de longitude usada naquela poca, que dividiu em 12
partes, obtendo uma nova definio de ccero, composto agora por 12 pontos
(aproximadamente 0,377 mm). A partir desse momento se comearam a utilizar tipos
em tamanhos constantes, chamados pelo nmero de pontos que media o corpo dos
mesmos.
Considerando Didot que um ponto de p de rei era excessivamente fino para formar uma
aprecivel graduao de caracteres, adotou como unidade bsica a Grossura de dois
pontos. Assim, dois pontos de p de rei equivalem a um ponto tipogrfico, quatro pontos
de p de rei equivalem a dois pontos tipogrficos, etc.
A altura do tipo foi fixada em 63 pontos fortes (chamados assim porque a altura exata
oscila entre 63 pontos e 63 e meio, equivalentes a 23,688 mm).
148 de 163
O sistema Didot foi adotado em todas as fundies do mundo, exceto na Inglaterra e nos
Estados Unidos, onde o ponto tipogrfico est baseado sobre a polegada inglesa, cuja
equivalncia com o sistema mtrico de 0,352 mm. Em 1886 a American Type Founder's
Association estabeleceu a medida da pica em 1/72,27 de uma polegada
(aproximadamente 0,3515 mm), sendo adotado este sistema pelos Estados Unidos e
pelas demais colnias inglesas. Os tipos se fundem geralmente em tamanhos
padronizados que vo desde os 6 at os 96 pontos, mantendo-se sua altura em 63
pontos (23,312 mm).
A escala comum de tamanhos a seguinte:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 60, 72, 84, 96
Com o aparecimento dos computadores e sua aplicao ao trabalho editorial e ao design
grfico se tornou necessria a introduo de novos sistemas de Definio de fontes para
tela que permitiram sua correta impresso posterior e de novas unidades de medida que
se aproximaram mais a natureza dos monitores.
Entre os sistemas surgidos destaca um da companhia Adobe, chamado :ostscript, que
permite aos ordenadores se comunicarem com os perifricos de impresso. Este sistema
foi lanado inicialmente em 1985 dentro do programa de edio Page Maker, opera
armazenando os nmeros em forma pilar e est baseado no formato de texto ASCII, o
normal para caracteres. Como unidade bsica de medida utiliza o ponto de polegada
(uma polegada tem 72 pontos, equivalente a 2,54 centmetros).
Por outra parte, os monitores de computador utilizam como unidade de medida o piCel ,
definido como a menor unidade de informao visual que se pode apresentar em tela, a
partir da qual se constri as imagens.
149 de 163
O tamanho de um pixel no absoluto, j que depende da resoluo usada (um pixel
resoluo 800x600 maior que um resoluo 1024x768).
Resumindo, atualmente se usam dois sistemas de medidas tipogrficas para trabalho em
imprensa clssica:
O europeu, baseado no ponto de Didot (0,376 mm) e o ccero, formado por 12
pontos de Didot (4, 512 mm.).
O anglo-saxo, que tem como unidades o ponto de Pica (0,351 mm.) e a Pica,
formada por 12 pontos de Pica (4,217 mm.).
A converso de umas unidades a outras incmoda, e o normal que ningum as
realize. Normalmente, os cceros e as picas vem em umas regretas, chamadas
tipMmetros, que em ocasies podem compatibilizar ambos sistemas, o anglo-saxo e o
europeu.
Por outra parte, em trabalhos digitais se utilizam outros dois sistemas:
Adobe Postscript, cuja unidade o ponto de polegada (uns 0,352 mm). Uma
polegada tem 72 pontos (2,54 centmetros).
Pixels, unidades dependentes da resoluo de tela usada.
Existem muitas propostas para conseguir unificar as medidas tipogrficas a escala
mundial, entre as que destacam as baseadas no sistema mtrico decimal, como a
proposta pela ISO (International Organization for Standarization), porm, at hoje
nenhuma delas triunfou.
Por outro lado, o prprio avano dos meios digitais est estabelecendo por si s uma
padronizao baseada no sistema Postcript de Adobe, altamente difundido e aceitado na
atualidade, assim como a utilizao dos pixels como unidade de medida, no s no
design grfico digital e no web design, como tambm em sistemas fotogrficos digitais e
em televises de alta gama.
http://www.criarweb.com/artigos/medidas#tipogra"icas.html
:artes de uma letra
:amos conhecer as partes fundamentais de uma "etra e saber distingui5"as
no caso de ter #ue criar fam%"ias tipogrficas.
Por Luciano Moreno
Publicado em: $$?*?/+
Valorize este artigo:
150 de 163
2 votos
D-se o nome de letras (do latim littera) ao conjunto dos grficos usados para
representar uma linguagem. Seus equivalentes em tipografia e imprensa so tipo (do
latim typus, do grego typos, modelo ou caractere gravado), que define aos signos que se
empregam para a execuo dos moldes tipogrficos, e caractere (do grego charakter),
resultado da impresso dos tipos.
Para poder definir com clareza e preciso uma letra se distinguem nela diferentes partes,
cujos nomes so s vezes similares aos da anatomia humana, entre as que podemos
destacar as seguintes:
0ltura das mai5sculas: altura das letras de caixa alta de uma fonte, tomada
desde a linha de base at a parte superior do caractere.
0ltura da C ou altura N: altura das letras de caixa baixa excluindo os
ascendentes e os descendentes.
0nel ou ombro: haste curva fechada que encerra o branco interno em letras tais
como na b, a p ou a o.
Iaste: trao principal da letra que define sua forma essencial. Sem ela, a letra
no existiria.
Iaste ascendente: haste da letra que sobressai por cima da altura x, como na
b, a d ou a k.
Iaste descendente: haste da letra que fica por baixo da linha de base, como na
p ou na g.
Iaste montantes: hastes principais verticais ou oblquas de uma letra, como a
L, B, V ou A.
Iaste ondulada ou espin1a: trao principal da S ou da s.
Iaste transversal ou barra: trao horizontal em letras como a A, a H, f ou a t.
Fase: projeo que s vezes se v na parte inferior da b ou na G.
Franco interno: espao em branco contido dentro de um anel ou olhal.
Frao: parte terminal que se projeta horizontalmente ou para cima e que no
est includa dentro do caractere, como ocorre na E, a K, a T ou a L.
Caracol ou ol1al: poro fechada da letra g que fica por baixo da linha de base.
Se esse trao for aberto se chama simplesmente calda.
Eetreiro: trao curvo ou poligonal de conjuno entre o haste e o remate.
151 de 163
Calda: haste oblqua pingente de algumas letras, como na R ou a K.
Calda curva: haste curva que se apia sobre a linha de base na R e a K, ou
debaixo dela, na Q. Na R e na K se pode chamar simplesmente calda.
Corpo: altura da letra, correspondente em imprensa ao paraleleppedo metlico
em que est montado o caractere.
"nclinao: ngulo do eixo imaginrio sugerido pela modulao da espessura dos
trao de uma letra. O eixo pode ser vertical ou com diversos graus de inclinao.
Tem uma grande importncia na determinao do estilo dos caracteres.
Ein1a de base: linha sobre a que se apia a altura da x.
.rel1a: pequeno trao terminal que s vezes se adiciona ao anel de algumas
letras, como a g ou a o, ou ao haste de outras como a r.
>eri# ou remate: trao terminal de um haste, brao ou cauda. um ressalte
ornamental que no indispensvel para a definio do caractere, havendo
alfabetos que carecem deles (sans serif).
JHrtice: ponto exterior de encontro entre dois traos, como na parte superior de
uma A, ou M ou ao p de uma M.
Estas so as partes fundamentais de uma letra. Seu conhecimento no imprescindvel
para o uso comum de letras e fontes em desenho grfico e web, porm sim que
importante distingui-las no caso de ter que criar umas famlias tipogrficas especiais para
um trabalho determinado, j que vo definir as caractersticas comuns que devem reunir
as letras da mesma para manter um estilo prprio.

http://www.criarweb.com/artigos/partes#de#!ma#letra.html
,amlias tipogr#icas
:amos conhecer as fam%"ias tipogrficas e seus grupos e c"assifica$es.
Por Luciano Moreno
Publicado em: /?+?/+
Valorize este artigo:
2 votos
Uma famlia tipogrfica um grupo de signos escriturais que compartilham traos de
desenho comuns, conformando todas elas uma unidade tipogrfica. Os membros de uma
famlia (os tipos) se parecem entre si, pero tambm tm traos prprios.
As famlias tipogrficas tambm so conhecidas com o nome de famlias de fontes (do
francs antigo fondre, correspondente em portugus a derreter ou fundir, referindo-se ao
tipo feito de metal fundido). Uma fonte pode ser metal, pelcula fotogrfica, ou meio
eletrnico.
Existe uma infinidade de famlias tipogrficas. Algumas delas tm mais de quinhentos
152 de 163
anos, outras surgiram na grande exploso criativa dos sculos XIX e XX, outras so o
resultado da aplicao dos computadores imprensa e ao desenho grfico digital e
outras foram criadas explicitamente para sua apresentao na tela dos monitores,
impulsionadas em grande parte pela web.
Umas e outras convivem e so usadas sem estabelecer diferenas de tempo, por isso
necessrio estabelecer uma classificao que nos permita agrupar aquelas fontes que
tm caractersticas similares.
So muitas as tentativas por conseguir agrupar as formas tipogrficas em conjuntos que
renam certas condies de igualdade. Geralmente esto baseados na data de criao,
em suas origens dentro das vertentes artsticas pelas que foram criadas ou em critrios
morfolgicos.
Os sistemas de classificao de fontes mais aceitados so:
Classi#icao de 9aCimilien JoC @-'&A
Divide as famlias em:
Humanistas
Geraldos
Reais
Didones
Mecnicas
Lineares
Incisos
Scripts
Manuais
Classi#icao de (obert Fring1urst
Divide as fontes em:
Renascentistas
Barrocas
Neoclssicas
Romnticas
Realistas
Modernistas geomtricas
Modernistas lricas
Ps-modernistas
Classi#ica4es 06<p"
A ATYPI (Associao Tipogrfica Internacional, http://www.atypi.org/), com objeto de
estabelecer uma classificao geral das famlias tipogrficas, realizou em 1964 uma
adaptao da classificao de Maximilien Vox, conhecida comoVOX-ATypI.
153 de 163
Esta classificao est relacionada tambm com a evoluo das famlias tipogrficas ao
longo da histria, embora modifique certos elementos da classificao de VOX..
Outra classificao de fontes da ATypI, evoluo da anterior, a baseada no
agrupamento de fontes por caractersticas comuns, normalizada com o nome DIN 16518.
Divide as famlias tipogrficas nos seguintes grupos:
(omanas
Formado por fontes que mostram influncias da escritura manual, em concreto da
caligrafia humanista do sc. XV, e tambm da tradio lapidaria romana, onde os ps das
letras se talhavam para evitar que a pedra saltasse nos ngulos.
As fontes Romanas so regulares, tm uma grande harmonia de propores, apresentam
um forte contraste entre elementos retos e curvos e seus remates lhes proporcionam um
alto grau de legibilidade.
154 de 163
As Romanas se dividem em cinco grupos fundamentais:
Antigas: tambm chamadas Garalde em francs (por Garamond), aparecem a
finais do sculo XVI na Frana, a partir das gravuras de Grifo para Aldo Manuzio.
Caracterizam-se pela desigualdade de espessura na haste dentro de uma mesma
letra, pela modulao da mesma e pela forma triangular e cncava do remate,
com discretas pontas quadradas. Seu contraste sutil, sua modulao
pronunciada, prxima caligrafia, e seu trao apresenta um mediano contraste
entre finos e grossos. Entre elas destacam as fontes Garamond, Caslon, Century
Oldstyle, Goudy, Times New Roman e Palatino.
De Transio: manifestam-se no sculo XVIII e mostram a transio entre os
tipos romanos antigos e os modernos, com marcada tendncia a modular mais as
hastes e a contrast-las com os remates, que deixam a forma triangular para
adotar a cncava ou a horizontal, apresentando uma grande variao entre
traos. Esta evoluo se verificou, principalmente, em finais do sculo XVII e at
meados do XVIII, por obra de Grandjean, Fournier e Baskerville. Exemplos deste
grupo so as fontes Baskerville e Caledonia.
Modernas: aparecem a meados do sculo XVIII, criadas por Didot, refletindo as
melhoras da imprensa. Sua caracterstica principal o acentuado e abrupto
contraste de traos e remates retos, o que origina fontes elegantes e ao mesmo
tempo frias. Seus caracteres so rgidos e harmoniosos, com remates finos e
retos, sempre da mesma grossura, com a haste muito contrastada e com uma
marcada e rgida modulao vertical. So imponentes a corpos grandes, porm
acusam certa falta de legibilidade ao romper um pouco o caractere, ao se compor
a corpos pequenos e em blocos pequenos de texto corrido. Exemplos destacveis
poderiam ser Firmin Didot, Bodoni, Fenice e Modern N 20.
Mecnicas: so um grupo isolado que no guarda nenhuma semelhana
construtiva com o resto dos tipos romanos com remate, somente o fato de possuir
assentamento em seus caracteres. No tm muita modulao nem contraste.
Entre suas fontes podemos destacar Lubalin e Stymie.
Incisos: outro grupo isolado dentro das romanas, assim como as mecnicas, so
letras na tradio romana mais antiga, ligeiramente contrastada e de trao
afinado pontiagudo. No se pode falar de remates, porm seus ps afunilados
sugerem, tal como ocorre com as serif, uma linha imaginria de leitura. Seu olho
grande e seus ascendentes e descendentes finos, fazem dele um tipo que, embora
seja extremadamente difcil de digitalizar, muito legvel a qualquer corpo.
155 de 163
pequena escala, pode confundir e parecer de sans-serif ao perder a graa de seu
trao. Como exemplos podemos citar as fontes Alinea e Baltra.
>ans!>eri#
As fontes Sans-Serif se caracterizam por reduzir os caracteres ao seu esquema essencial.
As maisculas se voltam s formas fencias e gregas e as minsculas esto conformadas
base de linhas retas e crculos unidos, refletindo a poca na que nascem, a
industrializao e o funcionalismo.
Tambm denominadas Gticas, Egpcias, Palo Seco ou Etruscas, se dividem em dois
grupos principais:
Lineares sem modulao: formadas por tipos de grossura de trao uniforme, sem
contraste nem modulao, sendo sua essncia geomtrica. Admitem famlias
longussimas, com numerosas variantes, embora sua legibilidade costuma ser m
em texto corrido. Exemplos deste tipo seriam: Futura, Avant Garde, Eras,
Helvtica, Kabel e Univers.
Etruscas: caracterizadas porque a grossura do trao e o contraste so pouco
perceptveis e por ser muito legveis em texto corrido. A principal fonte deste tipo
Gill Sans.
Displa<
As fontes display advertem mais ou menos claramente o instrumento e a mo que as
criou, e a tradio caligrfica ou cursiva na que se inspirou o criador.
Existem trs grupos principais de fontes display:
Caligrficas: aglutina famlias geradas com as influncias mais diversas (rstica
romana, minscula carolngio, letra inglesa...), baseadas todas elas na mo que
as criou. Com o tempo a escritura caligrfica se tornou cada vez mais decorativa.
Atualmente se utiliza em convites a cerimnias ou determinados acontecimentos.
Como exemplos deste tipo podemos citar as fontes American Uncial, Commercial
156 de 163
Script, Cancelleresca Seript, Bible Seript Flourishes, Zapf Chancery, Young
Baroque.
Gticas: de estrutura densa, composio apertada e verticalidade acentuada,
mancham extraordinariamente a pgina. Ademais, no existe conexo entre
letras, o que acentua mais sua ilegibilidade. Exemplos deste tipo so Fraktur, Old
English, Koch Fraktur, Wedding Text, Forte Grotisch.
Cursivas: costumam reproduzir escrituras de mo informais, mais ou menos
livres. Estiveram muito na moda nos anos 50 e 60, e atualmente se detecta certo
ressurgimento. Exemplos: Brush, Kauffman, Balloon, Mistral, Murray Hill, Chalk
Line e Freestyle Script.
Decorativas
Estas fontes no foram concebidas como tipos de texto, e sim para um uso espordico e
isolado.
Existem numerosas variaes, porm podemos distinguir dois grupos principais:
Fantasia: similares em certo modo s letras capitulares iluminadas medievais, so
em geral pouco legveis, portanto no so adequadas na composio de texto e
sua utilizao se circunscreve a ttulos curtos. Exemplos deste tipo so as fontes
Bombere, Block-Up, Buster, Croissant, Neon e Shatter.
poca: pretendem sugerir uma poca, uma moda ou uma cultura, procedendo de
movimentos como a Bauhaus ou a Art Dec. Antepe funo ou ao formal, com
traos simples e equilibrados, quase sempre uniformes. Muito utilizados na
realizao de rtulos de sinalizao de edifcios e anncios exteriores de lojas.
Exemplos deste grupo so Futura, Kabel, Caslon Antique, Broadway, Peignot,
Cabarga Cursiva, Data 70, LCD, Gallia.
Jariantes de uma #amlia
Dentro de cada famlia, as variveis tipogrficas permitem obter diferentes solues de
cor e ritmo. As variveis constituem alfabetos alternativos dentro da mesma famlia,
mantendo um critrio de desenho que as "aparentam" entre si.
As variaes de uma fonte so obtidas modificando propriedades como:
O corpo ou tamanho: maisculas, minsculas e capitais.
A grossura do trao: ultrafina, fina, book, redonda, media, semi-negro, negro e
ultra-negro.
157 de 163
A inclinao dos eixos: redonda, cursiva e inclinada.
A proporo dos eixos: condensada, comprimida, estreita, redonda, larga,
alargada e expandida.
A forma do traado: perfilada, sombreada, etc.
Outras variantes de uma fonte incluem versaletes, nmeros, nmeros antigos,
smbolos de pontuao, monetrios, matemticos e misturados, etc.
Algumas famlias possuem muitas variaes, outras somente poucas ou nenhuma, e cada
variao tem um uso e uma tradio, que devemos reconhecer e respeitar.
http://www.criarweb.com/artigos/"amilias#tipogra"icas.html
,ontes >eri# e #ontes >ans >eri#
:emos a c"assifica!o de fontes tipogrficas em ;erif e ;ans ;erif.
Por Luciano Moreno
Publicado em: %?+?/+
Valorize este artigo:
2 votos
Uma classificao das famlias de fontes muitos mais geral que a DIN 16518-AtypI,
porm muito utilizada em meios digitais, a que divide as famlias tipogrficas em Serif
e Sans Serif.
As #ontes seri# ou serifas tm origem no passado, quando as letras eram talhadas e
gravadas em blocos de pedra, porm resultava difcil assegurar que as bordas das letras
fossem retas. Por conta disso, o talhador desenvolveu uma tcnica que consistia em
destacar as linhas cruzadas para o acabamento de quase todas as letras, apresentando
assim uns remates muito caractersticos nas extremidades das letras, conhecidos com o
nome de serif.
Outra particularidade comum das fontes serif, derivada do fato de que as tipografias
romanas se baseavam em crculos perfeitos e formas lineares equilibradas, que as
letras redondas como a o, c, p, b, etc, tm que ser um pouco maiores porque
opticamente parecem menores quando se agrupam em uma palavra junto a ouras
formas de letras.
A grossura das linhas das fontes serif modernas tambm tem sua origem na histria. As
primeiras se realizaram mo implementando um clamo ou uma ponta da haste,
permitindo ponta plana da pluma distintas grossuras de traado. Esta caracterstica se
conservou pela beleza e estilo natural que traz s letras.
158 de 163
As fontes serif incluem todas as romanas. So muito apropriadas para a leitura seguida
de longos textos, j que os traos finos e os remates ajudam ao olho a fixar e seguir uma
linha em um conjunto de texto, facilitando a leitura rpida e evitando a monotonia.
Como exemplos de fontes serif podemos citar Book Antiqua, Bookman Old Style, Courier,
Courier New, Century Schoolbook, Garamond, Georgia, MS Serif, New York, Times, Times
New Roman e Palatino.
As #ontes sans seri# ou etruscas fazem seu aparecimento na Inglaterra durante os anos
1820 a 1830. No tm remates em suas extremidades (sem serif), entre seus traos
grossos e finos no existe apenas contraste, seus vrtices so retos e seus traos
uniformes, opticamente ajustados em suas conexes. Representam a forma natural de
uma letra que foi realizada por algum que escreve com outra ferramenta que no seja
um lpis ou um pincel.
Associados desde seu incio tipografia comercial, sua legibilidade e durabilidade os
faziam perfeitos para impresses de etiquetas, embalagens, e demais propsitos
comerciais. Entretanto este uso motivou que fossem desapreciados por aqueles que se
preocupavam pelos tipos belos e a impresso de qualidade.
As poucos, as fontes sans serif foram ganhando terreno s serif. Uma das razes de seu
triunfo foi que os modernos mtodos mecnicos de fabricao dos tipos estavam
especialmente bem adaptados para este particular estilo de letra. Outra razo era que a
ausncia de remates e seus traos finos as tornavam muito apropriadas para letras
grandes usadas em poucas palavras para ser vistas a uma certa distncia, como o caso
de rtulos, cartazes, etc., elementos de comunicao cada vez mais em auge.
As fontes sans serif incluem todas as Serif, resultando especialmente indicadas para sua
visualizao na tela de um computador, sendo muito legveis a pequenos tamanhos e
belas e limpas a tamanhos grandes. Entretanto, no esto aconselhadas para textos
longos, j que so montonas e difceis de seguir.
Entre as fontes sans serif encontram-se: Arial, Arial Narrow, Arial Rounded MT Bold,
Century Gothic, Chicago, Helvetica, Geneva, Impact, Monaco, MS Sans Serif, Tahoma,
Trebuchet MS e Verdana.
http://www.criarweb.com/artigos/"ontes#seri"#e#"ontes#sans#seri".html
6ipogra#ia digital
:emos como podemos <inter"etrar= e desenhar caracteres de me"hor
#ua"idade.
159 de 163
Por Luciano Moreno
Publicado em: $$?+?/+
Valorize este artigo:
2 votos
A aplicao da informtica impresso, ao design grfico e, posteriormente, ao
webdesign, revolucionou o mundo da tipografia. Por um lado, a infinidade de aplicaes
informticas relacionadas com o design grfico e editorial tornou possvel a criao de
novas fontes de forma cmoda e fcil. Por outro lado, foi necessrio redesenhar muitas
das fontes j existentes para sua correta visualizao e leitura na tela, fazendo que se
ajustem a rede de pixels da tela do monitor.
O tipo digital permite "interletrar" e desenhar caracteres melhor e com maior fidelidade
que o tipo metlico, existindo atualmente no mercado a maioria das famlias tipogrficas
adaptadas ao trabalho em computador, e as modernas aplicaes de auto-edio e
desenho permitem manejar facilmente as diferentes fontes e suas possveis variantes em
tamanho, grossura e inclinao.
Tambm se superaram os problemas de falta de qualidade de perifricos de sada
mediante a tecnologia laser e a programao :ost>cript. Esta ltima, especialmente,
sups um grande impulso para o campo tipogrfico, ao permitir contornos de letras
perfeitamente definidos, baseados em funes matemticas.
Outro importante avance na tipografia digital veio da mo da companhia Apple, que
lanou o sistema de #ontes 6rue6<pe, baseado tambm na definio matemtica das
letras, o que permite um perfeito escalado das mesmas, sem efeitos de dentes de serra,
de forma similar ao que ocorre nos grficos vetoriais.
160 de 163
Com respeito s fontes disponveis em um computador, os sistemas operacionais
instalam por padro um nmero varivel delas. Posteriores instalaes de aplicaes de
auto-edio, desenho, entre outras fontes novas, de tal forma que difcil saber em um
momento dado que fontes esto disponveis em um certo computador.
As principais famlias tipogrficas includas nos sistemas operacionais Windows so Abadi
MT Condensed Light, Arial, Arial Black, Book Antiqua, Calisto MT, Century Gothic, Comic
Sans MS, Copperplate Gothic Bold, Courier New, Impact, Lucida Console, Lucida
Handwriting Italic, Lucida Sans, Marlett, News Gothic MT. OCR A Extended, Symbol,
Tahoma, Times New Roman, Verdana, Webdings, Westminster e Wingdings. A estas h
que adicionar as instaladas por outras aplicaes de Microsoft, como Andale Mono,
Georgia e Trebuchet MS.
Por su parte, entre las tipografas incluidas en el sistema operativo MacOS se encontram
Charcoal, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol e
Times.
Ademais, existem infinidade de fontes disponveis em todo tipo de suportes (disquete,
CD, DVD, pginas web, etc.), assim como aquelas no padronizadas criadas por autores
pontuais, todas elas facilmente instalveis em qualquer mquina.
O principal inconveniente deste desconhecimento que no podemos saber a cincia
certa se as fontes que estamos usando em tela estaro logo disponveis na imprensa, na
impressora ou no computador do leitor, por isso que conveniente usar fontes padro ou
comprovar a compatibilidade das fontes usadas com os meios de impresso necessrios.
Uma exceo a esta regra o caso de que os textos sejam salvos como arquivo grfico
(formatos TIFF, GIF, JPG, PNG, SVG, SWF, etc.), j que neste caso a impressora ou
monitor interpretaro o texto de forma adequada, embora geralmente com pior
qualidade.
http://www.criarweb.com/artigos/tipogra"ia#digital.html
,ontes para impresso e #ontes para tela
:emos tcnicas e tipos de fontes tipogrficas para tipos de reso"u$es de
te"a e impress!o.
Por Luciano Moreno
161 de 163
Publicado em: /?-?/+
Valorize este artigo:
2 votos
As fontes tipogrficas desenhadas para sistemas de impresso tradicionais esto
pensadas para ser reproduzidas em altas resolues e geralmente se visualizam mal nas
telas dos computadores, sobretudo em pequenos tamanhos, j que as formas dos
caracteres no foram concebidas para ser reproduzidas em uma tela de baixa resoluo.
Este fator fez necessria a criao de fontes especficas para ser visualizadas no monitor
de um computador, desenhadas para ser facilmente legveis em condies de baixa
resoluo. Trata-se de fontes como Verdana, Tahoma (sans serif) e Georgia (serif).
Enquanto que as fontes de impresso se tornam indefinidas e ilegveis ao ser submetidas
a "antialiasing" para suavizar a gradao dos traos, nas tipografias concebidas para sua
visualizao em tela cada trao e cada ponto se encaixam exatamente na trama de pixels
que compe a mesma.
Seu desenho evita, no possvel, as curvas, tendendo s linhas verticais ou horizontais, o
que faz com que apaream ntidas e definidas em corpos pequenos.
:iCeli8ao e antialiasing
As fontes desenhadas para tela apresentam a desvantagem de que, ao estar desenhadas
para um tamanho determinado, no possvel redimension-las de forma correta,
aparecendo os traos verticais e horizontais que as compem distorcidos.
Uma soluo possvel seria redimension-las exatamente com um mltiplo de seu
tamanho natural, j que coincidiria novamente com a rede de pixels da tela, porm ento
se vem pixeladas, com efeitos de dentes de serra.
162 de 163
Este efeito indesejado se pode evitar mediante a tcnica do antialiasing, consistente em
um esfumaado das bordas dos caracteres, criando uns pixels intermedirios entre a cor
do caractere e a do fundo, para que a mudana entre ambos no seja to brusca, com o
qual se consegue que as margens se vejam suaves e no em forma de dentes de serra.
O antialiasing um mecanismo muito utilizado no tratamento de imagens de mapas de
bits, dispondo quase todos os programas grficos de filtros especficos para sua
aplicao.
No que se refere aos textos, os sistemas operacionais costumam oferecer opes de
configurao do antialiasing para evitar sua gradao em tela. Nos sistemas Windows,
por exemplo, se acessa a esta funcionalidade desde Iniciar > Painel de controle > Vdeo
> Aparncia, onde costuma ter um checkbox para habilitar o antialiasing.
Como a aplicao deste mtodo de visualizao de textos configurvel pelo usurio,
nunca poderemos estar certos de sua ativao, por isso no sabemos de antemo como
se vero as fontes no monitor de cada usurio. Como alternativa, podemos converter os
textos em imagens, sempre que sejam de curta extenso (ttulos curtos, cabealhos,
etc.), j que ento sim que poderemos aplicar-lhes o antialiasing e estar certos de sua
163 de 163
visualizao final.
Iinting
Outra tcnica aplicvel s fontes destinadas a tela o denominado processo de hinting,
indispensvel para qualquer fonte que tente funcionar em corpos pequenos e em
dispositivos de baixa resoluo.
um mtodo para definir exatamente que pixels se exibem para criar o melhor desenho
possvel de um caractere de tamanho pequeno a baixa resoluo. Como o mapa de bits
que desenha cada signo na tela se gera a partir de um desenho de linha ou "outline",
muitas vezes necessrio modificar este contorno para que a combinao desejada de
pixels se exiba. Um "hint" uma instruo matemtica que se agrega a uma fonte
tipogrfica com o fim de modificar o desenho dos caracteres em determinados corpos.
http://www.criarweb.com/artigos/"ontes#para#impressao#e#"ontes#para#tela.html