Este gerador de mockup de dispositivos é grátis?

Sim. Todos os dispositivos, cores, ângulos e tamanhos de exportação são grátis, sem cadastro e sem marca d'água.

Posso fazer um mockup de iPhone ou iPad com ele?

Você pode fazer um mockup de um celular ou tablet moderno parecido com os modelos populares de hoje, que é o que a maioria precisa para a prévia de um app ou site. Os modelos são genéricos e desenhados em código; não são imagens oficiais de produtos da Apple, e esta ferramenta não é afiliada à Apple.

Posso fazer um mockup de site ou de navegador?

Sim. Escolha Navegador para colocar um print do seu site em uma janela de navegador de desktop com barra de endereço — digite seu próprio domínio e escolha uma barra clara ou escura — ou escolha Desktop para mostrá-lo em um monitor grande com suporte.

Como faço um mockup em PNG transparente?

Defina o fundo como Transparente e o formato como PNG (ou WebP) e baixe. A sombra é mantida como pixels suaves e semitransparentes, então se mistura com o que estiver por baixo do mockup.

Como giro o dispositivo?

Use os controles X, Y e Z ou digite um ângulo exato de −180° a 180°. Você também pode arrastar o dispositivo na prévia — segure Shift para girá-lo no plano — ou clicar na prévia e usar as setas. As predefinições pulam para vistas comuns, e Redefinir volta ao ângulo padrão.

Qual resolução posso exportar?

1080, 2048 ou 4096 pixels no lado maior, ou um tamanho personalizado de até 8192 pixels, em 1:1, 4:5, 16:9, 9:16 ou 4:3. O mockup é renderizado de novo nesse tamanho, então fica nítido em vez de ampliado.

Meu print fica cortado na tela. Como mostro ele inteiro?

Mude o Ajuste da tela de Preencher para Encaixar, que mostra a imagem toda com barras na cor que você escolher. Com Preencher, os botões de alinhamento decidem se o topo, o meio ou a base de um print alto é mantido.

Meu print é enviado para algum servidor?

Não. A cena 3D roda no seu navegador com WebGL, e a imagem nunca sai do seu dispositivo.

Aparece que o WebGL não está disponível. O que posso fazer?

A vista 3D precisa de WebGL. Ative a aceleração de hardware nas configurações do navegador, atualize os drivers de vídeo ou tente outro navegador; qualquer versão atual do Chrome, Edge, Firefox ou Safari é compatível.

Gerador de Mockup 3D: Celular e Notebook

Seu print em um dispositivo 3D realista, em qualquer ângulo

Solte um print ou um design e ele aparece na tela de um celular, tablet, notebook, monitor de desktop ou janela de navegador em 3D. Gire o dispositivo nos eixos X, Y e Z com controles deslizantes, ângulos digitados, as setas do teclado ou arrastando; escolha uma cor de dispositivo, um fundo e uma sombra suave; depois exporte um PNG, JPEG ou WebP nítido de até 8192 pixels — com fundo transparente se quiser colocá-lo no seu próprio slide ou landing page. Os dispositivos são modelados em código e renderizados com WebGL no seu navegador, então nada é enviado e não há marca d'água.

Como fazer um mockup de dispositivo

1Solte um print na página, escolha um arquivo ou cole com Ctrl/⌘ + V. Até lá, uma tela de app de exemplo é exibida.
2Escolha Celular, Tablet, Notebook, Desktop ou Navegador. Escolha uma cor — ou, para a janela do navegador, uma barra clara ou escura e o endereço exibido nela. Celulares e tablets podem ficar na horizontal; a tampa do notebook abre em qualquer ângulo.
3Escolha uma vista na barra acima da prévia — Hero ¾, Frente, Inclinar esq./dir., Isométrica ou Flat lay — e ajuste na aba Vista, ou arraste o dispositivo na prévia.
4Defina o fundo (transparente, sólido, gradiente ou um desfoque do seu próprio print), a sombra e a direção da luz.
5Escolha a proporção, o tamanho e o formato, e baixe a imagem ou copie para a área de transferência.

Mockups 3D de celular, tablet, notebook, desktop e navegador

Templates de mockup planos dão um único ângulo fixo. Aqui o dispositivo é um modelo 3D de verdade, então você pode mostrá-lo de frente para um print no estilo App Store, em um ângulo dramático de três quartos para uma imagem hero ou deitado para um post nas redes — a partir do mesmo upload, em segundos.

O mockup de celular tem uma tela moderna de borda a borda com recorte de câmera em formato de pílula, moldura de metal polido e câmera tripla na traseira. O mockup de tablet tem bordas finas e uniformes no estilo dos tablets atuais da classe iPad, e o mockup de notebook tem teclado completo, trackpad e uma tampa que abre de fechada até totalmente reclinada. São designs genéricos que lembram os dispositivos populares de hoje — úteis onde as pessoas procuram mockup de iPhone, de iPad ou de MacBook —, mas não são imagens oficiais de produtos, e esta ferramenta não é afiliada à Apple nem a nenhum outro fabricante.

Mockups de sites em uma janela de navegador

Para um site ou app web, escolha Navegador: seu print preenche a área da página de uma janela de navegador de desktop limpa, com botões de janela e uma barra de endereço mostrando o domínio que você digitar. A barra vem em claro e escuro para combinar com o seu design, e a janela pode flutuar em qualquer ângulo como os dispositivos — ou ficar de frente para um mockup de site plano e nítido.

Prefere hardware de verdade? Desktop coloca a página em um monitor grande com bordas finas sobre um suporte de alumínio, como um site visto em um monitor de estúdio. Com Preencher e Topo, um print longo de página inteira mostra a primeira tela, do jeito que o visitante vê.

Controles

Rotação X, Y e Z: X inclina o dispositivo para perto ou para longe de você, Y gira para a esquerda e a direita, Z gira no plano da imagem. Cada um vai de −180° a 180° e aceita valores digitados. Na prévia, arraste para girar em X e Y, segure <kbd>Shift</kbd> enquanto arrasta para girar em Z, ou foque a prévia e use as setas (<kbd>Shift</kbd> para passos de 15°), <kbd>Q</kbd>/<kbd>E</kbd> para Z e <kbd>R</kbd> para redefinir.
Zoom e campo de visão: O zoom muda quanto do quadro o dispositivo ocupa. O campo de visão define a perspectiva: um ângulo aberto exagera a profundidade como a câmera de um celular segurado de perto, enquanto um muito fechado parece quase ortográfico, como um render de produto ou uma ilustração isométrica.
Ajuste da tela: Preencher cobre a tela inteira e corta o excesso — ancore no topo para mostrar o início de um print longo de página inteira. Encaixar mostra a imagem toda com barras na cor que você escolher, e Esticar distorce a imagem para o formato da tela.
Reflexo do vidro: Um reflexo sutil da iluminação de estúdio no vidro, que faz a tela parecer vidro e não um adesivo. Desative para cores de tela perfeitamente planas.
Fundo e sombra: Exporte em fundo transparente, cor sólida, gradiente de duas cores ou um desfoque suave do seu próprio print. A sombra pode ficar no chão sob o dispositivo, ideal para um notebook sobre a mesa, ou na parede atrás dele, o que dá ao celular uma sombra flutuante.
Iluminação: O dispositivo é iluminado por um ambiente de estúdio suave, então metal e vidro ganham reflexos realistas. O ângulo da luz gira as luzes e os reflexos ao redor do dispositivo; a intensidade deixa a cena toda mais clara ou mais escura.

Tamanhos e formatos de exportação

A imagem é renderizada de novo no tamanho que você exporta — 1080, 2048 ou 4096 pixels no lado maior, ou qualquer tamanho personalizado de 256 a 8192 — em quadrado 1:1, retrato 4:5, paisagem 16:9, story 9:16 ou 4:3. Como é um render novo e não uma prévia ampliada, as bordas continuam nítidas em qualquer tamanho, seja qual for o tamanho da sua tela.

PNG é sem perdas e mantém a transparência, a escolha certa para um mockup que você vai colocar em um site, slide ou arquivo de design. WebP também mantém a transparência e é bem menor. JPEG não tem transparência, então um fundo transparente é preenchido com branco. Copiar coloca um PNG na área de transferência, pronto para colar no Figma, Keynote, Slack ou em um documento.

Dicas para mockups melhores

Exporte o print na resolução do próprio dispositivo — um print de celular de cerca de 1179 × 2556 ou uma captura de desktop de 2560 × 1600 — para a tela ficar nítida mesmo em um mockup 4K.
Um ângulo de três quartos com a luz do mesmo lado do giro fica mais natural; a vista de frente funciona melhor para páginas de lojas de apps.
Para o hero de uma landing page, use um PNG transparente e deixe o fundo da sua própria página aparecer.
Precisa cortar ou redimensionar o print antes? Use o cortador de imagem ou o redimensionador de imagem, e o redimensionador de imagens para redes sociais para adaptar o mockup pronto a cada plataforma.

Um gerador de mockup grátis que mantém seus designs privados

Telas de apps ainda não lançados e trabalhos de clientes não deveriam ser enviados para o servidor de outra pessoa. Aqui seu print é lido, desenhado e renderizado inteiramente no seu dispositivo com WebGL; ele nunca é enviado a lugar nenhum. Não há conta, nem marca d'água, nem limite de mockups. Suas configurações — dispositivo, ângulo, fundo e opções de exportação — ficam salvas neste navegador; a imagem não.

Perguntas frequentes

Este gerador de mockup de dispositivos é grátis?: Sim. Todos os dispositivos, cores, ângulos e tamanhos de exportação são grátis, sem cadastro e sem marca d'água.
Posso fazer um mockup de iPhone ou iPad com ele?: Você pode fazer um mockup de um celular ou tablet moderno parecido com os modelos populares de hoje, que é o que a maioria precisa para a prévia de um app ou site. Os modelos são genéricos e desenhados em código; não são imagens oficiais de produtos da Apple, e esta ferramenta não é afiliada à Apple.
Posso fazer um mockup de site ou de navegador?: Sim. Escolha Navegador para colocar um print do seu site em uma janela de navegador de desktop com barra de endereço — digite seu próprio domínio e escolha uma barra clara ou escura — ou escolha Desktop para mostrá-lo em um monitor grande com suporte.
Como faço um mockup em PNG transparente?: Defina o fundo como Transparente e o formato como PNG (ou WebP) e baixe. A sombra é mantida como pixels suaves e semitransparentes, então se mistura com o que estiver por baixo do mockup.
Como giro o dispositivo?: Use os controles X, Y e Z ou digite um ângulo exato de −180° a 180°. Você também pode arrastar o dispositivo na prévia — segure Shift para girá-lo no plano — ou clicar na prévia e usar as setas. As predefinições pulam para vistas comuns, e Redefinir volta ao ângulo padrão.
Qual resolução posso exportar?: 1080, 2048 ou 4096 pixels no lado maior, ou um tamanho personalizado de até 8192 pixels, em 1:1, 4:5, 16:9, 9:16 ou 4:3. O mockup é renderizado de novo nesse tamanho, então fica nítido em vez de ampliado.
Meu print fica cortado na tela. Como mostro ele inteiro?: Mude o Ajuste da tela de Preencher para Encaixar, que mostra a imagem toda com barras na cor que você escolher. Com Preencher, os botões de alinhamento decidem se o topo, o meio ou a base de um print alto é mantido.
Meu print é enviado para algum servidor?: Não. A cena 3D roda no seu navegador com WebGL, e a imagem nunca sai do seu dispositivo.
Aparece que o WebGL não está disponível. O que posso fazer?: A vista 3D precisa de WebGL. Ative a aceleração de hardware nas configurações do navegador, atualize os drivers de vídeo ou tente outro navegador; qualquer versão atual do Chrome, Edge, Firefox ou Safari é compatível.

Gerador de mockup de dispositivos 3D