Confira no vídeo abaixo a simplicidade com que esta funcionalidade foi implantada, o que me faz pensar: como vivi sem isso antes?

Etapa 1

Vamos começar criando um novo documento, com as dimensões de 1000px por 600px, com fundo transparente. Em seguida, crie um novo layer e preencha com 20% de cinza. Este layer é temporário e servirá como base da textura de alumínio escovado que criaremos na próxima etapa.

Etapa 2

Esta textura pode ser conseguida através da combinação de alguns filtros, por este motivo, se você estiver usando o Photoshop CS3 é uma boa idéia converter este layer em um Smart Object (Layer > Smart Objects > Convert to smart objects) para poder usar a ferramenta de Smart Filters e poder fazer pequenos ajustes nos filtros.

Adicione um pouco de ruído (noise) usando o Noise Filter (Filters > Noise > Add noise), ajusta a quantidade (amount) em 90%, escolha distribuição uniforme (uniform distribution) e marque a opção monochromatic. Você deverá ter uma imagem como esta abaixo:

Depois disso vamos aplicar o filtro Motion Blur (Filters > Blur > Motion Blur) para transformar aquele ruido em listras horizontais. Use um ângulo (angle) de 0 graus e uma distância (distance) de 999 pixels.

A sacada está na combinação entre a quantidade de ruído e do filtro motion blur. Tenha em mente que quanto mais ruido for adicionado à imagem mais contraste terão as linhas horizontais.

Etapa 3

Como você pode ver na última imagem da etapa anterior, o filtro motion blur cria linhas horizontais com diferentes intensidades. Enquanto nos cantos as linhas possuem maior contraste, no centro da imagem elas ficam embaçadas. Por este motivo nós vamos retira uma pequena coluna que será transformada em um padrão com esta textura.

Para isso vamos utilizar a Single Column Marquee Tool, que pode ser encontrada debaixo da marquee comum, para selecionar uma coluna de 1px, conforme mostra a imagem abaixo. Fazendo isso podemos garantir que a textura será regular durante toda a largura do documento. Faça a seleção no lugar desejado e crie um novo padrão, usando o menu Edit > Define pattern option.

Etapa 4:

Como eu disse anteriormente, este layer era temporário e já cumpriu o seu objetivo. Você pode ocultá-lo para o caso de decidir criar um novo padrão futuramente.

Agora vamos criar um novo layer e preenchê-lo com o padrão que acabamos de criar. Selecione todos os pixels usando o atalho CTRL + A, use o menu Edit > Fill e escolha o padrão da lista e clique OK. Você deverá ter uma imagem parecida com esta abaixo:

Etapa 5:

Para finalizar, defina o blend mode do layer como Color Burn e a opacidade em 20%. Você também pode usar o modo Multiply caso queira que a textura fique mais visível, neste caso eu optei por um efeito mais sutil.

Pronto, é isso, acabamos de criar uma textura realística de alumínio escovado no Photoshop. Se você tiver alguma sugestão de tutorial no Photoshop, use os comentários para pedir que terei o maior prazer em produzí-lo.

Nesta antiga entrevista ele fala sobre a criação do iPod original e do iPod Mini, ressaltando a grande importância em procurar novos produtos e processos de fabricação como forma de inovação.

Um dos itens de extrema importância no design de um site são os ícones, pequenos elementos que trazem personalidade ao layout, facilitando na transmissão do conceito desejado. Separei uma lista dos quatro sites que uso frequentemente para pesquisar ícones para os meus projetos, confira logo abaixo. Aproveite e salve estes endereços, você certamente precisará deles no futuro!

http://www.iconfinder.net/

http://iconbase.com/

http://www.famfamfam.com/

Você provavelmente já passou por esta situação: depois de se dedicar totalmente na criação daquele layout matador, cuidando para que cada pixel estivesse no seu devido lugar, ficou travado tentando programá-lo via CSS.

Eu descobri este site por acaso, enquanto pesquisava no google por algum tutorial que me permitisse distribuir alguns elementos de forma equidistante dentro da página. Para a minha sorte, encontrei este artigo no site CSS Tricks, ensinando justamente como resolver o meu problema.

O grande diferencial deste site está no fato dele listar aqueles problemas mais difíceis de serem resolvidos, que geralmente nos faz gastar grande parte do nosso precioso tempo de desenvolvimento. Outro detalhe interessante está na forma didática com que ele descreve as soluções, tornando o aprendizado bem mais tranquilo.

Anota aí o link, vale a pena salvar este endereço!

Visite o site: http://css-tricks.com/

Aproveitando, na semana passada lançamos o seu novo layout arrebatador, que vem recolhendo inúmeros elogios dos leitores até o momento. Confira uma entrevista onde eu falo sobre a criação do novo design e também sobre os assuntos que abordarei por lá.

Mas voltandando ao assunto, sempre fico fascinado com a facilidade em construir temas para este sistema, sua flexibilidade em termos de configuração e não menos importante, como é fácil fugir do lugar comum e desenvolver um site que não tem cara de blog (como este aqui, por exemplo).

A única coisa que sentia falta era de uma forma fácil para testar os temas que criava para o wordpress, algo que me permitisse verificar todos os estilos de links, listas, bloquotes e etc de forma intuitiva e direta, parecido com o theme viewer do site do wordpress, só que rodando no meu servidor local.

Nada que o google não resolva, não é?

Com toda certeza. Um (uma?) webdesigner lá da Indonésia, chamado Pupung Budi Purnama, teve o trabalho de criar uma série de dummy posts para o wordpress, com o mesmo estilo daqueles do viewer oficial, e disponibilizar gratuitamente para a comunidade internacional de webdesigners.

Resumindo, basta é ir la no site, baixar o arquivo, importar para o seu banco de dados do wordpress. E voilà, tudo que você precisava para testar o seu tema está lá, prontinho para usar.

I don’t now how to say that in Indonesian, so I’m going to use the ol’ plain English: Thank you very much Pupung Budi Purnama for doing all the hardwork for us.

Dummy Wordpress Posts

De todos estes boatos um deles em especial chamou a minha atenção. Enquanto o centro de convenções era preparado para a apresentação, alguns banners foram pendurados com o slogan dos provável novo lançamento. O slogan em si não era o mais importante, e sim o fato dele não estar usando a tipografia oficial dos produtos da apple.Pela primeira vez podia-se ver o texto escrito numa fonte light, o que não é comum para a empresa. E este pequeno detalhe acabaria revelando muito mais sobre o grande lançamento do dia do que o slogan.

“There’s something in the air” não remetia a nada de muito relevante no produto que foi lançado, lembrando que rede wireless é padrão em todos os notebooks. Por outro lado, a simples escolha de uma fonte light e condensada, com toda a sua leveza intrinsica, ia muito mais de acordo com as formas diminutas do Macbook Air, a principal característica deste novo notebook quando comparado com os seus irmãos.

Aproveitando, a fonte em questão era a Myriad Light Condensend, que faz parte da família o Myriad Pro, usada pela Apple em todos os seus materiais institucionais.

O desenvolvimento deste logo durou pouco mais de uma semana, desde os rascunhos iniciais até a versão final. Foi um projeto bastante interessante, onde eu e o Mauro tivemos a oportunidade de trocar algumas idéias até chegarmos no resultado final.

Como na maioria dos meus projetos, eu comecei rascunhando algumas idéias em um pedaço de papel. Após algumas folhas cheias de conceitos, um deles se destacou pela simplicidade com a qual ele transmitia a essência da pesquisa – a de descobrir a cara do freela brasileiro.

Usando este rascunho em papel como base eu parti para o Fireworks e comecei a transforma-lo em um logo vetorial, ainda em preto e branco.

Neste momento eu percebi que era melhor mudar um pouco a forma do logotipo. Ao invés de fazer com que o contorno da cabeça se projetasse por cima dos outros elementos eu decidi integrá-lo ao retângulo principal, modificando o seu contorno para este abaixo.

Depois de criar a forma do logo eu normalmente escolho a tipografia que vai ser utilizada. Neste caso não foi muito difícil, uma vez que o Carreirasolo já possui uma tipografia bem definida. Eu só precisei escolher uma fonte para o subtítulo, e a minha escolha foi para a excelente Frutiger que fica muito bem em qualquer tamanho.

Com a forma do logo definida chegou o momento de definir a paleta de cores. Tirando o contorno da cabeça que por motivos óbvios deveria ser preto e a interrogação em branco, eu experimentei diversas cores para os demais elementos, sempre buscando aquela que desse o maior destaque ao logotipo. Eu escolhi estas três e enviei para o Mauro escolher a sua preferida.

A primeira utiliza o mesmo tom laranja amarelado usado no cabeçalho do Carreirasolo, e por este motivo ela não se sobressaia quando colocada no meio do conteúdo do site. A segunda, em tons de verde, também não acabou agradando muito. E como você deve imaginar a versão que o Mauro escolheu foi a terceira, na cor laranja:

Eu fiquei muito satisfeito com o resultado final deste logo. A combinação da sua forma, tipografia e paleta de cores garantiram um visual leve e agradável e ao mesmo tempo permitiu que ele se destacasse no meio do conteúdo dos diversos sites em que ele foi publicado.