Como fazer uma maquete de botão Pinback

Os mockups do botão Pinback são uma ótima maneira de anunciar seus novos produtos. Crie maquetes fotorrealistas do seu design em segundos e compartilhe-as nas mídias sociais. Com este tutorial detalhado, você aprenderá a criar objetos inteligentes, aplicar estilos de camada e adicionar texturas.

Procurando um atalho? Este conjunto de maquetes de botões é uma ótima maneira de exibir seus designs. Seja notado e leve sua maquete de crachá para o próximo nível. É simples: basta carregar seu design e obter um belo design de pino de botão em segundos!

Maquete do botão PinbackMaquete do botão PinbackMaquete do botão Pinback

O que você aprenderá neste tutorial de design de pino de botão

  • Como criar um objeto inteligente
  • Como aplicar estilos de camada no Photoshop
  • Como aplicar brilho e textura a uma maquete de botão

O que você vai precisar

1. Como criar um objeto inteligente

Passo 1

Abra a imagem do bolso jeans no Photoshop. Use o Ferramenta de corte (C) e ajuste a imagem para que fique quadrada.

Jeans cropped de bolsoJeans cropped de bolsoJeans cropped de bolso

Passo 2

Use o Ferramenta Elipse (U) e faça um círculo que é 1191 pixels largo. Nomeie esta camada ‘Limão‘ no Camadas painel e mude a cor para #6db6e4.

Criar uma elipseCriar uma elipseCriar uma elipse

etapa 3

Clique com o botão direito a Limão camada e selecione Converter em objeto inteligente. Duplo click dentro de Limão miniatura no Camadas painel. Uma nova janela deve aparecer mostrando apenas o círculo que você acabou de criar. Abra o arquivo vetorial de limão em Adobe Illustrator. Cópia de (Comando-C) e cole (Comando-V) a limão ícone de Ilustrador no Photoshop objeto inteligente. Salvar (Comando-S) o arquivo para que ele seja atualizado em nosso arquivo principal.

Adicionar ícone de limão ao objeto inteligenteAdicionar ícone de limão ao objeto inteligenteAdicionar ícone de limão ao objeto inteligente

2. Como aplicar estilos de camada no Photoshop

Passo 1

Volte ao nosso arquivo principal. Selecione os ‘Limão‘ camada e arraste-o para o pasta ícone (destacado em vermelho abaixo) na Camadas painel para colocá-lo em um grupo. Nomeie a camada ‘Botão de limão.’

Colocar camada em um grupoColocar camada em um grupoColocar camada em um grupo

Passo 2

Duplo click a Botão de limão camada e adicione vários estilos de camada, começando com Bisel e Emboss:

  • Estilo: Bisel Interno
  • Técnica: Cinzel Soft
  • Profundidade: 1000%
  • Direção: Para cima
  • Tamanho: 68 pixels
  • Suavizar: 16 px
  • Ângulo: -111
  • Altitude: 37°
  • Contorno de brilho: Linear
  • Modo de destaque: luz vívida – #ffffff – Opacidade 83%
  • Modo Sombra: Multiplicar – #000000 – Opacidade 0%
Adicionar estilo de camada de chanfro e relevoAdicionar estilo de camada de chanfro e relevoAdicionar estilo de camada de chanfro e relevo

etapa 3

Adicionar um Contorno estilo de Camada:

Adicionar estilo de camada de contornoAdicionar estilo de camada de contornoAdicionar estilo de camada de contorno

Passo 4

Adicionar um Sombra interior estilo de Camada:

  • Modo de Mistura: Multiplicar – #000000
  • Opacidade: 69%
  • Ângulo: -111°
  • Distância: 14px
  • Choque: 0%
  • Tamanho: 196px
  • Contorno: Cone
  • Ruído 7%
Adicionar estilo de camada de sombra internaAdicionar estilo de camada de sombra internaAdicionar estilo de camada de sombra interna

Etapa 5

Adicionar um Brilho interior estilo de Camada:

  • Modo de mesclagem: sobreposição
  • Opacidade: 34%
  • Ruído: 0%
  • Cor: #000000
  • Técnica: Mais suave
  • Fonte: Centro
  • Choque: 0
  • Tamanho: 250px
  • Contorno: Gaussiano
  • Alcance: 50%
  • Tremor: 0%
Adicione um estilo de camada de brilho internoAdicione um estilo de camada de brilho internoAdicione um estilo de camada de brilho interno

Etapa 6

Adicionar um Cetim estilo de Camada:

  • Modo de mesclagem: Color Burn – #5e5e5e
  • Opacidade: 67%
  • Ângulo: -14°
  • Distância: 246px
  • Tamanho: 250px
  • Contorno: meia volta
Adicionar estilo de camada de cetimAdicionar estilo de camada de cetimAdicionar estilo de camada de cetim

Etapa 7

Adicionar um Sobreposição de Gradiente estilo de Camada:

  • Modo de Mistura: Multiplicar
  • Opacidade: 100%
  • Gradiente: #d7d7d7#ffffff
  • Estilo: Linear
  • Ângulo: 90°
  • Escala: 100%
  • Método: Perceptivo
Adicionar estilo de camada de sobreposição de gradienteAdicionar estilo de camada de sobreposição de gradienteAdicionar estilo de camada de sobreposição de gradiente

Etapa 8

Adicionar um Sombra projetada estilo de Camada:

  • Modo de Mistura: Multiplicar – #000000
  • Opacidade: 61%
  • Ângulo: 90°
  • Distância: 42px
  • Spread: 22%
  • Tamanho: 51px
  • Contorno: Linear
  • Ruído: 0%
Adicionar estilo de camada de sombra projetadaAdicionar estilo de camada de sombra projetadaAdicionar estilo de camada de sombra projetada

Etapa 9

Adicione um segundo Sombra projetada estilo de Camada:

  • Modo de Mistura: Multiplicar – #000000
  • Opacidade: 60%
  • Ângulo: 90°
  • Distância: 89px
  • Spread: 27%
  • Tamanho: 73px
  • Contorno: Degraus Arredondados
  • Ruído: 0%
Segundo estilo de camada de sombra projetadaSegundo estilo de camada de sombra projetadaSegundo estilo de camada de sombra projetada

3. Como aplicar brilho e textura a uma maquete de botão

Passo 1

Crie uma nova camada acima do Botão de limão grupo e nomeie-o ‘Brilhar‘ no Camadas painel.

Adicionar camada de brilhoAdicionar camada de brilhoAdicionar camada de brilho

Passo 2

Pegue o Ferramenta Caneta (P) e faça um caminho curvo que se pareça com a imagem abaixo.

Faça um destaqueFaça um destaqueFaça um destaque

etapa 3

Clique com o botão direito o caminho e selecione Fazer seleção. Mudar o Raio de Pena para 0 pixels e o Operação para Nova seleção. Selecionar OK.

Faça uma seleção ativaFaça uma seleção ativaFaça uma seleção ativa

Passo 4

Preencha a seleção ativa com #ffffff usando o Ferramenta Balde de Tinta (G).

Encha o brilho com brancoEncha o brilho com brancoEncha o brilho com branco

Etapa 5

Selecione os Brilhar camada e altere a Modo de mesclagem para Sobreposição.

Modo de mesclagem de sobreposiçãoModo de mesclagem de sobreposiçãoModo de mesclagem de sobreposição

Etapa 6

Vamos para Filtro > Desfoque > Desfoque Gaussianoe altere o Raio para 3,5 píxeis.

Adicionar um desfoque gaussianoAdicionar um desfoque gaussianoAdicionar um desfoque gaussiano

Etapa 7

Abra o arquivo de textura no Photoshop. Arraste e solte-o em nosso arquivo principal. Redimensione a imagem para 50%.

Adicionar textura ao arquivoAdicionar textura ao arquivoAdicionar textura ao arquivo

Etapa 8

Faça uma seleção de Limão camada pressionando Comando e a Limão miniatura. Agora você deve ter uma seleção ativa. Crie um máscara vetorial (destacado em vermelho).

Adicionar uma máscara vetorialAdicionar uma máscara vetorialAdicionar uma máscara vetorial

Etapa 9

Mudar o Modo de mesclagem do Textura camada para Luz suave e a Opacidade para 94%.

Alterar o modo de mesclagem para luz suaveAlterar o modo de mesclagem para luz suaveAlterar o modo de mesclagem para luz suave

Etapa 10

Selecione os Textura, Brilhar e Botão de limão camadas e colocá-los em um grupo. Nomeie esta pasta ‘Botão #1‘.

Colocar camadas em um grupoColocar camadas em um grupoColocar camadas em um grupo

Etapa 11

Duplicado (Comando-J) a Botão #1 grupo duas vezes. Nomeie-os Botão #2 e Botão #3. Selecione os Limão camada do Botão #2 grupo e Clique com o botão direito do mouse > Novo objeto inteligente via cópia. Altere o nome desta camada para ‘Coração.’

Grupo de botões duplicadoGrupo de botões duplicadoGrupo de botões duplicado

Etapa 12

Duplo click a Coração miniatura de objeto inteligente. Abra os ícones de emoji de coração em Ilustrador e copie (Comando-C) e cole (Comando-V) no objeto inteligente. Crie um círculo usando o Ferramenta Elipse (U). Selecione os Ferramenta Tipo (T) e digite “Você é o suficiente” usando o Malto Fonte, 307 pontose #fffefe.

Adicionar ícone de coração e textoAdicionar ícone de coração e textoAdicionar ícone de coração e texto

Etapa 13

Duplo click o fundo do botão e aplique um Sobreposição de Gradiente:

  • Modo de Mistura: Normal
  • Opacidade: 100%
  • Gradiente: #7776ff#ae2cf1
  • Estilo: Linear
  • Ângulo: 90°
  • Escala: 100%
  • Método: Perceptivo
Adicione um gradiente roxoAdicione um gradiente roxoAdicione um gradiente roxo

Etapa 14

Salvar (Comando-S) o objeto inteligente. O botão nº 2 deveria ter sido atualizado para o novo design. Selecione os Limão camada do Botão #3 grupo e Clique com o botão direito do mouse > Novo objeto inteligente via cópia. Altere o nome desta camada para ‘Cão.’ Duplo click a Cão miniatura de objeto inteligente. Abra os ícones de cachorro em Ilustrador e copie (Comando-C) e cole (Comando-V) no objeto inteligente.

Adicionar ícone de cachorroAdicionar ícone de cachorroAdicionar ícone de cachorro

Etapa 15

Altere a cor de fundo do botão para #83e46d.

Mude o fundo para verdeMude o fundo para verdeMude o fundo para verde

Tudo feito!

Obrigado por seguir meu tutorial de maquete PSD pin. Você aprendeu várias habilidades do Photoshop, como criar objetos inteligentes, aplicar estilos de camada e adicionar texturas e realces. Use essas mesmas técnicas para criar seus próprios modelos de crachás.

Imagem final da maquete de pinbackImagem final da maquete de pinbackImagem final da maquete de pinback

5 Mockups PSD de pinos dignos de download

A melhor maneira de ser notado é através do design. Para criativos, os modelos de botões de pinback fornecem uma maneira fácil de criar uma apresentação personalizada, exibir seu trabalho ou lançar um novo produto.

1. Maquete de pinos (PSD)

Maquete do botão FinbackMaquete do botão FinbackMaquete do botão Finback

Temos uma maquete de pin para você! Crie uma apresentação impressionante em segundos com este modelo de maquete de botão pinback. Adicione sua arte, personalize seu layout e exporte o design finalizado.

2. Maquete de crachá (PSD)

Maquete de botão de cracháMaquete de botão de cracháMaquete de botão de crachá

Quando você precisa compartilhar suas ideias, mostrar seu trabalho ou levar um projeto até a linha de chegada, você deve ser capaz de fazê-lo com estilo. É aí que este modelo de maquete de pin é útil.

3. Maquete de botão de pino realista (PSD)

Maquete de botões de pino realistaMaquete de botões de pino realistaMaquete de botões de pino realista

O modelo de maquete de botão pin é a maneira perfeita de apresentar suas ideias de design. Mostre a frente e o verso do seu modelo de pin hoje.

4. Conjunto de maquete de crachá de botão (PSD)

Maquete de crachá de botãoMaquete de crachá de botãoMaquete de crachá de botão

Procurando uma maneira de mostrar sua criatividade? É ótimo para qualquer ocasião, seja para usar este emblema de botão para promover sua empresa ou apenas criar algo legal. Este modelo foi projetado com simplicidade em mente e é rápido e fácil de usar, então vá direto e faça algo incrível!

5. Modelo de botão de pino brilhante (PSD)

Maquete de botão de pino brilhanteMaquete de botão de pino brilhanteMaquete de botão de pino brilhante

Utilize este mockup de botão pinback fotorrealista para exibir seus designs dignos de compartilhamento com o mundo. Com integração perfeita no Adobe Photoshop, este modelo pode ajudar a levar sua arte e designs para o próximo nível.

Mas espere, há mais!

Projetar maquetes não é uma tarefa simples. Requer muito tempo, criatividade e um conjunto de recursos. Na Envato Tuts+, fornecemos todos os recursos necessários para criar seus próprios modelos. Você pode encontrar tutoriais bem escritos para ajudá-lo em sua jornada de design.

Deixe um comentário

O seu endereço de e-mail não será publicado.