Simplesmente no nosso dia-a-dia não conseguimos escapar à luz e à sombra – são dois elementos que estão presentes em todo o lado, para onde quer que olhe, todos os objectos que vê refletem luz e lançam uma espécie de sombra. Visualmente, a luz e a sombra ajudam-nos a dar sentido ao que vemos e a compreender melhor as noções de textura, dimensão e perspectiva.
Por isso e por que, enquanto designers, procurarmos que os nossos designs, sobretudo em ambiente web, sejam naturais, marcantes e intuitivos, um bom entendimento sobre luz e sombra é muito importante. Aqui estão 5 maneiras de melhor utilizar luz e sombra para refinar os seus designs e torná-los mais visíveis no ecrã.
* *
0 | Breve Anatomia da Luz e da Sombra
Na figura acima, pode ver que a fonte de luz vem da esquerda. O destaque é o lugar onde a luz é mais forte, e as sombras caem sobre o lado mais afastado da fonte luminosa. O aparecimento de luz e sombra diz-nos muito sobre a superfície e textura da imagem.
Mas o que tem isto a ver com o web design? Simples, se precisar de conceber interfaces ou websites ricos ou tácteis, luz e sombra são os seus melhores aliados. Da mesma forma que muitos artistas plásticos clássicos fizeram as suas pinturas saltar fora da tela, pode igualmente usar luz para dar aos seus projectos profundidade e interesse visual.
1 | A fonte de luz
Talvez a parte mais importante do trabalho com luz é saber de onde é que ela provém, uma vez que essa fonte de luz irá determinar a zona onde os destaques e sombras vão incidir (embora em web design, possa dar-se ao luxo de partir essas regras em zonas). Se estiver a trabalhar com o Photoshop, facilmente pode usar o efeito “global light” de modo a que todos os seus efeitos de luz sigam a mesma direcção.
Controlar a fonte(s) de luz nos seus projetos (mesmo se apenas com um gradiente linear ou radial) não só o ajuda a criar uma atmosfera específica nos seus designs, como também permite-he direccionar a nossa visão e atenção para um ponto de relevo.
Exemplo na Web – Icebrrg
2 | Gradiente
No mundo real, muito poucos objectos são planos isto por que, como disse no ínicio, luz e sombra estão em todo o lado. Utilizar de forma subtil gradientes é uma óptima maneira de proporcionar profundidade e dar vida a objectos no ecrã.
A chave para obter êxito com gradientes é ser discreto, não exagere. Se utilizar o Photoshop, use os layer styles para o gradiente. Isto dá-lhe a liberdade para editá-lo em qualquer ponto, mas também significa que se redimensionar o elemento, o gradiente irá ser redimensionado também.
3 | Destaques
Um destaque pode ajudá-lo a equilibrar sombras nos seus projectos e deve ser usado na extremidade do objecto mais próxima à fonte luminosa. Os destaques são com frequência ignorados porque quando utilizados de forma eficaz, passam dspercebidos, uma vez que não consegue perceber que estão presentes num design. E apesar de não ser adequado em todas as ocasiões, um destaque, por mais pequeno que seja, pode fazer toda a diferença no refinamento e elegância de uma interface. Quanto melhor o destaque, mais brilhante a superfície irá parecer no ecrã.
Para realmente apreciar destaques, temos de ampliar um pouco as imagens. Um bom truque para adicionar destaques está a trabalhar a 200% ou até mais, por que a 100%, pode ser difícil ver o que está claramente a fazer.
Exemplo na web - Icon Dock e Newism
4 | Sombras Básicas
Tal como os gradientes, drop-shadows tornaram-se uma marca para a maioria dos webdesigners famosos. As sombras podem realmente acrescentar profundidade visual e textura quando usadas da maneira mais adequada.
A chave está, novamente, na discrição, não exagere. As qualidades de uma sombra dependem da direcção da luz e da intensidade, assim como a distância entre o objeto e a superfície onde a sombra é incide. Quanto mais forte for a luz, mais escura e nítida é a sombra, e vice-versa, quanto mais suave luz, mais suave é a sombra.
5 | Sombras Avançadas
Para além de drop-shadows, existem várias alternativas para dar a objectos a sensação de uma terceira dimensão. Longas sombras são uma óptima maneira de alterar a relação espacial entre os objetos numa página.
Exemplos na web – Sofa
Artigos Relacionados
PhotoshopCafe.com (tutorial sobre como fazer sombras no Photoshop)
Advanced Shadow Techniques (como trabalhar com sombras no Photoshop)
PSDtop Blog (o que são drop-shadows)
Peachpit (luz e sombra no Photoshop)
Aviva (como captar sombras realistas)
PSDtuts (usar luz e sombra para dar vivacidade ao texto)
Build Internet (luz e sombra: apresentando gradientes em Photoshop)
PSDtuts (como usar gradientes para fazer luz e sombra… e um chavena de café)
Referências
SmashingMagazine.com
