pBlog

Vou confessar algo para vocês, eu gostaria muuuito de poder contratar um designer para todos os meus projetos web, mas infelizmente a grana é curta e eu termino me virando com o conhecimento que tenho. Imagino que esta seja a realidade da maioria de vocês, por isso decidi compartilhar alguns links sobre design.

• BrushKing - Catálogo de brushes gratuitos para o Photoshop;
• Vintage Style - Mais de 300 texturas e fontes com estilo vintage;
• Pattern Cooler - Aplicativo web que permite personalizar padrões gráficos;
• Best Free Quality Fonts - As 25 melhores fontes gratuitas segundo Vitaly Friedman;
• Handwritten Fonts - 10 fontes manuscritas imperdíveis;
• Design a Logo - Dicas para criar um logotipo;
• Free Web Templates - 25 sites para download de templates gratuitos;
• Tutorial9 - centenas de tutoriais sobre Photoshop, Illustrator, fotografia e web;
• 35 Incredible Free Icon Sets - Excelente seleção de ícones gratuitos;
• LogoPond - Coletânea de logotipos.

Quem também tiver um link interessante sobre o tema pode compartilhar nos comentários.

Dúvida bastante freqüente entre os leitores do pBlog, a substituição do título do blog (texto) por um logotipo (imagem) é uma customização que personaliza e dá uma identidade própria ao blog. O problema para explicar como fazer tal substituição é que isso varia de tema para tema, pois nem todos são codificados da mesma forma. Por isso escolherei um tema para exemplificar este mini tutorial.

O tema que escolhi já estava até separado para comentá-lo, então vou aproveitar este post para fazer as duas coisas, divulgar o tema e explicar como adicionar um logotipo. É bom deixar claro que existem muitas formas de fazer isso, eu vou explicar a que acho melhor.

O tema escolhido foi o Maggo Mag, ele possui 3 colunas, local para publicidade pré-definido, código HTML/CSS válido e é compatível com Firefox, IE7 e Opera. Demo e download.

Agora que vocês já conheceram o tema vamos por a mão na massa. Primeiro vamos eliminar o título e o subtítulo, mas para isso não é necessário apagar o código do arquivo PHP, basta adicionar o parâmetro “display:none;” nas IDs “#header h1” e “#header h2” no arquivo style.css, além de ser mais simples é melhor para os mecanismos de busca. Lembre-se que estas modificações são para este tema, para fazer o mesmo em outro tema você deverá procurar as ID’s ou classes correspondentes ao título e subtítulo para adicionar o parâmetro mencionado.

Renomeie a imagem do seu logotipo para “logo.jpg“, copie-a para a pasta “images” do tema e abra o arquivo header.php, logo após a linha:

1. <h2><?php bloginfo('description'); ?></h2>

Adicione o código da imagem da seguinte forma:

1. <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory');?>/images/logo.jpg" alt="Logotipo" /></a>

Fácil não? Acredito que este método sirva para a maioria dos temas com código HTML/CSS válido.

Recentemente o WordPress disponibilizou uma página no site oficial com diversas imagens de seu logotipo. O objetivo de disponibilizar este conteúdo é ajudar os desenvolvedores quando necessitarem utilizar o logo do WordPress.

Como vocês podem ver na imagem ao lado, há diversos tamanhos e cores, existe inclusive um versão vetorial para o Adobe Illustrator.

Navegando pelo Digg encontrei este tutorial sobre como utilizar o efeito Lens Flare do Photoshop para criar um visual mais interessante ao logotipo. Até aí nada de mais, a não ser o fato que o autor utilizou o logotipo do WordPress no tutorial. Vejam como ficou o antes e o depois:

Se você quiser utilizar este efeito no logotipo do seu blog, aqui vai o link do tutorial.