5 truques simples para trazer luz e sombra em seus projetos

Simplesmente não há luz e sombra escapar - é em toda parte você olhar. Tudo que você vê reflete a luz e lança uma espécie de sombra. Visualmente, luz e sombra nos ajudar a dar sentido ao que vemos e nos ajudar a entender dimensão, textura e perspectiva.
Então, como nós tentamos fazer nossos projetos na Web mais natural, comovente e intuitivo, uma boa compreensão de luz e sombra é muito importante. Aqui estão 5 maneiras de usar melhor a luz ea

A Anatomia Rápido de Luz e Sombra

No diagrama simples abaixo, podemos ver que a fonte de luz está a chegar a partir da esquerda. O destaque é onde a luz é mais forte, e as sombras cair no lado mais afastado da fonte de luz. O aparecimento de luz e sombra nos diz muito sobre as superfícies e texturas na imagem.

Mas o que isso tem a ver com Web design, você pergunta?
Se você está tentando criar interfaces ricas e táteis e sites, luz e sombra são seus amigos. Da mesma forma que muitos artistas clássicos fizeram suas pinturas saltar para fora da tela, você pode usar a luz para dar a sua profundidade projetos e interesse visual. Vamos chegar a ele.

1. Usando uma Fonte de Luz

Talvez a parte mais importante de trabalhar com iluminação é saber onde a luz (s) é proveniente. A fonte de luz provavelmente irá determinar onde os destaques e sombras queda (embora com um design Web que você pode pagar a dobrar estas regras em lugares). Se você estiver trabalhando no Photoshop, você pode usar o "global luz" efeito de modo que todos os seus efeitos de iluminação seguem a mesma direção da luz.
Controlar o código fonte (s) de luz em seus projetos (mesmo que apenas com um gradiente linear ou radial) pode ajudar a criar uma atmosfera em projetos de sua página. Ela também pode ajudar a direcionar os olhos para um ponto focal no projeto.

Exemplos na Web

Campaign Monitor usar uma explosão de raios de luz que transmite a sensação de um nascer do sol por trás do projeto.

Icebrrg usam luz para submergir seu site submarina profunda.

Mike Precioso usa mais de uma fonte de luz para adicionar interesse visual e para combinar com o estilo de iluminação luminária.

Deaxon usar uma fonte de luz atrás subtil seu logo para dar a proeminência logotipo visuais na página.

2. Gradientes

No mundo real, muito poucas coisas têm um tom liso. Luz e sombra são em tudo. Sutilmente usar gradientes é uma ótima maneira de dar profundidade e torna as coisas ganham vida na tela.
A chave com gradientes não é exagerar eles. Se você estiver usando o Photoshop, fazer uso de estilos de camada para os seus gradientes. Isso lhe dá a liberdade de editá-los em qualquer ponto, mas também significa que se você redimensionar o elemento, o gradiente irá redimensionar também.

Exemplos na Web

nclud site do é uma lição de uso sutil, mas eficaz de gradientes para separar e organizar o conteúdo.

CSS Ninjas parece usar cores lisas, à primeira vista, mas cada área tem uma cor gradiente sutil, o que lhe confere textura.

3. Destaques

Destaques pode ajudar sombras de equilíbrio e deve ser utilizado nas bordas de objectos mais próximas da fonte de luz. Destaques são muitas vezes negligenciados porque quando utilizada de forma eficaz, você nem percebe que eles estão lá. E enquanto não é adequado para cada situação, um destaque pequeno pode fazer toda a diferença no polimento de uma interface. O "mais nítida" o destaque, a mais brilhante da superfície irá aparecer.
Para realmente apreciar destaques, precisamos ampliar um pouco perto. Um bom truque para adicionar destaques é trabalhar a 200% ou mais, porque a 100%, pode ser difícil ver o que você está fazendo claramente.

Exemplos na Web

Encaixe de ícones e Newism tanto usar uma linha de semi-transparente branca na borda superior do elemento de página para dar-lhe um destaque. É quase imperceptível, mas acrescenta um balde de polonês para o design.

Você provavelmente já viu o site da Apple já. No entanto, você pode não ter percebido os destaques encantadores na parte inferior dos itens de navegação, que ajudam a tornar as palavras olhar recesso.

4. Sombras básicas

Como gradientes, drop-sombras tornaram-se um grampo da maioria dos web designers. As sombras podem realmente adicionar profundidade visual e textura, quando usado da maneira certa. A chave é não exagerar.
As qualidades de uma sombra dependem da direcção e intensidade de luz, bem como a distância entre o objecto ea superfície onde a sombra é moldado. Quanto mais forte a luz, mais escura e mais nítida a sombra. A luz mais suave, mais suave a sombra.

Exemplos na Web

Quando se trata de exemplos on-line de abandono sombras, existem sites simplesmente demais para escolher. Quando usado com inteligência, eles podem adicionar um toque de dimensão até mesmo o design mais mínima.
LinkedIn adiciona uma sombra muito sutil para o fundo dos seus elementos da barra lateral para criar a ilusão de profundidade.

Google - talvez com a página que mais trabalhava na internet - ainda investe no uso sutil de sombra para a sua página de pesquisa.

5. Sombras avançados

Você pode fazer muito além básicos queda de sombras para dar elementos de uma terceira dimensão. Sombras mais longas são uma ótima maneira para mudar a relação espacial entre os objetos em uma página.
Nos exemplos abaixo, o mesmo Coque lata é dada posições completamente diferentes no espaço dependendo da sua sombreamento e sombra.