26abr2013

Photoshop: Criando menus diferentes para o seu blog

  • Categorias: Blogosfera   |   Tags:
  • Olá,

    Notaram que eu mudei o menu do blog? Achei que ficaria muito mais fofinho assim. Quer aprender e fazer um no teu blog também? Então vem comigo! A parte interessante desse tutorial é que você pode criar o menu da forma que desejar, não há limites! ;D

    Antes de começar, tenho duas informações importantes:
    - Não é preciso salvar uma cópia do seu template, pois não vamos mexer nele.
    - Esse é um tutorial avançado, para fazê-lo você deve ter conhecimento básico de Photoshop ou qualquer outro editor de imagens que você quiser usar.

    Vamos lá!

     

    • 1 - No editor de imagens, crie o menu exatamente como ele aparecerá no seu blog, com os nomes das páginas e os enfeites que desejar (eu usei corações). O meu ficou assim:

     

    • 2 - Delete o plano de fundo. Agora, com a ferramenta de cortar, corte e salve como PNG separadamente uma imagem para cada título de página. Exemplo:

     

    • 3 - Caso você tenha feito um enfeite que separa as páginas, corte e salve como PNG também. Lembre-se de deixá-lo bem centralizado. Só é necessário salvar 1 enfeite, já que são todos iguais.

    O meu ficou assim:

    ATENÇÃO: Deixe todas as imagens (de páginas e separador) com a mesma altura.

     

    • 4 - Agora que você já tem tudo salvo em imagens, acesse sua conta do https://picasaweb.google.com (use o mesmo login do blogger). Faça o Upload de todas as imagens.

     

    • 5 - Vá no painel do blogger, em LAYOUT. Crie um novo widget e escolha "HTML/Java Script". Deixe sem título e na descrição cole o código a seguir:
    <center>
    <a href="LINK"><img src="URL DA IMAGEM" /></a>
    <img src="URL DO ENFEITE SEPARADOR" />
    </center>
    Observações:
    - As linhas onde há "center" são para deixar o menu centralizado, não mexa nelas. Só as remova caso você não queira o menu centralizado.
    - A linha vermelha é referente à página, então copie e cole quantas vezes precisar. No meu menu, por exemplo, há 5 páginas (Início, Sobre, Parceiros, Templates e Contato), então repeti essa linha 5 vezes.
    - Se você usou um enfeite separador, copie e cole a linha azul entre cada linha de página. Se você não usou apenas remova essa linha azul.

     

    Agora vamos substituir os links:
    - Em LINK, cole o link da página.
    - Em URL DA IMAGEM cole a url da imagem referente a essa página, a que você hospedou no Picasa.
    - Em URL DO ENFEITE SEPARADOR cole a url da imagem do enfeite separador, também hospedada no Picasa.
    • 6 - Salve o widget e veja como ficou.

     

    Deu certo? Compliquei muito? Qualquer dúvida comentem. Emoji5

    67 Comentários em “Photoshop: Criando menus diferentes para o seu blog”

    1. Camila Campos 27 abril 2013 at 20:35 #

      Seu menu e uma graça muito lindo! e eu fiz post sobre voce! e o blog
      beijos!
      http://maisumaprimaveras.blogspot.com.br/

    2. Bianca G. S. Nunes 28 abril 2013 at 16:06 #

      O seu menu ficou mto legal.
      A ilustração lá do meu banner é da Alana do blog "Pensei com Meus Botões"
      Beijos

      http://www.biancagsnunes.com/

    3. Debora Camargo 29 abril 2013 at 13:54 #

      Oi Karoline!

      Ficou uma graça o menu novo... Adorei!

      E todas as vezes que você faz um post desses, fico com saudade de usar o blogger! :/

      Beijo

      http://www.passandomake.com

      • Karoline 29 abril 2013 at 14:00 #

        Obrigada! <3
        Falando nisso, porque você decidiu migrar para o WordPress?

    4. Dayane M. 9 maio 2013 at 19:27 #

      Uma dúvida: Como faz para o menu ficar com esse efeito em que você passa o mouse e o link fica de uma cor mais clarinha?

      Seu blog e layout são muito lindos, parabéns! ^^
      oldoakthread.blogspot.com.br

      • Karoline 14 maio 2013 at 18:53 #

        Dayane, esse efeito se chama "opacidade", você pode tentar encontrar algum tutorial dele pela internet. Caso não encontre pretendo ensinar aqui no blog em breve, ok?!

        Obrigada por comentar! :)

    5. Brigadeirinha 12 maio 2013 at 15:22 #

      eu não consigo :(
      quando coloco ele some uns 5 segundos depois!

      (blog feito ontem haha)
      http://mundodfanfic.blogspot.com.br/

      • Karoline 14 maio 2013 at 18:55 #

        Como assim "some"? o.O

        • Geovanna 28 fevereiro 2015 at 17:37 #

          Oi Karoline estou amando seu Blog, uma dica mais útil que a outra obrigada,mas,eu estou em duvida sobre uma coisa relacionada ao menu, depois de pronto como faço pra inserir as postagens nele?

    6. luaCr 15 maio 2013 at 0:47 #

      Adorei a dica, mas não entendi como eu faço para deixar o plano de fundo colorido. Em que parte eu coloco o menu inteiro que eu criei? Obrigada desde já!

      • Karoline 15 maio 2013 at 1:13 #

        Olá :)
        Eu não ensinei sobre o plano de fundo pois vai variar para cada template, a maioria deles não vem com essa parte só para o menu, que deve ser incluída, o que é bem mais complicado.

    7. Cris Amado 22 maio 2013 at 21:22 #

      Olá, sou Cristiane, e estou amando seu site.
      Farei a cirurgia bariátrica, e estou muito ansiosa, e para aplacar um pouco dessa ansiedade, resolvi criar um blogger para compartilhar todo esse universo de emoções que passam as gastoplastizadas kkk.
      O problema é que sou totalmente crua, e seu site esta me ajudando muito.
      Já te adicionei nos meus favoritos.
      Bjux

      gastroplastiaonline.blogspot.com

    8. Carol 28 maio 2013 at 23:56 #

      Eu sou a Brigadeirinha, só mudei meu nome rs! mas, some assim: eu coloco, fica direitinho e do nada ele some, mas ainda dá para clicar!!!

      • Karoline 29 maio 2013 at 1:14 #

        Pode enviar o link do seu blog pra eu dar uma olhada?

    9. Jaqueline Ferreira. 4 julho 2013 at 20:46 #

      To a mais de uma hora tentando fazer kkkkk. Então floor, eu fiz tudo direitinho, mas o menu do meu blog ta em branco, como faço para alterar a cor dele? Se você quiser vê como que ficou, meu blog é oablogueira.blogspot.com.br
      3beijooos

      • Karoline 4 julho 2013 at 20:50 #

        Oi flor! Acho que ficou tudo em branco porque na cor das letras você usou branco, como o fundo também é branco não vão aparecer as letras, consegui explicar? @_@

        Beijos!

      • Jaqueline Ferreira. 4 julho 2013 at 21:54 #

        então, eu queria deixar o fundo dele de outra cor. Queria fazer ele em rosa e as letras brancas. Alterei agora a cor das letras, coloquei rosa só pra arrumar, mas na verdade eu gostaria de alterar a cor do fundo que esta em branco. Esses beregos de HTML são bem complexos kkkkkkk. Sério, teu blog tá me ajudando demaaaaais! *o* Obrigada mesmo

    10. Priscila Vilaverde 1 agosto 2013 at 20:20 #

      Oi Karol, ficou muito lindo...talvez eu mude, deixe ele mais delicadinho depois...mais fiz mesmo pra aprender..
      não imaginava q fosse fácil assim, adorei,,
      da uma olhadinha:
      http://praquemseama.blogspot.com.br/
      (ainda em construção ta^^)
      beijos!!

      • Karoline 1 agosto 2013 at 21:16 #

        Priscila, obrigada pelo comentário, fico muito feliz em saber que ajudei. :)
        Vi seu menu, ficou lindo, parabéns!

        Um beijo ♥

      • Priscila Vilaverde 1 agosto 2013 at 21:39 #

        Obrigada...beijos

    11. Renata Carvalho 1 setembro 2013 at 18:41 #

      Esse é outro tutorial que vou visitar assim que estiver dominando um pouco o Photoshop, são tão legais. *-*

      Beijos,
      Resenhando Books

    12. Camila Campos 1 setembro 2013 at 21:59 #

      O menu e muito fofo! mas o tutorial e um pouco avançado para mim,mas eu continuo tentando!
      beijos!

    13. Micaely Rodrigues 4 setembro 2013 at 13:04 #

      Ai, flor ameiiiii ♥
      FIcou Lindo!

      http://omelhordemimpormicaely.blogspot.com.br/

    14. ♪ Dαyαnє ♪ 10 setembro 2013 at 15:15 #

      Meu blog está mesmo precisando de um menu fofo assim *---*

      Acho que vou seguir as dicas o/

    15. Pamela de Oliveira 27 setembro 2013 at 16:52 #

      Oi, adorei as dicas, você explicou de um jeito que ficou bem simples pra fazer xD
      Eu testei, porém deu só um probleminha.. O tamanho D: O menu no meu blog ficou gigante, eu até tentei diminuir o tamanho das imagens, mas mesmo assim ele deixou grande.. O que eu posso fazer?? :/

      http://www.pamelaunhas.com/

      • Karoline 27 setembro 2013 at 16:54 #

        Pamela, só analisando pra diagnosticar. Pode adicionar o menu ao seu blog e me enviar o link pra olhar?

    16. Karla Gisella 9 outubro 2013 at 21:31 #

      nossa, me ajudou bastante esse post...

      beijos,
      http://www.karlagisella.com.br

    17. Gabriela Amorim 15 outubro 2013 at 18:32 #

      Ficou uma fofura, mas eu nunca vou conseguir ]:
      Beijos

      gabriela-amorim.blogspot.com

    18. Tamires Pereira 16 outubro 2013 at 3:23 #

      Adorei, vou favoritar aqui para fazer para o meu próximo layout >_<

      • Tamires Pereira 30 outubro 2013 at 23:18 #

        Eu tentei fazer e consegui, mas tenho uma duvida qual o tamanho da imagem que vc fez?

    19. Karla Gisella 1 novembro 2013 at 1:34 #

      Estou fazendo espero que de certo! :/

    20. Fernanda Passos 12 dezembro 2013 at 0:07 #

      Eu fiz tudo certinho mas a imagem não aparece no meu blog.

      • Karoline 19 dezembro 2013 at 20:51 #

        Oi Fernanda, tudo bom?
        Se a imagem não apareceu, alguma coisa você deixou passar. Recomendo tentar novamente do início prestando bastante atenção aos detalhes, pois todos eles são muito importantes.
        Avisa se conseguir, ok? :)
        Bjs

    21. Eliane 15 dezembro 2013 at 17:09 #

      Karol, qual tamanho você indica? #amei o tuto ♥

      • Karoline 19 dezembro 2013 at 20:50 #

        Oi Eliane, tudo bom? :)
        Não existe um tamanho "ideal", pode variar de acordo com a largura do template e a quantidade de páginas que serão colocadas no menu.
        Bjs

    22. Marcos Aquino 20 junho 2014 at 17:52 #

      Bom eu fiz tudo certo, porém não aparecem as imagens, mas da opção de click do link.

      • Karoline 21 junho 2014 at 23:06 #

        Marcos, substitua os acentos ´ por aspas ".

    23. Luiza 30 julho 2014 at 10:20 #

      Oi Karol, tudo bem?
      Você teria dicas para edição de menu no wordpress?
      Obrigada
      Abs.,
      Luiza

      • Karoline 3 agosto 2014 at 2:17 #

        Oi Luiza, tudo ótimo e com você?
        Essa forma de fazer funciona para o WordPress também, é só saber onde exatamente incluir no código. Infelizmente isso não tenho como te dizer porque vai depender do tema que você está usando. :/
        Um beijo!

    24. Adriely Ramos 13 agosto 2014 at 21:18 #

      Que tutorial maravilhoso! Só uma coisa, desde manhã to tentando e só consegui após eu mesma digitar as aspas do código. No mais, parabéns e obrigada.

    25. Cah 15 agosto 2014 at 10:08 #

      AAH! eu não consegui fazer no meu!
      as imagens não aparecem :(

    26. Nalanda 28 setembro 2014 at 21:27 #

      Amei, era disso que eu estava precisando! MUITO OBRIGADA!

    27. Gabriela lima 2 novembro 2014 at 21:55 #

      Olá, eu amo os seus tutoriais e você é super delicada e fofa! I ♥ YOU!

    28. carol 8 novembro 2014 at 2:26 #

      Oii!
      Esse tutorial nao funcionou comigo :( ficou uma imagem em baixo da outra, e sem fundo... E eu queria que fosse la no topo, tipo o #mymenuda, sabe?
      Sera que da certo? O que posso ter feito errado?
      Beeijo

      • Karoline 8 novembro 2014 at 8:05 #

        Carol, não ensinei a colocar fundo nesse tutorial. Ficou uma imagem embaixo da outra porque você repetiu o < center > e < / center > quando o que deve ser repetido é apenas a linha vermelha e azul, como está escrito no tutorial.
        Bjs

    29. Bruna 22 novembro 2014 at 20:53 #

      Karol, qual o tamanho desse que você fez?

    30. Savyo Ryan Miranda 31 dezembro 2014 at 14:53 #

      Não consigui , qro te add no face!

    31. Luana Caroline 29 janeiro 2015 at 15:38 #

      Oi, é super lindo, mas não consegui :(
      Olha como ficou (eu fiz exatamente como você falou, só que ficou dentro do cabeçalho e não em cima, e além disso ele ficou um abaixo do outro e não de lado, eu coloquei as divisórias centralizadas e tudo).

      Imagem de como ficou: aqui :(
      Meu blog: blogueira♥bipolar

      • Karoline 6 fevereiro 2015 at 18:12 #

        Luana, você tem que centralizar TUDO, não cada página, se não vai ficar um abaixo do outro mesmo. Coloca só um center no início de tudo e outro fechando /center no final.
        Bjs

    32. Mel Gonçalves 30 janeiro 2015 at 21:56 #

      Oi Karol, isso é possível em qualquer editor de imagens? Ou é só no Photoshop, mesmo?! Obrigada!

    33. Lauriane 30 janeiro 2015 at 23:49 #

      Oi Karol! tudo bem? Adorei seu tutorial, mas meu menu está muito grande! gostaria de deixar ele menor. Como faço isso? Por enquanto ele está no meu blog grande mesmo! Beijão

    34. Gabriela Barros 20 fevereiro 2015 at 15:50 #

      Muito Lindo! Segui passo a passo, mas preciso colocar o URL do Separador quantas vezes precisar? Aguardo respostas!

      • Karoline 27 fevereiro 2015 at 19:53 #

        Isso.
        Bjs

    35. Bruna Martins 26 fevereiro 2015 at 19:55 #

      Oi Karol !! Qual o nome desse editor que você está usando e por onde o baixou ?? Beeijos

    36. Gabriela Barros R. Cirino 2 março 2015 at 0:13 #

      Você tem algum menu disponivel Karol? Estou com dificuldades em fazer o meu =3 Aguardo resposta !

      • Karoline 4 março 2015 at 9:54 #

        Oi Gabriela, não tenho como disponibilizar menu pois cada blog tem páginas diferentes. :/
        Bjs

    37. João 24 abril 2015 at 22:33 #

      Qual o tamanho que deve ter os botões de menu?

      • Karoline 25 abril 2015 at 0:06 #

        Não tem tamanho exato, fica à seu critério ^.^

    38. Ester 2 junho 2015 at 9:47 #

      Ficou tão lindo que nem acredito q foi eu quem fiz haha thank you!! Com certeza meu blog vai ficar lindo com as suas dicas, amei seu blog!!

    39. Ester 2 junho 2015 at 9:51 #

      Ficou tão lindo que nem acredito que foi eu quem fiz haha thank you. Com certeza meu blog vai ficar lindo com as suas dicas, só vou começar a postar nele depois de deixa-lo a minha cara e vc tem me ajudado muito <3 Como faço para redirecionar a pessoa para a página inicial pela "home" do menu? Amei seu blog!! Bjos

    40. Letícia 1 dezembro 2015 at 9:46 #

      Oi Karol, tudo bem?

      Então eu não entendi direito o sobre o link (tipo tem que clicar no marcador copiar o link da página e colocar no lugar de 'link'?)
      e eu também não to conseguindo colocar as postagens no marcador

      me ajuda?

    41. Bruna Bueno 14 abril 2017 at 18:09 #

      flor ensina a fazer um fundo personalizado pra blog com rodapé e cabeçalho

    Leave a Reply to carol