Olá, sejam bem-vindos ao things to help you. Criamos este tumblr para ajudar vocês com html e css, além de disponibilizar themes e materiais todos feitos por nós. Fique à vontade para pedir os tutoriais que quiser e para dar sua opinião sobre o que ainda precisa ser feito. Estamos de cara nova. Espero que gostem e sinta-se em casa!
Theme feito exclusivamente para o 
Volte sempre 
Volte sempre 
Esse tutorial será apenas de como passar o theme para o HTML. Demais coisas, como faixa, menu e entre outras coisas, temos tutoriais diversos no tthy que você pode usar e deixar seu theme lindo.
Primeiro de tudo, você tem que saber como as camadas daquele theme em psd foi arrumado. Geralmente pessoas que sabem fazer algo no ps corretamente, deixa cada coisa em seu devido lugar.
Separando tudo por group/pasta. Vou usar como exemplo, esse theme em psd. Então, repare em como fica as camadas desse theme:
Como podem ver, a faixa da sidebar esta separadinha. Então, você pode abri-la clicando sobre a setinha, apagar a camada da fonte porque você vai usar aquela faixa como base para outras faixas que sua sidebar vai ter. Se quiser antes, salve o nome da fonte para poder usar. Depois de fazer o que citei acima, clique na pasta da faixa com o lado direito e vá em: Marge Group. Isso vai fazer com que o conteudo que esta em group se torne apenas uma camada comum. Então pode notar que a faixa agora é apenas uma camada normal, todo o conteudo que estava em group se transformou em uma única camada. Selecione essa faixa e a copie. Abra um novo documento, que vai ser aberto com o tamanho da faixa já, e dai ao abrir deixe em transparent o backgrund contents. E cole a faixa dentro do novo documento que foi aberto.
Pronto, você aprendeu a separar cada coisinha. Pode acontecer isso com uma boxise que talvez venha a ter em algum theme psd que você baixar, dai só fazer a mesma coisa, lembrando que boxsides são separadas em partes, dai você vai ter que fazer isso.
Agora, vamos ver qual o tamanho do nosso documento, daquele psd todo. Volte para a aba do psd e deixe a aba da faixa da sidebar aberta ou simplesmente a salve. O psd que postei acima tem o width de 850, então no meu css base que você pode encontrar aqui, vamos por o valor de 850 nos width do content, header e footer.
Use:
Base - Topo, sidebar, postagens e final + com imagens indicado para os themespsd.
Copie o código e cole em um bloco de notas ou simplesmente no seu customize.
Procure por content e mude o width para: 850px;
Procure por header e mude o width para: 850px;
Procure por footer e mude o width para: 850px;
Agora, voltamos para o PS, ainda com o psd do theme aberto faça as mudanças necessárias que no caso seria o titulo e o que mais desejar. Depois de fazer tais mudança, caso seu menu seja de imagens, como esta no psd em que estamos trabalhando, deixe-o no modo invisivel. Nesse psd também temos o search você pode ou não usar. Temos tutorial de search com imagme aqui, apenas de uma busca e achará o tutorial.
- Pegando o backgrund:
Selecione a última camada, que é a camada de fundo. Faça uma seleção com a ferramenta Rectangular marquee tool. (M) E copie boa parte do fundo. (Dando CTRL+C para copiar).
Logo em seguida, abra um documento e coloque os valores de 200px em w e h. Com o novo documento aberto, cole o fundo que você copiou ali e logo em seguida salve.
x
Depois de fazer o que lhe foi indicado acima, junte todas as camadas daquele documento, se aparecer uma notinha avisando que tem camadas invisivel, com uma pergunta se você quer descartar elas, clique em ok.
- Recortes
Ainda com a ferramenta Rectangular marquee tool. (M), selecione a parte do topo e copie. Imagem.
Sim, você deve selecionar apenas a parte do topo, ou seja, a parte que você vai usar. Depois de selecionar, você vai copiar usando o comando de copiar no teclado que é o CTRL+C. Logo em seguida, vai abrir um novo documento que vai ter as medidas aquilo que você copiou. Veja qual é o valor do height e coloque no #header lá no css base que você esta usando. Salve o seu topo no formato PNG.
Selecione o meio, que é a parte branca que usaremos no content para que fique certinho. Imagem. Copie essa seleção, abra um novo documento novamente que vai ter as medidas daquilo que você acabou de copiar e cole o meio lá e salve.
Faça o mesmo com o final, que é o footer. Mas, lembre-se de olhar o valor do height e indicar no css.
- Use o static file para upar as imagens.
Em content via ter lá:
background: url('http://static.tumblr.com/2jiprob/Xqamd2h0m/seguimento.png');
Ao upar a imagem do meio, troque o link da imagem do css pela que você upou. Faça o mesmo com o header e o footer.
Sempre digo que theme nesse estilo é com começo, meio e fim.
- Sidebar e postagens
Nem sempre, um psd esta com os lados iguais. As vezes as pessoas gostam de colocar a sidebar na direta, outras na esquerda. E dai o local da postagem fica no lado oposto. Para saber mudar isso você deve usar o float que tem nas duas ids, que são da #sidebar e do #main.
Outra coisa que sempre ocorre, é que a maioria das pessoas que faz theme psd não mede, dai você tem que saber quanto tem de area para a posta e quanto tem para a sidebar. Para saber isso, basta selecionar tais partes, abrir um novo documento e lá vai mostrar quanto é. Sempre curto fazer na medida certa. Por exemplo, vou usar o block de foto no valor de 500px então, devo por na id #main os 500 e lembrar também do padding, então posso colocar um 510 porque vou dar 5px de largura para minhas caixas, que ao todo vai somar meus 500px do block e 5+5 de padding. Então, devo lembrar de tal coisa TAMBEM na hora de fazer as medidas no PS. Lembre-se sempre disso.
- O lugar das postagens não esta no lugar certo, fica fora do lugar. Como resolver?
No css base, temos um margin-right porque nosso float esta em right, então nosso conteudo de postagem vai ficar » dai como queremos que ele ande pra « devemos usar o margin-right e dar o valor até que fique no local que desejamos. Faremos o mesmo também para a sidebar. A mesma coisa que citei acima você deve fazer com a sidebar. Padding, valor e etc. Temos tutorial de sidebar em tagged/sidebar espero que seja útil.
- Não entendi o caixa na sidebar, padding e bla bla.
A gente sempre usa uma box ou caixa para colocar as postagens dentro, não é só porque temos um content com conteudo que não vamos usar uma div para que fique tudo certinho, lembrando que vamos ter sim que usar devido ao margin-bottom que usamos para dar espaçamento entre um conteudo e outro. Ou seja:
.caixa {background: #fff; padding: 5px; margin-bottom: 10px;}
Usei uma cor no back para vocês terem uma noção de conteúdo. Sempre faço isso com divs de posições, acho que é vem valido e necessário. Então tenho um block de postagem, por exemplo da foto:
{block:Photo}
conteudo do block
{/block:Photo}
Então, o que devemos fazer para que a div de caixa apareça?
{block:Photo}
<div class="caixa">
conteudo do block
</div>
{/block:Photo}
Entenderam? Bom, é isso. Qualquer coisa só gritar que a gente da mais dicas por ask. Leia oe tutorial de como posicionar algo no header em: tagged/position.
Qualquer erro no texto, mil perdoes. Beijos, D.
HTML, CSS e todo o design.