22 de fev de 2012

Tutorizando - Como criar seu próprio cursor

| |
Galera, estou precisando de outro voto de vocês (sei que sou chata haha). Estou em segundo lugar nesse concurso, e esta quase acabando, então corram lá e me ajudem. Sei que é irritante, mas pensem se fosse vocês quem precisassem dessa ajuda. Então conto com cada um. Vote aqui. Muuuuito obrigada. (:
Como vão meus amores?
Vocês já devem ter percebido que várias blogueiras estão criando seus cursores personalizados, com a sigla ou nome do blog. Aqui no DDP eu coloquei recentemente um assim, devem ter percebido kk. Hoje vou ensinar vocês a criar um. Parece complicado, mas se você prestar atenção, sai bem certinho!
Se você quiser usar uma imagem ao invés de uma sigla, também dá.

Antes de tudo, você vai precisar ter o Photoshop em seu computador. Caso você ainda não tenha, dê uma olhada aqui (um post antigo bem completo ensinando a baixar e instalar direitinho). Se você não quiser ter o programa instalado, é só excluir depois de criar o seu cursor.
Então vamos lá. Clique em "Ler mais" para ver o passo-a-passo. 

01. O que você vai fazer, na realidade, é adaptar um cursor pronto. Então, antes de tudo, procure um simples, apenas a flechinha. Separei alguns para vocês (se quiserem outros, procurem aqui).


imageimageimageimageimageimageimageimageimageimageimageimageimage
imageimageimageimageimageimageimageimageimageimageimageimageimageimageimageimage
Escolha um e salve.
02. Abra o Photoshop CS3.
- Na barra do lado esquerdo, clique várias vezes no ultimo ícone, até que fique duas janelinhas, como na imagem:
 - Em "Arquivo", clique em "Novo...". Coloque largura e altura com 100px, e fundo transparente:
Deixe de lado.
03. Em Arquivo, clique em "Abrir..." e selecione o cursor que você salvou. 
- É essencial que ele tenha fundo transparente (no Photoshop aparece com esse quadriculado branco e cinza). Se o seu cursor tiver fundo branco, basta selecionar "Ferramenta borracha de Plano de Fundo" na barra do lado esquerdo, deixar com o tamanho máximo e clicar no fundo branco para apaga-lo.
- Quando ele estiver com fundo transparente, aperte CTRL + A, e arraste-o para o canto superior esquerdo da outra imagem:
 

04. Na barra do lado esquerdo, clique no "T". Então escolha a fonte, o tamanho (coloque 20 ou 30, depende da fonte) e a cor.
05. Escreva a sigla. Se precisar, mude o tamanho da letra. 
- Quando estiver bom, clique na flecha preta na lateral esquerda, e com ela arraste a sigla para perto da flechinha:

06. Com a ferramenta "Cortar", selecione um espaço, como na imagem abaixo, tirando a parte vazia:
"Enter" para cortar.
07. Em "Arquivo", clique em "Salvar como..." e deixe no formato "Photoshop(*.PSD;*.PDD)" e salve. Se abrir uma mensagem, clique em "Ok"
08. Clique novamente em "Salvar como...", mas dessa vez salve no formato "PNG (*.PNG)". Na mensagem que abrir, clique em "Ok".
09. Para colocar no blog: 
- Hospede o seu cursor (no formato PNG) no TinyPic, copie o ultimo link e cole num bloco de notas:
- Vá para "Layout", adicione um novo gadget de HTML/Javascript e cole o seguinte código:
<style type="text/css">
HTML,BODY{cursor: url("LINK DO CURSOR"),auto;}
</style>
Aonde está em  amarelo , coloque o link que você copiou no TinyPic. 

- Salve e coloque esse gadget em qualquer posição no layout (ele fica invisível).

10. Veja se ficou tudo certinho, e pronto! Se alguma coisa estiver errada: no Photoshop abra o seu cursor no formato "Photoshop(*.PSD;*.PDD)" e tente arrumar. Qualquer dúvida, é só me perguntar.

E ai, o que acharam do tutorial? Muito difícil? Se tiverem usado, me avisem pra eu ver o resultado! *-*


48 comentários:

  1. Adorei o tutorial super maneiro e diferente,volte mais vezes ao blog, um grande beijo!

    http://wwwgertiegirlcom.blogspot.com/

    ResponderExcluir
  2. Adorei!!
    Fiz uns pro meu outro blog um tempo atras mas a resolução dele na tela ficou horrível, vou tentar seguindo o seu tuto, thank you!!!

    bjãoo

    ResponderExcluir
  3. Nossa, amei, amei e amei. Agora eu vou fazer um ótimo cursor pra mim, assim que tiver tempo é claro!
    Parabéns, você ensina muito bem.

    Visita: http://mundodemeninas-mdm.blogspot.com

    ResponderExcluir
  4. Oi, carol. Tudo bem?
    Bom, eu amei o curso que você ensinou aqui, achei tudo organizado e muito bem explicado!
    Eu também sei fazer um cursor parecido com seu, qualquer dia desses farei uma postagem lá no vdg, só que é um pouquinho mais fácil a tals, dá para as pessoas editarei no photoscape, só vou precisar das imagens dos cursores, posso pegar e colocar lá na postagem? Claro que avisarei que peguei aqui no seu blog, darei os créditos.

    Beijos; @Raah_Castroo
    http://vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  5. Tag para você lá no Depois dos Sonhos: http://depois-dos-sonhos.blogspot.com/2012/02/respondendo-tag.html

    ResponderExcluir
  6. oi Carol

    que tuto legal

    o cursor do DDP ficou bem fofo

    vou testar qualquer hora :)

    bjs

    estilorosa.blogspot.com

    ResponderExcluir
  7. Difícil de fazer não é, mas não tenho o PS e acho que não combina muito com o JI...


    Tem uma super promoção rolando lá no blog, você não vai perder não é mesmo? http://jeito-inedito.blogspot.com/2012/02/promocao-feliz-2-1000-e-12-jeito.html

    ResponderExcluir
  8. Amei o seu blog estou seguindo segue de volta?

    http://umdiariosobreminhavida.blogspot.com/

    ResponderExcluir
  9. Que legal! Seu tutorial tá ótimo!
    Eu sempre quis saber como é que se faz esse tipo de cursor! Acho bem legal! Quando eu puder,tentarei fazer!
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  10. adorei flor, me ajudou mt *---* parábens pelo blog, muito sucesso para você viu? ♥

    Stephanie ~~ Garotadoolharsincero.blogspot.com
    Mil kissusss !
    (estou com preguiça de logar no blogger :B)

    ResponderExcluir
  11. Acho esse tutorial muito útil. No nosso último layout nós fizemos o nosso cursor personalizado. Ele até que ficou bonitinho e super combinou com o blog, gostei bastante dele. Beijo!
    meianoiteequinze.tk

    ResponderExcluir
  12. Oi Minha Flor, Amei Sua Visita no Blog...
    Post Novo lá da uma passadinha ?

    E Volte Sempre Viu ?

    Waanc:http://rebecafashionworld.blogspot.com/

    ResponderExcluir
  13. Carol, o que tenho a dizer? Já sei: que tutorial MARAVILHOSO. Essa negada toda que vem aqui no seu blog que tem layout bonito aprendeu com você rsrs (inclusive eu). "Nossa! Que layout lindo!" "Aprendi com a Carol do DDP!" Brilhe sempre minha amiga.
    http://mentesvelhas.blogspot.com/

    ResponderExcluir
  14. Eu consegui fazer *-*
    Tou seguindo.


    Beijinhos ;*
    www.blogmodateengirls.blogspot.com

    ResponderExcluir
  15. adorei o tutorial! não sabia como fazia..
    flor, votei em vc tah?
    bjs
    http://avidademalu.blogspot.com/ http://ohmygood-omg.blogspot.com/

    ResponderExcluir
  16. Eu sempre quis saber como criava cursor, agora já aprendi.
    Depois vou tentar fazer.

    Beijos, Mallü.
    http://thelovekingdom.blogspot.com

    ResponderExcluir
  17. Votadinha no blog meianoite
    Volte sempre! Kiss:*
    http://leka2002.blogspot.com

    ResponderExcluir
  18. olha desculpa falar, mas é que você é parceira do meu blog e só aparece por lá quando precisa de votos em alguma coisa, comentando sem falar nada sobre o post e dizendo apenas que nós somos parceiras. Aí eu fico pensando se parcerias servem para votar um no outro em concurso, porque não pode ser presente também?
    Desculpa, mas é que isso é meio chato :s


    http://s2juuh.blogspot.com/

    ResponderExcluir
  19. Super útil *-* Vou usar no meu próximo lay, talvez. x3

    Seguindo, segue de volta se gostar? x)

    Beajs, Giu.

    ~ poask.blogspot.com

    ResponderExcluir
  20. Prontinho, votado...
    Beijos
    http://cerejasatrevidas.blogspot.com/

    ResponderExcluir
  21. Oi vou votar SIM. vota no meu blog tambem?
    Make i Elook, isperfectdream.blogspot.com

    ResponderExcluir
  22. Já votei em ti ;D
    http://meninas-lindas-cdm.blogspot.com

    ResponderExcluir
  23. Usei no blog e vou contar-lhe um segredo: FICOU SHOW!!!
    http://mentesvelhas.blogspot.com/

    ResponderExcluir
  24. Achoo mt facil criar,oque ta no bloog atualmente foi eu em que fiz ! AHHAHA *-*
    www.paradateen1.blogspot.com

    ResponderExcluir
  25. Adorei o tutorial! Muito bem explicadinho! *-*

    http://creativityandpersonality.blogspot.com

    ResponderExcluir
  26. Ótimo tutorial, nunca tinha visto em outro blog ensinando fazer cursor próprio,vou reservar um tempinho pra fazer.Ah, vim avisar que mudei de url, não é mais Lua Cheia Br e sim Cinderela de Allstar e agora o blog tem uma página só para banners de concurso, se tiver problema me avise.
    Agora que vi seu layout, está show, amei as cores preto com amarelo, está bem mais amadurecido.
    Votei no Depois da Primavera no concurso,boa sorte e espero que ganhe!
    beijo =3
    cinderela-de-allstar.blogspot.com

    ResponderExcluir
  27. Adorei o tuto, super fácil. Só que o PhotoShop ocupa muito espaço... Já votei no Depois da Primavera, boa sorte!

    Kisses ♥
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  28. Adorei o tuto querida! Eu sou apaixonada por cursores *o*
    Ah, eu já votei em você no concurso lá :)

    Beijos, fashionwithstyle.tk

    ResponderExcluir
  29. Muito interessante o tutorial, eu adorei :)
    Bem fácil também e bem explicado.
    Beijos, Dani - onthefame.blogspot.com

    ResponderExcluir
  30. Oi, Carol.
    Muito obrigada por ter deixado eu pegar as setinhas, mas só vou pegar algumas e não vou postar nem tão cedo. Mas, pode deixar que não me esquecerei de avisar que peguei aqui.

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  31. oii flor.
    curti muito o tutorial, eu nunca fez um, vou tentar agora rs o meu é q achei em um tumblr :]
    Bjs
    TDiaryofteens.blogspot.com

    ResponderExcluir
  32. Adorei seu comentário lá no blog!
    O TR tá com visual novo! Confere lá!
    E tem post novo também!
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  33. Adorei *o* Fica super fera com a sigla do blog, acho que vou fazer! Parabéns, super original o tutorial, e o layout ta liindo!
    Então flor, acabei de votar em você, e claro, estou torcendo por ti. Você está empatada com outro blog (79 votos!) mas tenho certeza que você vai ganhar. Beijos, sucesso hein?

    goimagines.blogspot.com

    ResponderExcluir
  34. Que bom que vai participar do post. Vou te fazer uma perguntinha, e eu coloco a resposta na postagem: O que você acha sobre blogs desatualizados?

    Kisses ♥
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  35. Gostei do tutorial e não to conseguindo votar no Meia Noite BR!

    Beijos,
    Blog | Twitter | FanPage

    ResponderExcluir
  36. Oi Carol!Já votei no Depois Da Primavera!Espero que ganhe!
    Beijos!
    http://www.meninaesperta.com.br

    ResponderExcluir
  37. Oi linda, eu já dei meu voto lá, vou ver se tenho mais contas viu? :3 Já dei minha opinião sobre esse post também, parabéns.
    Beijo! Fernanda.
    meianoiteequinze.tk

    ResponderExcluir
  38. Adorei esse tutorial,quando for reformar de novo meu blog eu uso ele ^^ Rs
    Bom sera que você ainda lembra de mim? rsrsrs do blog Conversando com a lua, eu voltei rsrs Graças a Deus estava morrendo de saudades de todos os meus leitores e do blog, quando puder visite o meu blog^^
    bjs e bom domingo!
    Conversando com a lua Facebook do blog

    ResponderExcluir
  39. Não estou usando muito cursores ultimamente. Mas sempre que quero fazer faço no photoscape. Adorei o blog e votei em você no Meia Noite BR.

    Cozinhando com o Minduim

    ResponderExcluir
  40. aaaah, amei, vou personalizar o meu qualquer dia desse *-*

    http://i44.tinypic.com/34ihks8.jpg , amr, fiz uma foto para o fim da postagem hihi, bjs

    www.devaneiosdeumagarota.com

    ResponderExcluir
  41. Amei , pena que não consigo baixar photshop aqui no meu PC aff. Sou sua nova seguidora aqui amei seu blog !

    http://carolmarinho-parameninas.blogspot.com/

    ResponderExcluir
  42. Gosta de filmes? Tem três dicas ótimas de filmes no post novo!
    Dá uma olhada lá!
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  43. Nossa, amei esse post *--*
    seguindo aqui flor ;D

    Bj bj.

    http://strangeworldofmaari.blogspot.com/

    ResponderExcluir
  44. Ahhhh... amei muito seu lay! s2 Muuuito obrigado por esse tutorial, já estava procurando um bom tempo!!!!! Já estou seguindo aqui, amei mesmo!!!


    Beijos flor, volte sempre e fique com Deus!

    ResponderExcluir
  45. Ótimo tutorial. Com um cursor próprio o nosso blog fica cada vez mais original.
    http://i-teenbr.net.tc

    ResponderExcluir
  46. Nossa eu amei o tutorial. e principalmente o blog, *----* ' até fiz meu cursor rs.
    kissus


    http://blog-cutesweet.blogspot.com/

    ResponderExcluir

Comente a vontade, mas lembre de deixar o link do seu blog para que eu possa retribuir. E nunca, nunca mesmo, faça "copia e cola" por aqui.
Comente aqui somente sobre o post, pra qualquer outro assunto use a página de contatos (:

Bjj
Carol