6 de fevereiro de 2014

Um layout para chamar de seu | #nível1

 Oi gente :)

 Uns dias atrás eu tinha postado no facebook que ajudaria UMA pessoa a personalizar seu layout porque estava morrendo de tédio, e daí choveram comentários. Conclusão: fiz um layout só e ajudei umas outras com banners e afins, mas até hoje aquele post tem gente pedindo.
 Não sou profissional, mas aprendi uns truques com HTML e ainda assim acho bem difícil de usar, mas na maioria das vezes os themes que uso/faço são do próprio blogger, que modifico sem grandes alterações no HTML.
 Mesmo dizendo isso, muita gente ainda não sabe como deixar o layout mais "sua cara", menos "achei na net e usei". Eu podia passar o dia inteiro listando motivos para se usar um layout trabalhado, mas vou direto ao ponto. Nesse post o nível é beeem básico, só porque percebi que tem uma galera que realmente não entende nada e está precisando de uma luz, mesmo que de uma amadora.
 Se vocês acharem simples demais, eu começo a elaborar um pouquinho as coisas, para saber o até onde eu sei sobre o assunto e para irmos descobrindo juntas.
 São cinco passos super simples para acabar com o fundo .gif e as letras que doem nossos olhos!
 Vamos õ/

1 - Larguras e cores 


  A largura do seu blog tem que ser algo compatível com as imagens que quer usar. Se posta muita fotografia - em boa qualidade - é melhor que a largura da caixa de posts seja maior - mas sem exagerar. Aqui no blog eu uso eu algo em torno de 1000px de largura + 300px na barra lateral, ou seja, onde ficam as categorias e afins. Ajuste sua largura e sempre use imagens que combinem com ela, para que não fique desalinhado e, consequentemente, uma bagunça só.
 As cores precisam ser calmas. Se usar uma cor mais forte, como eu uso o vermelho (ou alguma variação dele), sua fonte e seu plano de fundo tem que ser mais neutros. Nada de misturar verde florescente com rosa pink, mesmo que sejam suas cores favoritas. Use um ou outro para os detalhes, e se for uma cor forte, tente sempre usar o branco ou bege como fundo e preto ou cinza para a fonte. E lembre-se: florescente não. Florescente nunca.

2 - Um banner para chamar de seu


Sim, é verdade, o banner muda tudo. É ele que as pessoas vão reconhecer se estiverem passando por um site parceiro seu e estiver lá o bannerzinho; ele é sua marca, ele é seu logotipo. Eu admito que é bem chato de se criar banners decentes - eu fiz umas 500 versões do meu e ainda não estou satisfeita - mas antes uns mais ou menos do que os que todo mundo tem.  A dica que eu dou é: baixem o PhotoScape, que é super útil, leve e sem vírus, e procurem por imagens no google para fazer montagens simples. Se você nunca usou o editor na sua vida, vale uma vídeo aula de dois minutinhos no youtube para aprender a posicionar as imagens que você pegar do google. 
            Exemplo de banner que fiz para uma conhecida usando .pngs do
     google e poderia facilmente ser feito no Photoscape.
 Importante: SEMPRE procurar imagens em .png. O que isso quer dizer? Que é só a imagem, sem nenhum fundo.  Por exemplo, se eu procurar no google imagens "pincéis de maquiagem png", ele me dará ESSE link, onde eu posso pegar qualquer imagem e reposicionar no Photoscape sem me preocupar com plano de fundo, o que facilita muito a montagem.
 Mais importante ainda: O nome do seu blog tem que estar no banner. Não erre ele - sim, eu já vi isso!

3 - Planos de fundo que não seriam nada mau(s)



  Ok, cada caso é um caso, e embora eu tenha dito que cores menos chamativas ficam melhores como planos de fundo, esses azuis também funcionariam muito bem em alguns casos. Para usar, é só salvar a imagem e cortar o quadradinho que quer. O último é o que uso, só que num tom mais rosado.

4 - Personalizando ainda mais seu layout


 Acho que todo mundo entendeu que esse post é para o pessoal que não sabe mesmo como começar a personalizar, não é? Pois bem, quem achou essa parte muuuuito simples - e ela de fato é - já pode começar a dar pulinhos maiores. Bem vindo ao mundo do HTML! 
 Não é sempre necessário lidar com HTML. Só em seguir as dicas acima, já dá para ter um layout muuuito legal. Porém, se você se empolgar (assim como eu), eu separei algumas das coisinhas que acho que mais mudam o seu blog.


5 - Mais materiais


 Há blogs especiais para ajudar com HTML e eles são muito bons em uma coisa: disponibilizar materiais para usarmos. Planos de fundos (patterns), imagens em png para banners, tutoriais a mil, fontes, styles e tudo o que há de bom. Fiz uma lista dos que mais visito para o caso de vocês não estarem se dando bem com o google nos últimos dias. Lá vai:

  •  http://blog.kandisdesign.com/category/recursos/
  • http://a-helphtml.tumblr.com/
  • http://www.cherryboomb.com/p/tutoriais-e-goodies.html
  • http://havingthemes.tumblr.com/
  • http://land-of-designs.com/
  • http://goimagines.blogspot.com.br/p/goodies.html

 E aí, complicado? Não, né? Pois bem, dependendo do como esse post for, eu crio um com mais dificuldade. Também não vou muito além disso - fora o PhotoScape -, mas dá para irmos nos ajudando a crescer nesse meio.
  E então, foi útil?

14 comentários:

  1. Gostei muito desse post; eu, euzinha não sei nadinha sobre isso hahaha, fico perdidinha, por isso quem arruma o meu blog na parte de layout e tal é o meu namorado. Mas gostei muito das dicas deu para dar uma boa iluminada na minha mente.

    Beijinhos!

    bloglarissamascarenhas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Namorados que ajudam a gente <3333
      O meu finge que não sabe fazer, mas acaba sobrando para ele também *O*
      Que bom que serviu!

      Excluir
  2. Oiie é lindo seu Blog parabens, Não só por ser um blog lindo mais por ajudar as pessoas que não sabem nada, nadinha mesmo de html esse post ajuda muito principalmente, pra quem está começando agora Parabens mesmo Josy.

    http://idioticesdeumnobre.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Sérgio, adorei o nome do seu blog ^_^
      Obrigado, que bom que achou útil!

      Excluir
  3. Oi gatinha, gostei do blog e estou seguindo
    segue o meu também? http://docemakeupoblog.blogspot.com.br/
    um beijo!

    ResponderExcluir
    Respostas
    1. Nada, não sigo blogs que só comentam divulgação;

      Excluir
  4. Como havia dito no grupo, no início achava mexer no html do blog bem difícil tinha até medo de fazer algo e não poder desfazer, mas agora está mais light digamos assim.

    Suas dicas foram ótimas, arrasou!

    Mil beijos!
    umpouco-demundo.blogspot.com

    ResponderExcluir
  5. As vezes eu mecho!Estou seguindo
    http://meuestiloe.blogspot.com.br/

    ResponderExcluir
  6. Nossa que legal, amei as dicas, e layout sempre é muito importante para um blog, passa a ideia que o blog é levado a sério!
    :)

    ResponderExcluir
  7. Que tuudo, estava precisando dessas dicas, obrigada! Pode me esclarecer uma duvida? Porque eu não consigo trocar o meu layout? Ja tentei de todas as formas e não consigo tirar esse atual. A ideia era pegar um bem simples e deixar do meu geitinho. Podes me ajudar?
    Muuito obrigada
    Adriana Carolina
    http://www.adrianacarolinamakeup.blogspot.com.br/

    ResponderExcluir
  8. Amei as dicas. Também não acho muito legais aqueles lays com cores fluorescentes, juro que aquilo me faz odiar eternamente o blog kk beijos

    senhoritadeallstar.blogspot.com

    ResponderExcluir
  9. adoro post assim , adoro mudar meu lay afinal é a primeira impressão que fica né ???

    ResponderExcluir
  10. Adorei a iniciativa. Tenho uma dificuldade enorme com layout. já estou no terceiro do blog, segundo personalizado. Mas com o HTML empaquei. Não consigo mais, vou suas dicas. xeru.
    http://fashionistasassumidas.blogspot.com.br/

    ResponderExcluir