• Sobre
• Cursos Online
• Orkut
• Youtube
• Twitter
• Contato

07-07-10

Como fazer um background igual ao da MSNBC?

Você já passou pelo site da MSNBC.com e deu uma olhadela no background que encontramos no topo do site? Bonito, não? Você sabe como fizeram esse lindo efeito de luz multicolorido?

Leia mais…

04-05-10

Erros e Acertos no Design de Sites Famosos

Costumo dizer que uma boa forma de aprendizado é a observação. É a forma mais barata e eficiente de ensino. Por isso convido você, caro leitor de Avante, para passear junto comigo por alguns sites de celebridades e empresas famosas, tentando identificar seus erros e acertos no design voltado para web.

Leia mais…

01-15-10

Texturas de papéis velhos, coisas sujas e arranhadas. Grunge!

Nem sempre o que é velho é ruim. Aposto que você algum dia procurou por texturas de papéis velhos, antigos, um pouco sujos. Dependendo do layout pode dar um charme a mais. E sei o quanto é difícil encontrar texturas de qualidade em alta definição de papéis amassados, ferrados e fud…erosamente estraçalhados.

Leia mais…

09-23-09

40 criativas técnicas de background

Se anos atrás o que deixava qualquer site bonito era uma animação flash, hoje o background tomou o seu lugar. No início da Internet, lá pelos anos 98, alguns portais até faziam uma brincadeira com bg. O ZAZ por exemplo (atual Terra), mudava praticamente todos os dias o seu background, dependendo da época do ano, assunto do dia ou data comemorativa.

A moda passou e agora voltou com força total, sendo utilizado com algumas técnicas diferentes. Hoje o background faz parte de 80% da composição de um layout e de seu apelo. Imagens grandes, que ocupam toda a tela, independente da resolução, sendo utilizado fotografias, vetores ou abstrações. Algumas vezes o background se relaciona com o conteúdo ou com outro elemento visual do site. É o responsável por toda sua atmosfera, determinando sensações que apenas palavras não passariam.

Procurando sobre o assunto achei uma compilação com 40 diferentes técnicas de se tratar um background. Um excelente exercício de observação. Quero que você visite cada site e tente captar onde está a relação entre o background e conteúdo, as técnicas empregadas, até que ponto o BG é importante na composição do layout, a harmonia de cores, enfim, observe e faça perguntas para você mesmo e, claro, procure as respostas. Sem dúvida a melhor forma de estudar. Depois pratique!

Ah sim, aqui está os 40 exemplos.

Dica da Noupe.

Para o alto e Avante!

09-10-09

200 lindas texturas grátis para background de sites

Você está procurando aquelas texturas que se repetem para criar backgrounds para o seu site? Alguns conhecem como patterns, outros por textura mesmo. O que importa é que esses elementos podem deixar o seu site mais encorpado e atraente.

A dica que trago para vocês, meus pupilos leitores de Avante, 200 texturas muito bacanas criados em Photoshoop e totalmente grátis. Tem textura de tudo, madeira, flores, plástico, retalho, corações, flores, bolinhas, temas infantis, enfim, um mais bonito que o outro.

Quer começar a brincar? Então entre aqui.

Agradecimentos a Francesco Mugnai.

05-26-09

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.

Rob Morris é um designer australiano baseado no Japão. Ele é freelancer atendendo clientes em todo o mundo através de seu site. Você pode acompanhar também suas aventuras no Twitter. Tradução e adaptação de Bruno Ávila.

Para o alto e Avante!

12-09-08

400 Backgrounds em PSD e Vetor

Vocês já perceberam como no design web atual o background do site faz uma grande diferença, não é verdade?

Nunca se utilizou tanto efeitos de fundo como hoje. Um dos recursos mais interessantes são os chamados Patterns, aquelas figurinhas que quando juntas, formam um desenho simétrico. Quase que azulejos virtuais.

Passeando pela Net descobri mais uma coleção com mais de 400 fundos, entre patterns e silhueta de plantas que podem lhe ajudar bastante na criação do background do seu layout.

E o melhor de tudo, é tudo grátis! Oferecimento do Design Reviver. Vai lá, pega logo essa coleção!

Para o alto e Avante!

04-22-08

Como fazer papel envelhecido no Photoshop

Denis Lis ensina você a fazer aquela textura de papel envelhecido que você tanto procura, todo feito em Photoshop. Clique aqui para ver o tutorial.

Para o alto e Avante!

04-14-08

Texturas do tipo “Pattern”

São aquelas texturinhas que mais parecem azulejos ou papel de parede. Em certos casos fica bem elegante. Em DinPattern você irá encontrar alguns bem bonitos. Dê uma olhadinha.

Para o alto e Avante!

03-25-08

319 Texturas Gratuitas para Background

Procurando alguma textura para usar como background em seu site ou de sua criação, em alta resolução? Ainda por cima grátis? Conheça TextureKing, um site que até o momento que em escrevo esse post possui 319 backgrounds, dividido por tipos e materiais, em altíssima resolução. Aqui está o link. Divirta-se: http://www.textureking.com/index.php/category/all-textures