Tutorial: Como criar um layout vintage

Criar um layout vintage não é encher ele de estampa liberty, bonecas pin up e tudo que representa esse estilo, e sim dar uma visão de delicadeza e ao mesmo tempo atitude, conciliando isso com belas cores, detalhes e imagens para assim um belo layout vintage surgir. Para quem não lembra, eu fiz um post e nele coloquei uma enquete onde vocês escolheriam qual seria o tema do BIG Tutorial e a maioria das pessoas escolheram o tema Vintage, e como prometido hoje vamos aprender a criar um.




Então vamos começar, este tutorial será feito em 3 partes montar, personalizar e finalizar vou tentar explicar o mais objetivo e simples possível para agilizar.


Caso você esteja fazendo este tutorial no seu blog principal antes de começar abra o seu bloco de notas ou qualquer editor de texto simples do seu computador, vá na página design>editar html no seu blog selecione todo o código HTML na caixa, copie e cole no editor de texto e salve com o nometemplate original, caso algo dê errado ou você não curta, é só substituir o código errado, pelo original que você salvou.

LAYOUT - O layout do nosso template terá duas colunas laterais tipo a do Trechy Teen, vamos montá-lo!

Vamos escolher o melhor modelo para se trabalhar, ou seja o template travel, vá na página Design em seu blog, em seguida clique no link Design do modelo :








Após a página abrir, vá em Modelos no menu à esquerda e nos últimos modelos escolha o Viagem e em seguida escolha o template Travel como indica a imagem abaixo:


Agora vamos em Plano de Fundo, no mesmo menu e clicamos em remover imagem:


Irá abrir uma pequena janela perguntando se você quer mesmo remover, clique em sim.

Agora vamos em Layout e escolhemos os seguintes modelos abaixo:


clique em Ajustar Larguras deixe as meninas com os mesmos valores da imagem abaixo:


Agora vamos personalizar a área das postagens e outros,  cliquem em Avançado no menu, em seguida Planos de Fundo e deixe as duas opções transparentes:


No mesmo menu onde você clicou Planos de Fundo, procure por Plano de Fundo da Postagem, e deixe em branco:


Bom, estas são as alterações principais, vamos agora personalizar nosso template, antes disso, cliquem em Aplicar ao Blog e esperem o aviso de alterações salvas.


PERSONALIZAÇÃO - Por enquanto o seu template só terá uma cor para as duas colunas, mas vamos resolver isso e dar um UP nele.

Vamos em Design > Editar HTML  e pressionando Ctrl + F procuremos por :

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Quando encontrar, ele aparecerá assim:

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


Substitua apenas a parte destacada em VERMELHO, por : 

background: url("URL DA IMAGEM") repeat;

 Daí ontem tem URL DA IMAGEM, você escolhe uma das imagens abaixo clica nela, quando ela abrir em outra aba/janela em tamanho real você copia a URL/ endereço da página dela e cola no lugar de URL DA IMAGEM.




Não esqueça que você pode também personalizar as imagens acima, com as cores que quiser, basta que a imagem seja nas mesmas medidas que as acima 410x64

Bom, depois de colocar a url da imagem no código, clique em visualizar, e perceba que agora seu blog realmente aparenta ter duas colunas. 

Caso você não tenha entendido esta parte do tutorial, dê uma olhada no tutorial feito pela Menina Nerd, foi lá que aprendi esta dica, mas claro use as imagens deste post, por conta das larguras colocadas anteriormente.

Link do tutorial ( abra este link em outra aba para não sair do tutorial )

Vamos colocar um background no seu blog, 

pressione Ctrl + f e procure por:


body {


Ele vai estar assim :

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);

Daí você apaga a segunda e terceira linha que são:

 color: $(body.text.color);
  background: $(body.background);

e substitua por :

background-image:url("URL DO SEU BACKGROUND");
background-color:#fff;
background-repeat:repeat;

DEVE ficar assim:

body {
background-image:url("URL DO SEU BACKGROUND");
background-color:#fff;
background-repeat:repeat;



Se deu tudo certo, vamos agora terminar de personalizar o template, vamos juntar as barras laterais com a da postagem:

Primeiro vamos tirar os espaços do layout, ou seja , juntar a barra lateral nas postagem e se no caso você deixou a barra de páginas , fazer o mesmo com ela.Para juntar a barra lateral com a das postagens basta você ir em design > editar html pressione as teclas Ctrl + F e procure por :

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Quando ela encontrar , apague as partes indicadas em vermelho na imagem abaixo : 



 confira se a coluna realmente juntou com a das postagens, se deu tudo certo clique em salvar.Agora vamos fazer outras personalizações, clique em cada um e siga todos os tutoriais abaixo:


vocês podem também acessar a página de goodies e encontrar alguns dos tutoriais que o Trechy Teen possui.


FINALIZAÇÃO - vamos para a parte bonita, o design, lembrando que nós queremos um layout vintage não é mesmo? então, criei umas coisas para vocês usarem, ou se inspirarem, e vou dar as medidas para vocês criarem o cabeçalho e o resto.



A sua imagem pro cabeçalho deve ter as seguintes medidas: 939x341

Não coloque imagens ou desenhos kawaii.

Não coloque background, fofinhos, ou com desenhos.
Não abuse do rosa, quanto menos melhor.


Para links procure escolher as seguintes cores ou tons parecidos, nada de cores fluorescentes: 

Red255 0 0#FF0000

DeepPink255 20 147#FF1493


LightCoral240 128 128#F08080



Para o título das postagens, escolha uma font clássica, nada de fonts escandalosas.



background que combinam com o estilo Vintage:



- Jeans

- Estampa Liberty

- Claros com detalhes vermelhos
- Madeira



Para enfeitar seu blog, eu criei algumas coisinhas:



 




E aqui alguns brushes para vocês usarem no cabeçalho



O importante é que vocês encham o cabeçalho de coisas assim, bem antigas, como folhas de jornal, pngs de palavras, mas sem repetir as imagens. Espero que tenham gostado, o próximo layout será uma revista.



Trouxe umas inspirações confiram:



2 comentários:

Sandy C. disse...

Adorei mais todas as imagens ficam assim http://1.bp.blogspot.com/_kXyKuBgZuVs/TCz3iB-mMXI/AAAAAAAADMY/-pSiTsIbOSY/s200/6.png

Bruh disse...

Desculpa é que meu pc está apagando algumas fotos fazendo com que fique assim no blog :/