Gerador de Mockup de Dispositivo

Gerador de Mockup de Dispositivo

O Gerador de Mockup de Dispositivo coloca uma captura de tela em uma moldura real de dispositivo: um iPhone com Dynamic Island, um celular Android, um iPad, um MacBook Pro, uma janela de navegador com faixa de abas e barra de endereço, ou um monitor de mesa com suporte. Cada moldura é desenhada nas proporções verdadeiras da tela daquele dispositivo, então o que você exporta é o que a captura realmente pareceria no hardware. A moldura é pintada em um canvas na aba do seu próprio navegador, o que significa que a captura de um app ainda não lançado ou de um painel interno nunca sai da sua máquina.

As três molduras que as pessoas mais usam

Uma moldura é um atalho para o leitor: ela diz num relance se ele está vendo um app de celular, uma página da web ou uma ferramenta de desktop, antes mesmo de ler uma só palavra dentro da captura.

O medidor de recorte: o que a maioria das ferramentas de mockup deixa de fora

A tela de um dispositivo tem um formato fixo. A tela de um iPhone tem 1179 por 2556, o que é cerca de 9:19,5, e quase nada que você captura tem exatamente isso. A maioria dos geradores de mockup amplia a imagem em silêncio até cobrir a tela e descarta o que ultrapassa a borda, então você só descobre que o rodapé da tabela de preços sumiu depois de já ter publicado.

Esta ferramenta mede isso. No modo Preencher tela o medidor abaixo dos botões de ajuste informa a porcentagem exata da sua captura que a moldura está escondendo, e a barra passa de verde para vermelho conforme esse número sobe. Se estiver mais alto do que você gostaria, há duas saídas:

• Panorâmica. O controle move a janela visível ao longo do eixo que está transbordando, para você manter o cabeçalho, o meio ou o rodapé em vez de aceitar um recorte centralizado.
• Ajustar inteira. A captura é reduzida até que cada pixel dela fique dentro da tela, e as faixas restantes são preenchidas com uma cor que você escolhe. Nada é recortado, ao custo de faixas visíveis em cima e embaixo, ou à esquerda e à direita.

Uma boa regra: abaixo de cerca de 8% recortado passa despercebido para o leitor, de 8% a 25% está bem se você deslizou para manter o assunto, e acima de 25% você deve refazer a captura na proporção do dispositivo ou mudar para Ajustar inteira.

Qual moldura, e em qual resolução

Capturas nesses tamanhos de pixel ou maiores permanecem nítidas em qualquer tamanho de exportação. As menores são ampliadas, e a primeira coisa a ceder é o anti-aliasing do texto pequeno dentro da captura.

Como usar o Gerador de Mockup de Dispositivo: passo a passo

1. Adicione sua captura de tela: solte um PNG ou JPG no painel de envio, clique para procurar ou pressione Ctrl+V para colar uma direto da área de transferência.
2. Escolha uma moldura de dispositivo: iPhone, Android, iPad, MacBook, Navegador ou Monitor. As molduras de celular e tablet também alternam entre retrato e paisagem.
3. Confira o medidor de recorte: se estiver escondendo demais, arraste o controle de panorâmica ou mude para Ajustar inteira para que nada se perca.
4. Estilize a moldura: defina a cor da moldura, o fundo, o preenchimento, a sombra e o reflexo. Na moldura de navegador, digite o próprio título da aba e o endereço.
5. Exporte: escolha um tamanho de exportação e use Baixar PNG para salvar o mockup ou Copiar imagem para colá-lo em uma publicação.

Dicas práticas

• Faça a captura na proporção do dispositivo quando puder. Uma janela de navegador redimensionada para 1179 por 2556 antes da captura faz o medidor de recorte ler 0% e o mockup ficar pixel-perfect.
• Use a moldura de navegador quando o URL importa. Digitar o seu próprio domínio na barra de endereço coloca a sua marca na imagem sem precisar de uma legenda.
• Mantenha o preenchimento entre 6% e 12%. Menos e o dispositivo encosta na borda da publicação; mais e a tela fica ilegível no feed.
• Combine a cor da moldura com a captura. Preto-espacial sob uma captura em modo escuro, Prata ou Titânio sob uma clara; o chrome do navegador segue a mesma escolha automaticamente.
• Diminua o reflexo em telas cheias de texto. Um brilho sutil se lê como vidro; um forte se lê como foto de banco de imagens e esconde o seu texto.
• Exporte transparente para slides. O fundo NENHUM entrega um dispositivo flutuando com a sua sombra, pronto para colocar em qualquer apresentação ou seção de destaque.

Privacidade

Tudo acontece na aba do navegador pela API de canvas HTML5. Sua captura é lida a partir de um URL de objeto local, desenhada na moldura e convertida em PNG pelo próprio navegador. Nenhuma imagem é enviada, armazenada ou transmitida, e depois que a página carregou a ferramenta continua funcionando sem nenhuma conexão de rede.

Perguntas frequentes

A minha captura de tela é enviada para um servidor?

Não. As molduras dos dispositivos são desenhadas com a API de canvas HTML5 na aba do seu próprio navegador, e a captura é lida a partir de um URL de objeto local. Nada é enviado a lugar nenhum, então mockups de apps ainda não lançados, painéis internos ou trabalho de clientes permanecem na sua máquina. Depois que a página carregou, a ferramenta continua funcionando sem nenhuma conexão de rede.

Quais molduras de dispositivo estão disponíveis?

Seis: um iPhone com Dynamic Island, um celular Android com câmera punch-hole, um iPad Pro, um MacBook Pro com entalhe e base, uma janela de navegador com faixa de abas e barra de endereço, e um monitor de mesa com suporte. Cada moldura usa as proporções reais da tela daquele dispositivo, então um mockup feito aqui combina com o que a captura pareceria no hardware.

Minha captura de tela não tem o mesmo formato da tela do dispositivo. O que acontece?

É para isso que serve o medidor de recorte. Preencher tela amplia a captura até cobrir a tela inteira, o que recorta o que ultrapassa a borda, e o medidor informa a porcentagem exata que fica escondida. O controle de panorâmica então move a janela visível ao longo do eixo recortado para você manter a parte importante. Ajustar inteira reduz a captura até que ela caiba toda na tela e preenche as faixas restantes com uma cor que você escolhe, então nada se perde.

Qual resolução minha captura de tela deve ter?

Combine com o dispositivo que você está emoldurando: 1179 por 2556 para o iPhone, 1080 por 2400 para o celular Android, 1668 por 2388 para o iPad, 3024 por 1964 para o MacBook, 1440 por 900 para a janela de navegador e 2560 por 1440 para o monitor. Qualquer coisa desse tamanho ou maior permanece nítida. Capturas menores ainda funcionam, mas são ampliadas e as bordas suaves ficam visíveis em volta do texto.

Posso exportar o dispositivo em um fundo transparente?

Sim. Escolha a amostra de fundo NENHUM e o preenchimento ao redor do dispositivo é exportado como alfa em vez de cor, enquanto a moldura, a tela e a sombra projetada ainda são desenhadas. Baixar PNG preserva essa transparência, que é o que você quer quando o mockup vai para um slide, uma seção de destaque ou uma página cujo próprio fundo deve aparecer por trás.

Por que a moldura do navegador fica escura?

O chrome do navegador segue a cor da moldura que você escolhe. Escolha Preto-espacial e a faixa de abas, a barra de ferramentas e a barra de endereço passam para um tema escuro para o mockup combinar com uma captura em modo escuro; qualquer uma das cores de moldura mais claras dá o tema claro. O título da aba e o endereço são campos de texto simples, então você pode colocar o nome do seu produto e o domínio na imagem.

Ferramentas de imagem:

• Adicionar Linha à Imagem
• Adicionar Texto à Imagem
• ⬛ Calculadora de Proporção de Tela Novo
• Cortar Imagem em Círculo Novo
• Criador de Colagens
• Gerador de Ligue os Pontos
• Visualizador e Removedor de Dados EXIF Novo
• Inverter GIF
• Inverter Imagem
• Criador de GIF
• Ferramenta de Mosaico de Imagens
• Compressor de Imagem
• Cortador de Imagens
• Otimizador de Imagem
• Redimensionador de Imagens
• Rotacionador de Imagem
• Divisor de Imagens Popular
• Conversor de Imagem para Arte ASCII Novo
• Rastreador de Imagem para SVG Novo
• Gerador de Imagem Placeholder Lorem Picsum Novo
• OCR / Imagem para Texto Novo
• Calculadora de Tamanho de Impressão e Resolução (DPI/PPI) Popular
• Gerador de Imagem com Cantos Arredondados Novo
• Embelezador de Capturas de Tela Novo
• Gerador de Mockup de Dispositivo Novo
• Adicionar Sombra à Imagem Novo
• Adicionar Borda à Imagem Novo