DESENHO DO BOTÃO USANDO A FORMA DE RETÂNGULO

 Não tenho certeza sobre você, mas quando eu criar botões para um site web, eu sempre uso as formas, especialmente se o botão tem cantos arredondados. Estas formas vetoriais têm a vantagem de que eles são fáceis de escala ou redimensionar. Combiná-los com efeitos e você tem o botão mais flexível que nunca. Não sei o que quero dizer? Espero que eu possa compartilhar algo útil com você aqui ...

DESENHO DO BOTÃO USANDO A FORMA DE RETÂNGULO

Selecione a ferramenta Rounded Rectangle, digite 4 ou 5 px de raio para o canto arredondado e desenhe sua forma botão retângulo. Dê um duplo clique no nome da camada, insira um nome e clique duas vezes para a direita da camada para ativar as opções de Estilos Layer.

ADICIONANDO ESTILOS

Adicionando um efeito de sombra

Confira o estilo Drop Shadow e coloque opacidade de 8%, 90 graus para o ângulo, distância de 5 e 0 px px tamanho (no caso de você não quer uma sombra embaçada). Sinta-se livre para entrar o que você pensa é bom.

Adicionando uma sobreposição de gradiente

Marque a opção Gradient Overlay e clique na imagem do gradiente. Isso fará com que o Editor de Degradê. Clique na primeira Color Stop e clique na cor abaixo para mudá-lo. Eu usei # a4cee6. Faça o mesmo para a parada de cor para a direita. Eu usei # 56add6. Agora adicione um Color Stop no meio, clicando logo abaixo do gradiente no meio. Se não é 100% no meio você pode corrigi-lo, inserindo 50% no campo de localização. Eu usei # 468bcc para este Color Stop. Agora adicione outra Color Stop neste mesmo local. Para fazer este link à direita dela (abaixo do gradiente). Eu usei # 81b3e2 para este novo Color Stop. Agora, mudar a sua localização para 50%. Agora você deve obter o efeito mostrado na imagem acima.

Adicionando uma fronteira

Verificar o estilo do curso na parte inferior e selecione 1 pixel para o tamanho e branco como a cor (ou a cor de fundo você está usando).

Adicionando um brilho extra

Para finalizar o botão off acrescentei um brilho extra em cima desenhando um caminho usando a ferramenta Pen. Eu tenho esse caminho cheio com branco e adicione uma pequena máscara para fazê-lo desaparecer um pouco e menos rígido. Defina a transparência para 50%.

Se necessário, mude o tom da cor

Às vezes, você chega à conclusão de que a cor do botão não é exatamente o que você tinha em mente. Você pode experimentar usando o Hue e Saturation Adjustment Layer. Eu de-saturada do botão para fazer o botão de menos azul e mais cinzento. Se você comando / controle + clique no ícone da camada na paleta Camadas da camada de botão, o botão será selecionado. Se você, em seguida, selecione a camada de ajuste e clique na opção Add vector mask na parte inferior da paleta Layers, apenas o botão seu sofrerá o efeito e não o resto do seu layout.

Esta é apenas uma maneira de fazer as coisas, é uma forma de adicionar certos efeitos mas há um zilhão de possibilidades e coisas que você pode experimentar.

PS: caso você tenha vários documentos abertos Photoshop, tente o seguinte: segure a tecla SHIFT + comando / controle + espaço e clique no documento ativo. Você verá que você aumentar o zoom em todos os documentos. Se você segurar a tecla shift + opção / alt + comando / controle + espaço e clique em você vai diminuir o zoom em todos eles. Esta é uma dica que recebi de Roger Johansson que, acidentalmente, pressione a tecla shift quando ele estava dentro de zoom