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

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-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!

09-04-08

Centenas de Texturas Grátis para Background

Essa dica é do nosso leitor e meu conterrâneo Rafael Carvalho, de Minas Gerais. Trata-se de excelente site de texturas do tipo “Pattern”, aquelas texturas que parecem papel de parede ou azulejo de banheiro.

Conheça o BgPatterns. Nele você pode escalonar a textura,  aumentar ou diminuir a opacidade, definir a localização da textura, cores rotação, dimensão, enfim, uma ótima ferramenta online com centenas de opções de textura. Acho que vai ser uma mão na roda para muita gente aqui.

Para acessar BgPatterns clique aqui.

Para o alto e Avante!

08-05-08

Efeito de bandeira tremulando com Photoshop

Você já tentou de todo jeito dar um aspecto de bandeira tremulando a sua imagem e não consegue? Quer fazer com que uma estampa pareça um tecido? Mas isso é muito fácil de fazer utilizando Photoshop.

Basta uma foto de qualquer um tecido e suas dobras juntamente com a imagem da estampa. Pronto! Veja o vídeo-tutorial abaixo para aprender como juntar o tecido com a estampa. O vídeo é em inglês mas basta observar o que o rapaz faz que você irá entender.

07-03-08

+300 Texturas e Pincéis estilo antigo

Você está procurando por texturas ou pincéis/brushes antigos? Aquelas que nos remetem aos anos 20, 30, 40? Então você vai encontrar aqui mais de 300 opções.

Leia mais…

06-05-08

Gradientes Perfeitos para Botões Web 2.0

 

Se você quer fazer aqueles botões que dá uma vontade de clicar, todos bonitinhos, utilizando um degradê delicado e real, então aqui estão vários gradientes disponibilizados pela Deziner Folio para você utilizar diretamente com o Photoshop. 

Faça o download, clicando aqui.

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