Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Coloca uma captura de tela dentro de uma moldura de celular, tablet, notebook ou navegador e exporta um PNG em até três vezes o tamanho. As molduras são desenhadas em um canvas a partir de retângulos arredondados, e não são fotografias de nenhum produto, então nada aqui é marca registrada e a saída continua nítida em qualquer escala. A captura de tela nunca sai da aba.
Solte uma captura de tela
PNG, JPEG ou WebP. Tudo acontece nesta aba.
Prévia
As molduras são formas, não fotografias
Celular, tablet, notebook e janela do navegador são desenhados num canvas com alguns retângulos de cantos arredondados. Não são fotografias de nenhum produto e não carregam marca registrada, então dá para usar em qualquer lugar, e continuam nítidos em qualquer escala de exportação. As proporções de tela são as dos aparelhos de hoje — 19,5:9 num celular, 4:3 num tablet, 16:10 num notebook —, então quando a captura tem outra proporção “Preencher” corta o meio e “Mostrar tudo” deixa margens. A captura de uma página longa quase sempre pede “Alinhar ao topo”.
Diminua o PNG exportado com o compressor de PNG, e monte um card de compartilhamento com o gerador de imagem para redes sociais.
Como usar
Solte a captura de tela
PNG, JPEG ou WebP. A linha de estatísticas embaixo mostra a proporção da imagem contra a proporção da tela da moldura, que é o número que decide como vai a próxima escolha.
Escolha a moldura, depois como a imagem se encaixa nela
Cobrir recorta o meio para preencher a tela, conter mostra a imagem inteira com faixas, e alinhar ao topo é a opção para uma captura de página longa — mantém o topo da página e deixa o resto escorrer pela parte de baixo, que é o que uma captura de uma página rolável normalmente está tentando mostrar.
Defina o preenchimento e o fundo
O preenchimento é o que faz a captura parecer composta em vez de recortada. Fundo transparente é a opção para quando a imagem vai para um slide colorido ou uma página cujo fundo você não controla.
Exporte em 2×, a menos que saiba que precisa de outra coisa
A linha sob a prévia dá o tamanho exato de saída para a escala que você escolheu. 2× é o certo para uma tela retina ou um README; 3× é para impressão ou um slide grande, e o arquivo fica grande.
Perguntas frequentes
Isto é um iPhone? Um MacBook?
Não. São formas genéricas nas proporções que os dispositivos modernos usam — 19,5:9 para um celular, 4:3 para um tablet, 16:10 para um notebook. Não há logotipo, nem fotografia de produto, nem contorno protegido por marca registrada, o que é deliberado: um mockup com um dispositivo real dentro normalmente não pode ser usado em marketing sem permissão.
Minha captura foi recortada de um jeito que eu não queria.
A linha de estatísticas mostra a sua proporção e a da moldura. Quando elas diferem, cobrir precisa recortar alguma coisa. Mude para conter para ver a imagem inteira com faixas, ou para alinhar ao topo se a parte importante está em cima, ou tire a captura de novo na proporção da moldura.
Posso colocar várias telas lado a lado?
Aqui, não — uma imagem, uma moldura. Compor uma cena com três dispositivos é trabalho de layout, e fazê-lo mal é pior do que não fazer. Exporte cada um em fundo transparente e organize-os no que você já estiver usando para o slide.
Minha captura de tela é enviada a algum servidor?
Não. Ela é decodificada em um ImageBitmap e desenhada em um canvas nesta aba, e o PNG é produzido pelo próprio canvas. Nada passa pela rede, que é o ponto para uma captura de tela de um produto não lançado.
Pode receber de
Imagem placeholder
Placeholder Image
Gera um placeholder liso ou degradê em qualquer tamanho, com as dimensões desenhadas nele.
Anotar captura de tela
Screenshot Annotator
Desenha setas, caixas, passos numerados e manchas de desfoque numa captura de tela e exporta uma imagem achatada.
Borda e margem
Border & Padding
Adiciona uma borda lisa, degradê ou arredondada e margem ao redor de uma imagem, ou a preenche até uma proporção desejada.
Screenshot de código
Code Screenshot
Renderiza um trecho de código como imagem com destaque de sintaxe, moldura de janela e tema escolhido.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Borda e margem
Border & Padding
Adiciona uma borda lisa, degradê ou arredondada e margem ao redor de uma imagem, ou a preenche até uma proporção desejada.
Gerador de imagem para redes sociais
Social Card Generator
Compõe uma imagem de compartilhamento de 1200×630 a partir de título, subtítulo, linha de marca e logotipo opcional num modelo escolhido, e escreve as meta tags que a acompanham.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Anotar captura de tela
Screenshot Annotator
Desenha setas, caixas, passos numerados e manchas de desfoque numa captura de tela e exporta uma imagem achatada.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Calculadora de proporção
Aspect Ratio Calculator
Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.