Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

12/04/2012

NOVO: Fazer Templates I - Preparando as imagens e o blog


Cheguei a pensar que esse dia nunca chegaria. Já estou devendo esse tutorial a um monte de blogueiras... Que coisa não??? A maioria delas já deve até ter desistido.
Nessa série de tutoriais, vamos aprender a fazer um template parecido com o do DSM, incluindo o menu que fica sobre o cabeçalho (com hover e tudo mais). Vamos aprender a colocar o cabeçalho sem link, vamos aprender mais sobre o background, sobre a imagem de fundo do corpo do template e tudo o mais envolvido no processo.
Só peço uma coisa a vocês: uma pequena dose de paciência, pois vou fazer o tutorial em partes... Não dá pra deixar tudo pronto hoje, não tenho nem tempo hábil para isso... Mas nós vamos montá-lo juntos. Como eu já disse, quero fazer o blog dos parceiros do DSM, e vou usá-lo como blog de testes.
Hoje vamos aprender tudo sobre como fazer as imagens, vou dar todas as dicas possíveis que aprendi até hoje fazendo os meus templates. Vocês logo vão descobrir que essa vai ser a parte mais demorada do template, pois envolve todo um processo de busca da imagem perfeita e da criação da forma do seu layout.
Depois vamos saber quais são os primeiros passos para passar o template para o blog. É importante que você siga à risca todos os passos desse tutorial, principalmente no tocante de usar um blog de testes!!!

Criando suas imagens:

A primeira coisa que você precisa fazer é ter uma ideia geral de como você quer que seu template seja. Pode até fazer um rascunho num papel antes. Depois de ter a ideia, você deve montar a imagem completa do seu template no programa de edição de imagens à sua escolha, já com o espaço do menu nela, com o espaço das postagens, com o rodapé e com o tamanho da largura exata que você quer que o blog tenha (no exemplo usei o tamanho 960px, o do DSM e do blog dos parceiros é 990px). Só não coloque na imagem o fundo do blog, pois o fundo é colocado à parte. A imagem de exemplo abaixo eu fiz no Photoscape para ilustrar. 


Se você quiser que seu cabeçalho fique com o fundo do blog aparecendo, precisará fazer uma imagem com fundo transparente ao invés de branco (só no cabeçalho, a parte em que ficará suas postagens e as colunas fica com fundo branco)...
Depois de fazer a imagem do template inteira, como vimos acima, vamos dividí-la em três novas imagens: Header (cabeçalho), Main-outer (corpo do template) e Footer (rodapé). Veja na imagem abaixo quais são as áreas que você deve cortar (em cinza):


Sua imagem do Cabeçalho deve ficar mais ou menos assim, veja como ela pega a imagem, o texto do cabeçalho, o menu e a parte de cima do corpo do template:


A sua imagem que irá se repetir verticalmente no corpo do template será uma pequena faixa da parte do meio da imagem:

Parece estranho, mas é assim mesmo que essa imagem vai ficar...
Por último, o rodapé deve ser o final da imagem, para fechar o template por baixo:


Lembre-se que as três terão largura igual. Aproveite agora para já hospedar essas três imagens na web. Nesse link vocês irão encontrar dicas para hospedar as imagens. Eu uso o Tumblr, pois é o mais seguro. Você também pode colocá-las pelo próprio Blogger e pegar o endereço delas depois (mas cuidado com seu limite de fotos do Picasa). Não recomendo que você use o Photobucket pois a versão gratuita tem limites de visualizações. Hospede também a imagem que você vai usar como fundo.

Preparando o Blog:

Antes de fazer isso no seu próprio blog, faça num blog de Testes. 
Não comece a fazer o template no seu próprio blog senão você vai ficar um bom tempo com o template errado nele e pode perder os códigos do template antigo.

Depois de terminar a confecção, vou ensinar como passar o template para o seu blog, não se preocupe, você não vai precisar repetir tudo outra vez no seu blog.
Com o blog de testes já criado, você vai fazer uma postagem qualquer (pode ser com letras aleatórias), para nos ajudar na hora de colocar tudo no lugar. Crie também uma página qualquer, na aba páginas.
Depois de criar a postagem e a página, entre no "Designer do Modelo", na aba Modelo > Personalizar. Assim que abrir, coloque no seu blog o último modelo do "Simples" (o branco). Clique na imagem abaixo para ver os detalhes:


Ainda no Designer, clique na aba Layout e escolha o da sua preferência (não precisa ser igual ao que eu escolhi, pode ser qualquer um):


Depois Clique em "Ajustar Larguras" e coloque no valor "Todo o blog" a largura da imagem que você acabou de criar. A minha imagem tem 990px de largura, então o meu blog terá 990 em "Todo o blog". Os outros valores coloque ao seu gosto:


Por fim, vamos à aba "Avançado". Antes de ajustar as outras cores, vá na opção "Planos de fundo" e coloque todos os três como "Transparente". Vai continuar tudo branco no Designer (o print abaixo é antigo):


Agora vá em cada uma das outras opções e coloque as cores e as fontes a seu gosto, dos links, dos textos, dos títulos, etc...
Quando todas as cores estiverem escolhidas, clique em "Aplicar ao blog":



Acompanhe o resto da postagem na Parte 2!!!

Mil Sweetkisses,
15 Comentários
Comentários

15 comentários:

  1. Ola querida
    que ótimo este post, parabéns
    adoro seus tutoriais, não sei se já reparou mas meu layout foi feito com base nos seus tutoriais
    bjos

    brunaporelamesma.blogspot.com.br

    ResponderExcluir
  2. Vou testar no sábado mas a pergunta q ñ qr calar serei eu capaz disso? bjus Super Sheila Obrigada pela dica

    ResponderExcluir
  3. Muito bom acho que vou tentar no meu blog.
    http://raymiga.blogspot.com

    ResponderExcluir
  4. Gostei bastante do tutorial, bastante útil para quem não sabe essas coisas ^^

    Bjs, tem post novo no meu blog ^-^
    http://darkening.freetzi.com/

    ResponderExcluir
  5. Oii Sheila!! ADOREII o novo lay do blog,ficou super fofo,lindu e colorido! Está super de parabéns!E suas dicas são ótimas,principalmente pra mim e outras blogueiras que não tem experiência.Reparei que você citou o programa "Photoscape",eu baixei e achei um excelente programa! Qualquer dia desses você pode dar umas dicas de como usá-lo para fazer algumas coisas pro blog...Kkkk ;)
    Gostei muito da sua ideia do "blog",Parceiros do DSM,pra testes. Ah,e estou pensando em participar do seu Desafio,pode contar comigo ok?Assim que puder,vou me inscrever. E outra: somos duas escritoras de carteirinha! Li seu texto de exemplo para o desafio,e é muito parecido com o que passei.Também estou escrevendo meu livro,desde pequena sou interessada em ler(comecei aos 3 aninhos),e senti impulso de escrever.Caderno também foi meu primeiro suporte,mas demorava mais e eu errava muito também.Hoje escrevo no Word...Kkkk,mas pode deixar que não vou ser uma plagiadora da sua ideia,td bem?
    Beijos flor ♥ ♥
    viciados-na-saga-crepusculo.blogspot.com.br

    ResponderExcluir
  6. oooi linda, parabéns por esse blog lindo, que eu amei, eu não conhecia, agora que conheci,vou sempre está por aqui, pois amei tudo aqui, o layout é super foofo, suas postagens são mt boas, percebi que criatividade não falta a você né?! não mesmo, todo aqui é lindo demais.. Parabéns mais uma vez linda, por se dedicar ao máximo para seus leitores, vou seguir aqui :D
    Da uma passadinha lá no meu blog, se gostar, segue por favor ;*

    Beijos

    http://meeninamulheer.blogspot.com.br/

    ResponderExcluir
  7. awn, quanto tempo né? rs :c
    enfim, adorei <<3

    Beijos,
    http://bnascimentooo.net.tc

    ResponderExcluir
  8. Legal Sheila falar sobre esses assuntos aqui, muita gente vai gostar e vai ser muito útil! Beijão, www.spiderwebs.tk

    ResponderExcluir
  9. Adorei seu tuto.
    Com certeza vai quebrar vários galhos para quem quer muito desenvolver um template legal.
    Tu és fera, amiga. eheheheheheh

    Beijos da Cléo
    http://vejoporai.blogspot.com.br

    ResponderExcluir
  10. Consegui fazer mas no internet explorer o template fica com um espaco...

    ResponderExcluir
  11. Muito bom a explicação adorei <3

    http://ursode-pelucia.blogspot.com.br/

    Bjooos *-*

    ResponderExcluir
  12. sou nova nessa de blog,acabei criando um por necessidade de trabalhoainda tô tentando criar uma coisinha legal.teu tutorial me ajudou muito e vou te seguir p ver se consigo apreder a me virar nesse novo desafio.dê uma olhadinha no horrorzinho que tá lá,rss!!!Mas aos poucos vou ver se deixo ele pelo menos original.qualquer ajuda agradeço.o endereço é; atelievagalumeencantado.blogspot.com.br

    ResponderExcluir
  13. Todas as imagens estão inválidas. :-(
    Não dá pra ver nenhuma!
    Tem como consertar?
    Beijinhos...

    solteiras-noivas-casadas.blogspot.com

    ResponderExcluir
  14. oiii aqui eu peguei o fundo pra fazer o cabeçalho do meu blog vou ter dar creditos em todas as postagens ok??
    Beijinhos

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados