Luz e sombra existem em todos os lugares da vida real. Tudo o que você vê é refletido pela luz e pela sombra. Visualmente, a luz e a sombra ajudam-nos a identificar as coisas e a reconhecer o seu material , escala e perspectiva .
Portanto, se queremos tornar o nosso web design mais natural, dinâmico, real e intuitivo, é muito importante compreender corretamente os efeitos de luz e sombra. Aqui estão cinco dicas para ajudá-lo a aproveitar melhor a luz e a sombra. Usá-las bem pode tornar seu design mais refinado e se destacar das outras páginas.
Uma rápida análise dos princípios de iluminação e sombras
Na imagem abaixo, a fonte de luz vem da esquerda. Os realces são as partes mais iluminadas e as sombras estão localizadas mais distantes da fonte de luz. A existência de luz e sombra nos ajuda a perceber uma grande quantidade de informações sobre o material da superfície de um objeto . Mas você pode perguntar: o que isso tem a ver com web design?
Se você planeja criar interfaces e sites ricos e texturizados, luz e sombra podem ajudá-lo. Assim como muitos artistas tradicionais usam luz em pinturas, você também pode usar luz para dar profundidade e interesse visual aos seus designs.
1. Use fonte de luz
Deve-se dizer que, ao usar iluminação, saber onde está a fonte de luz é a questão básica mais importante. A posição da fonte de luz determina a colocação de realces e sombras (embora em web design você possa quebrar essas regras). No Photoshop, você pode usar “Iluminação Global” em estilos de camada para garantir que as fontes de luz de todos os efeitos de luz e sombra criados estejam na mesma posição.
Controlar a posição da fonte de luz pode criar uma atmosfera única para o design da sua página (até mesmo um simples gradiente linear ou radial pode obter o efeito). Os efeitos de luz e sombra também podem orientar a mudança do centro visual.
O Campaign Monitor usa fontes de luz divergentes para criar um efeito de nascer do sol.
Icebrrg usa iluminação para deixar a página submersa.
Mike Precious usou mais de uma fonte de luz para adicionar interesse visual e usou iluminação de abajur por toda parte.
Deaxon tem uma fonte de luz fraca atrás do logotipo, que traz o foco da página para o logotipo.
2. Gradiente
No mundo real, nada é sempre plano. Luz e sombra se apegam a tudo. Usar gradientes é uma ótima maneira de criar profundidade e autenticidade.
A chave para usar gradientes é não exagerar . Ao desenhar gradientes no Photoshop, faça uma sobreposição de gradiente no estilo da camada. Isso garantirá que seu gradiente seja editável e, à medida que a camada for dimensionada, o gradiente também poderá ser dimensionado sem perdas.
O site da nclud usa gradientes sutis, mas eficazes para diferenciar e organizar o conteúdo.
À primeira vista, CSS Ninjas parece usar cores planas. No entanto, cada área de cor tem, na verdade, um gradiente fraco, criando um efeito material fascinante.
3. Destaques
Os realces equilibram as sombras e devem estar localizados nas bordas dos objetos próximos à fonte de luz . Os destaques são geralmente ignorados porque, se bem usados, você mal percebe que estão lá. Porém, nem todas as situações são propícias à existência de realces. Um realce sutil pode causar uma enorme diferença no polimento superficial de um objeto. Quanto mais “nítido” for o destaque, mais forte será o brilho da superfície do objeto.
Para apreciar os destaques, precisamos ampliar esses detalhes. Ao fazer designs de alto brilho, é uma boa ideia mais que dobrar o tamanho do seu design, porque você pode não conseguir descobrir o que está fazendo quando ele for exibido em sua escala original.
Tanto o Icon Dock quanto o Newism usam branco translúcido na borda superior da página para criar um efeito de destaque. Embora muito discreto, proporciona um brilho forte ao design.
Todos deveriam estar familiarizados com o site da Apple. Mas você provavelmente não percebeu o destaque sutil na parte inferior do menu de navegação. É esse destaque que confere ao cardápio um toque de destaque.
4. Sombras básicas
Assim como os gradientes, as sombras projetadas também são amplamente utilizadas por web designers. Quando usadas corretamente, as sombras projetadas podem realmente adicionar profundidade visual e textura a um design. O segredo é não exagerar ou abusar.
A profundidade da sombra depende da direção e intensidade da luz, bem como da distância do objeto à superfície de projeção. Quanto mais forte a luz, mais nítida e escura é a sombra;
Existem muitos exemplos de projeção na Internet.
O LinkedIn adiciona uma sombra projetada extremamente sutil na parte inferior da barra lateral para criar uma sensação de profundidade.
O Google – talvez a página mais difícil de criar na Internet – ainda usa uma sombra sutil em sua página de pesquisa.
5. Sombras avançadas
Para dar uma sensação tridimensional a um objeto, você tem muitas opções além da simples projeção. Sombras longas podem alterar drasticamente as relações espaciais dos objetos na página.
No exemplo abaixo, depois que a mesma lata de Coca recebe diferentes sombras e partes escuras, toda a posição espacial parece completamente diferente .
Emotions by Mike usa sombras (e iluminação) de forma inteligente para literalmente transformar uma página plana em um chão.
Superkix usa sombras projetadas para fazer os tênis flutuarem acima da página. Quando você amplia a página, a sombra também pode se mover, assim como a fonte de luz também muda. O sofá cria um piso sobre um fundo branco puro através do excelente uso de luz e sombra. Mais recursos O seguinte conteúdo está em inglês:
Sobre o autorRob Morris é um designer australiano que trabalha no Japão. Como designer freelancer, atende pela Digitalmash e tem clientes em todo o mundo. Você pode acompanhar suas aventuras no Twitter. |