Esta postagem foi atualizada em 5 de junho de 2023
Se você é um designer experiente, certamente sabe o que é um mockup ou mock-up, mas quem está começando na área agora pode ter algumas dúvidas sobre esse tema.
Fique tranquilo se este for o seu caso, pois neste artigo vamos explicar tudo o que você precisa saber sobre os mockups, um recurso muito utilizado no design gráfico.
Conteúdo:
O que é mockup e para que serve?
Trata-se de uma representação digital de algo que existe no mundo físico, como uma caneca personalizada com a logo de uma empresa de manutenção máquinas industriais.
Esse arquivo digital simula todos os parâmetros do projeto, como cor, tamanho, proporções e outras características.
Essa ferramenta existe para que a visualização de um determinado projeto seja bem próxima da realidade, de forma que alguns exemplos são:
- Um site;
- Cartões de visita;
- Um cartaz;
- Uma estampa de camiseta;
- Um protótipo de um novo produto;
- Uma embalagem.
Com uma visualização extremamente realista é possível visualizar de forma clara e concreta cada projeto.
Quando usar mockups?
Um mockup geralmente é utilizado como complemento da apresentação de um projeto para o cliente final. Afinal de contas, a visão que o cliente terá sobre o projeto ao se apresentar somente a arte não será igual a sua.
Muito provavelmente o cliente não conseguirá imaginar todas as características físicas que determinado projeto tem. Justamente nessas situações o mockup é extremamente útil: ele auxilia na visualização daquela arte, simulando uma situação bem próxima da realidade.
Imagine o logotipo de uma empresa de lâmpada UV germicida. Em uma imagem a estampa aparece isolada, de forma que não há como saber sua proporção e como ela ficaria aplicada em uma camiseta.
Já em outra imagem, você tem a mesma arte em uma simulação que aplica a camiseta pronta em uma pessoa, de forma bem próxima da realidade.
Utilizando um mockup como complemento de uma apresentação, pode estar certo que você irá agregar mais valor ao seu trabalho, aumentando as chances de aprovação do projeto.
Não se esqueça que um dos papéis do designer é ter empatia para entender o ponto de vista do seu cliente sobre o projeto. Nesse sentido, o mockup surge como um facilitador, ou seja, uma ponte entre o que o designer quer passar e o que o cliente precisa entender.
Quais tipos de mockups existem?
Existem muitos tipos de mockups, inclusive gratuitos, que você pode utilizar em suas apresentações. Alguns exemplos são mockups de fachadas, mockups de camisetas, mockups de canecas, mockups de sites, entre muitos outros.
Você pode montar para sua empresa de botina de segurança bracol uma lista com os melhores sites de mockups gratuitos e acessá-los sempre que precisar baixar um mockup de um projeto específico.
Como fazer um mockup?
Lendo este artigo, você já aprendeu o que é, para que serve e quando usar um mockup, mas é possível que esteja se perguntando como criar um mockup.
A seguir falaremos dos passos necessários para criar um mockup utilizando o Photoshop e através da criação online. Confira.
Como fazer mockups no Photoshop
Grande parte dos mockups disponíveis para baixar, sejam pagos ou gratuitos, são arquivos editáveis no Photoshop, ou seja, com extensão .psd. Dessa forma você pode abrir o objeto inteligente e alterar apenas o seu interior, mantendo efeitos como:
- Luz;
- Sombra;
- Desfoque;
- Profundidade;
- Texturas.
Ainda que você não tenha muita familiaridade com o Photoshop, não precisa se preocupar, pois normalmente o processo é simples, bastando apenas ter cuidado para não alterar as camadas erradas. Acompanhe nosso passo a passo.
Passo 1: Baixe seu mockup e abra-o no Photoshop
O primeiro passo para fazer seu mockup é fazer o download do arquivo. Você deve descompactá-lo caso esteja compacto em formatos como .zip ou .rar.
Então você deve localizar e abrir o arquivo de seu cliente, que pode ser uma empresa que projeta sistemas de ERP para restaurante.
Após abrir o arquivo no Photoshop, você deve conferir as camadas (layers) da imagem que você pretende trabalhar. Comumente a camada que contém o objeto inteligente tem um nome específico.
Para identificar o objeto inteligente do mockup, você também pode prestar atenção ao ícone, que é semelhante a uma página com quadrinhos dentro. É neste objeto que você irá inserir a arte do mockup.
Passo 2: Abra o Objeto Inteligente
Como você viu, o objeto inteligente é o responsável pela arte que será substituída em seu mockup, e para abri-lo basta dar um duplo clique no ícone dessa camada. Note que após dar esse duplo clique o objeto inteligente será aberto como uma nova aba do programa.
Passo 3: Substitua a arte
Seguindo o exemplo de um mockup de uma camiseta personalizada, o seu objeto inteligente é a área disponível dentro da camiseta que você pode preencher como desejar.
Existem mockups que já vêm com marcações de área, como se fossem marcas de corte que auxiliam no posicionamento. Também podem estar em uma camada separada.
Insira sua estampa com indicação de hipoclorito de sódio onde comprar, um logotipo, uma ilustração ou qualquer outro tipo de arte dentro do objeto inteligente.
Se já houver alguma arte demonstrativa no objeto inteligente, você deve apagá-la ou clicar no ícone do olho, deixando-a invisível.
Uma dica importante é que você deve evitar distorcer sua arte dentro deste espaço, pois os mockups geralmente já têm uma distorção automática para se ajustar ao objeto da foto, que neste caso é a camiseta.
Passo 4: Salve o arquivo
Após posicionar sua criação, basta salvar o arquivo deste objeto inteligente apertando as teclas de atalho Ctrl + S. Caso seu mockup tenha uma camada de marcação, não se esqueça de desativá-la antes de salvar.
Salvando o objeto inteligente, basta voltar na aba anterior e será possível visualizar a arte já ambientada no mockup que você baixou.
Os arquivos costumam vir com opções de ajuste de cor e de outras características do objeto, então com um pouco de conhecimento sobre o Photoshop você pode fazer seus próprios ajustes.
Em um exemplo, você pode fazer uma pasta com várias cores de camisetas personalizadas para uma empresa de relógio de ponto biométrico com comprovante.
Cada mockup pode ter uma variedade de opções. Nossa dica é que você baixe várias opções e faça testes de aplicação para ver qual deles oferece um efeito mais realista para seu projeto.
Quando o mockup estiver do jeito que você deseja, basta salvar o arquivo como imagem para utilizá-lo em suas apresentações.
Como fazer mockups online?
Você também consegue criar mockups diretamente pelo navegador, sem a necessidade de usar o Photoshop. Existem alguns diferentes sites que possibilitam que você faça isso, mas o mais conhecido é o Placeit.
Nele é possível criar mockups online de forma gratuita, com opções limitadas, ou comprando diretamente o mockup, ou ainda assinando o serviço para poder baixar mockups de forma ilimitada.
Passo 1: Crie uma conta gratuita
Primeiramente acesse o site do Placeit e clique em “Inscrever-se” no canto superior direito. Preencha as informações que forem pedidas para criar uma nova conta. Todo o processo é relativamente simples, e em pouco tempo você já terá uma conta gratuita no site.
Após sua criação e ativação, basta fazer o login com suas credenciais para começar a criar um projeto para uma empresa de trocador de calor serpentina.
Passo 2: Utilize a busca para escolher um mockup
Utilizando a ferramenta de busca do site você poderá encontrar o mockup perfeito para sua necessidade. Podemos procurar, por exemplo, pelo termo “caneca”.
Entre os resultados da pesquisa, você terá itens pagos e gratuitos como opção. Para visualizar apenas itens gratuitos, utilize o filtro no canto superior esquerdo clicando na opção “Free”.
Então confira as opções disponíveis e escolha aquela que mais te agradar para começar a fazer seu projeto.
Passo 3: Faça o upload da sua arte e monte seu mockup
Os próximos passos são bem intuitivos. No site, o botão azul da esquerda faz o upload do seu design para o mockup. Clique e escolha algum arquivo de imagem do seu computador, ou arraste-o diretamente para o botão.
Você tem a opção de personalizar alguns mockups do site, mudando as cores e outras características do objeto inteligente. Essas opções aparecerão no botão à direita quando estiverem disponíveis.
Passo 4: Baixe seu mockup pronto
Após personalizar o mockup de uma caneca para uma empresa de leitor de código de barras de mesa9, basta clicar no botão de download no canto superior direito, assim seu trabalho estará pronto e a imagem baixada poderá ser utilizada da forma que você achar melhor.
Considerações finais
Neste artigo você conferiu diversas informações sobre mockups e já sabe como fazer o seu para suas apresentações. Experimente usar esse recurso não só nas apresentações, mas também para deixar seu portfólio mais atrativo.
Sua criatividade pode criar sem limites, de forma que o mais importante é conhecer e saber usar esse recurso.
Esse texto foi originalmente desenvolvido pela equipe do blog Guia de Investimento, onde você pode encontrar centenas de conteúdos informativos sobre diversos segmentos.