Há algum tempo precisei de muckup de carro para fazer uma proposta visual de uma arte para adesivos e propagandas em carros, mais precisamente em taxis.

Como não queria usar a boa e velha Fiorino tão comum na internet, desenhei um Palio Adventure que é um carro que gosto bastante e também é bem comum de se ver entre os novos taxis na cidade.

Como nunca mais o utilizei não queria que ficasse mofando em meu HD e agora estou compartilhando aqui.

O arquivo está em curvas e é compativel com a versão CS4 do Adobe Illustrator. Baixe aqui.

Antes que me perguntem o que é já digo que não é nada significativo. É o resultado de uns testes que andei fazendo no Photoshop durante o horário de almoço.

Gostei do resultado final e até estou usando como wallpaper. Esse 365 aí no meio da imagem não faz sentido nenhum mesmo, era só teste tipográfico. Usei Helvetica.

Misturei umas texturas e até uns vetores que fiz no Illustrator e deixei o PSD em aberto caso queiram ver como fiz. Tem preview se clicar na imagem acima, mas tá meio pesadinho . Baixe aqui o PSD e aqui o Wallpaper.

That’s all, folks!

Presentinho pra vocês!

Ainda não tenho um iMac mas com certeza em um futuro não muito distante eu terei um. Mas enquanto isso vou curtindo esse aí mesmo, hehe…

Eu adoro fazer mockups no Photoshop e no Illustrator pra mostrar como meus trabalhos vão ficar na tela e como eu queria um que ficasse não tão pequeno como os que eu tenho encontrado na web eu acabei desenhando o meu. Além disso tentei usar o mínimo de bitmaps possível, o que torna esse mockup um tanto escalável apesar de já estar com um tamanho bom: 600x520px. Sem falar que está tudo divido em layers.

Clicando na imagem acima dá pra ver em tamanho original

Livre pra download no meu deviant: iMac PSD Mockup

Estava eu a analisar o que havia de bom e de ruim dentre meus humildes 500GB de arquivos quando me deparei com estes graciosos olhinhos (meio gay isso…) que desenhei há algum tempo e utilizei em poucas ilustrações.

Agora que já não os uso mais, gostaria de compartilhar com a comunidade (estou sendo otimista em achar que alguém vai querer isso, né?). Está salvo pra Adobe Illustrator CS3.

Baixe aqui do meu deviant.

Pra não ocupar muito espaço vou colocar as ilustrações na parte interna do post e só vê quem quer.

Das ilustrações que eu publquei, só esta que recebeu os olhos. As outras talvez eu publique depois.

E estas são do mesmo tipo mas não receberam os olhos. :/

Antiiiiiiiiiigo…

Hoje, em uma conversa com meu ex colega de trabalho, Renan Teles, que comentou que gosta de ver dicas de desenvolvimento web aqui no blog, em especial técnicas de programação tableless.

Coincidentemente eu já vinha pensando em escrever algo sobre um assunto conhecido por poucos programadores e usado por menos desenvolvedores ainda: é o CSS Reset. Meu ex chefe, Carlos Gustavo (também conhecido como B1), foi quem me apresentou ao conceito, mas eu ainda não tinha tido tempo de estudar sobre o assunto e não utilizava. Depois, com mais tempo fui analizando e acabei montando um “pacote” que incluo em todos os sites que desenvolvo antes de começar a escrever os estilos.

Um CSS Reset é um documento CSS que pré define o comportamento e as propriedades de todos os elementos HTML a fim de que todos sejam renderizados de acordo com um só padrão, ao invés de deixá-los à mercê dos diferentes browsers.

A vantagem de ter um documento que ‘reseta’ todos os elementos é que você terá todos os objetos HTML se comportando da mesma forma em todos os browsers (ou pelo menos deveria). É como se todos os objetos fossem ‘zerados’ e estivessem prontos para receber suas instruções sobre como devem se comportar dali pra frente.

Consequentemente, você não precisa escrever tantos hacks pra ficar corrigindo akeles elementos rebeldes que aparecem de uma forma no IE e de outra no Firofox, por exemplo.

Agora vou me aprofundar e falar sobre este pacote que eu preparei e no final tem um link pra download do mesmo.

O problema dos browsers

Em primeiro lugar vem, obviamente, o CSS Reset desenvolvido e gentilmente cedido à comunidade pelo americano Eric Meyer, um dos mestres do CSS, ex Standards Evangelist da Netscape Communications. Observe o código:

Compactei o código, tirando todos os comentários, quebras de linha e espaços inúteis a fim de minimizar o tamanho do arquivo, e também pelo fato de ser um arquivo que eu não precisarei alterar nunca mais, e salvei como reset.css.

O problema do PNG transparente

Resolvido o problema dos browsers agreguei ao pacote a solução para um problema antigo do Internet Explorer 6: a correta renderização de imagens PNG com transparência. Como todos já devem saber o IE6 não renderiza um PNG transparente com transparência, ao invés disso ele renderiza a imagem com um background cinza. Como este é um problema específico do IE6, não há necessidade de sujar o código com um hack para IE, então criei um documento CSS específico para ele chamado: iehacks.css, onde devem ser agrupados todos os hacks para IE. Mais tarde eu explico como deve ser feita a inclusão deste documento no HTML. Voltando ao PNG… a melhor solução para este problema vem de uma experiência antiga minha com arquivos do tipo HTC (HTML Component), dos quais eu usava bastante quando trabalhava na Yotsuba. O HTC nada mais é que um código escrito em JavaScript que funciona como componente do browser pra qualquer funcionalidade que você determinar. Para usá-lo basta referenciar o caminho do arquivo com a propriedade de CSS behavior, que só funciona no IE. Detalhe: já vou adiantando que os HTC também só são interpretados pelo IE, o que é uma pena pois seria ótimo desenvolver componentes em JS e escondê-los no meio do CSS, não é mesmo? Pois bem adaptei o JS que corrige o problema do PNG a este HTC, salvei como pngfix.htc e referenciei-o dentro do arquivo iehacks.css. E o iehacks.css ficou assim:

Ok, feito isso agrupamos tudo e fechamos o pacote pra ser usado em todos os projetos antes de começar a escrever os estilos da página. Logo, temos:

• reset.css
• iehacks.css
• pngfix.htc
• blank.gif

Como você deve ter percebido eu citei o arquivo blank.gif mas não disse pra que serve. O GIF serve simplesmente pro bom funcionamento da função JS que regulariza os PNGs e nada mais é que um gif transparente de 1x1px, ou seja, quase não ocupa espaço no servidor.

Como usar o pacote

Descompacte a pasta css contida no arquivo css_hack_pack.rar que você baixou e copie para a raiz do projeto. É muito importante que todos os arquivos estejam dentro da pasta css, ou o pacote não vai funcionar muito bem, a menos que você entenda o que cada um faz e altere o que for necessário, caso contrário não é preciso mudar nada.

No cabeçalho do HTML você deve incluir os arquivos exatamente na ordem que é mostrado no código abaixo (já explico o motivo):

Na linha 1 temos o CSS Reset abrindo caminho para os novos estilos que você vai escrever.

Na linha 2, padrao.css, mas pode levar o nome que você preferir, é chamado o documento com os estilos que modelam a página de acordo com seu layout e que você mesmo vai escrever.

Nas linhas 3 a 5 acontece a inclusão do documento que contém os hacks de IE, iehacks.css, e vem por último justamente pra corrigir o que ficou errado no IE. Deve ser incluído da forma que está aí mesmo, pois tudo que vier dentro deste comentario só será interpretado pelo Internet Explorer e desta forma seu CSS não ficará inválido. Mais informações sobre esta sintaxe e como usá-la aqui: Tutorial CSS – IE7 e Hacks CSS.

Bom, espero que isso tudo tenha sido útil assim como está sendo pra mim.

Depois de muito tempo sem postar nada aqui no blog, me recuperando de um período sombrio e de correria na faculdade, volto trazendo um agrado pra quem freqüenta o espaço aqui.

Gostaria de agradecer a todos que apreciaram as brushes. Em especial ao pessoal do AiVault, que, depois de terem me indicado em seu blog, as brushes se popularizaram bastante. Sem esquecer o pessoal do deviantArt, que também baixou em peso. Ah, sim! O Blog Vector-art, foi o primeiro a divulgar as brushes, foi assim que o Adam da GoMedia descobriu as brushes também (thanks Toni!).

De acordo com as contagens até o presente momento, já são 155 downloads do Set #1 via blog, e 4.554 via deviantArt (link). E o Set #2, já tem 172 downloads via blog, e 2.353 via deviantArt (link).

Sem mais… Aproveitem!

Obrigado.

Navegando por aí um dia desses encontrei esse site: O Wordle.

À primeira vista você não acha nada de especial no site. Um layout bem simples, nada que prenda sua atenção.

O que importa é o que ele pode fazer por você. Com um punhado de palavras de um texto qualquer de sua preferência, ele analisa e gera uma nuvem de palavras, como essa aí de cima, que depois você pode usar como parte de algum trabalho.

Não tem mistérios quanto ao uso do Wordle (“uordou”, pra quem tem dificuldade com o tal do inglês), basta você clicar no link CREATE, colocar algum texto na caixa que aparecer na tela seguinte e clicar no botão GO.

Ele dá uma processada no texto e na tela seguinte é mostrada a nuvem com as palavras do texto que você escolheu.

Uma dica de texto rápido é o Lipsum.com, que é outro serviço gera um texto pra que você possa usar como parte do seu projeto.

Vou abrir um parêntesis pra falar um pouco sobre o Lipsum, que algumas pessoas ainda soltam o seguinte comentário: “Mas o meu site vai ser em inglês? Por que você escreveu tudo em inglês?” ôÔ’.

O Lipsum gera textos com base no famoso Lorem Ipsum, que segundo o site é latim puro, mas sem nenhum significado lógico. Seria mais como palavras do latim ordenadas aleatóriamente. E serve pra gente colocar algum conteúdo num layout que tem textos e realmente ficar com cara de texto. Ao invés do bendito “NONONONO”. Fecha parêntesis.

Depois de gerado o conteúdo você pode escolher a forma como as palavras podem ser embaralhadas, fonte, esquema de cor, entre outras coisas. E depois de tudo certo, é possível imprimir tudo em um pdf em curvas pronto pra ser usado em outro projeto do Illustrator, Photoshop ou programa do tipo.

Muita gente tem me perguntado o que fazer pra usar as brushes que eu tô jogando aqui. Principalmtente pessoas de fora do Brasil, já que também postei minhas brushes na minha galeria do deviantArt pra que a comunidade internacional também possa conhecer e usar.

Aliás, eu não achei que fosse ter uma repercussão tão boa lá fora, pois com uma semana já foram feitos mais de 600 downloads pelo deviantArt. A única coisa que eu senti falta foi dos comentários, ainda não sei se as pessoas gostaram das brushes, se foi útil, se querem mais brushes… Então, por favor, comentem =]

Pois bem, voltando ao problema do uso das brushes, eu escrevi um mini-tutorial sobre como usar as brushes que eu disponibilizei. Caso seja interessante continue lendo este post.

Instalando as Brushes

Uma coleção de BRUSHES criada e salva pelo Adobe Illustrator resulta em um arquivo que não possui extensão.

Existem basicamente duas formas de importar uma coleção de brush para dentro do Illustrator.

1° Método

Este é o mais simples. Pressione F5 para abrir a peleta de Brushes do Illustrator e logo verá um ícone parecido com duas pastas sobrepostas.

Clique no ícone, e um novo menu será mostrado.
Então clique no ítem “Other Library” para abrir a caixa de diálogo que possibilitará buscar a coleção de brushes que você deseja instalar.

Procure o diretório onde você salvou as brushes e escolha o arquivo sem extensão que corresponde à coleção de brushes que deseja instalar.

Clique em “Abrir” e pronto! Agora é só usar as brushes.

2° Método

Este método é mais pra usuários Windows. Abra o Windows Explorer e procure a pasta C:\Documents and
Settings\[Seu_perfil_do_XP]\Dados de aplicativos\Adobe\Adobe Illustrator CS3 Settings\Brushes\, e extraia nesta pasta o arquivo sem extensão que corresponde às brushes que você baixou.

Depois é só seguir as instruções do 1º método, porém, ao invés de clicar na opção “Other Library” clique na opção “User Dened” e já será mostrada uma lista de brushes que foi descarregada na pasta de brushes do Illustrator.

Usando as brushes

Esta parte é bem fácil e óbvia, mas também acho importante mostrar de que forma podem ser usadas as brushes.

Depois de instaladas, basta fazer um desenho qualquer ou uma linha, manter o desenho selecionado e clicar em uma das brushes disponíveis no painel.

Como o estilo é aplicado à linha, para mudar a cor do estilo deve-se aplicar cor NA LINHA e não no preenchimento do objeto.

Mais brushes saindo do forno prontas pra serem usadas. Mas desta vez tomei um cuidado especial pra tornar possível que os desenhos possam receber a cor da linha desenhada, ou seja, se você fizer uma linha vermelha e aplicar a brush os desenhos ficarão vermelhos, exatamente como você determinar. Download no final deste post. Pra ver um preview de como ficaram as brushes clique na imagem acima.

É bem legal esse negócio de ficar fazendo brushes, pois além de ser um exercício de criatividade e um jeito de experimentar novas formas e combinações. Comecei por curiosidade de saber como poderia ser feito e aprendi bastante coisa com isso.

Nessa novo set coloquei algumas brushes com opacidade reduzida, criando um efeito bem legal também, sem deixar de lado da possibilidade de mudar a cor da linha.

Nos meus próximos exercícios vou fazer algumas ‘art brushes’ e até umas ‘pattern brushes’, além dos padrões de preenchimento que também dão um resultado bem legal em um trabalho.

Agora chega de lero-lero e manda um download aê!!!

Eita! Olha só como eu to legal hoje… Preparei um set de Brushes decorativas do Illustrator pra quem quiser baixar e usar sem problemas. Clique na imagem acima para ver um preview do arquivo. O link pra download dos arquivos está no fim desse post.

“Mas baixar de graça assim?!?! Sem pagar nada”. Claro! Lá fora muita gente faz isso e agora eu entendo o motivo. É tão bacana ver uma parte do seu trabalho sendo usado por aí, isso mostra que as pessoas gostaram mesmo.

Aliás isso já aconteceu comigo algumas vezes. Vi meus trabalhos presentes nos trabalhos de outras pessoas, a diferença é que das outras vezes não foi autorizado e eu me senti muito mal com isso. Mas já passou! Já cumpri minhas milhas de terapia e tudo isso foi superado (dramático é a mãe…).

Pois bem, antes de soltar o link pra download, vou pedir uma só coisa: Por favor me mostrem que as brushes estão sendo usadas, eu gostaria de ver onde elas estão sendo usadas, ou pelo menos comentem este post pra que eu possa saber o nível de aceitação, e depois disponibilizar mais coisa aqui.

Sem mais delongas… fique à vontade pra baixar o arquivo: