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

08-12-10

7 razões para preferir Fireworks do que Photoshop

Muitos me perguntam qual software usar para criar layouts de sites. O melhor é o Photoshop? O Fireworks presta? Bruno, qual o software que você utiliza?

Leia mais…

03-29-10

Como ampliar fotos sem perda de resolução?

Imagine você tirando fotos pouco importando se a resolução da foto está em 640 x 480. Pedindo ao cliente o logotipo do site em qualquer resolução, tanto faz, mesmo que o logo esteja pequenininho e em bitmap. Pois é, caros amigos, isso pode se tornar realidade dentro de  poucos anos. Estamos falando do método CS (Compressing Sensing), que possibilita ampliar fotos e imagens sem nenhuma perda de qualidade nem pixelização. É isso mesmo, você tira a foto através de um celular pereba, com aquela resolução sem vergonha de 320 x 240 e manda fazer um poster de 1 metro sem perda de qualidade. Inacreditável, não?

Leia mais…

07-15-09

É hora de abandonar a resolução 800×600?

Essa semana recebi um email do querido leitor e ex-aluno do curso de Design Web, Lenio Cesar de Varginha-MG, lançando a seguinte dúvida:

A configuração 800×600 hoje ainda é utilizada ?

pergunto isso pois pra fazer sites , ainda estou com dúvida de como fazer, se faço pensando no pessoal que ainda tem 800×600.

Para responder a essa dúvida inquietante não só de Lenio mas da maioria dos webdesigners e programadores desse Brasil varonil, fiz aqui uma breve pesquisa entre as estatísticas de acesso dos meus clientes para que vocês possam comparar com os dados dos seus sites e assim tentarmos chegar a uma conclusão.

Não irei citar os nomes dos sites pois são e clientes e não pedi autorização a eles para apresentar o que vou apresentar aqui. Mas como vocês não sabem o nome desses sites, não tem problema.

Primeiro vamos ver a resolução dos usuários que acessam este blog, o Avante!, durante todo o mês de Junho/2009.

Note que 44%, ou seja, quase a metade utilizam 1024 x 768. Já 16,12% utilizam 1280 x 800 e 12,07% utilizam 1280 x 1024. Já 800 x 600 fica em quinto colocado, com apenas 3,8%.

Mas será que o público condiciona esses resultados? Será que o fato do público do Avante ser composto basicamente de webdesigners, programadores e pessoas que trabalham com tecnologia e criação influencia nesses números?

É o que veremos agora. Trago para vocês as resoluções utilizadas pelos leitores de um site feminino com milhares de visitas/dia, no mesmo período de Junho/2009. Veja os números:

Note a diferença. Mais da metade utilizam 1024 x 768, 12% utilizam 1280 x 800 porém 9% utilizam ainda a resolução 800 x 600.

Vamos fazer só mais uma comparação, agora com um site de viagens, que possui um publico com percentual equilibrado de homens e mulheres. Veja:

Mais uma vez 1024 x 768 disparado na frente com 48%, 1280 x 800 em segundo com 19,18% e 1280 x 1024 em quarto praticamente empatado com 800 x 600, ambos com 6%.

O que podemos concluir com esses dados?

1. O reinado do 800 x 600 acabou faz tempo e deixou de disputar de igual para igual com a resolução 1024 x 768;

2. Presume-se que 1024 x 768 é a resolução utilizada por praticamente metade dos usuários gerais;

3. O tipo de público influencia nos tipos de resolução de vídeo, onde os ligados a tecnologia acabam utilizando mais resolução superiores a 800 x 600;

4. Podemos criar a hipótese de que os novos monitores LCD Widescreen e sua maior qualidade estejam influenciando no uso de resoluções superiores a 800 x 600;

5.Nota-se que, além das resoluções de 1024 x 768 e 800 x 600, apareceram dezenas de combinações diferentes de largura e altura de vídeo, o que nos leva a crer a difusão do uso de monitores de diversos formatos, que vão desde os laptops, netbooks a celulares. E isso parece ser uma tendência que veio para ficar.

Portanto a preocupação dos webdesigners não deve ser mais “se continuo fazendo layouts na resolução 800 x 600″ e sim “esse layout vai ser bem visualizado do laptop ao celular?“. Como sempre, isso vai depender do público, foco, principal meio a ser utilizado e por aí vai.

É, os dados estão aí, as conclusões também e a dúvida foi lançada. Agora a palavra é sua. O que você tem a nos contar sobre resoluções de vídeo? Vamos incrementar esse post com novas informações, seus comentários são bem vindos.

Para o alto e Avante!

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.

Para o alto e Avante!

04-15-09

Desastres do Photoshop

Que Photoshop faz milagre, a gente sabe muito bem que faz. Photoshop consegue transformar um Pitbull num Poodle, o Jô Soares em Brad Pitt e Hebe Camargo em Ana Hickman. E quando o Photoshop faz o contrário? Transforma o que é bonito e natural num verdadeiro desastre?

Conheça o Photoshop Disasters, um blog bem divertido que mostra os erros provocados pelas photoshopadas, em sites, revistas e anúncios publicitários. Uma boa referência do que não fazer no Photoshop, mostrando como a falta de bom senso paira até nas grandes agências.

Para o alto e Avante!

02-13-09

Transformação Impressionante com Photoshop

Olha, já vi muitos vídeos mostrando make-up, transformações e rejuvenescimento com Photoshop. Mas esse é um dos mais impressionantes que já vi. A coitada da velhinha realmente está com seu visual bem debilitado. A pele está flácida, toda enrugada, cheio de manchas, o cabelo já não ajuda mais, bichinha… mas pelo menos essa senhora parece ser uma velhinha bem simpática.

Este artista do Photoshop, que infelizmente não sei o nome, rejuveneceu a senhora uns 50 anos no mínimo. Transformou a pequena anciã numa cocotinha de 25. O mais legal é que ele não transformou a anciã em outra pessoa como outros trabalhos que vemos por aí que nem dá para acreditar que é a mesma modelo. Nesse caso não, mesmo depois de esticar ali e aculá, dá para perceber que se trata da mesma pessoa, só que mais jovem. Veja você mesmo com seus próprios olhozitos:

É meu amigo… lembre-se que Photoshop é virtual, hein! Ou seja, beleza não dura. O que dura para sempre é o amor.

Para o alto e Avante!

12-16-08

25 tutoriais para Photoshop sobre temas natalinos

Hohoho! Aproveitando a época de Natal trago para vocês 25 tutoriais grátis para os que gostam de um Photoshop. Tem de tudo, como fazer neve, árvore de natal iluminada, boneco de neve e outros efeitos lindíssimos. Acho que vai ajudar muito você nesse natal.

A dica é de Toxel.com. Vá direto para os tutoriais nesse link.

Para o alto e Avante!

11-21-08

1000 brushes de Photoshop bem criativos

Para os amantes dos brushes ou pincéis de Photoshop, apresento aqui vários conjuntos de brushes que, totalizando, são mais de 1000 opções. São de todos os tipos, manchas de sujeira, ferrugem, efeito floral, redemoinhos, mofo, manchas de petróleo, cabelo, fotografias envelhecidas, enfim, um mooonte de pincéis para todos os gostos.

Essa dica é do nosso querido leitor Neto Scarpari de Piracicaba – SP.

E aqui está o link.

Para o alto e Avante!

11-10-08

Efeito 3D no Photoshop

Você sabia que dá para criar elementos 3D no Photoshop? Tá bom, tá bom, não é exatameeente um 3D, mas o efeito visual é o mesmo. John Dani fez um vídeo mostrando como isso é possível. O vídeo é em espanhol, mas espanhol todo mundo entende.

Então senta, senta que lá vem a história!

10-08-08

18 Livros em PDF sobre Design Gráfico, Photoshop, Fontes, Cores e Logotipos

Navegando pela net encontrei esta fantástica lista com 18 livros no fórum espanhol Vagos.  Os livros são todos em inglês e vão desde Photoshop de A a Z até A bíblia de logotipos e fontes. Mesmo que você não seja o fera em inglês, pegue esses livros pois muita coisa você irá entender e captar. Garanto a vocês que são excelentes livros. Aqui vão os links:

Hacking Photshop CS2
http://rapidshare.com/files/128263876/H_Ps_Cs2_pachikno.rar

How To Cheat In Photoshop CS3
http://rapidshare.com/files/128381516/HTC_in_PSCS3_pachikno.rar

Graphic Design For The 21st Century – Taschen
http://rapidshare.com/files/128285609/Taschen_Graph_pachikno.rar

Design Elements – A Graphic Style Manual
http://rapidshare.com/files/128482001/DE_pachikno.rar

Logo, Font and Lettering Bible
http://rapidshare.com/files/128508335/LFLB_pachikno.rar

Dutch Type
http://rapidshare.com/files/128746049/Dutch_pachikno.rar

2Oth Century Advertising
http://rapidshare.com/files/128683629/20TH_century_pachikno.rar

Photoshop CS3 A – Z
http://rapidshare.com/files/128765801/pscs3_a-z_pachikno.rar

Logos : Making a Strong Mark
http://rapidshare.com/files/128804137/Logos_pachikno.rar

A Century Of Graphic Design
http://rapidshare.com/files/129225554/century_gd_pachikno.rar

Colour Management – A Comprehensive Guide for Graphic Designers
http://rapidshare.com/files/129507417/cm_pachikno.part1.rar
http://rapidshare.com/files/129532456/cm_pachikno.part2.rar

The Complete Guide To: Digital Graphic Design
http://rapidshare.com/files/129796354/GGD_pachikno.rar

Design Dictionary
http://rapidshare.com/files/129940714/dictionary_pachikno.rar

The Fundamentals Of Creative Design
http://rapidshare.com/files/130382132/fundsofgd_pachikno.rar

50 Trade Secrets of Great Design Packaging
http://rapidshare.com/files/129734724/50tp_pachikno.rar

How To Be a Graphic Designer Without Losing your soul
http://rapidshare.com/files/129939098/HTGF_pachikno.rar

Dos Logos
http://rapidshare.com/files/130012789/2logos_pachikno.rar

The Fundamentals of Typography
http://rapidshare.com/files/130215870/Fundstypo_pachikno.part1.rar
http://rapidshare.com/files/130535967/Fundstypo_pachikno.part2.rar
http://rapidshare.com/files/130549460/Fundstypo_pachikno.part3.rar

E aqui o link do post onde encontrei essa lista.

Boa leitura!

Para o alto e Avante!