Como criar um botão estilo Vista

Que tal mais um tutorial, criando um botão no estilo Vista Dark, hein?! É mais fácil do que parece, garanto! E os resultados são perfeitos. Dessa vez, eu não sei se funciona em programas que não sejam o GIMP, mas talvez algum outro programa tenha as mesmas ferramentas que eu vou usar nesse tutorial, se tiver, basta tentar fazer o mesmo…mesmo assim, recomendo o GIMP, porque já está explicado, aí você não precisará caçar as ferramentas! =)

Primeiro, aos resultados. Já os incluí na aurora live, então tenho alguns botões nesse estilo:

Primeiro, crie uma imagem, em que o botão que você quiser caiba, não precisa ser totalmente preenchida pelo botão, mas pode. Crie com fundo transparente. Recomendo 69px de largura e 21 px de altura, que é o tamanho normal dos botões no Windows. Então crie um gradiente:

Agora, vamos criar o gradiente específico para o botão ficar com uma aparência melhor. Na janela que abriu, “Editor de Degradês”, clique com o botão direito na parte colorida (que está de fato em preto-e-branco) e escolha “Cor do Ponto do Canto Esquerdo”. Na najela da cores, defina a notação HTML 252525, depois, faça o mesmo só que com “Cor do Ponto do Canto Direito”, use a notação 9a9a9a. Vai ficar assim:

Agora, clique com o Botão direito e selecione “Dividir Segmento ao Meio”, vai ficar assim:

Agora, mova as duas setas brancas da para o meio, ou apenas próximo se preferir:

Agora salve, e o degradè já está pronto! Agora, ao botão! Aplique o degradè de baixo para cima, em linha reta perfeita:

Agora selecione sua cor de cor de frente como preta, depois, na janela da imagem, clique em “Seleção>Tudo”, depois em “Editar>Contornar Seleção”, e faça uma linha de contorno de 1px, cor sólida. Agora crie um retângulo dentro da parte mais clara, que cubra a parte clara completamente, mas não a borda. Agora, vá em “Seleção>Criar Borda”, crie uma borda de 1px, então ficará assim; (se preferir, pode usar a tecla CTRL para criar bordas menores, ao invés de fazer este e o próximo):

Agora, vá em “Editar>Cortar”:

Então, crie uma camada, escolha sua cor de frente como branco, e use o degradè “Frente para Transparente”, aplique o degradè em linha reta, e jogue essa nova camada para o fundo. Agora, selecione o retângulo mais escuro, mude a forma do degradè para radial, mude a opacidade para 25%, faça um degradè do meio da seleção atré uns 100px abaixo, com o degradè “Frente para Transparente”. Ficará assim:

Agora, ao final da imagem, antes da borda, crie uma seleção de 1px de altura e faça o mesmo com ela. Uma imagem de exemplo, seria essa, do GIMP Tutorials:

example

Agora, basta finalizar seu trabalho, fazendo, por exemplo, a área transparente da parte mais clara ficar menor, e “glassificando” seu botão como no post Criando Botões Estilo Glass. Se você quiser, tentar modificar alguns métodos podem fazer suas criações ficarem bem melhores! Nesse método apresentado aqui por exemplo, os detalhes ficam perdidos. Você pode fazer o botão em 800×600, por exemplo, e depois redimensionar para um tamanho menor que ele será rico em detalhes, como nos exemplos de trabalhos prontos em com acabamento:

Até o próximo tutorial!

2 Respostas

  1. Aceita parceria com meu blog?
    (desktotal.wordpress.com)

Deixe uma resposta