A Polysh para agentes está em acesso antecipado. Seu agente de programação grava a demo, e a Polysh finaliza. Entrar na lista de espera →

Gerador de moldura de navegador

Mostre a captura de tela de uma página web dentro de uma janela de navegador realista.

Carregando a ferramenta no navegador…

O que faz: Gerador de moldura de navegador

Colocar a captura de tela de um site dentro de uma janela de navegador mostra de cara que é uma página web e dá a ela uma borda limpa. Escolha Chrome para uma barra de abas e uma barra de endereço, Safari para uma barra de ferramentas fina com o campo de endereço centralizado ou Mínimo para só três pontos cinza de janela e uma pequena pílula de endereço arredondada.

Aparência alterna entre a moldura clara e a escura, para combinar com a sua captura de tela. Endereço, em Mais opções, define a URL exibida na barra, como o domínio real do seu produto. Por padrão, a moldura fica sobre um degradê Areia, com margem, cantos arredondados e sombra. Apps para desktop ficam melhores no Mockup de janela de Mac.

Exemplo

Você escolhe

Uma captura de tela de 1440 × 900 px
Navegador: Safari, Aparência: Claro

Você baixa

screenshot-browser-mockup.png
1584 × 1096 px: uma barra de ferramentas do Safari de 52 px acima da captura de tela, 72 px de margem Areia

As barras de ferramentas têm 82 px no Chrome, 52 px no Safari e 38 px no Mínimo em uma imagem de 1440 px de largura, e acompanham capturas de tela mais largas.

Como usar: Gerador de moldura de navegador

  1. Clique em Escolher arquivo ou cole uma captura de tela da página web, sem a barra de ferramentas do próprio navegador.
  2. Escolha Navegador, Aparência e Fundo; digite a URL em Endereço, em Mais opções, e, no Chrome, o Título da aba.
  3. Clique em Baixar .png.

Bom saber

  • O título da aba, em Mais opções, só aparece no estilo Chrome. Safari e Mínimo não têm barra de abas.
  • URLs longas são encurtadas com reticências para caber na barra de endereço.
  • Corte antes a barra de ferramentas real do seu navegador com o Recortador de capturas de tela, senão o mockup mostra duas barras.

Perguntas sobre Gerador de moldura de navegador

Como coloco uma captura de tela em uma janela de navegador?

Faça uma captura de tela só do conteúdo da página, carregue aqui e escolha Chrome, Safari ou Mínimo. A barra de ferramentas do navegador é desenhada acima na escala certa, e a janela inteira é colocada sobre um fundo.

Devo usar um mockup do Chrome ou do Safari?

Pense no seu público: Chrome para a maioria dos produtos web e B2B, Safari para públicos focados em Mac ou em design. Mínimo funciona quando você não quer o visual de nenhuma das duas marcas e só precisa sugerir um navegador.

O mockup funciona com capturas de tela no modo escuro?

Sim. Defina a Aparência como Escuro para a barra de ferramentas usar tons de cinza-escuro que combinam com uma interface escura. Uma barra clara acima de uma página escura parece um erro.