Hoje eu trago um dos tutoriais mais pedidos da história desse blog. Eu vou ensinar a fazer um template no PS e passa-lo para o HTML. Eu já usei vários aqui no blog, mas agora eu decidi mudar um pouco porque, honestamente, fazer layout no PS é meio complicadinho e eu queria algo mais simples. Caso você não faça a miníma ideia do que é um template/theme feito no PS, aqui vai alguns exemplos (x, x, x)
- Download da base HTML (Zé Pedro Silva)
- Pixels (Como carregar)
- Styles (Como carregar)
- Style Fundido
- Degradês
- Photoshop CS4 (Portable grátis)
- Fontes
Meu PS está em inglês, então eu não posso fazer nada se o seu PS está em outra língua e você não conseguir fazer. Vou fazer o máximo que posso para dizer onde cada item está :/
Dica: Use as linhas guias (exemplo achado no Google Imagens) para ajustar os retângulos melhor. Para adiciona-las aperte Ctrl+R. Uma régua aparecerá. Ao arrastar a régua, verá uma linha azul. Essa é a linha guia.
- Background: Crie um documento quadrado entre 820px e 900px. Escolha uma cor e pinte o fundo. Se quiser um background com padrão (pixels), duplique o documento e clique duas vezes na camada duplicada. Uma janela com várias opções se abrirá. Clique em 'Pattern Overlay'; no CS4 é a penúltima opção. Escolha um pixel e mude a opacidade e o 'Blend Mode' (Modo de Mesclagem) para o que você acha que fica melhor.
- Dividindo: Depois de fazer o template, esconda a equipe/slides/ribbons e salve em PSD e PNG. Feche o documento PSD e abra o PNG. Você precisa separar seu template em 4 partes: background, header, main e footer. Corte um pedaço pequeno do background e salve em formato PNG; o header (x), main (x) e footer (x) e salve em PNG.
- Dividindo: Depois de fazer o template, esconda a equipe/slides/ribbons e salve em PSD e PNG. Feche o documento PSD e abra o PNG. Você precisa separar seu template em 4 partes: background, header, main e footer. Corte um pedaço pequeno do background e salve em formato PNG; o header (x), main (x) e footer (x) e salve em PNG.
Vamos começar pelo background. Procure por body, .body-fauxcolumn-outer {
body, .body-fauxcolumn-outer {
background:#bdbdbd; (cor do background)margin:0;
color:#828282; font:14px 'Corbel', sans-serif; (cor/tamanho/nome da fonte)text-align:justify;
}
Se quiser colocar um background com padrão, apague a segunda linha e substitua por background:url(url do background);
Vamos para o header. Procure por #header-wrapper {
#header-wrapper {
background:url(URL DO HEADER)no-repeat top center;
width:LARGURApx;
height:ALTURApx;
margin:0 auto;
}
Se for preciso "colar" o header no topo do blog, procure por #outer-wrapper { e mude o padding para 0.
#outer-wrapper {
width:LARGURA DO TEMPLATEpx; (obrigatório)
margin:0 auto;
padding:0;text-align:justify;
}
Para colocar a sidebar e a área dos posts procure por #main-wrapper { e mude o que for preciso.
#main-wrapper {
width:493px; /* Tamanho das postagens */
padding:7px;
margin-top:-15px; /* Move para cima ou para baixo */
margin-left:6px; /* Move para a esquerda ou para a direita */
float:left; /* Left coloca as postagens na esquerda e right na direita */
word-wrap:break-word;
overflow:visible;
}
Sidebar
#sidebar-wrapper {
width:260px; /* Largura da sidebar */
padding:7px;
margin-top:-15px; /* Move para cima ou para baixo */
margin-right:7px; /* Move para a direita ou para a esquerda */
float:right; /* Coloca na esquerda (left) ou direita (right) */
word-wrap:break-word;
overflow:visible;
}
Footer
#footer {background: url(http://static.tumblr.com/zdvlqq9/TiOnnjgy9/p3.png)no-repeat;
width:900px; /* Largura */
height:238px; /* Altura */
clear:both;
margin:0 auto;
padding-top:0px; /* Distância entre o footer e a parte de baixo do blog */
line-height:1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align:center;
}
Personalização do título dos gadgets
Se você não que faixinha, procure por h2 { e, se quiser, mude o que está destacado abaixo.
h2 {
margin:1.5em 0 .75em;
line-height:1.4em; (Altura da linha)text-transform:uppercase; (Título maiúsculo - uppercase -; minúsculo - lowercase -; primeira letra maiúscula - capitalize -)letter-spacing:0; (Espaço entre as letras)color:#828282; (Cor)}
Para colocar ribbons, procure por .faixinhawelcome
.faixawelcome {
background:url(RIBBON);
height:64px; (altura)width:290px; (largura)margin-left:-16px; (move para os lados)color:transparent; (cor da letra/se sua faixinha tiver o nome do gadget nela, não mude essa parte)margin-top:0px; (move para cima)margin-bottom:-3px; (move para baixo)text-shadow:none;
}
Se você tiver, por exemplo, cinco gadgets repita esse código cinco vezes, mudando o .faixawelcome { e o url do ribbon cada vez.
Para colocar os ribbons nos gadgets você tem que adicionar um gadget HTML/JavaScript e acima do que você for escrever cole <div class='nome'></div>.
Título dos posts
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:'Yanone Kaffeesatz', sans-serif; (fonte)font-size:22px; (tamanho da fonte)font-weight:normal; (determina se é negrito - bold - ou normal)line-height:1.4em; (tamanho da linha)color:#8b929e; (cor sem hover)}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font-weight:normal; (determina se é negrito - bold - ou normal)color:#89909c; (cor do link visitado e negrito)text-shadow:1px 1px 0 #fff; (sombra)}
.post h3 strong, .post h3 a:hover {
color:#89909c; (cor do link hover)text-shadow:1px 1px 0 #fff; (sombra)}
Personalização das imagens
.post img {
padding:2px; (largura da borda)background:#cdcdcd; (cor do fundo)-webkit-border-radius:10px; (bordas arredondadas)-moz-border-radius:10px; (bordas arredondadas)border-radius:10px; (bordas arredondadas)}
Você pode apagar tudo se quiser, colocar uma opacidade hover, etc. O que quiser.
Imagem separando as postagens (opcional)
Procure por <b:include data='post' name='post'/> . Abaixo desse trecho cole:
<center><img src='URL DA IMAGEM'/></center>
Eu indico esta imagem.
Outros pequenos detalhes
Outras coisas como menu, efeitos, etc serão colocados acima de ]]>< normalmente.
...
Eu não fiz o código, apenas expliquei de uma maneira mais fácil àqueles que não entendem muito de HTML. Se forem dar créditos a alguém, deem créditos para o Pedro.
É só isso. Beijos ;3
Este comentário foi removido pelo autor.
ResponderExcluirAmei o tutorial, talvez quando eu tiver disposição um dia eu faça shaushau' mas acho super lindo templates assim, tenho mó vontade de fazer, mas a preguiça...
ResponderExcluirVocê explicou direitinho, parabéns :P
Abraços *3*
{www.h-oneypie.com}
Vou te confessar uma coisa: nunca soube e me dá preguiça de aprender a fazer lays pelo Photoshop... Na boa, parece tãaaao complicado. Mas está bem explicadinho no tuto. Quem sabe um dia eu não tome vergonha na cara, né? >.<
ResponderExcluirAliás, o layout daqui está maravilhoso. Amo azul, combinado com imagens em preto e branco então... ♥
Carinhosamente, Jheni.
*e m p i r e k a w a i i & q u i n z e o u t o n o s*.
Acho muito bonito, sempre tive vontade de fazer, mas e a preguiça? opaksapk'. Já que eu só via em tumblr's e nunca via em plataforma blogger, achei que não dava para fazer. Parece ser complicado, mas sua explicação é boa. Quem sabe um dia? xd
ResponderExcluirAh, e eu gostei muito do seu blog, é muito bonito seu layout também.
Eu criei um blog recentemente que aborda os mesmos assuntos que o Eu Amo HTML, se você se interessar, dá uma passadinha lá :-)
http://cinnamo-n.blogspot.com.br/
Tchau! :3
Olá.. como vai?
ResponderExcluirEu acho muito complicado, mas sempre quis aprender. E a sua postagem está bem explicada, eu irei tentar fazer. Muito útil!! Eu adoro mexer no photoshop.
Beijos,
http://designer-lovers.blogspot.com.br/ ♥