Sempre imaginou o que é um "mockup" mas nunca conseguiu  descobrir completamente? Bem, no vídeo de hoje, nós vamos desvendar e ver como é fácil usar um,com o Gerador de Mockup do Placeit.

Siga em frente no nosso Envato Tuts+ YouTube Channel:

O que é um Mockup?

Um mockup é um modelo em tamanho grande de um dispositivo ou design, usado para apresentações de produtos e outros propósitos.

Eu penso nele em termos de mostrar como o seu design vai ficar quando colocado no mundo real.

Dependendo das suas habilidades e tempo, você pode seguir através de todo o processo de criar seu próprio mockup usando softwares de gráficos dedicados, tais como Adobe Illustrator ou Photoshop, mas algumas vezes você deve achar melhor usar ferramentas mais básicas.

Como Usar o Placeit para Gerar Mockups da Maneira Fácil

Placeit é uma plataforma poderosa que oferece a você uma biblioteca de mockup incrívelmente diversa, que você pode usar em combinação com seu gerador online, que faz todo o trabalho por você.

Passo 1

Vamos dizer que nós finalizamos o trabalho de um app de clima, e eu quero mostrar ao cliente como a tela inicial vai ficar em um aparelho de verdade.

Em questão de segundos, consegui encontrar um ótimo mockup de iPhone X que eu acho que será uma ótima adaptação para o projeto.

Passo 2

Tudo o que eu tenho que fazer agora é carregar meu design, tanto usando o botão upload image ou fornecendo um link para ele.

Se eu passar o mouse sobre a primeira opção, ela vai me deixar saber o tamanho que a imagem precisa ter para conseguir um bom encaixe.

Assim que eu clicar nele, vai me permitir selecionar minha imagem, dando a opção de ajustar a posição do meu design, e seu tamanho.

Passo 3

Quando eu estiver pronto, tudo o que tenho que fazer é clicar no botão crop (cortar), que vai rapidamente me dar um pré-visualização de como a imagem final ficará

Eu descobri que eu preciso fazer alguns ajustes rápidos, posso fazer isso facilmente clicando no pequeno botão crop, que me trará a janela anterior.

Quando estiver satisfeito com o resultado eu posso facilmente fazer o download da imagem simplesmente clicando no botão Download, que vai me cobrar uma pequena taxa por usar o mockup.

Assim que eu tiver baixado a imagem, posso abri-la e então usá-la como eu quiser.

Passo 4

O que eu amo sobre o Placeit é que tem uma biblioteca enorme de mockups, alguns dos quais te dão a opção de fazer ajustes de cor na hora, como esse de camiseta.

Assim como no anterior, rapidamente sigo pelo processo de fazer upload da minha imagem, e se eu der uma olhada mais de perto no canto superior direito da página, posso ver a opção chamada Shirt Color (cor da camiseta).

Se eu clicar no pequeno botão do menu suspenso, terei a opção de alterar a cor da camiseta usando tanto um valores predefinidos quanto um novo feito por mim.

Quanto estiver contente com o resultado, eu pressiono o botão Download e então sigo rapidamente pelo processo de adquiri-lo.

Possibilidade Infinitas

Não importa em qual projeto você acabe trabalhando, você pode facilmente encontrar um ótimo mockup para ajudá-lo a dar vida ao seu design.

Pessoalmente, encontrei três designs que eu absolutamente amo:

• Esse casual MacBook

• Esse simples e ainda assim lindo cartão de visitas.

• E finalmente esse iPad fofo, que eu planejo usar num futuro próximo.

Alternativas mais complexas

Se você decidir que precisa de um pouco mais de controle sobre sua cena, então você pode querer tentar algo mais customizável como esses:

Phone Mockup and Header Creator

Esse lindo mockup do GraphicRiver vem como um criador de cena em Photoshop que tem 42 objetos isolados e 5 dispositivos mobile com objetos inteligentes para apresentação de apps ou websites.

Display Mockup Creator

Ou talvez você queira tentar esse mockup do Envato Elemets, que permite q você facilmente mostrar seu design e layout em uma vitrine de tela digital. Camadas inteligentes permitem a substituição rápida das capturas de tela. Quando você fizer a atualização da sua camada inteligente, todas as tela vão mostrar a captura de tela que você atualizou instantaneamente!

Conclusão

Não importa que método você acabe usando, os mockups podem facilmente ajudar a elevar seus designs para o próximo nível, permitindo que a audiência visualize como ele ficará na vida real.

Dito isso, eu espero que tenha achado esse tutorial útil, e vejo você no próximo.

Expanda Suas Habilidade de Design!

Acabei de finalizar esse rápido tutorial. Ainda sente que pode absorver mais conhecimento? Bem, se esse é o caso, você está como sorte, já que eu tirei um tempo para fazer essa pequena lista que vai mantê-lo ocupado pelos próximos dias.

• 10 Ferramentas do Illustrator que Todo Designer Deve Usar

  Nesse artigo, nós falaremos sobre as 10 ferramentas mais úteis no Adobe Illustrator. Quer você faça design de ícones, ilustração ou qualquer outra...

• Diferentes Tipos de Arquivos de Imagem e Formatos

  De tipo de arquivo a formato de arquivo, nós vamos explorara o significado dessas noções e aprender quais as imagens mais comuns que são usadas agora.

• O Que Fazer e Não Fazer na Criação de Ícones de linha

  Aprenda como criar ícones lineares em ambos, Adobe Illustrator e Affinity Designer, e veja como você pode criar um produto utilizável finalizado usando algumas formas básicas.

• A Transição do Adobe Illustrator para o Affinity Designer

  Aprenda sobre a experiência de trocar o Adobe Illustrator pelo Affinity Designer, e os obstáculos chave a serem transpostos.