Generador de mockups de capturas
Coloca una captura dentro de una ventana de navegador, ventana de app, móvil, tableta o portátil con fondo degradado o sólido y sombra. Descarga un PNG.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
¿Qué es Mockup de capturas?
La herramienta Mockup de capturas enmarca tu captura en un dispositivo o una ventana genéricos y limpios: una ventana de navegador clara u oscura con tu URL en la barra de direcciones, una ventana de aplicación sencilla, un teléfono, una tableta o un portátil. Añade un fondo degradado, sólido o transparente, relleno y una sombra, y exporta un PNG listo para landing pages, documentación o publicaciones en redes.
Cómo usar Mockup de capturas
- Suelta, elige o pega una captura.
- Elige un Marco y, en los marcos de navegador, escribe el Texto de la barra de direcciones.
- Elige el Fondo (degradado, color sólido o transparente), sus colores, el Relleno y la Sombra.
- Descarga el mockup en PNG.
Ejemplo
Captura de 40×20, marco Ventana de navegador (clara), relleno 0, fondo transparente
40×64 PNG: a 44 px title bar with window dots and address bar above the screenshot
Cuándo usar Mockup de capturas
Úsalo para que las capturas luzcan pulidas en páginas de producto, archivos README, changelogs, presentaciones o tuits. Para renders fotorrealistas de dispositivos o mockups en perspectiva, usa una herramienta de diseño dedicada.
Cómo funciona Mockup de capturas
Todo se dibuja en un canvas. Las ventanas de navegador y de aplicación se dimensionan según la captura (se añade encima una barra de título, con tamaños escalados al ancho de la captura), así que la captura mantiene su resolución completa. Los marcos de teléfono, tableta y portátil usan proporciones de pantalla fijas (19,5:9, 4:3 y 16:10): la captura se escala al ancho de la pantalla y se dibuja desde arriba, recortando lo que sobra. Los marcos son formas genéricas sencillas, no réplicas de dispositivos de marcas concretas.
Casos de Uso Comunes
- Mostrar la captura de una app web en una landing page.
- Añadir un marco de navegador a las capturas de la documentación.
- Crear un mockup de móvil de una web móvil para redes sociales.
- Hacer imágenes de changelog coherentes con un fondo degradado de marca.
Nota de Seguridad
Las imágenes se decodifican, procesan y codifican en local en tu navegador con la API Canvas. No se sube nada a ningún servidor.
Preguntas Frecuentes
¿Se redimensionará mi captura?
En los marcos de navegador y de aplicación mantiene su tamaño original. En los de teléfono, tableta y portátil se escala al ancho de la pantalla y se recorta por abajo si es más alta que la pantalla.
¿Puedo obtener un fondo transparente?
Sí, elige Transparente como fondo; el PNG conserva la transparencia alrededor del marco y la sombra.
¿Son modelos de dispositivos reales?
No. Los marcos son diseños neutros y genéricos para poder usarlos libremente sin problemas de marcas registradas.