Como criar botões 3D usando Adobe Photoshop

Como criar botões 3D usando Adobe Photoshop

Há muitas coisas incríveis que você pode criar em Adobe Photoshop que são úteis online, variando de molduras de fotos simples a interfaces de usuário complexas. Uma das coisas mais úteis que você pode criar no Photoshop são os botões 3D, que serão úteis se você tiver um blog ou site com uma interface personalizada.





Neste artigo, mostraremos como criar botões 3D usando o Photoshop, junto com os estados visuais 'para cima' e 'para baixo', para que você possa animá-los. (Não abordaremos a animação em si neste artigo.)



Etapa 1: Prepare seu documento

Embora os botões 3D apareçam com mais frequência em sites da Web, é importante observar que há outros aplicativos para eles, como GIFs animados, visores de produtos de simulação e jogos para celular. Dependendo do que você está criando este botão, o formato do arquivo final e as dimensões dele podem variar.





Para criar um botão 3D no Photoshop, você precisará criar um documento personalizado para ele. Para fazer isso, abra o Photoshop e clique em Criar Novo> Personalizado . Comece a digitar seus valores.

Para criar um botão 3D, você vai querer um documento horizontal. Para o nosso, usamos:



  • 900 x 300 pixels de altura
  • 300 pixels / polegada
  • Modo de cor RGB

Embora essas especificações definitivamente não sejam uma regra rígida e rápida, isso garantirá que você tenha espaço mais do que suficiente para trabalhar e a capacidade de aumentar ou diminuir o tamanho do botão conforme necessário.

Etapa 2: Configure seu retângulo para o botão 3D

Depois de configurar as especificações para seu arquivo, você será levado ao seu espaço de trabalho. Você terá uma tela branca horizontal em uma única camada e é aqui que começará a construir seu botão.



Para construir o seu botão 3D, clique no Ferramenta Retângulo Arredondado no lado esquerdo da tela, visto aqui em vermelho. Você também pode usar o atalho você para acessá-lo.

Clique uma vez em sua camada branca: isso abrirá automaticamente seu Criar retângulo arredondado caixa. Você usará esta caixa para especificar as dimensões do seu retângulo.



Para o nosso botão, escolhemos:

  • 300 pixels de largura
  • 75 pixels de altura

Também nos certificamos de que os cantos fossem arredondados em 10 pixels. Nem muito alto, nem muito baixo. Então nós pressionamos OK .

Observação: Os botões variam de acordo com o tamanho e a forma, então não sinta que precisa usar essas dimensões exatas. Além disso, se você está procurando mais informações sobre atalhos, aqui estão alguns dos os comandos de teclado mais úteis do Photoshop .

Quando você pressiona OK , O Photoshop criará um retângulo arredondado com essas dimensões dentro de sua camada. Você pode mudar o seu Preencher e Golpe cores usando os menus suspensos no canto superior esquerdo da tela.

Para o propósito deste tutorial --- e para ilustrar a aparência de um botão 'para cima' e 'para baixo' --- vamos deixar o botão 'para baixo' em vermelho.

Etapa 3: faça seu botão 3D

Depois de criar seu botão básico e escolher sua cor, você vai querer ajustá-lo no Estilo de Camada caixa de diálogo. Isso é para fazer com que pareça mais 3D.

Para acessar o seu Estilo de Camada caixa de diálogo, você pode ir Camada> Estilo de Camada no menu superior. Você também pode clicar duas vezes na camada que contém o botão para abri-lo automaticamente. Este caminho é muito mais rápido e pessoalmente o preferimos.

Assim que a caixa Layer Style estiver aberta, vá para a opção Chanfro e relevo . Ligue.

Esta é uma maneira rápida e fácil de dar às bordas do botão uma aparência mais '3D' em relevo. Para este tutorial, estas são as configurações que usamos:

Estrutura

  • Estilo: Chanfro Interno
  • Técnica: Cinzel macio
  • Profundidade: 605
  • Direção: Acima
  • Tamanho: 5
  • Suavizar: 1

Sombreamento

  • Ângulo: 90
  • Altitude: 37
  • Modo de destaque: Color Dodge, 55% de opacidade
  • Modo sombra: Múltiplos, 25% de opacidade

O truque é fazer as configurações altas o suficiente para que você possa ver alguma diferença, mas não tão forte a ponto de ser opressor.

Depois de terminar o Bevel & Emboss, fomos para Contorno e ativou isso também. Contour torna a definição de Bevel & Emboss um pouco mais forte, e para este tutorial escolhemos a configuração Cone - Invertido .

Em seguida, ligue Sobreposição de Gradiente . Isso é o que dá a um botão aquele aspecto arredondado e levemente 'brilhante'. As configurações são as seguintes:

  • Modo de mistura: Sobreposição
  • Opacidade: 90
  • Estilo: Linear
  • Ângulo: 90
  • Escala: 100

Finalmente, ligamos Drop Shadow , para fazer com que o botão pareça um pouco 'saliente' em relação ao fundo branco de um site ou blog. Novamente, aqui estão as configurações:

como hackear a câmera do laptop sem aviso prévio

Estrutura

  • Modo de mistura: Múltiplo
  • Opacidade: 35
  • Ângulo: 90
  • Distância: 2
  • Espalhar: 6
  • Tamanho: 8

Qualidade

  • Contorno: Linear
  • Barulho: 0
  • A camada derruba a sombra projetada: Sobre

Agora é hora de salvar essas especificações como um estilo de camada.

Etapa 4: Salvar como estilo de camada

Depois de concluir as configurações do botão, ele começará a ter uma aparência 3D. Como as chances de você criar mais de um botão 3D são grandes, precisamos encontrar uma maneira rápida e fácil de fazer isso.

Veja como.

Antes de clicar OK no Estilo de Camada caixa de diálogo, clique em Novo estilo . Ao fazer isso, o Photoshop salvará esse estilo de camada que você criou para o botão.

Se você estiver usando o Photoshop CC, este novo estilo será salvo em seu Bibliotecas seção, como você pode ver acima. É muito rápido e fácil de acessar.

Etapa 5: como usar um estilo de camada salvo

Agora que você projetou seu botão e o salvou como um estilo de camada, vamos vê-lo em ação para o seu estado 'ativo'. Nenhuma palavra de mentira, isso reduzirá seu tempo de trabalho pela metade.

Primeiro, vamos criar outro botão diretamente acima da camada do botão vermelho, assim. Vamos torná-lo verde, para dar ênfase.

Próximo --- em vez de clicar duas vezes na própria camada para abrir o Estilos de camada caixa de diálogo --- clique duas vezes no estilo de camada em seu Bibliotecas painel.

Quando você fizer isso, o Photoshop aplicará automaticamente o estilo salvo à sua nova camada de botão, enquanto mantém sua nova cor e forma. Agora você tem dois botões - um ativado e outro desativado - e é muito simples de fazer. Eu amo esse atalho.

Etapa 6: adicione texto ao seu botão

Em seguida, vamos adicionar texto ao botão.

Para adicionar texto, crie uma nova camada acima de suas duas camadas de botão. Clique no Ferramenta de tipo para começar a digitar.

Para este tutorial, vamos escrever a palavra 'inscrever-se' porque é algo que você vê com frequência em sites e plataformas de mídia social.

Também usaremos uma fonte segura para a Web sem serifa. A escolha final de qual botão você usará para seu próprio botão é sua. Montserrat, Proxima Nova, Arial e Verdana são alternativas amplamente utilizadas e seguras para a web.

Depois que isso for feito, no entanto, ainda há mais algumas mudanças sutis que você precisa fazer para que este texto 'estale'.

Primeiro, clique duas vezes na camada que contém seu texto para que você possa trazê-lo em seu Estilo de Camada caixa de diálogo.

Em seguida, clique em Sombra interior , para adicionar um pouco de depressão (ou área afundada) ao seu texto. Isso faz com que pareça que as letras foram gravadas no botão. As configurações exatas que usamos para este tutorial estão abaixo.

Estrutura

  • Modo de mistura: Multiplicar
  • Opacidade: 35
  • Ângulo: 90
  • Distância: 2
  • Estrangular: 4
  • Tamanho: 1

Qualidade

  • Contorno: Linear
  • Barulho: 0

Em seguida, aplique um Sobreposição de Gradiente a essas letras, para que se misturem mais facilmente ao botão, sem parecerem planas. Novamente, as configurações para o nosso são:

  • Modo de mistura: Color Burn
  • Opacidade: 90
  • Estilo: Linear
  • Ângulo: 90
  • Escala: 100

Etapa 7: Concluindo

Depois de criar este estilo de texto --- especialmente se você quiser usá-lo novamente --- vá para Novo estilo e salve-o antes de clicar OK .

Com isso embrulhado, você pode alternar rapidamente a visibilidade entre as duas camadas de botão, para ver como são os estados 'para cima' e 'para baixo'.

Muito legal, hein? Para salvar seu arquivo, vá Arquivo> Salvar como e salve-o como o formato de arquivo adequado para qualquer projeto em que esteja trabalhando.

Personalize o seu blog com botões e widgets 3D

Agora que você sabe como criar botões 3D no Photoshop, pode ser criativo com ele, projetando seus próprios botões 3D para atender às suas necessidades. E com essas habilidades em seu arsenal, você pode fazer um produto que não seja apenas profissional, mas também pessoal.

Quer saber mais sobre outras coisas que você pode fazer com este programa? Aqui está como remover um fundo no Photoshop .

Compartilhado Compartilhado Tweet O email Como acessar o nível de bolha integrado do Google no Android

Se você já precisou ter certeza de que algo está nivelado rapidamente, agora você pode obter um nível de bolha em seu telefone em segundos.

Leia a seguir Tópicos relacionados
  • Criativo
  • Adobe Photoshop
  • Dicas de edição de imagem
  • Tutorial de Photoshop
Sobre o autor Shianne Edelmayer(136 artigos publicados)

Shianne é bacharel em design e possui experiência em podcasting. Agora, ela trabalha como redatora sênior e ilustradora 2D. Ela cobre tecnologia criativa, entretenimento e produtividade para MakeUseOf.

Mais de Shianne Edelmayer

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever