Como fazer um Mockup?

Saber como fazer um mockup é essencial para expor a ideia que você tem em mente de um projeto. No entanto, o grande problema é que a maioria das pessoas não sabem como fazer esse tipo de edição.

Se esse é o seu caso, não há com o que se preocupar!1 Basta continuar lendo esse conteúdo para conferir algumas dicas que irão ajudá-lo!

Como fazer um Mockup?

Se você tem um projeto que deseja lançar, primeiro é preciso expor a sua ideia. A parte visual, na maioria das vezes, é o que mais ajuda durante esse processo e é onde entra o mockup.

Para expor suas ideias e impressionar o público-alvo, é preciso saber como fazer um mockup. Veja logo a seguir um passo a passo simples em duas das maiores ferramentas de edição!

1. Como fazer um mockup no Photoshop

O Photoshop é uma das principais ferramentas que os designers usam para criar e personalizar os seus mockups. Você pode tirar suas próprias fotos ou contratar um profissional para isso.

Com a foto do template pronta, veja logo abaixo como começar a fazer um mockup através do Photoshop:

• Inicie a ferramenta de Photoshop e adicione o template, para isso clique em Menu “File” (Arquivo) > “Open” (Abrir). Ou parte as teclas de atalho “⌘ + O” (macOS) ou “Control + O” (Windows);
• A imagem irá abrir na ferramenta de edição e siga alguns passos para inseri-la na área que deseja de seu projeto;
• Crie uma camada por cima da camada da imagem;
• Com a ajuda da ferramenta pen ou seleção, desenhe uma forma para cobrir a área onde deseja colocar sua imagem;
• Insira alguma cor nessa área;
• Em seguida, selecione a camada que coloriu, clique sobre ela com o botão direito do mouse e selecione a opção “Convert to Smart Object”;
• Se for preciso, ajuste a perspectiva da imagem no Menu “Edit” (Editar) > “Transform” (Transformação) > “Distort” (Distorcer);
• Para ter um resultado mais real, diminua a opacidade da imagem. A camada que manipulou ficará transparente e você deverá seguir as curvas e o movimento da base onde está editando o mockup;
• Pressione a tecla “Enter” para confirmar os ajustes que fez e volta a opacidade da imagem para 100%;
• Para acrescentar uma imagem na área que definiu, clique duas vezes em “objeto inteligente”;
• Uma nova aba irá abrir e clique em Menu “File” > “Open” para inserir a imagem nessa aba;
• Salve a imagem e volte para a aba onde está a imagem principal;
• Por fim, salve o seu projeto em um lugar do seu computador.

2. Como fazer mockup no Canva

Outro local onde é possível fazer um mockup de um jeito bem prático, é através do editor online, Canva. Esse dito fornece uma série de modelos gratuitos que você poderá editar antes de baixar para o PC.

• O primeiro passo é buscar por “Mockup” na barra de pesquisas da página inicial do site;
• Em seguida, clique sobre “Templates de Mockup”;
• Você pode usar as opções de filtros para refinar os resultados da busca, por exemplo, definir por core, modelos gratuitos ou os pagos;
• Navegue pelas opções até encontrar o template que deseja para o seu projeto;
• Ao encontrar um template, clique sobre ele para abri-lo na ferramenta de edição do site;
• Chegou a hora de editar, você pode começar alterar os textos do modelo. É só clicar duas vezes em uma área onde tenha texto para excluir, é só pressionar a tecla “delete”, ou então mudar o que está escrito;
• Você também tem a opção de adicionar uma imagem nessa edição, importando fotos do seu computador. Basta selecionar a opção “uploads” e escolher a foto que deseja usar nessa edição, também é possível escolher imagens livres de direitos autorais em “fotos”;
• Em seguida, clique uma vez em cima da imagem dentro do quadro do telefone para selecioná-la. Aperte a tecla “delete”, para que a imagem seja apagada;
• Arraste a imagem que escolheu para dentro da figura de telefone, assim ela se adequar ao modelo de template;
• Você pode continuar editando conforme necessário, para obter o template personalizado conforme o seu desejo;
• Ao terminar de editar, é só clicar sobre o ícone de seta, localizado na parte superior da tela. Logo após, mantenha o arquivo de saída no formato PNG e selecione a opção “baixar”, para salvar o documento em seu computador.

Maker Mockup

Caso tenha pressa ou não queira se aventurar com as fotografias, você pode buscar fotos nos bancos de imagens gratuitos. Outra opção que também é bem útil e prática, é comprar templates prontos de uma empresa especializada do gênero.

A Maker Mockup, por exemplo, é uma loja que está há mais de 10 anos no mercado, fornecendo templates de qualidade. Caso não encontre o que queira usar, você pode solicitar um template de acordo com suas necessidades.

Conclusão

Viu como fazer um mockup,  não é tão difícil assim? Com prática, você consegue obter bons resultados para o seu projeto! E caso tenha gostado deste conteúdo, não esqueça de compartilhar com os seus amigos!