Tudo sobre Web Design e outras firulas.
O FUSCA E O JOOMLA 2.5
O que tem a ver um Fusca, uma Ferrari e um tema para Joomla 2.5? Assista o vídeo ao lado e descubra. ;)
5 Truques Simples de Luz e Sombra (Efeitos de Gradiente)
É comum notar nos primeiros trabalhos dos alunos do Curso de Design Web um excesso de gradiente em seus layouts, geralmente mal aplicados. São efeitos de degradê que fogem da realidade, não respeitando um ponto central de emissão de luz ou ficando pesados, carregados.
A idéia desse post é trazer para o público brasileiro os 5 truques sugeridos pelo australiano Rob Morris na alemã Smashing Magazine, com tradução e comentários deste senhor que vos fala. 
São idéias simples que vão melhorar sua visão sobre gradientes, luz e sombras.
Então vamos lá!
Luz e sombra, no mundo real, está em toda parte que você olha. Tudo que você vê, reflete a luz e consequentemente geram sombras. Visualmente, luz e sombra nos ajudam a dar sentido aquilo que vemos e nos ajudam a compreender textura, dimensão e perspectiva.
Então, para tentarmos fazer com que nossos layouts web fiquem o mais natural possível, um bom entendimento de luz e sombra é muito importante. Aqui estão 5 maneiras de utilizar melhor luz e sombra para destacar seu layout, fazendo-os saltarem da tela.
Uma rápida anatomia da luz e sombra
Na figura abaixo podemos ver que a fonte de luz vem da esquerda. O destaque é o lugar onde a luz é mais forte e as sombras surgem sobre o lado mais distante da fonte luminosa. Luz e sombra nos diz muito sobre as superfícies e texturas da imagem.
Mas vocês devem estar se perguntando, “o que tem isto a ver com Web Design”?
Se você estiver tentando criar um design rico, interfaces táteis, luz e sombra serão seus amigos. Da mesma forma que muitos artistas clássicos fizeram pinturas saltarem para fora da tela, você pode usar luz para dar profundidade aos seus desenhos e um maior interesse visual.
1. Utilizando uma fonte de luz
Talvez a parte mais importante do trabalho com iluminação é saber de onde a luz é proveniente.
A fonte de luz irá determinar onde ficarão os destaques e sombras. Se você estiver trabalhando no Photoshop, você poderá usar o “global light”, efeito de modo que todos os seus efeitos de iluminação seguirão a mesma direção de luz.
Controlar a fonte de luz em seus projetos (mesmo só com um gradiente linear ou radial) pode ajudar a criar a melhor atmosfera para o layout. Ela também pode ajudar a direcionar os olhos para um ponto focal.
Exemplos na Web
Campaign Monitor usa uma explosão de raios luminosos que transmite a sensação de um nascer do sol por trás do projeto.
Icebrrg usa luz para submergir seu website numa profundidade subaquática.
Mike Precious usa mais de uma fonte de luz para adicionar interesse visual, se assemelhando ao estilo da luz direcional do desk-lamp.
Deaxon utiliza uma fonte de luz por detrás do seu sutil logo para dar seu devido destaque.
2. Gradientes
No mundo real, poucas coisas têm um tom de cor plano. Luz e sombra estão em tudo. Utilizar gradientes suaves é uma ótima maneira de proporcionar profundidade e trazer vida ao seu design.
O segredo do uso dos gradientes é não exagerar na mudança de tons, prefira gradientes entre tons próximos, um escuro para um menos escuro, um tom claro para um menos claro, sempre da mesma cor, modificando apenas os tons.
Exemplos na Web
nclud é uma lição do uso de gradientes sutis e uma utilização eficaz dos gradientes para separar e organizar o conteúdo.
CSS Ninjas parece utilizar cores planas à primeira vista, mas cada área tem um sutil gradiente, o que lhe confere textura.
3. Linhas de Destaque
As linhas de destaque podem ajudar a equilibrar sombras e devem ser usados nas bordas de objetos mais próximos à fonte luminosa. Essas linhas normalmente são esquecidas. Porém, uma pequena mudança na cor dessas linhas podem fazer toda a diferença no seu design, destacando ainda mais o local.
Para percebermos melhor as linhas de destaque, temos que ampliar o layout. Um bom truque para adicionar essas linhas é trabalhar com um zoom de 200% ou mais, porque a 100% pode ser difícil ver o que está se fazendo.
Exemplos na Web
Icon Dock e Newism: ambas utilizam uma semi-transparente linha branca no topo da página, elemento que lhe confere destaque. É pouco perceptível, mas acrescenta um balde de polimento a sua concepção.
Você provavelmente já acessou o site da Apple porém talvez não tenha notado a adorável linha de destaques na parte inferior aos itens de navegação, que ajudam a tornar as palavras mais destacadas.
4. Sombras Básicas
Sombras podem realmente acrescentar profundidade visual e textura quando utilizada da maneira correta. A chave é não exagerar.
As qualidades de uma sombra dependem da direção da luz e sua intensidade, assim como a distância entre os objetos e a superfície onde a sombra irá se espalhar. Quanto mais forte for a luz, mais escura e nítida será a sombra. Já se a luz for suave, a sombra também será.
Exemplos na Web
Quando se trata de exemplos online de sombras, há muitos sites para você escolher. Quando usados habilmente, eles podem adicionar um toque de dimensão a sua concepção.
LinkedIn adiciona uma sombra muito sutil para o fundo da sua barra lateral, criando uma ilusão de profundidade.
O Google, talvez o mais simples trabalho de página na Internet, ainda investe na sutil utilização de sombra em seu logotipo.
5. Sombras Avançadas
Você pode fazer muita coisa além da básica sombra, dando aos elementos uma terceira dimensão. Longas sombras são uma ótima maneira de alterar a relação espacial entre os objetos em uma página.
Nos exemplos abaixo, a mesma latinha de Coca-Cola pode ter suas posição completamente alterada, dependendo da sua sombra.
Exemplos na Web
Emotions by Mike utiliza sombra (e luz) para transformar a página em um piso plano.
Superkix utiliza sombra para flutuar o tênis “acima” do Web site. A sombra se move quando você redimensiona a página, como se a luz estivesse se deslocando.
Sofá cria uma palavra sobre o fundo branco, com grande utilização de luz e sombra.
Para o alto e Avante!
Bruno Ávila
Um pequeno menino risonho e falante, que gosta de arroz, batata-frita e chocolate. Sua diversão é fazer layouts, publicidade e cursos marotos para alunos supimpas. E nas horas vagas, claro, trabalha um pouquinho. ;D
Criação Publicitária
Aprenda a utilizar técnicas de comunicação visual e publicidade em seus layouts.
Identidade Visual
Para você que sempre quis aprender a fazer logotipo e manual de identidade visual com Bruno Ávila
Tableless para
Web Designers
Aprenda de uma vez por todas a recortar e montar bem um layout
Design para
Joomla 2.5
Aprenda a criar temas profissionais especialmente para Joomla 2.5!
TWITTER DO BRUNO
17 Comentários
Fabio Nunes
muito interessante o tópico, eu estou começando novamente na área de designer de websites, e acho importante estes assuntos q vc vem colocando em pauta. Isso me dá cada vez mais segurança em realizar um treinamento com vc Bruno, pq sei q vc sabe do q está falando, diferente de alguns treinamentos caça-níqueis que não ensinam nada. Parabéns, vc merece. Me aguarde pq qdo sobrar uma grana, eu to chegando.
Tiago César Oliveira
Bem interessante. Realmente é meio que um comportamento padrão a utilização de gradientes para design web. Ótimas dicas, obrigado por compartilhar!
John Allef M. Freitas
Show de bola Brunão, valeu mesmo, suas dicas são sempre muito úteis. Eu visito todos os dias o seu site e o blog Avante! para conferir as novidades.Estou começando nesse mundo fantástico da internet a muito pouco tempo(há uns 2 anos).Sou seu fã desde quando começei a utilizar a internet e espero poder aprender ainda mais contigo!
Lucas “Spider”
Ótimo post! Seria legal você traduzir de vez em quando artigos de sites estrangeiros como o Smashing, Vandelay, You The Designer e Webdesigner Depot. São blogs realmente muito bons em questão de artigos.
Abraços!
Silvia Zampar
Excelente a postagem!
Na verdade, apesar dos exemplos em web, as informações são úteis também para os Desing Gráficos, área que eu dou aula e também vejo muitos trabalhos “exagerando” de tudo: sombras, gradientes, efeitos especiais.
Costumo sempre brincar com os alunos que excesso de efeitos é típico de iniciantes e reconhecemos um trabalho feito por um só de “bater o olho”.
A verdade é que só com o tempo todos aprendemos que “menos é mais” em se tratando de design.
Vou reproduzir sua postagem no meu blog, claro que dando-lhe os créditos pela sua adaptação e tradução do mesmo.
Parabéns!
Cleber Villa
Excelentes dicas sobre sombras…
Adorei!
Abraços Brunão!
Dado Shapper
Bela matéria, realmente o bom uso dessas técnicas faz com que a simplicidade seja rica.
Adorei.
Emiliana
Parabens Bruno, vc é mesmo d+,sempre trazendo ótimos conhecimentos para todos nós.
Obrigada!
Xico
sou programador e nao tenho habilidades com desenho, mas gosto de ver trabalhos desenvolvidos com simplicidade e qualidade. Adorei o trabalho, principalmente pequenos detalhes que fazem a grande diferença no acabamento.
Gerson
Agora ja tenho a noção… So falta estudar e estudar
vlw!
Matheus Matos
Adorei! Realmente muito bom o post! Tenho 14 anos e sou diagramador de um Jornal aqui em João Pessoa-PB, apesar de gostar bastante desse tipo de design, fico a cada dia mais deslumbrado pelo webdesign, já me arrisco fazer alguns sites em joomla, mais sem template próprio não tem graça! Sonho em um dia me tornar um webdesign como você. Assim que eu ganhar uma graninha venho aqui fazer o curso de criação de um template joomla! Parabéns!
Matheus Matos
Thiago Sanches
Preciosas dicas…. eu costumo usar esse tipo de gradiente e sombras, mas a da linha de pixel mais clara eu nunca tinha percebido/observado O.O
é fantástico o efeito q ela proporciona… vou até procurar observar e compreender essa técnica, pq eu ainda naum entendo pq dá tanta realidade apenas fazendo isso. heheeheh
pelo meu entender, dominio de tecnicas como essa, faz toda a diferença
Obrigado por compartilhar iso com a gente, Bruno.
Alessandro
Excelente postagem, parabéns pelo Blog, Bruno Ávila.
Esses conceitos são importantíssimos para desenvolvermos uma boa técnica de criação de layouts. Me ajudou muito!
lia
já tinha visto esse post antes, obrigada por traduzi-lo!! =)
gabriella
nossaaaaa
ariany
interessante
Jessica
Brunooo, esse post seu sumiu lá da página inicial, só ta aparecendo por pesquisa!
Aliás, post muito interessante!
Faloooow!