Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

18/01/2014

Big Tutorial #03: Criar um Tema em L - Parte 1

Olá, hoje vou finalmente postar o Big Tutorial #03 (só de uma parte), de como Criar Um Tema Em L. Peço mesmo muitas desculpas pela falta de atualização do blog, mas eu tenho de conciliar o blog com a escola; e com o horário que eu tenho, não tenho tido muito tempo livre. Mas a partir de agora, vou tentar postar, pelo menos duas ou três vezes por semana.

Neste post, vou utilizar vários prints, para vocês perceberem melhor como fazer todos os passos. Como devem calcular, o post vai ser um pouco extenso, mas peço-vos que o leiam até ao final, sem preguiça.
Eu vou só ensinar a criar o tema; a codificação terá de ser feita por vocês, com orientação do Big Tutorial #02: Editar e Codificar um Tema PSD, já postado cá no blog.
Primeiro, abre o teu photoshop, e cria um novo arquivo, com o nome "Tema Em L", com 850px de largura, 700px de altura e com plano de fundo transparente (print).

Agora, para ser mais fácil trabalhar no tema, define quatro guias (guides) iniciais, para isso vai a Visualizar > Nova Guia, e traça as seguintes guias (uma de cada vez):
  • Vertical > Posição: 10px .
  • Vertical > Posição: 840px .
  • Horizontal > Posição: 10px .
  • Horizontal > Posição: 690px .
Depois de teres marcado as quatro guias, escolhe uma cor de fundo para o teu tema, e aplica-a, usando a ferramenta lata de tinta (print).

Agora, traça um retângulo branco com bordas arredondadas, em todo o teu tema (print), e traça a área do teu cabeçalho e a área da tua barra lateral, para isso, usa mais duas guias (print).
Para fazeres estas guias, basta clicares em cima das réguas no photoshop e puxares a guia para o sítio que pretendes. Se não tiveres as réguas ativas, clica em Visualizar > Réguas.
Agora vais ter de rasterizar o retângulo branco, para isso vai a Camada > Rasterizar > Camada (print).
Agora, volta a selecionar a ferramenta retângulo com bordas arredondadas, mas desta vez, muda lá em cima a opção de forma para demarcador, e traça um retângulo na área das postagens (print). Depois, clica com o botão direito do rato, em cima do retângulo que traças-te, seleciona a opcão Criar Seleção (print), clica em ok, na janela que vai abrir e depois clica em delete.

Se reparares bem, agora ficaram dois cantos em bico: um na parte de cima do tema, e outro na parte debaixo (print), para os arredondares, traça dois retângulos com bordas arredondadas, também com a opção demarcador ativa (print). Agora com eles selecionados, vai a Selecionar > Inverter (print), seleciona a ferramenta borracha e apaga os bicos (print).

Ocultando as guias (Ctrl + H), podes ver que está finalizado o Content em Forma de L (print), agora basta enfeitares-o como quiseres e acrescentares todos os teus retoques finais (print de exemplo).
Nota 1: Para veres todos os prints com qualidade, sempre que os abrires, carrega em cima deles para os ampliares (caso seja necessário).
Nota 2: Este big tutorial, foi inspirado no tutorial do tumblr TTHY.
E termina assim o Big Tutorial #03, espero que tenham conseguido fazer um vosso Tema em L, e que este big tutorial vos tenha sido útil. Digam o que acharam, pelos comentários do blog. Até breve!

0 Comentários

« »