02/08/2020 O que é um Mockup?

Unlimited asset downloads! From $16.50/m 

DESIGN & ILLUSTRATION > PRODUCT MOCKUP

O que é um Mockup?
Advertisement

by Andrei Stefan 4 Jun 2020

Di culty: Beginner Length: Long Languages: Português

Product Mockup Graphic Design Presentations



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:

What is a Mockup?

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 1/10
02/08/2020 O que é um Mockup?

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 car 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á cos 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ê.

Advertisement

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

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 2/10
02/08/2020 O que é um Mockup?

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 nal cará

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.

Advertisement

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 3/10
02/08/2020 O que é um Mockup?

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 prede nidos 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 In nitas
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

Macbook Mockup por Placeit

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 4/10
02/08/2020 O que é um Mockup?

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

Business Card Mockup por Placeit

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

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.

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ê zer a
atualização da sua camada inteligente, todas as tela vão mostrar a captura de tela que
você atualizou instantaneamente!

Display Mockup Creator por Envato Elements

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 5/10
02/08/2020 O que é um Mockup?

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 cará 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 nalizar 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...

DESIGN GRÁFICO
Andrei Stefan
14 Mar 2016

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 6/10
02/08/2020 O que é um Mockup?

Diferentes Tipos de Arquivos de

Imagem e Formatos

De tipo de arquivo a formato de arquivo,

nós vamos explorara o signi cado dessas
noções e aprender quais as imagens mais
comuns que são usadas agora.

DESIGN GRÁFICO
Andrei Stefan
15 Nov 2018

O Que Fazer e Não Fazer na

Criação de Ícones de linha

Aprenda como criar ícones lineares em

ambos, Adobe Illustrator e
A nity Designer, e veja como você pode
criar um produto utilizável nalizado
usando algumas formas básicas.
DESIGN DE ÍCONE
Andrei Stefan
17 Sep 2018

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 7/10
02/08/2020 O que é um Mockup?

A Transição do Adobe Illustrator

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

AFFINITY DESIGNER
Andrei Stefan
05 Mar 2018

Advertisement

Andrei
Stefan

Andrei Stefan
coffee addict / pixel grinder

Just another young gun coffee fanatic from Europe, designing colorful worlds
one pixel at a time. When I'm not "making stuff" you can usually nd me at my
place, ipping news and catching up on all the crazy things happening in both the
tech and design realms.

 AndrewRosek

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 8/10
02/08/2020 O que é um Mockup?

 FEED  LIKE  FOLLOW

Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials.
Never miss out on learning about the next big thing.

Email Address

Update me weekly

Translations

Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved

too!

Translate this post

Powered by

Native

Advertisement

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 9/10
02/08/2020 O que é um Mockup?

QUICK LINKS - Explore popular categories

ENVATO TUTS+ 

JOIN OUR COMMUNITY 

HELP 

envato-tuts+

29,054 1,286 43,230

Tutorials Courses Translations

Envato.com Our products Careers Sitemap

© 2020 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

Follow Envato Tuts+

FacebookTwitter Pinterest

https://design.tutsplus.com/pt/tutorials/what-is-a-mockup--cms-32231 10/10