by
Read Time:12 minsLanguages:

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

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ê.

placeit site previewplaceit site previewplaceit site preview

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.

finding the right mockupfinding the right mockupfinding the right mockup

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.

downloading the imagedownloading the imagedownloading the image

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.

example of adjusting the colorexample of adjusting the colorexample of adjusting the color

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:

macbook mockupmacbook mockupmacbook mockup
Macbook Mockup por Placeit
business card mockupbusiness card mockupbusiness card mockup
Business Card Mockup por Placeit
  • E finalmente esse iPad fofo, que eu planejo usar num futuro próximo.
ipad mockupipad mockupipad mockup
iPad Mockup por Placeit

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.

graphicriver productgraphicriver productgraphicriver product
Phone Mockup and Header Creator

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!

envato elements productenvato elements productenvato elements product
Display Mockup Creator por  Envato Elements

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

  • Diferentes Tipos de Arquivos de Imagem e Formatos

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

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

One subscription.
Unlimited Downloads.
Get unlimited downloads