28/07/2013

Como trocar o passarinho do Twitter por outra imagem


Yooo!!! Finalmente voltei pelo menos mais ou menos, rs' gente passei por poucas e boas... paguei um maior micão que viro piada no curso. E estou para fazer aquele prometido sorteio quando chegar em 1100 seguidores falta tão pouquinho... Devo me desculpar com vocês por sumir de repente irei explicar na próxima postagem. Estou muito feliz com o tanto de comentários e pedidos.

Porém fiquei muito chateada com uma comentarista que me chamou de plagiadora sendo que os créditos estão na postagem. Se for de outro site irei colocar, mas o que me deixou chateada não foi o fato de ser chamada de "plagiadora", mas da falta de educação desta pessoa. Mas mudando de assunto hoje vou postar um pedido feito por vocês. Algum tempo atrás pediram para ensinar fazer aquele bonequinho que  usei no layout Uta Orange. Não é nada difícil de fazer.

Na verdade esse bonequinho é o famoso passarinho do Twitter aquele que fica voando pelo blog, apenas o editei da forma que desejei. Antes de tudo você precisa achar um bonequinho ou criar para colocar no lugar do pássaro. Como estou com preguiça vou usar do meu shimeji, créditos do criador deixo no final da postagem. Se quiser usar o passarinho padrão é só clica aqui

 Digam olá para o Judal rs'

Para aqueles que vão criar seus bonequinhos alerto vocês terão que fazer mais de uma posição, porque o passarinho ou seja o bonequinho se vira para vários lados; as vezes cai de frente e outras de lado. São 13 imagens no total, mas você pode repetir las assim utilizando somente 6 imagens, como vou mostrar nesse tutorial.


Então achou ou criou seu bonequinho? Ótimo! Agora salvem a imagem abaixo, vamos usa-la como base. 

[IMG] Use como base.

1. Abra algum programa de edição de imagens qual você tenha facilidade de mover os arquivos, eu vou usa o CS5. Abra a imagem do passarinho azul e separe as imagens que deseja aplicar no lugar dele. Coloque as imagens do tamanho similar ao do passarinho, as imagens do Judal esta com 128x148 que é um pouco grande então vou coloca-las em 50x58.


2.Agora selecione a imagem base e arraste a primeira imagem do seu personagem para ela. Arrume ela sobre qual você queira que apareça. Para facilitar você pode deixar a base em opacidade e colocar as imagens sobre ela. Veja como fiz na imagem abaixo, deixei a base com opacidade assim facilitando a personalização. 

3.Vá adicionando as imagens nas posições similares ao dos pássaros, adicione uma linha para ajudar alinha-los na posição certa. Você vai reparar que na terceira e quarta linha as elas se repetem só que ao contrario. Faça o mesmo na terceira linha é a mesma coisa mas procure adicionar com feições ou detalhes eu coloquei algumas dele sorrindo e de olhos fechados e outras de olhos abertos. Assim passara a sensação dele estar piscando as vezes.


Mas se tiver preguiça pode só inverter e repita-las como nestas duas aqui em baixo. Os movimento só serão poucos e respeitosos mas fica legal do mesmo jeito.



4. Agora vamos trocar o texto que aparece quando passa o mouse sobre o personagem. Essa parte e simples mas meio chatinha ela e dividida em duas partes "cima" e "baixo" ou seja o texto tem que ser pequeno e dividido. Você pode coloca-lo ma mesma proporção do base inclinado ou reto. Escolha uma fonte legível e bonitinha para colocar. Não importa que coloquem corações, estrelinhas, trevos ate caveira a fonte terá que ser legível porque é bem pequeno mesmo. O limite dele é exatamente ate a onde as linhas vermelhas mostram, se passar ira aparecer no próximo quadrado. Para quem não entendeu se passar a frase vai aparecer na imagem ao lado.


Depois de tudo isso remova as linhas e salve em PNG. Assim o fundo ficara transparente e quando o personagem passar em algum lugar vai dar sensação dele estar passando por cima.  O resultado final da imagem é esse aqui. Você pode fazer o personagem maior por dentro dos quadrados como mostrei na imagem do Vocaloid acima. Eu desejei fazer pequeno mesmo.


Antes que alguém pergunte porque tanta imagem vou responder: o Judal desce voando e sobe voando, como também sobe pulando e cai de barriga. As posições mudarão dependendo da forma que a pessoa sobe ou desce a pagina com o mouse.

5. Bem agora hospede a imagem em algum site eu aconselho o Picasa ou o Tumblr, após isso separe a url dele. Agora vá ate a pagina chamada "Layout" abra um gadget HTML/Javascript e dentro cole o código abaixo:

<script type="text/javascript" src="https://sites.google.com/site/webunnycrazy/c/passarinhotwi.js"></script>
<script type="text/javascript">
 var birdSprite="URL DA IMAGEM"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "https://www.facebook.com/nomedasuapag";var tweetThisText = "Complemento";tripleflapInit();
        </script>


Cole o url da imagem hospedada a onde esta indicado em vermelho. Agora vamos modificar o link para seu twitter ou facebook. A onde esta em laranja você coloca o url da pagina do seu facebook  se quiser twitter você coloca isso http://twitter.com/seutwitter. Prontinho é meio comprido mais é bem facinho de fazer.

É isso ai fofuras espero que tenham gostado e não tenham ficado entediados lendo isso rs' se fico me desculpem. Vu voltar a responder os comentários acumulados que estou amando *-* ate aproxima pessoal.

Créditos do Shimeji:
*Judal Shimeji
Password: shimejudal
Postagem Relacionada:
*Colocando o Pássaro do Twitter

36 comentários:

  1. Bruna28/7/13

    Fico gigantescoooooooooooooooo!!!!!
    Mas muito bem explicado eu entendi tudo e já estou fazendo o meu.

    ResponderExcluir
  2. Anônimo28/7/13

    Ela voltou!!! Ela voltou!!!!!!

    ResponderExcluir
  3. Aaaaah que bom q vc voltou. Senti seu falta.
    Que falta de educação dessa menina, mas nao fica triste nao pq vai ver é tudo inveja pq vc tem um blog lindo.
    Amei esse negocio. Eu nem tenho 1 twitter pro blog, mas to quase colocando um so pra usar essa coisinha kawaii.
    Ah onde faz esses bonequinhos?

    Uma Borboleta Laranja

    ResponderExcluir
    Respostas
    1. >//////////< ain...

      Verdade, talvez seja isso mesmo, mas é chato e feio pessoas sem educação. u.u

      Hihi que bom que gostou eu nem tenho twitter só um pessoal (que tá abandonado o.o) mas já pensei em criar um só para usar também. rs
      Bom eu crio no papel e depois uso programas para editar e arrumar, mas pode pegar de sites de games ou de shimejis (como o do Judal) é claro sempre creditando o criador. Mas obrigada pelo seu comentário e sempre bom vela por aqui ^^

      Excluir
  4. Olá para o Judal, diz para a Drw que eu estou muito feliz por elas ter voltado :D

    AHEEEEEEEEEEEEE.... A Wendy Chan voltou!!!
    Eu estava com saudades de seus post.
    Ah! Outra coisa, eu raptei o Judal, agora ele está no meu blog :3, ele é muito fofo valeu mesmo.
    *------------*
    Lindo.

    Nunca mais some, tá,
    Hahaha
    Yuizinha/Animes

    ResponderExcluir
    Respostas
    1. Judal diz: Não sou garoto de recado, mas só porque você me levou para voar no seu blog kawaii eu digo para ela sim. *3*

      Sunny que saudades de você *--------------------------*
      Hihi fico feliz em saber disso, ate mais tarde dou outro pulinho no seu blog retribuindo o tanto de comentários que você fez.
      Hihi sim eu vi fico legal ate combino com o seu theme a cor.
      Não foi nada faça bom uso. Pode deixar vou me esforçar para não sumir de novo.

      Excluir
  5. Adorei, se bem que deve ser dificil XD ~preguiça~
    Que bom que você voltou :3
    Beijos ~

    ResponderExcluir
    Respostas
    1. rsrs Compreendo então tá certo.
      Agradeço pela recepção *---*

      Beijinhos

      Excluir
  6. Bem vinda de volta *O* ~
    Gostei do tuto, ficou bem explicadinho u.u
    Beijos | empire-explosion.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada Missy-chan >////<
      Ahh que bom que consegui fazer explicado eu sou meio atrapalhada XD

      Excluir
  7. Que bom que voltou! Wendy eu estava com saudades daqui sua maldosa!
    Enquanto esteve fora usei 3 layouts novos! shuehauheua.
    bjs
    http://perfectnaiveforever.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo Biah Chan!!! Que saudades!!!
      Desculpe não foi minha intenção ç.ç sorry irei me redimir...
      Serio 3? Nossa bastante coisa devem ter sido lindos o seu atual também é lindo *3*

      Excluir
  8. Anônimo28/7/13

    Que lindo o Judal

    ResponderExcluir
  9. Kashi28/7/13

    Super legal o tutorial se eu tivesse um blog usaria ^^
    Mas bem vinda de volta linda coelhinha.

    ResponderExcluir
    Respostas
    1. Poxa que pena t.t
      Agradeço Kashi >///////<

      Excluir
  10. Serio cara não gosto do Judal kk ele é meio psicótico e problemático.. não só isso ele gosta de mandar recados ruins e implica mas o bonequinho dele ai fico muito fofo. Estou louco pela segunda temporada de Magi. Mas seja bem vinda de volta Drw não some mais ein?

    ResponderExcluir
    Respostas
    1. Hehe compreendo, compreendo mas esses são os motivos de mim gostar dele sei lá gosto dos psicóticos e problemáticos dos animes. Mas agradeço pelo recadinho realmente é bem fofo sempre uso ele no meu computador.
      Hai, prometo que vou tentar não sumir mais.

      Excluir
  11. voltou, ebaaa! Ótimo tuto, não sabia que precisava trocar a imagem.
    Você, sempre pagando micos... Aguardo o sorteio.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. >////< Thanks

      Sim sim uma única imagem. kkk Verdade é que sou meio desastrada XD

      Espero que participe do sorteio ^^ bjus linda

      Excluir
  12. Anônimo28/7/13

    Legal! Legal mesmo, colocaria, mas não uso twitter ;]
    Como você faz pra deixar o cabeçalho de lado? Faz um tuto se você puder pff? OBG!

    ResponderExcluir
    Respostas
    1. Hihi entendo, mas pode usa-lo em pagina de facebook se tiver. Bem fácil, aqui esta já tem esse tutu aqui no blog:

      http://www.bunnycrazy.net/2013/02/tutorial-colocando-cabecalho-acima-da.html

      ^^

      Excluir
  13. que liindo *--*, fica muito perfo,
    Fico feliz que tenha voltado \o/

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fica sim *3*

      Obrigada Oak-chan senti saudades de você

      Excluir
  14. Voltou o/ *--* Adorei o tuto, mas ja sabia desse KK`
    ncnosekai.blogspot.com

    ResponderExcluir
    Respostas
    1. \o
      Obrigada.
      Entendo hehe bom saber que tem gente que conhece também.

      Excluir
  15. Anônimo30/7/13

    Já tava com saudades! Lol

    Adorei o tuto, vou tentar ><

    http://uncrowed-princess.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. >///////< hihi

      Tenta sim espero que consiga

      Excluir
  16. Bem vinda de volta Wendy-Chan!!!! \o/
    Ohh fica super cute esse bonequinho no lay >w< achei mesmo uma fofura *----*

    Kissu || Pankax&Pankadax

    ResponderExcluir
    Respostas
    1. Obrigada Rafa *3*

      Verdade dependendo do personagem fica super engraçado ^^

      Excluir
  17. Legal o tutorial, mas dá trabalho, huehue. Beijos

    PUMP BLACKBERRIES | Clica?

    ResponderExcluir
  18. nya que fofo <3 adorei o tuto apesar de grande está bem explicadinho !
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, hihi Verdade mas fico contente que tenha ficado fácil de entender.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345