Como criar um banner em gif

Bom…
Devido a um pedido feito na comunidade do orkut, vou tentar mostrar como se faz um banner desses usados em parcerias entre blogs e pode ser usado para outros fins também.

No nosso exemplo, vamos usar uma imagem de 120×60 pixels e o resultado vai ficar bem simples pois é apenas para demonstração.

Resultado final:


Agora vamos ao tutorial.

Primeiramente você vai precisar de um programa que faz os gifs animados, ele é gratuito e pode ser baixado clicando aqui.


Depois de instalado vamos a primeira tela.


Note que você vai precisar abrir uma primeira imagem para iniciar um projeto. Para fazer isso clique no botão mostrado na imagem acima e selecione a imagem com o tamanho desejado do banner.

Depois de feito isso, clique no botão mostrado na imagem abaixo para inserir novas imagens que farão parte do banner animado.


Agora que você já escolheu as imagens, vamos escolher o tempo que cada imagem via ficar em modo de transição. Na imagem abaixo o local onde você pode digitar a quantidade de centisegundos que a imagem vai passar na tela. Cada 100 centisegundos equivalem a um segundo, daí você escolhe quanto tempo quer que cada imagem passe na tela.


Na tela ainda tem as opções de loop, que é para as imagens ficarem repetindo e tudo mais… Basta explorar o programa e descobrir como fazer banners mais ricos.

Quando terminar de fazer sua “arte”, basta mandar salvar como gif, apertar ok na janela que aparece e escolher o local onde quer salvar.

O nosso resultado foi esse.

Postagem enviada por:

RuimRazoávelBomMuito BomExcelente! (85 votos, média: 4,55 de 5)
Loading ... Loading ...

Para votar clique em quantas estrelas deseja para o artigo
Espero que tenham gostado e quaisquer dúvidas podem ser tiradas na comunidade do orkut.

Gostou do tutorial??? Comente!!!

Seu comentário ajuda na credibilidade de outras pessoas que vão ler o tutorial e ajuda o blog a saber o que os seus usuários estão achando dos tutoriais.

Enviar postagem por email para um amigo Enviar postagem por email para um amigo

76 Comentários em “Como criar um banner em gif”

  1. saullo diz:

    melhor inposivel !! brigado aew !!


  2. Samuel diz:

    Valeu!!!!
    =D


  3. Profª Angélica diz:

    Legal, simples e obejtivo!


  4. CHAPTER 1 diz:

    IRMÃO, Muiiiito loco melhor que isso só dois disso…Adorei….muito fácil.


  5. Samuel diz:

    Valeu!!!
    =)


  6. Marquinhos diz:

    muito facil mesmo
    mais valeu pela dica
    vou tentar fazer
    blz


  7. Nélio diz:

    existe tambem o adobe firework cs3 tenho mais é muito complexo faço algums !!!vc poderia, fazer um tuto dele hem!!


  8. Juju diz:

    Nossa demais, vc teria tutoriaias de fireworks, achei esse site na busca por tutoriais de fireworks, seu site é show, parabéns


  9. Samuel diz:

    Nunca fiz nenhum tutorial direcionado ao fireworks não… mas posso tentar ver isso posteriormente


  10. wildson diz:

    é o bicho muito facil


  11. Nakamura [RagnaBR-Odin] diz:

    Muito Bom o Progama.Excelete Pra fazer Tags Para Por Como Assinaturas de Forum.

    Recomendo.


  12. Larii Fletcher diz:

    Ah , ajudou pra caramba!


  13. Samuel diz:

    =D valeu!


  14. Monise diz:

    Kii MaxiimO Adoreiii !!!! Vou Usar Sempre
    Bju!!!
    =)


  15. Junior diz:

    Oi por meu nao ta animado eu salvo com banner.gif e nao se movimenta mas hora q eu tava fazendo tava legal se movimentando e tudo oq sera ajuda âeeee pffffff


  16. Getulio diz:

    por favor!!
    eu não consequo adicionar uma nova imagen sem subistitiur à atual
    quero a solução


  17. Samuel diz:

    Certifique-se de está fazendo todos os passos corretamente e de que quando você está adicionando uma imagem, não exista nenhuma outra selecionada.


  18. Lucas diz:

    Opa cara…Obrigadoo em por pasa esse conhececimento..Ajuda bastante…Nota 10..

    Grande Abraço..


  19. Christiano diz:

    Bom demais! parabéns!


  20. emerson diz:

    muito show!!!
    perfeito


  21. Allan diz:

    Legal, mais tem algum programa mais BOM que este?


  22. Rodrigo diz:

    legal ñ existe melhor!


  23. Rodrigo diz:

    mais bom allan? kkkkkkkkkkkkkkkkk


  24. R diz:

    Muito bom, simples, rápido e o que todos querem, grátis! Muito bom seu trabalho, eu estava mesmo precisando de um desses!


  25. M diz:

    Como eu faço para tirar o codigo?
    Me ajudem


  26. mano diz:

    Muitooooo bom,
    seu tutorial é perfeito!!!
    até quem é cego consegue fazer um banner com esse tuto!!!!
    você esta de parabens!!!!!!!!


  27. michel diz:

    Q bosta.. =SS


  28. Brown diz:

    Olá, o tutorial é bom só que o banner eu já sei fazer, se possivel me mande um email explicando como colocar no blog^^
    Obrigado!


  29. Rodrigo diz:

    ei pessoas eu achei um programa bem dahora eu fiz um gif muitu loco o nome do programa e Photoscape so um problema nao sei colocar no meu blog


  30. Hélio diz:

    Olá,Adorei o TPC,mais tpw,eu tenho blog e não tem como passar esse arquivo para o blog,esse programa não gere um código javascript ou html n ?
    Adoraria Essa Resposta


  31. juliana ribeiro diz:

    O photoscape faz isso


  32. Gabriel diz:

    Ei cara… mais como dah para colocar no meu site para mim ter um…. eu quero é coloca no site…

    :( !


  33. anderson diz:

    muito bom


  34. Marco Aurélio diz:

    Muito bom o Tutorial continue assim…


  35. Rafazilla diz:

    eu gostaria de saber se da para deixar o banner que eu criei em um link, da?


  36. Diego diz:

    Baichei o programa! Nada complexo e não é nescessário ser profissional! Óptimo para pequenos sites da web!
    O que procuro realmente é saber COMO fazer o HTML ou seja o que for do banner! Quem souber me adicione no MSN que aceitarei o mais rápido possível e entrarei em contacto. Eu agradeceria se alguém soubesse fazer o código do Banner! Eu já uso outro programa que dá para fazer GIFS e outras coisas,recomendo muito, ele é PhotoScape , minha versão é bué fixe , 3.3 :)
    Eu agradeceria se alguém soubesse fazer o código do Banner!
    Bem , vou indo! Espero contacto rápido pelo MSN , ou por mensagem neste mesmo e-mail.
    Obrigado,
    Diego.


  37. Cah diz:

    Muitoo bom ! muito rapido e facil de fazer. adoreei msm, vocs estãão de parabéns !

    Recomendo a todos ke vale a pena msm.

    beijooos’


  38. bebela2000 diz:

    gostei muito mas tem que baixar e eu nao posso baixar pq meu mano naum deixa.vc conhece algum site sem baixar q de pra fazer banners em gif?


  39. Diego diz:

    Cah diz:

    julho 17th, 2009 at 12:55

    Muitoo bom ! muito rapido e facil de fazer. adoreei msm, vocs estãão de parabéns !

    Recomendo a todos ke vale a pena msm.

    beijooos’

    Também concordo que seja bem bom… testei em alguns PC’s , todos do sistema operacional XP… porém , provavelmente ele não é compativel com alguns sistemas operacionais … Mas , deichando pra lá,é muito bom este programa para novos sites/com poucas visitas.


  40. Diego diz:

    bebela2000 disse
    em

    julho 24th, 2009 as 15:00

    gostei muito mas tem que baixar e eu nao posso baixar pq meu mano naum deixa.vc conhece algum site sem baixar q de pra fazer banners em gif?
    ===
    Infelizmente de momento não . Talvez a tecnologias de um futuro breve sim , mas o material , por vez , é preciso ser baichado e instalado!!! Por quê? Os componentes dos programas são pesados e por isso a maioria dos sites não os suportam,ainda mais os que tem bastantes recursos! Imagine o quão lerdo ficaria um site em que tivesse um “gif maker”?!!!
    Espero ter ajudado.
    Abraços ,
    Diego :)


  41. Diego diz:

    Gabriel disse em
    junho 9th, 2009 as 9:23

    Ei cara… mais como dah para colocar no meu site para mim ter um…. eu quero é coloca no site…

    :( !

    ===

    Olá , Gabriel. Em primeiro lugar , gostaria de informar-te que o correcto seria “pra eu ter um” , e não pra “mim ter um” , mas vamos ao que interessa ;
    Estive a procura da mesma coisa! O HTML [código] do banner! De momento de nada posso informar-te , mas , posso dizer que quando eu descobrir algo sobre isso, eu te falo =]
    Me dá teu e-mail , assim poderemos conversar melhor! O jeito vai ser dar aqui beleza??? Dê numa mensagem que em breve lerei e rapidamente(espero) entrarei em contacto!
    Ah , se eu descobrir vou colocar também em meu site:
    http://www.tukonsite2.webs.com
    Beleza?
    Espero ter ajudado um pouco , pelo menos por enquanto!
    Abraços , Diego.


  42. Gabriel diz:

    Gostei.
    + agora que ja baixei,tenho 1 dúvida…
    Por exemplo,em sites de animes,no banner,vcs acham 1 monte de animes e depois 1 ” e muito + !!!”
    Queria saber como se fazer isso com esse programa …


  43. Gabriel diz:

    E ja achau a respeito do HTML ?


  44. Gabriel diz:

    achou


  45. caique diz:

    Poxa ta explicando como cria a gora pra editar o Html para eu colocar o link do meu blogg :S


  46. Diego diz:

    Gabriel, quanto a dúvida de sua primeira mensagem,não consegui compreender,se puder repetir de uma forma mais clara eu agradeceria.


  47. Rita de Cassia diz:

    Muito Bom
    aproveitei muito da sua ajuda
    valeu!!!!!!


  48. thiago diz:

    vlw muito legal este tutorial me ajudou muito obrigado


  49. alessandra diz:

    eu baixei e criei mais eu queria saber como eu pego o código dele?tipo pra pedir pra outros sites colocarem…por favor me ajude


  50. Pessimo diz:

    O programa indicado pra baixar antes de começar a fazer o banner não funciona, vc tem o trabalho de baixar e quando vai instalar ele aparece uma mensagem que esta corrompido e não funciona, parabens pra quem conseguiu instalar o programa é só.


  51. Anônimo diz:

    Mto legal, vc podia fazer um tuto de como cirar banners no adobe photoshop CS4


  52. DiiH diz:

    @Anônimo

    Olha, dá uma pesquisada(google) que tu achas ;)


  53. dj thiago diz:

    ESSE TUTORIAL ESTAR COM VIRUS Í ALIAS ELE NAO FUNCIONOU NO MEU COMPUTADOR, SUGIRO QUE TODOS NAO BAIXEM ESTER ARQUIVO…OBRIGADO DJ THIAGO !


  54. leticia diz:

    cuuuuuuuuuuuuuu


  55. leticia diz:

    vc cuuuuuu


  56. diz:

    Site pra gerar HTML:
    http://www.tinypic.com
    Copiar o primeiro código Ok!


  57. alexsandro diz:

    OBRIGADO TAVA PRECISANDO DISSO PARa meu blog


  58. ranieri diz:

    simples e bom ..


  59. Manuella diz:

    dá pra fazer com fooooto ?


  60. Gonçalves diz:

    Sem comentários, lógico. Grato.


  61. celular gratis diz:

    como faço um baner


  62. cristiano diz:

    olá tenho uma loja virtual e gostaria de saber que programa eu uso para ter banner animados
    que divulgue meus produtos


  63. Fyorah diz:

    Vlw me ajudou muuuito.Mas…eu não consegui pegar o cod HTML pra colocar no meu blog como eu faço?!!!?


  64. gustavo diz:

    Muito bom o tutorial, só tenho uma dúvida, com redimensior o tamanho para 120×80 pixels?


  65. 熱水器 diz:

    I realize the 2worry;I am very p happy to hear that you got your Supra fixed: I remember reading about some of your doubts3x !.


  66. Victor diz:

    zica mano.

    Criei meu banner tá muito muito zica fi: http://gamescenter.totalsfree.com/Parceria.html

    vlw mano


  67. luiz monteiro diz:

    Pra quem não sabe “levar” o banner pro site. Seguinte. Depois de pronta a arte, salve-o em uma pasta qualquer, de sua preferencia. Depois vá ao editor do site e faça o upload. Depois disso é só mandar para a página, no lugar onde voce determinar. Tão simples como tirar doce da boca de criança. rs.
    luiz monteiro


  68. Idemar Bueno diz:

    Samuel,

    Muito obrigado pela dica foi muito util.

    Paz e Sucesso!


  69. wostão diz:

    valew, muito bacana…
    vou agora só aprimorar…


  70. uchoa diz:

    O`QUE É BANNER FLASH
    Os banners são geralmente imagens desenvolvidas em formato .jpg ou .gif, ou animações em Java, Shockwave ou Flash. Um banner pode ter várias dimensões, sendo a mais conhecida a de 468×60 pixels. Essas imagens freqüentemente tem uma forma alongada, na horizontal ou na vertical.


  71. Lucas Natan diz:

    Como faço para colocar o banner igual ao seu em meu blog só que com a caixa de html ( código ) para todos os visitantes poderem pegar e colocar em seus blogs ou sites… para divulgar?


  72. javascript classes diz:

    You made a few fine points there. I did a search on the subject and found the majority of folks will go along with with your blog.


  73. blog nacional diz:

    muito obrigado pela dica, me ajudou muito! vlw!


  74. VYTOR diz:

    AE PESSOAL MEU PROBLEMA NÃO EM SABER FAZER UMA GIF BANNNER
    MAIS A COMO DEIXAR MEU BANNER EM MOVIMENTO
    TIPO EU FAÇO UM BANNER TODO ANIMADO + QUANDO EU COLOCO NO BLOG
    ELE NÃO SE MOVIMENTA
    E NO MEU PC ELE MOVIMENTA ALGUEM ME AJUDE POR FAVOR MEU BLOG gdkinformatica.blogspot.com


  75. thiago tg diz:

    muito boa dica, vlw msm!


  76. andre diz:

    o meu problema é como eu vo colocar no meu blog!!

    fiz o banner,mais ele não libera nehum tipo de html,para colocar em um gadget

    poxa
    me explica ai


Deixe uma resposta

XHTML: Poderá utilizar estas tags tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>