Botão Photoshop Create Web 2.0

Botões Os tutoriais do Photoshop são provavelmente uma das categorias mais populares em qualquer site de tutoriais do Photoshop e, como a Web 2.0 tem tópicos tão interessantes agora, vamos fazer um simples botão adequado para qualquer aplicativo Web 2.0 de sites. Tutorial depois do salto.

Crie uma tela em branco com cerca de 500px (largura) x 400px (altura) para iniciar o design do botão. Criar uma nova chamada de camadabg01'. Selecione os Ferramenta Retangular Arredondada, segure SHIFT e desenhe um quadrado de lado redondo no centro. Qualquer cor está bem no estágio atual.

Ligue para o Opções de mesclagem do 'bg01'e ajuste os seguintes estilos:

Sombra

Opacidade: 40%
Distância: 0px
Spread: 0%
Tamanho: 6px

Sobreposição de gradação

Parada de cor: 0%, # d00031
Parada de cor: 100%, # ff2b5d

Segure CTRL, clique com o botão esquerdo em 'bg01'Miniatura da camada para selecionar sua forma. Vai Selecione -> Modificar -> Contrato e insira o valor '2px'. Isso reduzirá a área selecionada em 2 pixels.

Criar uma nova chamada de camadabg02'e preencheu a área realçada (depois de encolher) com qualquer cor. Eu uso # 000000 preto aqui. Clique duas vezes em 'bg02' para iniciar o Opção de mistura e ajustar o estilo a seguir.

Sobreposição de gradação

Parada de cor: 0%, # c6002f
Parada de cor: 100%, # c6002f

Crie outra nova camada para o texto, chame-aTXT'. Insira o texto do seu botão. Eu vou usar um alfabeto para representar. Os estilos de fonte que estou usando aqui são os seguintes:

Arredondado Arial negrito
150pt

Mesmo depois de decidir o seu texto, clique duas vezes em 'txt' para iniciar o Opções de mesclagem e ajustar os seguintes estilos.

Sombra

Opacidade: 25%
Distância: 0px
Propagação: 0px
Tamanho: 5px

Sombra interior

Opacidade: 10%
Distância: 0px
Choke: 0
Tamanho: 10px

Bisel Emboss

Profundidade: 1px
Direção: Down
Tamanho: 0px
Suavemente: 0px
Opacidade do modo de realce: 32%
Opacidade do Modo Sombra: 32%

Sobreposição de gradação

Parada de cor: 0% # d2d2d2
Parada de cor: 100% # f0efef

O botão está quase pronto. Vamos dar um pouco de brilho na parte de cima. Aguarde CTRL, Clique esquerdo 'bg02'Miniatura de camada para destacar a forma externa; escolher Ferramenta Marquee do Eclipse. Agora segure ALT, Com a ferramenta Marquee do Eclipse selecionada, o arrasto é transmitido para a metade inferior da área realçada. Consulte a imagem acima.

Com a parte superior destacada e o Eclipse Marquee Tool ainda selecionado, clique com o botão direito e escolha Pena; entrar 15px para o raio.

Crie uma nova camada, chame-abrilho'e preencha a parte destacada com branco [#ffffff]. Isso deve adicionar efeito de brilho à parte superior do botão. Produto final deve ser algo como a imagem abaixo.

Tutorial de Download

Algo extra ...

Ajustar as opções de mistura de 'bg01'e'bg02'vai te dar botões mais interessantes. Aqui está outro tutorial do Photoshop sobre o botão que fiz anteriormente - botão Criar brilhante para a Web 2.0

Download da Amostra