Crianerd

Criando um elegante portfolio minimalista no photoshop - parte 2

2010-11-19T12:38:00.001-02:00

Dando continuidade ao tutorial anterior, hoje iremos terminar nosso portfolio feito no photoshop. Iremos abordar a criação do conteúdo e do rodapé.

Se não acompanhou o primeiro tutorial, sugiro que dê uma olhada.

Criando um elegante portfolio minimalista no photoshop - Parte 1

9º passo

Clique na pasta conteúdo e crie uma nova layer. Selecione a ferramenta de texto e digite o que achar melhor. Posicione ao lado esquerdo.

Copie o estilo utilizado no logotipo e aplique-o sobre o texto. Para copiar o estilo da logo, desbloqueie o cadeado.

10º passo

Importe 3 imagens recortadas em tamanhos iguais e posicione-as ao centro do template como mostro abaixo:

Recolha as camadas da pasta conteúdo e aplique o cadeado.

11º passo

Clique na pasta rodapé e crie uma nova camada. Selecione a ferramenta Line Tool e crie uma linha abaixo das imagens. Aplique o estilo utilizado no logotipo.

Final

Crie uma nova layer, selecione a ferramenta de texto e repita o menu no rodapé. Adicione também um copyright.

Aplique novamente o estilo do logotipo e salve seu documento.

Este é apenas um tutorial básico, que ensina você a organizar seu trabalho e a reutilizar estilos no photoshop. Em breve posto um tutorial muito mais elaborado.

Como sempre, gostaria de ouvir sua opinião a respeito do tutorial. Deixe seu comentário;

Criando um elegante portfolio minimalista no photoshop

2010-11-11T16:09:00.001-02:00

Ter um portfolio é essencial para quem deseja trabalhar como web designer. Ele é o seu cartão de apresentação e pode dizer muito sobre você e seu trabalho. Com a ajuda do photoshop e algumas boas dicas, ensinarei como criar um belo portfólio minimalista.

Wireframe

Veja um pouco mais sobre Wireframe.

1º passo

Crie um novo documento no tamanho de 1000 x 900 pixels e preencha o fundo com a cor #e4e6e6.

2º passo

Renomeie a layer para Fundo, crie 3 novas pastas e dê a elas os seguintes nomes:

Isso facilita a organização do nosso template.

3º passo

Dê um Ctrl + R para que as réguas fiquem visíveis.

Arraste 2 linhas horizontais para as posições 50 e 950.

Esse será o limite do nosso layout.

4º passo

Clique na layer fundo, acesse o menu Filter / Noise / Add Noise e aplique o efeito com a seguinte configuração:

5º passo

Clique na pasta Topo, defina a cor para #8996a0 e digite o texto de seu logotipo. Isso irar criar uma nova camada dentro da pasta topo. Aconselho você a renomear a layer para logotipo.

6º passo

Agora daremos um visual melhor para nosso logo. Clique com o botão direito do mouse na layer do logotipo, selecione a opção Blending Options e configure os ajustes.

Drop Shadow

Inner Shadow

Resultado

7º passo

Na mesma pasta, crie uma nova layer e renomeie para Navegação. Selecione a ferramenta de texto e com a mesma fonte e cor, digite o menu.

Como o efeito do menu de navegação será o mesmo que foi usado no logotipo, basta clicarmos com o botão direito na layer do logotipo e escolher a opção Copy Layer Style. Depois é só clica novamente com o botão direito em cima da layer navegação e escolher Paste Layer Style.

8º passo

Ainda na pasta Topo, crie uma nova layer e dê o nome de chamada. Selecione a ferramenta de texto e digite o texto de sua preferência e o posicione centralizado logo abaixo do logotipo e da navegação.

Aplique o mesmo efeito do logotipo e da navegação usando a dica que dei no passo anterior.

Recolha a pasta topo e clique no ícone do cadeado. Isso ajuda a proteger a pasta de modificações que possam ocorrer sem querer.

E assim terminamos a parte do topo. No próximo tutorial daremos continuidade abordando o conteúdo e finalizando com o rodapé.

Como sempre, aprecio seu comentário e sua opinião sobre o tutorial.

Worspress plugins de sábado #3

2010-11-08T11:21:00.001-02:00

Wordpress plugins de sábado é um apanhado de bons plugins para wordpress que seleciono durante a semana e compartilho com você todos os sábados. Neste segundo artigo, trago excelentes plugins como: Moo Collapsing Archives, WPaudio MP3 Player e Social Slider.

Devido o post não ter sido publicado (estava agendado), acabei postando hoje mesmo.

Moo Collapsing Archives

Cria um menu expansivo dos arquivos do seu blog. Idêntico ao que o blogger incorpora na sua plataforma.

Social Slider

Adiciona de forma simples links para seus perfis nas redes sociais em uma caixa flutuante ao lado esquerdo da tela.

WPaudio MP3 Player

Reproduza mp3 e podcast em diversos locais do post de forma simples. Novo suporte a html5, iphone e etc..

DynamicWP Fisheye Menu

Cria um menu Fisheye com uma lista de links.

AdsCaptcha

Adicione caixas CAPTCHA para prevenção de spams.

Chegamos ao fim de mais uma lista de bons plugins para seu wordpress. Contribua indicando seus plugins favoritos nos comentários.

Criando um layout simples com HTML e CSS

2010-10-07T16:56:00.001-03:00

Criar um layout, mesmo que simples, pode não ser uma tarefas das mais fáceis para quem não lida com desenvolvimento web. Pensando em você, que tem um blog e que gostaria de modificar seu template, criei este tutorial.

Este tutorial é dedicado a quem ainda não possui muita intimidade com HTML e CSS, mas que deseja criar um layout simples, de duas colunas.

Estrutura do layout

O layout terá a seguinte estrutura:

A marcação - HTML


<div id="global">
    <div id="topo"></div>
        <div id="conteúdo"></div>
        <div id="menu"></div>
    <div id="rodape"></div>
</div> <!--FIM DIV GLOBAL-->

Como você pode conferir, todo layout está dentro do elemento #global. Ele ajuda na organização e no alinhamento, já que iremos posicionar todo o site ao centro.

O estilo - CSS

O layout possui um tamanho de 800 pixels de largura. E como disse acima, será alinhado no centro da navegador.


#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}

Defina o tamanho dos elementos #topo e #rodape.

Como ambos terão o mesmo tamanho, podemos agrupa-los em uma mesma declaração.


#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}

Com quase todo layout já organizado, restam apenas o #conteudo e o #menu.

Divida o tamanho total do layout em duas partes, deixando um tamanho maior para o conteúdo, e o resto para o menu.


#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}
#conteudo {
display:inline; /* Evita o bug da margem duplicada */
float:left; /* Flutuando à esquerda */
width:560px;
}
#menu {
float:right; /* Flutuando à direita */
width:230px;
}

Repare que, na soma da minha divisão (560 + 230), o total é 790 pixels. Os 10 pixels restante serve de margem entre um e outro.

Update 12/10

Veja o código completo do layout.

Neste exemplo, incorporei o CSS afim de melhorar o entendimento.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#global {
margin: 0 auto; /* Alinhando o layout no centro */
width: 800px; /* Tamanho do layout */
}
#topo, #rodape {
width:100%;
}
#conteudo {
display:inline; /* Evita o bug da margem duplicada */
float:left; /* Flutuando à esquerda */
width:560px;
}
#menu {
float:right; /* Flutuando à direita */
width:230px;
}
</style>
</head>
<body>
<div id="global">
    <div id="topo"></div>
        <div id="conteúdo"></div>
        <div id="menu"></div>
    <div id="rodape"></div>
</div> <!--FIM DIV GLOBAL-->
</body>
</html>

Salve seu documento com final .html (exemplo: pagina.html) e confira o seu layout.

Qualquer dúvida é só deixar um comentário.

Botões twitter para o seu blog

2010-10-07T02:15:00.001-03:00

Botões twitter é um conjunto com cinco botões super atraentes para o seu blog. O conjunto está distribuído em cinco cores diferentes (verde, amarelo branco, azul e laranja), e no formato psd. Os arquivos também podem ser editados, caso alguma dessas cores não combine com seu blog.

Os botões

Termos de uso

Você é livre para usar o conjunto de botões em projetos pessoais ou comerciais sempre dando atribuição ao Crianerd e seguindo as seguintes diretrizes.

Por favor, link direto para cá, caso queira compartilhar os ícones.
Você não pode carregar esses ícones e oferecer para download em outro site.

Download

Gostaria de ouvir sua opinião sobre este conjunto. O que achou? Deixe seu comentário.

8 excepcionais temas para wordpress

2010-10-05T14:10:00.001-03:00

Se engana quem acha que para ter um template wordpress profissional tem que morrer numa grana. Com uma rápida busca no google, você encontra excelentes opções de alto nível e totalmente gratuitas. Pensando em economizar o seu tempo e sua busca, reuni oito belíssimos templates, que podem ser baixados sem qualquer custo.

Lembrando que muitos dos templates pagos possuem inúmeros recursos, suporte e características únicas. Por isso, as vezes investir uma graninha não é um mau negócio. Afinal, é o seu blog, e ele deve ser valorizado.

Vamos aos templates!

Lap of Luxury

Paragams

Modernist

Camulus

Shaken and Stirred

Quality control

Imbalance

Fullscreen

E você? Conhece algum template do mesmo nível e quer compartilhar aqui no blog? Deixe sua indicação nos comentários.

Efeito letterpress no photoshop

2010-10-01T23:33:00.002-03:00

O efeito letterpress consiste em dar uma aparência de relevo ao texto. Essa técnica ganhou muitos adeptos e variações. O efeito além de ser facilmente reproduzido, tem um visual super atraente. Neste tutorial, apresento uma das maneiras de se chegar ao resultado final em apenas três etapas.

Confira o resultado final deste tutorial.

Resultado

Agora que você já viu o exemplo final, vamos ao tutorial.

1º passo

Crie um novo documento e preencha o fundo com a cor #8e908f.

2º passo

Crie uma nova camada e defina a cor para #575a5d. Selecione a ferramenta Horizontal Type Tool e digite seu texto.

3º passo

Acesse o menu Blending Options e configure os efeitos como seguem abaixo.

Drop shadow

Inner Shadow

Salve seu documento e confira o resultado final.

Como sempre, insisto em dizer para você criar variações. Adicione texturas, luzes e outros mais. Veja um outro exemplo.

Update 28/10

Se você prefere vídeo aula, você já pode conferir este tutorial no canal do blog no youtube.

Gostou do tutorial? Gostaria de saber da sua opinião. Deixe um comentário com seu elogio, crítica ou sugestão.

5 Dicas essenciais para a escolha do seu template

2010-09-28T15:22:00.001-03:00

Ter um bom template é um dos fatores fundamentais para obter sucesso com seu blog. Se você entende um mínimo de HTML e CSS, ou até mesmo um pouco de PHP, aconselho você mesmo a criar o seu. Caso escolha buscar um template pronto, fique atento às seguintes dicas.

1- Não use o template mais popular ou o mais baixado

Geralmente os templates que figuram nessas listas, se repetem em inúmeros outros blogs. Se você não quer aparentar ser mais um entre tantos, não cometa esse erro.

2- Escolha o tipo de template correto (estrutura)

Uma coluna? Duas? Ou melhor três? Essa questão só você pode responder. Não abuse de uma super estrutura. Verifique seu conteúdo, veja se é necessário espalhar-lo por mais de uma sidebar.

3- Template otimizado para SEO

Preparar seu blog/site para os mecanismos de busca é um fator essencial para que ele alcance bons resultados. Busque por templates que estejam preparados para otimização. Caso o template que escolheu não esteja, procure adequa-lo.

Recomendo baixar o e-book blogger SEO, criado pelo Sérgio estrella, do Ice break. Caso use a plataforma do blogger. Ele é um ótimo guia.

Se você usa wordpress, recomendo a seção Wordpress SEO, da Mestre Seo.

4- Escolha um template que combine com seu conteúdo

Tenha bom senso quando for escolher seu modelo. Não escolha por exemplo, um template de futebol se você escreve sobre música. Algo não vai combinar, convenhamos.

5- Não se limite ao modelo que você escolheu

Depois das dicas acima você conseguiu escolher um template, mas algo ainda o incomoda? Certo, abra seu template e faça as devidas mudanças. Não tenha medo do seu template, ele será seu companheiro de viagem na blogosfera.

Aproveite as dicas acima e corra para buscar um template que tenha tudo a ver com você e com o que escreve.

E você? Quer colaborar com mais alguma dica? Deixe sua opinião nos comentários.

8 dicas de páginas para o blogger

2010-09-24T00:16:00.002-03:00

Navegando pela internet esses dias, percebi que muitos usuários do blogger, que antes pediam o recurso de páginas estáticas, não o utilizam ou não o aproveitam de forma criativa. Pensando nisso, escrevi 8 super dicas de páginas para você criar em seu blog.

Vamos às dicas.

1- Crie uma página sobre você (Sobre o autor)

Sim, sei que essa dica é mais velha do que minha vó. Mas muitos blogueiros não se preocupam com este pequeno detalhe. Acredite, a maioria dos usuários que entram em um blog, procuram saber quem o escreve. Isso torna você mais próximo do leitor, dá mais credibilidade ao seu blog.

Leia o artigo escreva seu about postado no Blosque, e crie já sua página.

2- Página de arquivos

Disponibilize uma listagem com todo o conteúdo do blog. Isso facilita a busca do usuário por um determinado conteúdo.

Recomendo este script, criado por Abu Farhan. Ele cria uma lista separando o conteúdo por dia, mês e ano.

3- Página de parceiros ou de selos

Gosta de fazer parcerias e de por selos em seu blog? Porque não criar uma página específica para isso? Sua sidebar não vai ficar abarrotada de coisas, e seu blog irá agradecer, carregando mais rápido.

4- Política do blog

Seu blog não é a casa da mãe Joana, certo? Então escreva suas recomendações sobre o que pode e o que não pode.

5- Crie um faq

Está cansado de receber comentários, emails e mensagens no twitter sobre as mesmas coisas? Crie uma lista com todas as respostas a essas frequentes dúvidas.

6- Formulário de contato

Adicione um formulário de contato em seu blog.

Confira o tutorial Formulário de contato no blogger com o google docs aqui mesmo no blog.

7- Crie um portfólio

Se você cria templates, ícones ou qualquer ouro tipo de arte, faça um página e reúna todos os seus trabalhos.

8- Mídia kit

Mídia kit é basicamente uma página de apresentação, uma vitrine, onde você expõe os resultados que seu blog atinge, afim de trazer patrocínios com publicidades e afins.

Quer saber mais sobre Mídia Kit? Acesse o excelente artigo “O que é mídia kit e como criar um para o seu blog” postado no dicas blogger.

Bem, chegamos ao fim de nossas dicas. Quer compartilhar as suas aqui no blog? Deixe seu comentário.

Adicione um botão “voltar ao topo” no rodapé do seu blog

2010-09-22T23:43:00.001-03:00

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.

Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.

Como é feito o link âncora?

Acesse seu rodapé e adicione o seguinte código:


<a href="#header">Voltar ao topo</a>

Sendo o elemento destacado a id do topo do seu site. Ao invés deste link levar você para outra página, ele irá retornar ao elemento referenciado. No caso o #header.

Adicionando um estilo ao link

Do modo acima o botão já está funcionando perfeitamente. Porém, ele está como um link normal, e isso não é o que eu quero.

Adicione uma elemento SPAN sobre o link.


<span id="bt-topo"><a href="#header">Voltar ao topo</a></span>

Perceba que eu envolvi o link com um elemento SPAN identificado como bt-topo.

Agora, daremos um estilo a este elemento.


#bt-topo {
	background:#000; /* COR DE FUNDO */
	float:right;     /* FLUTUAR A DIREITA */
	padding:5px;     /* ESPAÇAMENTO */
	}

Salve e confira se está tudo ok.

Use e abuse da sua imaginação. Crie um botão no photoshop, Fireworks e invente variações. Este tutorial é apenas o escopo do que você pode criar a partir daí.

Vi este recurso com efeito em outro site, como é feito?

Antes que me pergunte, os efeitos são aplicados via java script. Procure por Scroll top no google e encontrará diversos plugins feitos em jquery para este efeito.

Este artigo lhe ajudou? Gostaria de ver mais tutoriais dessa linha no blog? Deixe-me saber da sua opinião.

Utilizando png transparente no IE

2010-09-22T15:38:00.002-03:00

Utilizar imagens transparentes no formato png no internet explorer é um grande problema. Suas versões antigas não dão suporte ao canal Alpha, utilizado pelo png para criar a transparência. Para nossa sorte, existem desenvolvedores que se dispõem a criar alternativas, para que possamos contornar esse problemas.
É o caso do Drew Diller, desenvolvedor, que criou a excelente biblioteca chamada DD_belatedPNG.
O DD_belatedPNG é uma pequena biblioteca Java script que após inserida em seu documento, promete habilitar o canal alpha e resolver os problemas de compatibilidade com o formato png no Internet explorer.

Modo de uso

Baixe o script e hospede em seu servidor. Após hospedar o arquivo, adicione as seguintes linhas de códigos em seu documento.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Os locais em vermelho devem ser modificados de acordo com seu documento. O primeiro é o caminho do script hospedado por você, e o segundo é o elemento, classe ou id que irá receber o arquivo png.

Exemplo

Digamos que você vai usar um png transparente no topo do meu blog. Simples, adicione a id do topo. Caso seja #topo, substitua como mostro abaixo:


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('#topo');
</script>
<![endif]-->

Caso queira declarar vários elementos, é só separá-los por virgula.


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg, #topo, h1, div');
</script>
<![endif]-->

Agora você pode usar imagens em png sem esquentar a cabeça.
Como de costume, gostaria de ouvir sua sugestão, saber o que tem achado dos artigos e o que poderia melhorar. Deixe seu recado nos comentários ou me escreva diretamente pelo formulário de contato.

Ícones sketchy de redes sociais

2010-09-21T22:41:00.001-03:00

Sketchy Social Media é um conjunto de ícones disponibilizado gratuitamente pelo blog buildinternet. O conjunto, é formado por ícones no melhor estilo sketchy, aqueles rabiscados, como se fossem a mão.

Os ícones estão no formato .png e em diversos tamanhos.

Ícones do conjunto

Acesse o blog e baixe os ícones.

Este conjunto lhe foi útil? Deixe-me saber nos comentários.

Wordpress plugins de sábado #2

2010-09-18T03:04:00.002-03:00

Anthologize

Este plugin promete transformar seu blog em um livro eletrônico (ebook).

Custom Post Relationships (CPR)

Possibilita que você mesmo crie sua lista de artigos relacionados. Não dependa de logaritmos e resultados automáticos.

Easily Submit to Social Bookmarking Sites

Outro excelente plugin para criar botões de envio para redes sociais diversas. O visual dos botões são bem atraentes.

qTranslate Makes Multilingual Content Easy

Excelente plugin para quem mantém um blog multilíngue. Interface bem intuitiva.

Deixe sua opinião sobre algum plugin. Indique novos plugins para que eu possa estar compartilhando com todos.

Sites da semana #2

2010-09-18T00:39:00.001-03:00

Sites da semana é um apanhado de belos desenhos de websites que encontro pela web ao longo da semana, e que compartilho com você. Neste segundo artigo, temos websites de músicos nacionais como: Kid abelha, Skank, Paralamas, Pitty e Ivete Sangalo.

Kid Abelha

Skank

Paralamas do Sucesso

Pitty

Ivete Sangalo

Como de costume, gostaria de ouvir sua opinião a respeito do artigo, e conhecer suas indicações.

Crianerd TV - tutoriais em vídeos

2010-09-15T01:59:00.002-03:00

Depois de muitos pedidos e de alguns estudos, venho anunciar uma novidade (prometida há tempos atrás) para o mês de setembro, é o Crianerd TV. Uma série de tutoriais em vídeos que irão abordar assuntos de diferentes níveis de conhecimento.

Por que tutoriais em vídeos?

Algumas pessoas, de uma certa forma, preferem vídeo aulas por acharem mais fácil de aprender. Segundo elas, a assimilação é maior.

Os tutoriais escritos vão acabar?

Não. Os tutoriais em texto irão continuar.

Junte-se ao canal, vote e ajude com os novos vídeos. Como sempre, sua opinião é de grande importância para o crescimento e melhora do blog.

Crianerdtv no Youtube

Crie uma estante 3d no photoshop

2010-09-11T12:07:00.001-03:00

O photoshop é minha ferramenta número um quando se trata de criação. É fantástico o que ele, com um pouco de inspiração, pode fazer. Recentemente, criei uma estante 3d, tipo essas do aplicativo ibooks, para incluir em um projeto. O resultado você confere abaixo, no tutorial que montei para você.

Faça o download da textura.

1ª passo - Criando o fundo

Crie um novo documento do tamanho que bem entender. Selecione a ferramenta Paint Bucket Tool, defina a cor para #cacaca e preencha o fundo.

Acesse o menu Filter / Noise / Add Noise e defina o Amount para 2, Distribution deixe como uniform e desmarque Moochromatic, caso esteja marcado.

Temos um fundo levemente texturizado. Ele é muito bom para criar fundos de websites, twitters e outros. Experimente.

2º passo - Criando a estante

Importe a textura que disponibilizei no começo do tutorial para dentro do nosso documento.

Selecione a ferramenta Rectangular Marquee Tool e faça uma pequena seleção na borda da textura.

Dê um control + x para recortar, e em seguida um control + v para colar. A imagem recortada ficará em uma nova camada.

Selecione a camada da textura maior. Acesse o menu Edit / Transform / Perpective e traga o ponteiro para o lado direito. Repare que ambos os lados ficarão iguais.

Confirme a mudança e, logo em seguida, dê um control + T para redimensionar a imagem. Traga o ponteiro para baixo, fazendo com que a imagem diminua.

Junte uma imagem em cima da outra e perceba que já temos um efeito bacana.

Selecione a ferramenta Line Tool, e faça uma linha na cor branca do comprimento da textura com o efeito. Posicione a linha entre as duas texturas, como mostra abaixo.

Mude a iluminação da camada para Overlay, e deixe a Opacity em 40%.

3º passo - Aplicando sombras

Crie uma nova camada e a posicione abaixo das camadas anteriores.

Selecione a ferramenta Eliptical Marquee Tool, defina o Feather em 5px e crie um círculo oval abaixo da estante.

Selecione a ferramenta Brush Tool e escolha um pincel suave de tamanho médio. Ajuste o Flow para 50% e passe, apenas uma vez, o pincel dentro da marcação oval que criamos.

Dê um control + D para desfazer o círculo, e posicione a sombra até que fique bem colocada abaixo da estante. Abaixe a opacidade da camada para 60%.

Pronto! Agora salve seu documento e estude todas as técnicas e ferramentas empregadas neste tutorial.

Resultado final

Experimente alterativas. Use novas texturas. Diminua ou aumente o tamanho da estante. Sua imaginação é o limite.

Veja um outros dois exemplo que criei com essa técnica.

Como sempre, gostaria de ouvir sua opinião sobre o que achou do tutorial e o que mais gostaria de ver no blog. Deixe sua sugestão, elogio ou crítica.

Sites da semana #1

2010-09-10T12:30:00.001-03:00

Sites da semana é um apanhado de belos desenhos de websites que encontro pela web ao longo da semana, e que compartilho com você. Nesta estreia, temos um especial só com brasileiros.

Marketing na cozinha

Infonet news

Os primitivos

Underflash

Indique novos sites/blogs. Deixe sua sugestão, crítica ou elogio.

Free blogger template - Book simple

2010-09-08T21:12:00.001-03:00

Book simple é o primeiro template gratuito exclusivo do crianerd. O template conta com apenas uma coluna e é focado na simplicidade e na facilidade da leitura.

O template

Para modificar o menu, basta encontrar o seguinte trecho:


<div id='nav'>
	<ul>
		<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
		<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
		<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
		<li><a href='#'>Edit</a></li>
	</ul>
</div>

Demo ou Downlod

Teste o template e se gostar, deixe sua opinião. Em breve vou disponibilizar a versão 2 com novas cores e novidades.

Wordpress plugins de sábado #1

2010-09-04T20:57:00.001-03:00

Wordpress plugins de sábado é um apanhado de bons plugins para wordpress que seleciono durante a semana e compartilho com você todos os sábados.

Advanced Twitter Profile Widget

Adiciona um widget na sua barra lateral com suas atualizações do twitter. Permite escolher a quantidade de atualizações, cores e outras características.

Share and Follow

Adiciona links para compartilhamento em redes sociais. O plugin é bem flexível e permite diversas customizações.

Simple Sitemap

Permite criar um excelente sitemap para seu blog.

AnyFont

Substitua as fontes do seu blog por qualquer outra fonte TrueType ou OpenType.

Css3Butons

Insira belos botões feitos com css3 em seu blog de forma simples.

Quer sugerir algum plugin? Deixe sua sugestão para que eu possa incluir e compartilhar em nossa lista semanal.

Wireframe showcase - Uma galeria de wireframes

2010-09-02T20:33:00.001-03:00

A web está cheia de sites “showcases” espalhados por ai. São sites que compartilham os trabalhos de web designers pelo mundo afora. Um deles eu gostaria de compartilhar com você, é o Wireframe Showcase.

No Wireframe showcase você confere o wireframe que originou o projeto.

Wireframe - O que é?

A Wikipédia define Wireframe da seguinte forma:

Um wireframe de site web (ou também "wire frame web", "wireframe web", "web wireframing") é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas.

Wikipédia.

Em outras palavras, o wireframe é o esqueleto do nosso website. Ele pertence a etapa do processo de criação em que definimos tudo que irá ou não conter no projeto antes de colocarmos a mão na massa.

O site

Website Wireframe Showcase

Metade visual final, metade wireframe.

Exemplo do show case

Passando o mouse por cima da imagem o projeto é revelado por completo. Escolhendo um projeto, você é levado à página com outros exemplos do wireframe em questão.

Conhece algum site parecido? Deixe sua indicação para que eu possa compartilhar com os demais.

Criando um rodapé com 3 colunas

2010-08-20T01:05:00.000-03:00

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a sidebar (barra laretal).

Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.

Estrutura html

O rodapé criado no tutorial possui a medida de 900 pixels de comprimento. Dentro deste rodapé irei criar três colunas dividas em tamanhos iguais.


<div id="rodape">
    <div class="coluna">1</div>
    <div class="coluna">2</div>
    <div class="coluna">3</div>
</div>

A div rodape é a div pai, ela comporta todas as outras três divs com a classe coluna.

Marcação Css

Vou definir o tamanho das divs dividindo o comprimento total da div rodape pelas três divs coluna. Logo, 900 / 3 = 300. Veja o código:


#rodape {
        margin:0 auto; /*Centraliza a div pai*/
        width:900px; /*Tamanho da div pai*/
        }
.coluna {
        display:inline; /*Evita o bug da margem duplicada*/
        float:left; /*Flutuando à esquerda*/
        width:300px;
        }

Salve e visualize em seu navegador.

Contribua com o blog enviando suas ideias, críticas ou elogios. Diga-me o que busca e o que gostaria de ver por aqui.

Inspiração - Anatomia tecnológica

2010-08-17T16:54:00.001-03:00

O brilhante artista Madspeitersen postou em seu Deviantart um trabalho genial. São três belíssimas ilustrações que juntam a anatomia e a tecnologia. Delicie-se com o excelente trabalho deste artista.

Iphone

Playstation 3

Xbox 360

O trabalho realmente é magnífico. Confira todas as ilustrações em tamanho real na galeria do autor.

Colourslovers - Uma comunidade sobre cores

2010-08-13T22:07:00.001-03:00

Colourslovers é uma excelente comunidade sobre cores. Como sabemos, as cores exercem um papel fundamental em todo tipo de projeto, e por isso, entendê-las é super importante.

As cores nos dizem muito sobre nós. Traduzem sentimentos, nos trazem emoções e muito mais.

Na comunidade, você pode criar suas próprias paletas e cores. Toda criação é compartilhada com os outros membros, que podem votar e comentar sobre sua criação. Além disso, você ainda pode baixar suas cores em diversos formatos e usar-las em seus projetos.

Experimente você também! Depois volte e me diga o que achou.

Crie um estiloso botão no photoshop

2010-08-10T18:24:00.001-03:00

Já foi o tempo em que os botões de um site eram apenas figurantes. Hoje eles exercem um grande impacto no aspecto de um site, tanto no visual quanto na usabilidade. Neste segundo artigo da série, você vai aprender a criar um botão cheio de estilo para seu site.

Este tutorial faz parte da série "Elementos web para webdesigners", que irá abordar a criação de gráficos utilizados em websites, blogs e afins.

Assine o feed ou receba as atualizações via email e fique por dentro das novidades.

1º passo

Crie um novo documento e preencha com a cor #f4f4f4.

2º passo

Selecione a ferramenta Rounded Rectangle Tool, deixe o Radius em 5px e crie um retângulo.

3º passo

Acesse o painel Blending Options e ajuste os efeitos conforme mostro abaixo:

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

4 passo

Crie uma nova layer, selecione a ferramenta Horizontal Type Tool e escreva no botão.

5º passo

Acesse o painel Blending Options mais uma vez e aplique os seguintes efeitos:

Drop Shadow

Inner Shadow

Color Overlay

Final

Agora é estudar o botão e criar variações. Veja o resultado.

Download do arquivo final

Baixar

Sugestões para os próximos tutoriais? Entre em contato.

Seleção brasileira iphone wallpapers

2010-07-06T00:20:00.001-03:00

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

wallpapers

Download do arquivo final

Baixar

Quer enviar uma sugestão de tema para os próximos wallpapers? Deixe um comentário ou entre em contato.