02 fevereiro 2012

Big Tutorial:Layout Rocker


Oi oi gente! Bom,hoje venho com mais um BIG TUTORIAL, eu seu que você gostaram do primeiro :) e fiquei super feliz com isso! Então está aqui o segundo,onde vamos criar um design rocker  (eu sei,que vocês já perceberam isso,pelo titulo e pela a imagem) espero que vocês gostem,e que esse BIG ajude vocês com seus designers.

Clique em ''Leia mais'' para ir ao tutorial.


   Vá em Design, Design de modelo e em modelo,vá na ultima categoria que é Travel (Viagem),depois escolha o modelo Travel (o modelo azul com branco) Como mostra na imagem a baixo:

Clique na imagem para ver em tamanho maior.

    Agora vá em ''Plano de fundo'',vai aparecer a imagem que está de plano de fundo e logo abaixo estará escrito ''Remover Imagem'',então,clique ali.Vai ficar um fundo colorido,certamente será azul,mas  logo vamos resolver  isso.


Em seguida clique na setinha que tem a ponta para abaixo do lado da imagem que estava como plano de fundo,aí vá em ''Fazer upload de imagem'' que é primeira guia que aparece.Ali em escolher  arquivo você escolha o background que quiser. Mas,antes vamos ver algumas dicas.


Como estamos criando um design rocker,opte por backgrounds escuros,em tons cinzas ou até pretos.Que tal,usar um deses aí em baixo??



Vá em ''Layout'' e escolha qual qualquer modelo que seja de uma coluna.

Vá em ''Ajustar Larguras'' e deixe a primeira largura em 1040 e a outra em 300.


          
Vá em ''Avançado'' ,vá para a opção ''Texto da página'',é onde tem a fonte,cor, e o  tamanho do texto das postagens. Caso tiver alguma duvida em que fonte escolher de uma olhada nesse post do Trechy Teen.



Recomendo usar essas cores para o seu texto.
(copie o código e vá testando, até achar a que mais gostar):

#5d5d5d - #575757 - #525252

Vá em,planos de fundo e deixe as 2 cores transparentes.




Logo em seguida, vá para ''Titulo do blog''  e deixe a cor transparente e o tamanho em 0px.
A intenção é o titulo do blog não aparecer,por que vamos por uma cabeçalho no local mais tarde.  

 Vá em ''Titulo da postagem'' e escolha a fonte que mais gostar. Você pode deixar a cor em um tom rosa (para ''quebrar os'' tons escuros)

Logo em seguida,vá em ''Plano de fundo da postagem'' e deixe para a cor branca.


Agora vá em  ''Plano de fundo da barra lateral'',deixa a ''Cor da moldura'' transparente.  

Se você escolheu um background preto, aconselho você escolher um tom cinza. Para não ficar tudo muito preto,e dar um contraste entre as cores. Ou se você escolheu tons cinzas você pode escolher tons mais escuros (e quem sabe escolher um tom preto) Você pode escolher essas cores:
#dec7ff - #acaaab -#505050-#707070

Bom,agora acho que o resto (links,titulos dos gadgets,etc...) vocês editam sozinhos.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Vamos personalizar o design pelo HTML:

Vamos começar retirando essas ondinha que ficam no topo do template.

Vá em Design> Editar HTML, de Ctrl+F e pesquise por:

content-outer .content-cap-top {

                        E apague os trechos contornados de rosa na imagem abaixo:
Visualize,e se se as ondinhas tiverem saído,salve.  

Agora vamos juntar as colunas com a área das postagens.

Design > Editar HTML > Pressione as teclas Ctrl + F e procure por : 
  Se sua coluna for do lado direito procure por:

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

                                      E se sua coluna for do lado esquerdo procure por:

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

                        E quando encontrar apague os trechos contornados na imagem abaixo:


Visualize, veja se a barra lateral juntou com as postagens. Se sim, salve.  

                           Que tal  centralizar o titulo do post?!

 Design > Editar HTML e procure por:

h3.post-title {

E acrescente abaixo o seguinte código:
text-align: center;

Se quiser o título alinhado para a direita, substitua center por right.

                 Agora vamos deixar as bordas do blog redondinhas para fazer isso veja esse post. Quer colocar um menu com efeito hover bem legal? Então veja esse post.

-----------------------------------------------------------------------------------------------------------------------------------------------------------

   Agora vamos por um cabeçalho no blog!! Fiz alguns para vocês espero que gostem( se você quiser salvar clique na imagem para salvar o cabeçalhos em tamanho real) :



 E para juntar a 
Se usarem esse tutorial como base para seus design coloquem os créditos, NÃO REPASSE AS BASES DE CABEÇALHOS eu não coloquei os créditos pois isso atrapalha um pouco,então se usarem alguma delas CREDITEM.

     Então é isso aí, espero que tenham gostado! Bjs

5 comentários:

x Garota Imaginária-Oficial disse...

Oii muito bem explicado o post,
eu aprendi a fazer aquilo que queres' depois postarei o tutorial!
Sweet Girl

Bruna Dias disse...

Desculpa por naum ter retribuido o comentario ontem me esqueci mais agora to retribuindo beijinhos paty e belo blog

http://brunaperfectgirl.blogspot.com

Danielle Monteiro disse...

Eiii seu blog é mt mt liindo
estou seguindo,seria uma honra(TOTAL) se você seguisse o meu,serio seu blog é mt kawaii,e se você retribuir o comentario vou pirar,esse post foi um dos melhores(so assim fico feliz) beeejos com muita esperança
http://www.avrilnoticias.blogspot.com/
entre em contato na c-box ou por coment se quiser parceria ou afiliação(tomara que vc queira flor *....*)

Mariana disse...

ooi, tudo bom ? entro sempre no seu blog e eu gosto muito dele ! seeguindo, segue de volta ? e me ajuda a divulgar meu concurso, que tá rolando no meu blog ? www.smallog.blogspot.com obg ^^

Betina disse...

Super útil o tuto :))
Está sumida lá do blog,quando puder apareça!
Beijo!
http://sweetstarblog.blogspot.com/