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