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

03-25-08

Avaliação de Sites

Você gostaria de receber uma avaliação do seu site, apontando seus erros e acertos e dizendo como melhorar o seu layout? Então conheça o Curso Online de Design Web, onde Bruno Ávila irá apresentar a criação de layouts web e o webdesign pela ótica do design e da comunicação visual. Além disso ele avaliará 3 layouts produzidos por você. Essa avaliação é feita por áudio-análise, de forma personalizada.

As inscrições para a nova turma estão abertas. Veja o vídeo de apresentação do curso.

03-25-08

Curso Grátis de Photoshop

Essa é pra você que reclama que não tem dinheiro para fazer um curso de Photoshop. Hoje em dia o conteúdo gratuito sobre esse software é imenso e está aí na Internet para quem quiser ver.

Para facilitar sua vida, reuni algumas vídeo-aulas que irão lhe ensinar o básico, onde você poderá dar o pontapé inicial no mundo das photoshopadas. Vamos lá.

Aula 01 – Apresentando o Photoshop

Aula 02 – Pintando o cabelo

Aula 03 – Maquiagem com Photoshop

Aula 04 – Trocando a cor dos olhos

Aula 05 – Criando Layouts para Web no Photoshop ( em Inglês )







Fique ligado pois colocarei mais vídeo-aulas sobre Photoshop nesta seção. Aguarde!

03-25-08

WordPress: aprenda a instalar e usar em 40 minutos

Neste videozinho tutorial você irá aprender a instalar o WordPress, CMS gratuito muito difundido e ótimo para ser utilizado em Blogs como esse aqui. O vídeo está em inglês mas mesmo se você não domina o inglês irá entender todo o procedimento de instalação e uso apenas vendo o que nosso amigo faz na tela. Você vai ver que é mole, mole.

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

03-25-08

Um “Photoshop” genérico e gratuito

Para quem não tem como desembolsar centenas de reais para adquirir um Photoshop ou Fireworks da vida pode utilizar outros softwares que não fazem feio, possuem efeitos bacanas e, o melhor de tudo, é grátis.

Conheça o Paint.net, simples, intuitivo e que trabalha com camadas do mesmo jeito que os melhores softwares gráficos. Possui alguns efeitos interessantes e até rugas e estrias da pele você consegue tirar.

Veja alguns screenshots: http://getpaint.net/screenshots.html

E faça o download nesse link: http://getpaint.net/download.html

03-25-08

As 10 Melhores Fontes Grátis Truetype (TTF)

Sempre digo aos meus alunos que não devemos subestimar a tipologia de um site. Inclusive dedicamos algumas aulas sobre o assunto. A forma e o equilíbrio geométrico de cada letra serão responsáveis pelo sentimento e atmosfera que você deseja transmitir em sua mensagem.

Fontes de qualidade não são baratas. Podem custar 50 dólares ou mais. Já fontes gratuitas temos milhares, mas a grande maioria sem qualidade.

Porém, para lhe ajudar nessa difícil escolha entre tantas fontes, escolhi 10 fontes gratuitas e que estão super em alta. Parece papo de decorador ou de estilista, mas assim como a moda, no design também trabalhamos com tendências que refletem o gosto atual.

Dividi as fontes pelos sentimentos transmitidos.

Vamos lá:

1. Tranquilidade e seriedade
District Thin

Uma boa fonte para aquele que quer passar tranquilidade, seriedade, modernidade e sofisticação, mas sem formalidade.

2. Feminilidade
Cosmetica

Uma fonte elegante, ficando entre o moderno e o clássico, delicada e feminina, talvez por isso se chame cosmetica.

3. Velocidade
Yanone Kaffeesatz

Uma boa fonte para títulos, manchetes, subtitulos breves e menus. As letras são próximas, o que pode dificultar a leitura em textos longos mas como títulos e textos pequenos é uma fonte excelente por se adaptar bem a pequenos espaços, mesmo aumentando o seu tamanho.

4. Seriedade
Lido STF

Boa opção para substituir o velho e batido Times New Roman. Suas serifas são curtas e suas curvas finais arredondadas. A fonte é gratuita, quando utilizado sem fins lucrativos

http://www.stormtype.com/free.html

5. Bíblico
Cardo

Uma fonte clássica que nos remete ao tempo medieval. Bom para ser usado em sites religiosos que desejam trazer uma atmosfera antiga.

6. Modernidade
Libertação Sans

Uma fonte ideal para publicações modernas e que desejam ter um peso maior em seus títulos e manchetes. Substitui bem o Franklin Gothic ou Arial.

7. Impacto Suave
Romeral

Outra fonte ótima para títulos devido ao seu peso e espessura que facilitam a leitura. Causa impacto mas por ter linhas mais arredondadas, não agride tanto como a famosa “Impact”.

8. Futurista e elegante
FF Good Wide Light

Trata-se de uma fonte ótima para ser utilizada em ambientações futuristas e modernosas. É legível, tem traços finos, por isso elegante. Adequado para sites de viagem, entretenimento, tecnologia.

9. Bom de texto
Colaborate

Sofisticação e modernidade você pode conseguir com essa família de fontes, com opções mais pesadas e mais leves.

10. Pixelizado
Style-Force Semplice Pixelfonts

Essa é a fonte pixelizada que você tanto procurava e não achava. É melhor visualizada em tamanho pequeno, justamente por ser pixelizado, sem efeito de suavização. Fonte bem bonitinha, pode ser usado para dar um “q” a mais.

03-23-08

Os melhores tutoriais e efeitos de Fireworks

Fireworks é um ótimo editor de imagens para criação de layout web. Durante muito tempo usei o Photoshop e em 2000 mudei para o Fireworks pois na época era o software mais otimizado para criação web. Tanto que depois o Photoshop incorporou algumas ferramentas do FW finalizando então na aquisição da Macromedia.

Porém, quem acha que o Fireworks só faz retângulo, circulos, linhas e curvas, está enganado. Podemos criar inúmeros efeitos, não deixando nada a dever ao Photoshop e outros programas. Aqui listo 15 efeitos interessantes que irão ajudar você na criação de seus layouts.

Linhas Brilhantes

Aprenda a desenhar linhas brilhantes no Fireworks.

Criando ícone 3D

Neste tutorial você vai aprender a criar um ícone 3D no FireWorks. A partir desse processo você poderá criar muitos outros.

Estilo Apple Air

Veja como fazer de forma simples uma bela maça no estilo Apple Air, através do Fireworks

Sombra em Foto

Aprenda a criar aquele efeito realístico de sombra em fotos com Fireworks

Criando uma cena noturna

Tem coisa que esse Fireworks faz que você só pensava que só o Photoshop era capaz. Um exemplo é esse cenário noturno com direito a nuvens e lua cheia.

Uma bela gota

Efeito real de uma gota d’água feito no Fireworks

Motion Blur

O motion blur, quando bem aplicado, rende boas imasgens no Fireworks

Criando o papel de parede do Vista

Olha aí, quem diria que o bonito papel de parede do Vista pode ser feito no Fireworks

Suavização de imagem

Juntando uma imagem com a cor de fundo. Essa é simples, com Fireworks

Efeitos Aqua

Tutorial de efeitos aqua para ser utilizado em vários ícones, feito no Fireworks

Criando Ilustrações

Veja nesse tutorial como criar belas ilustrações com Fireworks

Efeito Vidro

Um tutorial que irá mostrar como dar aquele efeito de letras em vidro.

Efeito Durex

Durex é a marca, poderiamos dizer efeito fita crepe ou algo assim. Mas olha que interessante essas técnicas de colagem com Fireworks

Usando Distorção 3D

http://www.adobe.com/devnet/fireworks/articles/3d_rotate_command.html

Quando utilizado com bom senso pode ficar legal.

Entrelace de letras

Entrelaçando letras facilmente com Fireworks, tutorial em vídeo.

03-23-08

Os melhores sites são úteis e feios

Esse título peguei emprestado do artigo de Gerry McGovern pois achei inusitado e propositalmente queria chamar a sua atenção. Pensei em colocar um ponto de interrogação no final mas pensei “colocando um ponto final fica mais provocativo”.

Você deve ter pensando no mínimo algo como “O quê?! O Bruno, um webdesigner, dizendo que os melhores sites são feios?”. Bem, não sou eu que estou dizendo, é o que podemos constatar dando uma rápida olhadela pela internet.

Antes de tudo, claro que a afirmação acima pode parecer generalização. Mas como disse, foi apenas para despertar sua atenção para o fato que descrevo a seguir. Contudo, é claro que encontramos sites belíssimos e úteis por aí mas vamos falar aqui de sites conhecidissimos, famosos, que são úteis, dão a maior grana porém… são feios.

Sempre digo aos meus alunos, leitores e clientes que site bom é aquele que funciona e tem bom conteúdo. Um bom exemplo disso é o site Ponto Flash. Não é preciso dizer que, no aspecto do design, esse site peca bastante. Porém tem um conteúdo riquissimo. Quem aqui nunca procurou algo sobre flash e acabou caindo nele? Posso dizer com toda certeza que qualquer webdesigner que trabalha com Flash já passou por lá alguma vez na vida.

Quando você ler esse artigo, pode ser que o layout do Ponto Flash tenha mudado. Por isso estou falando desse layout aí da foto.

Podemos dizer que o Ponto Flash é um exemplo de site útil e feio. As cores não harmonizam, o amarelo dificulta a leitura, o logo é difícil de entender, mas e daí, lá tem o conteúdo que procuro e resolve meus problemas.

Outro bom exemplo de site extremamente útil e com design bem questionável é O Viajante. Este site é tão bom que faz parte dos sites de conteúdo da UOL. Nele encontramos informações riquíssimas sobre todos os destinos do mundo, sem falar na maravilhosa seção “barbadas & roubadas” onde os leitores dão as dicas de viagem. Esse é outro site que de tão relevante aparece no topo do Google quando procuramos informações sobre alguma cidade. Justamente um site cujo layout não se adapta bem a resoluções maiores que 800×600, um menu complicado de entender, um logotipo que se repete juntamente com um fundo vermelho, dificultando seu entendimento. Mas e daí, o que que tem? O importante é ter acesso a este conteúdo exclusivo que me ajudou em diversas viagens que fiz.

Aqui está o layout do Site “O Viajante” no momento em que escrevi esse artigo.

Outros exemplos famosos podem ser citados. Google parece um site criado nos primórdios da Internet quando ainda se usava o Mosaic. YouTube é um site tão simples que se eu apresentasse um layout semelhante para um cliente no mínimo ele iria dizer “tá muito careca, precisamos deixar ele mais colorido, vivo. Ah Bruno, seja mais criativo, como é que você quer vender um layout pelado desses pra mim, sem graça?”

E o MySpace? Uma salada de cores presentes num layout que nos remete aos portais quadradões de 1998. Além das chamadas, a única imagem visível é o logo. O resto são apenas cores hexadecimais, divs e fontes. Já o delicious é tão careca e tem um layout tão feio que a primeira vez que vi pensei logo de cara que tratava-se daquelas páginas fake com links patrocinados.

Agora o que tem em comum o Google, Youtube, MySpace e Delicious. Todas são ferramentas úteis, que favorecem a criação de conteúdo feito por qualquer pessoa, classificando as mais relevantes e portanto oferecendo um bom material. Sabemos muito bem que mesmo com um layout péssimo ou sem graça, Google, Youtube e MySpace ganham rios de dinheiro.

Moral da história: do que adianta um layout lindíssimo se o conteúdo do seu site não presta?

Exemplificando, sempre gosto de comparar o design à mulher: uma mulher bonita e burra não vai muito longe. A mulher feia e inteligente é útil, tem conteúdo e consegue fisgar os mais bonitos com suas cantadas inteligentes, mas pode ter no início uma dificuldade em sua aceitação. Agora uma mulher bonita, simpática, atraente e inteligente, é sucesso na certa, em qualquer lugar que chegue.

Portanto, um site com bom conteúdo e bom layout vai facilitar muito a sua vida. Afinal a primeira impressão é a que fica. Por isso se o seu conteúdo é fantástico, o design do seu site também deve ser.

Exemplos de bom conteúdo e bom layout não faltam: Submarino, MSN, Imasters, Trip, Bolsa de Mulher, National Geographic e tantos outros.

Cabe a nós, webdesigners, criarmos layouts nos atentando ao conteúdo, a facilidade de acesso e navegação, desenvolvendo formas de destacar conteúdos importantes sem quebrar a harmonia, a suavidade e o conforto na sua leitura. Nossa função é deixar a internet mais bonita, mas com equilíbrio, utilizando doses suficientes de beleza, sem alterar o sabor de um bom conteúdo.

Para o alto e avante!

03-14-08

PicLens: Fantástico Visualizador de Imagens

Esse programinha é daqueles que você fica de boca aberta e somente diz: “nossa…”. Afinal você nota que está cara-a-cara com algo que vai lhe ajudar bastante em seu trabalho, principalmente para você webdesigner. Conheça PicLens.

Este PicLens é sensacional. Você instala ele no seu Firefox ou IE. Ao buscar uma imagem no Google por exemplo, uma setinha aparecerá em cima do thumbnail. Clicando na seta o programa abre e o espetáculo começa. Todas as fotos emparedadas, como quadros, onde vc pode ver claramente as fotos que tem lá no final e se mover até lá rapidamente. Clicando na foto você pode visualizá-la rapidamente em full-screen. No topo você encontra um campo de pesquisa, onde você poderá pesquisar imagens em outros lugares como Flickr, Yahoo, Picasa e muitos outros.

Você não imagina como vai facilitar sua pesquisa de fotos. Recomendo.

Veja mais em: www.piclens.com 

Para o Alto e Avante!

03-14-08

Escrevendo XHTML/CSS mais rápido e fácil

Uma das horas mais trabalhosas na criação de um site é a escrita do código, quando passamos o PSD/PNG para HTML. Sensibilizado com sua dura vida de webdesigner, trago até você uma dica interessante, trata-se do Markup Generator.

Markup Generator é uma ferramenta simples de criação de xhtml / css destinado a webdesigners, programadores e htmlers que estão cansados de escrever códigos e mais códigos, enchendo o saco de tanta repetição. Trabalho totalmente braçal, não é verdade? Pois então, o objetivo principal deste utilitário é acelerar o seu trabalho através da geração dos códigos xhtml e css utilizando uma forma de sintaxe bastante intuitiva, encurtando algumas linhas.

 

 

Exemplo simples. Ao invés de você escrever
“<h1 id="logo" class="red">Company Name</h1>”
Você irá escrever:
“h1#logo.red=Company Name”

No final você colocará essas sintaxes no Markup Generator e ele irá transformar no código que já conhecemos com os “<>”,”=”, “class” e outras coisas chatonildas.

Resumindo, você irá escrever menos, mais rápido e vai deixar de se preocupar com uma porção de detalhezinhos.

Para o alto e avante!

 

Esta ferramenta utiliza reforçada, linha-a-linha, css-a-como a sintaxe com espaço para gerar travessão xhtml markup. Você pode adicionar tag, ids, classes, conteúdos e um código adicional.