♡ Como eu faço meus layouts ♡

by - 1.5.16

Olá meninas!
Eu já falei várias vezes aqui sobre o assunto #Layout, mas hoje eu vim dar mais uma reforçada para as meninas que querem aprender a fazer os seus próprios layouts. Dessa vez, eu vim dar algumas dicas a mais e também mostrar como eu faço os meus próprios layouts. Vamos conferir? Let's go! 

Inspiração: Eu gosto de procurar imagens que me dão inspiração no We  It, Favim, Tumblr e Pinterest. As imagens que me dão inspiração, são aquelas que tem coisas cor-de-rosa e coisas que eu goste. Eu gosto de fazer combinações de fotos legais para depois montar tudo. Por exemplo:


Materiais necessários: Depois de buscar inspiração, eu começo a procurar materiais: imagens, pngs, fundos, ilustrações.

Eu já postei alguns materiais que eu uso nos meu layouts aqui. Se quiserem dá uma olhar:


Esboço/rascunho no PhotoScape: Depois de já ter tudo em mente e já ter achado os materiais necessários, eu entro no PhotoScape e abro um print da tela do blog. Eu deixo o print todo branco e vou colocando os objetos nos seus lugares. Quando termino de montar tudo, salvo a imagem que vai servir como um molde.

Colocando em prática: Agora para realmente colocar tudo em prática, eu uso um layout simples como base de tudo. Eu vou procurando tutoriais para personalizar cada parte do blog. Todo HTML é feito em códigos e em inglês. Por exemplo, todo layout é feito em códigos e cada linha desses códigos tem um significado. Vou deixar o exemplo do código usado para personalizar o título das postagens e ao lado de cada linha, vou colocar o significado:

h3.post-title { = Título das postagens (h3 = título principal, post = postagem, title = título)
font-size: 30px; = Tamanho dos títulos das postagens
color: #f518c3; = Cor que tem que ser escrita em hexadecimal ( A cor em hexadecimal pode ser encontrada em tabelas de cores ou no PhotoShop. Antes de colocar a cor, tem que colocar o #)
font-family: 'comic sans ms'; = Nome do estilo da fonte (As fontes que eu uso são do Google Fonts).
text-align: center; = Alinhamento do texto (center = centro, left = esquerda, right = direita)
} (O detalhe da chaveta, tem que ser aberta depois da parte que você quer escolher para personalizar em inglês (No exemplo, h3.post-title), antes da personalização (todo código que vem abaixo de h3.post-title) e tem que ser fechada depois da personalização.

Agora que eu expliquei uma pequena parte, você deve estar achando que é muito difícil mas não é. Para aprender tudo é só ir procurando os tutoriais em blogs e seguindo o molde que você vai conseguindo resolver tudinho. No tempo em que eu estava aprendendo, eu demorava uns 2 meses para fazer um layout. Hoje eu demoro 2 dias ou no máximo uma semana. Mas você vai aprendendo com a prática, por isso é sempre bom ter um blog de testes.


Espero que tenham tido uma ideia de como eu faço os meus layouts.
Beijinhos de gloss e fiquem com Deus!

Leia também:

5 Comentários

  1. Anônimo01 maio

    Adorei o post mah ♥ Mas eu não tenho paciência pra fazer :| O máximo que eu consigo é pegar uma base colocar e editar,ou seja,por fundo e capa!
    Beijos :*
    bloghellopeople.blogspot.com

    ResponderExcluir
  2. Oie Mah!
    Eu procurava turoriais no youtube pra fazer os meus layouts rsrs.

    Obrigada por explicar!

    Beijos!
    alecsandratamila.blogspot.com

    ResponderExcluir
  3. Anônimo03 maio

    Oie!
    Adorei saber como você faz os layouts. Você poderia listar alguns blogs que ensinam mais detalhadamente a fazer layout pelo Photoscape?

    Beijinhos!

    rafaelamilitz.blogspot.com

    ResponderExcluir
  4. .¸¸.•.¸¸.•.¸¸.•.¸.♥•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.
    Olá...
    ♥ Seus layouts são lindos, parabéns pela
    criatividade :)

    Pinkiss
    by; Renata Princess ♥

    http://renataprincess2.blogspot.com.br
    .¸¸.•.¸¸.•.¸¸.•.¸¸.♥•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.

    ResponderExcluir
  5. .¸¸.•.¸¸.•.¸¸.•.¸.♥•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.
    Olá...
    ♥ Seus layouts são lindos, parabéns pela
    criatividade :)

    Pinkiss
    by; Renata Princess ♥

    http://renataprincess2.blogspot.com.br
    .¸¸.•.¸¸.•.¸¸.•.¸¸.♥•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.•.¸¸.

    ResponderExcluir