05 maio 2015

Template no PS

| |
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)









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.

- Passando para o HTML: Depois de ter hospedado as partes que você cortou, instale a base no seu blog.

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ês fuçaram o código antes de mexer, perceberam que há duas opções para personalizar o título dos gadgets: ribbons ou título h2 (não faço a mínima ideia de como se chama tbh)

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

Como já devem ter percebido, eu não coloquei como personalizar os links, negritos, etc. O motivo é que esses códigos básicos já estão destacados no começo do código.

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

5 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Amei 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...
    Você explicou direitinho, parabéns :P

    Abraços *3*

    {www.h-oneypie.com}

    ResponderExcluir
  3. 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é? >.<
    Aliá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*.

    ResponderExcluir
  4. 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
    Ah, 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

    ResponderExcluir
  5. Olá.. como vai?
    Eu 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/ ♥

    ResponderExcluir

« »