Tutorial: Capa simples no PFS

Aperte Ctrl+N e crie um novo documento de tamanho 850x315. Abra sua foto e a posicione do lado esquerdo da capa, desse modo. Abra essa textura e coloque-a por cima da foto. Aperte W para ir para a ferramente 'Gerenciador de Camadas'. Lá em baixo, vai ter duas 'abas': Opacidade e Modo de mistura. Ajuste desse modo:

Feito isso, duplique a textura até cobrir toda a capa. Lembrando que todas as fotos que você usar neste tutorial (menos a que vai ficar dentro do triângulo) irão ficar debaixo dessa textura ok? Depois disso, abra essa base de triângulo e posicione no centro da capa e acima da base, posicione a foto 'principal'. Selecione a camada da base > Tecle L > Clique em cima da parte branca da base. Aperte delete, depois selecione a camada da foto e aperte delete também.Agora vamos colocar as outras duas fotos. Para fazer isso, cole as duas e arraste-as para debaixo da camada do triângulo e das texturas. Após fazer isso, mescle-as. Agora cole essa textura em cima e ajuste assim: Opacidade: 72. Modo de mistura: Divisão. Apague as partes que saírem pra fora do triângulo. Junte a camada da textura com a da foto e da textura. Duplique essa camada e vá em filtro > estilizar > quadriculado > linhas pretas e ajuste a opacidade como preferir. O resto é com você! rs

Criando um layout #2: Mudanças Básicas

Olá pessoal! Espero que tenham conseguido fazer a primeira parte do tutorial. Dividir o tuto é bem mais fácil, pois dá mais tempo para vocês tentarem. Mas enfim, vamos continuar com nosso layout? Não vamos nos apressar muito, no entanto, vamos trocar os links de navegação. Se não souber o que é isso, eu vou explicar: São aqueles links/nomes "Postagens mais antigas", "Início" e "Postagens mais recentes". Eu vou ensinar como substituí-los por imagens. Vá em modelo > Editar HTML > Se aparecer algum aviso, clique em prosseguir > Marque a opção "Expandir modelos de widgets.

Substituindo o link "Início"
Dê Ctrl+F e procure por: <data:homemsg>
Vão aparecer dois códigos, mas você só irá mexer no primeiro que aparecer. Substitui esse código por esse:
<img src="url_da_imagem" />

Substituindo o link "Postagens mais antigas"
Dê Ctrl+F e procure por: <data:olderpagetitle>
Também irão aparecer dois códigos, mas só mexa no primeiro. Substitua por esse:
<img src="url_da_imagem"/>

Substituindo o link "Postagens mais recentes"
Procure por: <data:newerpagetitle>
E substitua por:
<img src="url_da_imagem" />

Salve. Prontinho!  Vamos continuar? Agora vamos aplicar um estilo nos títulos da sidebar. Eu vou usar um do Cherry Bomb como base. Eu apenas modifiquei a cor do texto e do coraçãozinho mas se você quiser pode pegar o código original aqui.

<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 15px;
font-weight: bold;
text-align: left;
color: #000000; /*Cor da fonte*/
background: url('http://img834.imageshack.us/img834/3098/miniheartcpia.png') no-repeat left top; /*imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Agora vamos personalizar o título dos posts. Eu vou deixar bem simples, mas se você quiser pode procurar outro tutorial bem mais caprichado, há váaarios na web. Eu apenas vou mudar a fonte. Eu vou usar a mesma fonte dos gadgets, que é Georgia + negrito + itálico. Como é uma fonte comum, vou mudar no designer do modelo. Bora lá?
Vá em modelo > personalizar > Avançado > Título da postagem > Seleciona a fonte "Georgia" e marque as opções "B" e "I", como mostra o print:

Vou deixar com a fonte preta mesmo, já que também é a cor do título dos gadgets. Mas você pode escolher a fonte que você quiser, e a cor também. Agora eu vou acrescentar sobra no post. Vamos?
Para colocar sombra nos posts, procure por .main-inner .column-center-outer {
E logo abaixo, cole:

 box-shadow: 1px 3px 15px 2px #dcdcdc;

 Prontinho, visualize, se estiver tudo certo, salve.
Agora vamos personalizar uma parte muito importante de um layout: Os links. Eu vou usar um efeito fade bem legal, já que a paleta de cores do meu blog um tanto quanto diferenciada. So let's go?

- Créditos do tutorial ao Kawaii World / Cherry Bomb -

Vá em Modelo > Editar HTML > Dê ctrl+f e procure por a:link {

Você irá encontrar um código parecido com esse:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Apague tudo, e no lugar cole:

a:link {
color: #000000; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #000000; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #000000; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
} 

Criando um layout #1: Fazendo a base

Lembrando que a maior parte das dicas aqui peguei do Cherry Bomb, Menina Nerd e Kawaii World. Como no Cherry Bomb, vamos usar o modelo Viagem/Travel que vem com umas "bordinhas" feias. Agora vá em Modelo > Personalizar. Clique em avançado e depois em Plano de fundo da postagem e escolha uma cor qualquer, só para destacar.Agora vamos tirar aquelas "bordinha" horrendas que vem encima. Vá em modelo > Editar HTML > E procure por .content-outer .content-cap-top { 

Você verá um código parecido com esse:

.content-outer .content-cap-top {
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color);
padding: $(content.padding);
}

Apague somente as partes destacadas. Depois disso, seu blog deve ficar mais ou menos assim:

Só que sem o nome, é só uma tag. Agora vamos deixar a sidebar colada nas postagens. Se quiser deixar do jeito que está, pule esta etapa. Procure por .main-inner .column-right-inner {

Você vai achar um código mais ou menos assim:

.main-inner .column-right-inner {
margin-left: $(content.padding);
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: $(content.padding);background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner {
margin-right: $(content.padding);
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Apague somente o que está destacado.  Clique em vizualizar. Se estiver tudo certo, salve. Agora vamos colocar uma imagem no seu cabeçalho. Você pode usar uma de teste ou uma de definitiva. Lembrando que você tem que fazer a imagem da largura do seu blog, se você não souber qual o tamanho, é só ir em Modelo > Personalizar > Ajustar larguras e pegar o número de pixels de onde está escrito "Todo o blog". Mas enfim, vamos colocar a imagem? Vá em layout > e clique onde está destacado:

E onde tem imagem, escolha se você quer "Do seu computador" (fazer o upload da imagem) ou "Da web" (colar o link da imagem abaixo). Depois de sua imagem ser carregada, escolha a opção "Em vez de título e descrição". Agora vamos tirar o espaço entre o cabeçalho e os post/sidebar. Vá em Modelo > HTML dê Ctrl+F e procure por /* Tabs
Você irá encontrar um código assim:

.tabs-inner {
margin: 1em 0 0;padding: 0;
}

Apague o que está destacado. Agora procure por: .main-inner {
Logo abaixo, acrescente o código margin-top: -20px;
Vá modificando o número até ficar do jeitinho que você quer. Vamos colocar uma imagem de background? Si õ/ Você pode encontrar várias imagens super práticas no blog Kawaii World indo em > Utilitários > Backgrounds e escolhendo um. Depois de escolher sua imagem, vamos colocá-la no blog. Vá em Modelo > Personalizar > Plano de fundo > Clique em remover imagem e depois clique aonde está mostrando:

Clique para ampliar

Vai abrir uma janelinha. Clique em fazer upload da imagem e depois em escolher arquivo. Se ficar legal, salve. Você também já pode mudar a cor da área de postagens para alguma fixa. Terminamos a base do nosso layout!

Beijo, beijinho, beijão amorecos!