31 de julho de 2013

Tutorial - Como fazer um button

||

Olá pessoas que não moram em outro planeta! Hoje eu vou ensinar um tutorial de como criar buttons, que são essas coisas legais que eu já disponibilizei num post para download.
Quer saber como fazer o seu próprio button? Vamos lá!
Lembrando que para realizar esse tutorial, é necessário um editor de imagem. Eu utilizei o Photoshop.


Primeiro, vamos precisar de uma imagem para criar o button. Eu escolhi uma da Konata, do anime Lucky Star. Mas obviamente vocês podem escolher a que quiserem. Imagem abaixo:


Primeiro, abra a imagem que deseja fazer o button no seu Photoshop/editor de imagem:


Agora, você seleciona a ferramenta Criar formas(tecle "U" no seu teclado para ativá-la). Ela é usada para, principalmente, criar formas geométricas, porém também serve para criar seleções, selecionando um "pedaço" da imagem. Ferramenta Criar formas:


Como vocês podem ver na imagem acima, a ferramenta está numa forma de esfera(se chamando assim, Elipse). Possivelmente na ferramenta de vocês, aparecerá um quadrado. Para fazer com que a ferramenta se configure no modo de esfera, clique com o botão direito do seu mouse sobre ela, e clique sobre a opção Ferramenta Elipse.

Agora, vamos começar. Com a ferramenta de criar formas, faça um círculo em volta da área onde vocês querem criar o button. Veja:


Como viram, há uma linha prateada marcando a área do button. Essa linha se chama Demarcador.

Agora, clique com o botão direito(ainda com a ferramenta de criar formas) do mouse sobre o demarcador. Clique sobre a opção Criar Seleção.... Irá abrir uma nova janela. Vocês pressionam "Ok".

Vocês podem ver que já existe um pontilhado em volta da área que você traçou com o demarcador:


Com o seu teclado, aperte Ctrl+X. Isso "recortará" a imagem que servirá como button. Veja que eu retirei a imagem do button da imagem original:


Com o teclado, aperte Ctrl+N para criar um novo plano de fundo. Irá abrir uma nova janela, lhe permitindo configurar quantos pixels esse novo plano de fundo terá em altura e largura. 

Essa parte fica por conta de vocês, pois o tamanho em pixels da imagem deve ser apenas um pouquinho maior que o tamanho do button que você recortou. Eu usei o tamanho "287" de largura, e "259" de altura para esse button.

Assim que você terminar de configurar o tamanho de pixels em altura e largura, vamos a uma parte importante: Nesta mesma janela que abriu, há a opção "Conteúdo do Plano de Fundo". Você deverá clicar na opção Transparente:


Clique em "Ok". Assim que fizer isso, irá abrir um fundo transparente. Aperte, com o teclado, Ctrl+V para "colar" o seu button:


Agora, chegou a hora de enfeitar o button! Use ferramentas do Photoshop, efeitos e várias coisas que ajudem a dar um toque especial no banner. Caso não saiba como fazer isso, pesquise tutoriais na internet que com certeza você acha. O meu terminou assim:


Mas calma, ainda não terminamos! Ainda falta fazer aquela "sombra" abaixo do button.
Para fazer isso, crie uma nova camada, teclando Ctrl+Alt+Shift+N. Ou clique num "papelzinho" abaixo da lista de camadas:


Agora, com o mouse, arraste essa nova camada que você criou(que deve se chamar Camada 2) para baixo da Camada 1.

Selecione a ferramenta Pincel(tecle a letra "B" do teclado para fazer isso). Coloque ele no diâmetro "21 px". Ainda na Camada 2, faça "voltas" em torno da metade do button com o pincel. Veja que o pincel não toca em cima do button, e sim abaixo dele. Isso acontece porque você colocou a Camada 2 abaixo da Camada 1, que é onde estava o seu button.

Como eu já disse faça voltas apenas até a metade do button!  Eu sugiro que você dê batante zoom nessa hora, caso contrário o efeito pode sair torto ou tremido. Você também pode usar a ferramenta Pen Tool para fazer isso, mas o post iria ficar enorme se eu ensinasse como mexer com ela, então procurem tutoriais na internet, desculpem.

O meu resultado final ficou assim:


Você ainda pode adicionar inúmeros efeitos no seu button, basta ter criatividade. Como é um tutorial, deixei apenas assim mesmo.

Salve o seu button, e já saiu o resultado final! :D

Não saiu perfeito, desculpem, foi a pressa...

Espero que tenham entendido tudo direitinho, e caso não tenham entendido alguma parte é só me falar.
Bai!

2 comentários:

  1. Será que você poderia passar um tuto de como fazer buttons no sumo paint? Eu não tenho Photoshop

    ResponderExcluir
    Respostas
    1. Vou ver se consigo, e se puder, eu faço o tutorial.
      Obrigado por comentar. ^^

      Excluir

Comentem leitores, isso ajuda muito os blogueiros, além de motivá-los a postar mais. :D
Antes de comentar, leia os tópicos a seguir:

-Quando comentar, evite usar palavrões para ofender alguém, ou a mim mesmo. Xingamentos e ofensas contra mim serão ignoradas(ou eu irei lhe dar uma resposta nada agradável =) )
-Comentários do estilo "Seguindo, segue de volta?" , até serão aceitos, mas já vou avisando que só sigo o seu blog, se GOSTAR.
-Obrigado por comentar, eu agradeço muito, de verdade. Caso eu não responda o comentários de vocês, não fiquem irritados, é que eu realmente não tenho tempo. Mas saibam que eu respondo sempre que possível!