polyshGenerador de marcos de navegador
Muestra la captura de una página web dentro de una ventana de navegador realista.
- Funciona en tu navegador
- Sin subidas
- Sin cuenta
Cargando tu herramienta del navegador…
Qué hace Generador de marcos de navegador
Meter la captura de un sitio web en una ventana de navegador indica de un vistazo que es una página web y le da un borde limpio. Elige “Chrome” para una barra de pestañas y una barra de direcciones, “Safari” para una barra de herramientas fina con el campo de dirección centrado, o “Minimalista” para solo tres puntos grises de ventana y una pequeña píldora redondeada de dirección.
La “Apariencia” cambia entre un marco claro y uno oscuro para que coincida con tu captura. “Dirección”, en “Más opciones”, fija la URL que se muestra en la barra, como el dominio real de tu producto. Por defecto, el marco va sobre un degradado Arena con margen, esquinas redondeadas y sombra. Las apps de escritorio quedan mejor en el Mockup de ventana de Mac.
Ejemplo
Eliges
Una captura de 1440 × 900 px Navegador: Safari, Apariencia: Claro
Descarga
screenshot-browser-mockup.png 1584 × 1096 px: una barra de herramientas de Safari de 52 px sobre la captura, 72 px de margen Arena
Las barras de herramientas miden 82 px en Chrome, 52 px en Safari y 38 px en Mínimo en una imagen de 1440 px de ancho, y crecen en capturas más anchas.
Cómo usar Generador de marcos de navegador
- Usa “Elegir archivo” o pega una captura de la página web, sin la barra de herramientas del propio navegador.
- Elige “Navegador”, “Apariencia” y “Fondo”; escribe la URL en “Dirección”, en “Más opciones”, y en Chrome también el “Título de la pestaña”.
- Haz clic en “Descargar .png”.
Conviene saber
- El título de la pestaña, en “Más opciones”, solo aparece en el estilo Chrome. Safari y Mínimo no tienen barra de pestañas.
- Las URL largas se acortan con puntos suspensivos para que quepan en la barra de direcciones.
- Recorta primero la barra de herramientas real de tu navegador con el Recortador de capturas de pantalla; si no, el mockup muestra dos barras.
Preguntas sobre Generador de marcos de navegador
¿Cómo pongo una captura dentro de una ventana de navegador?
Haz una captura solo del contenido de la página, cárgala aquí y elige Chrome, Safari o Mínimo. La barra de herramientas del navegador se dibuja encima a la escala correcta, y toda la ventana se coloca sobre un fondo.
¿Uso un mockup de Chrome o de Safari?
Piensa en tu público: Chrome para la mayoría de los productos web y B2B, Safari para públicos centrados en Mac o en diseño. Mínimo funciona cuando no quieres el aspecto de ninguna de las dos marcas y solo necesitas insinuar un navegador.
¿El mockup funciona con capturas en modo oscuro?
Sí. Pon la “Apariencia” en “Oscuro” para que la barra de herramientas use tonos gris oscuro que encajen con una interfaz oscura. Una barra clara sobre una página oscura parece un error.