Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 1 de 8

Criando um Tema para WordPress (Parte 1): Photoshop

Share
0

Nessa serie de artigos eu vou explicar como criei o tema para o meu blog. Vou começar com as
coisas mais básicas e pretendo ir aprofundando e mostrando coisas mais complicadas mais
adiante. Por favor participe e comente!

Nesse primeiro artigo nós vamos começar com a criação do design no Photoshop. Vamos partir
do princípio, a inspiração, e continuamos com toda explicação técnica de como fazer nosso
design no Photoshop. Eu sou (por enquanto) mais desenvolvedor do que designer, mas eu
espero que consiga explicar tudo corretamente.

Busca por Inspiração

Nosso primeiro passo na criação de um novo tema é descobrir o que queremos e como nós
queremos. Se você tem um cliente, com uma simples entrevista dá para ter uma boa idéia de
onde começar. No meu caso, como esse é meu blog, o cliente sou eu mesmo. Então vamos partir
de algo que eu gosto, natureza. Logo podemos pensar também na cor verde.

A partir dai, nada melhor que buscar por inspiração na internet. Busque no Google por imagens
de natureza e, em especial, por sites que usem a cor verde. Para fazer isso basta buscar por
“green websites”. Vão aparecer vários resultados que podem ajudar nessa busca por inspiração.
Outra coisa interessante é visitar algum site para criar um esquema de cores, como o
http://colorschemedesigner.com/. Nesse site você pode selecionar a cor desejada e verificar qual
esquema de cores seria adequado para você. No meu caso, ficou mais ou menos assim:

Resultado no Color Scheme Designer

Ou seja, #002c00, #0d330d, #004400, #28A228 e #49A249. Vou usar isso como base, mas
provavelmente vou mudar algumas cores.

A próxima etapa, o rascunho, não é algo obrigatório (aliás, nem o design no Photoshop é
obrigatório). Mas fazer um esboço rapidamente é interessante pois você pode colocar a
imaginação para funcionar. Tentar algumas vezes de diferentes formas ajuda a formar um
conceito de design. Aqui está o meu esboço final:

Esboço do Design

Como você pode ver, algumas coisas acabaram ficando diferentes no design final.

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 2 de 8

Você pode utilizar o modelo do 960 Grid System para papel quando for fazer o rascunho. Ou
ainda algum outro, veja uma seleção de alguns modelos em Useful (Offline) Utensils and
Toolkits for Designers.

Photoshop
Agora vamos para o Photoshop. Eu subdividi essa parte em: Fundo, Estrutura, Textos, Barra
Lateral e Ícones e Botões. Para começar vamos utilizar o arquivo para o Photoshop com 12
colunas do sistema de grid 960 (http://960.gs/). Vamos utilizar 8 colunas, ou 620 px, para a área
principal e 4 colunas, ou 300 px, para a barra lateral.

Modelo do 960 Grid System

Fundo
Decidi usar um verde escuro como fundo da página. Depois, no meio do cabeçalho, vou colocar
um gradiente radial partindo de um verde mais claro. Assim vamos ter um efeito legal.

1. Selecione a cor #002c00.

Cor de fundo

2. Selecione a ferramenta Paint Bucket Tool (G).

3. Selecione o layer Background, que já está disponível no modelo.

Use o Paint Bucket Tool no layer Background

4. Clique no documento para pintar todo o fundo.

Agora vamos adicionar o gradiente, que vai nos dar o efeito no cabeçalho.

1. Vamos copiar o layer Background criando um novo layer que podemos chamar também
de Background.

Crie um novo layer a partir do

Background

2. Clique com o botão direito sobre este layer recém criado e selecione Blending Options.
Coloque o seguinte:

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 3 de 8

Gradiente aplicado no fundo

3. Posicione o centro do gradiente perto do cabeçalho, ou então o conteúdo do blog vai ficar
sobre o gradiente e não vamos ver nenhum efeito.

Estrutura
Vamos começar a definição da estrutura pelas partes maiores, para depois irmos detalhando
mais. Primeiro vamos fazer a área onde estará o conteúdo, juntamente com a borda da barra
lateral.

1. Selecione a ferramenta Round Rectangle Tool (U), com a seguinte configuração:

Configuração do retângulo arredondado

2. Selecione a cor branca (#ffffff).

3. Crie um novo layer (com o nome de Content).
4. Desenhe um retângulo cobrindo a parte final do gradiente até o final do documento
(utilize as guias para alinhar lateralmente – comece na primeira linha e termine na última).
5. Clique com o botão direito, selecione Blending Options e adicione o Stroke com a
seguinte configuração:

Adicione um Stroke no layer Content

Se você ainda não o fez, é interessante fazer com que os retângulos que vem no modelo
desapareçam. Para isso vá no layer 12 Col Grid e deixe o layer invisível.

Continuando, vamos fazer o menu e a barra lateral. Começando pelo menu:

1. Crie um novo layer com o nome Menu.

2. Selecione o Round Rectangle Tool (U) (com a mesma configuração que usamos
anteriormente).
3. Desenhe o menu da segunda coluna até a penúltima.
4. Clique com o botão direito no layer Menu, depois em Blending Options e coloque o
seguinte:

Gradiente do menu

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 4 de 8

Stroke no menu

Agora a barra lateral:

1. Vamos criar mais um layer, com o nome Sidebar.

2. Selecione a cor branca (#ffffff).
3. Desenhe a barra lateral ocupando as 4 últimas colunas do modelo.
4. No Blending Options adicione um stroke de 2pixels na cor #008800 (da mesma maneira
que fizemos com o layer Content).

Resultado após criação da Estrutura

Textos
Agora vamos adicionar os textos, começando pelo título.

1. Selecione o Horizontal Type Tool (U), cor #00d500, fonte Verdana e tamanho 48pt.
2. Digite o nome do blog no cabeçalho.
3. Na próxima linha, com a mesma cor e fonte, mas com um tamanho 24pt, digite a
descrição do blog.
4. Posicione tudo do lado esquerdo do cabeçalho.
5. Selecione o Horizontal Type Tool (U), cor preta (#000000), fonte Verdana e tamanho
24pt.
6. Na parte branca, referente ao conteúdo do blog, adicione o título do artigo.
7. Logo abaixo vamos adicionar um texto em italico, tamanho 12pt, com as informações do
artigo.
8. Nessa linha você pode também adicionar o número de comentários, com formatação
sublinhado e com a cor #008800, para indicar um link.

Já no corpo do artigo (abaixo do título e das informações), vamos adicionar o thumbnail do

artigo.

1. Crie outro layer.

2. Selecione a cor #d2d2d2.
3. Adicione uma caixa com os cantos arredondados (usando o Round Rectangle Tool (U)).
4. Selecione a cor branca (#ffffff).
5. Adicione outra caixa com os cantos arredondados (usando o Round Rectangle Tool (U)),
por dentro da anterior.
6. Adicione um texto qualquer com fonte tamanho 14pt.
7. No fim adicione uma linha com mais espaçamento, com o texto Leia mais… (ou Read
more…).
8. Por fim, adicione uma linha que vai separar os artigos. Pode ser uma linha de largura 2px,
na cor #008800.

Aqui está o resultado até agora:

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 5 de 8

Após adicionarmos os textos principais

Barra Lateral
Na barra lateral vamos acrescentar apenas dois itens, mas depois pode-se adicionar quantos
forem necessários sempre repetindo os passos.

1. Crie um novo layer onde vamos colocar as faixas dos títulos.

2. Selecione a cor #006600.
3. Selecione o Rectangle Tool (U).
4. Desenhe um retângulo do comprimento da barra lateral, e a altura necessária para o texto.
5. Dê algum espaço em branco e adicione o segundo retângulo. Igual ao primeiro.
6. Além disso vamos colocar um Stroke de 2 px na cor #008800 (da mesma maneira que
fizemos com o layer Content). Ficará assim:

Faixa da barra lateral e configuração do Stroke

Depois disso é só adicionar os textos.

1. Selecione o Horizontal Type Tool (U), cor branca (#ffffff), fonte Verdana, tamanho 24pt e
negrito.
2. Digite um título sobre cada retângulo que desenhamos anteriormente.
3. Selecione o Horizontal Type Tool (U), cor preta (#000000), fonte Verdana e tamanho
14pt.
4. Digite um texto qualquer em cada seção.
5. Lembre-se de utilizar fonte sublinhada e cor #008800 se colocar links.

Resultado:

Barra lateral pronta

Ícones o Botões

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 6 de 8

Na penúltima parte do nosso design, vamos adicionar os botões do menue os ícones.

Começando pelo menu:

1. Adicione o texto Home com tamanho 24pt e cor amarela (#ffff00).

2. Crie outro layer, com o nome Selected menu.
3. Posicione este layer atrás do layer com o texto Home:

Ordem nos layers para o Menu

4. Faça um retângulo com os cantos arredondados (usando Round Rectangle Tool (T)) de
qualquer cor atrás do texto Home.
5. Copie o estilo da barra de menu. Para isso clique com o botão direito no Layer Menue
depois em Copy Layer Style. Posteriormente vá para o layer recém criado Selected menu
e clique com o botão direito e depois em Paste Layer Style.
6. Agora entre em Blending Options e inverta o gradiente para que fique assim:

Configuração para o Blending Options

7. Ao lado faça a mesma sequência de passos (do 1 ao 6), mas com o texto About me e na
cor verde (#00d500) e sem inverter o gradiente.
8. O último passo é desenhar um retângulo com o Rectangle Tool (U) para remover as
bordas arredondadas onde não é necessário nos botões. Ouseja, um retângulo para cada
layer. O resultado deve ser algo assim:

Menuaté esta etapa

Ainda vamos fazer mais uma coisa no menu. Vamos criar mais 3 layers, copiando e colando
parte dos layers existentes.

1. Selecione o layer Menu.

2. Usando o Rectangular Marquee Tool (M), selecione a metade superior do menu.
3. Copie e cole esta seleção. Posicione de maneira que não fique sobre a borda do menu, ou
seja, que fique posicionado exatamente na metade superior do menu.
4. Clique com o botão direito sobre o novo layer e selecione Blending Options. Configure da
seguinte maneira:

Blending Options - Opacity

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 7 de 8

Blending Options - Color Overlay

5. Agora selecione o layer Selected menu.

6. Usando o Rectangular Marquee Tool (M), selecione a metade inferior do botão Home.
7. Copie e cole esta seleção. Posicione de maneira que não fique sobrea borda do botão, ou
seja, que fique posicionado exatamente na metade inferior do botão.
8. Repita o passo 4 para esse layer, mas com o Opacity de 15%.
9. Agora selecione o layer Additional menu (layer com o botão onde está o texto About me).
10. Usando o Rectangular Marquee Tool (M), selecione a metade superior do botão About
me.
11. Copie e cole esta seleção. Posicione de maneira que não fique sobre a borda do botão, ou
seja, que fique posicionado exatamente na metade superior do botão.
12. Repita o passo 4 para esse layer, mas com o Opacity de 15%.

Resultado:

Rasultado final do menu

Agora vamos aos ícones. Primeiro vamos baixar os arquivos png de algum lugar. Eu geralmente
utilizo o http://www.iconfinder.com/ para isso.

1. Abra cada arquivo separadamente.

2. Selecione o conteúdo com o Rectangular Marquee Tool (M).
3. Copie e cole no documento em que você está trabalhando.
4. Posicione os icones lado a lado desta maneira:

Ícones posicionados

Para finalizar, vamos fazer a área de busca.

1. Crie um novo layer, com o nome Search.

2. Selecione a cor branca (#ffffff).
3. Com o Rectangle Tool (U) desenhe um retângulo no lado direito da barra de menu.
4. Depois, selecione o Horizontal Type Tool (T), com fonte Verdana, 14pt e preta.
5. Digite o texto search dentro da caixa branca.

E aqui está o resultado final do nosso Design:

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010
Criando um Tema para WordPress (Parte 1): Photoshop | Oscar Dias - Blog Pessoal Página 8 de 8

Resultado Final

Conclusão
Chegamos ao fim do nosso artigo. Vimos como criar um design no Photoshop partindo do zero.
Como vocês podem perceber eu fiz algumas mudanças no site desde que fiz o Photoshop. Como
sou mais desenvolvedor do que designer, as mudanças pequenas ficam mais fáceis de fazer
direto no código. Acho que cada um deve adaptar o processo ao seu estilo de trabalho, para
conseguir executar da melhor maneira possível.

Bom, espero que tenha sido útil. Obrigado pela visita!

http://oscardias.com/br/photoshop/criando-um-tema-para-wordpress-parte-1-photoshop/ 19/10/2010