Generador de mockups de dispositivos
Coloca cualquier captura de pantalla de una app o sitio web en un marco realista de móvil, tableta, portátil, monitor o ventana de navegador. Elige el color del marco, el fondo, el margen, la inclinación y el tamaño del lienzo, y descarga un PNG de alta resolución con fondo transparente o de color.
Última actualización:
Cómo usar Generador de mockups de dispositivos
- Añade tu captura de pantalla: suéltala en el recuadro, pégala con Ctrl+V o pulsa Elegir captura. Hasta entonces se muestra una pantalla de app de ejemplo.
- Elige un dispositivo: Móvil, Tableta, Portátil, Monitor o Navegador. Los móviles y las tabletas se pueden girar a horizontal.
- Dale estilo: elige un color de marco (o el tema y la dirección del navegador), un fondo, el margen, la inclinación y la sombra.
- Elige el lienzo: Auto se ajusta al dispositivo, o elige un tamaño cuadrado, vertical, panorámico o de historia para redes sociales.
- Descarga un PNG (admite fondo transparente) o JPG, o copia el mockup directamente en tu herramienta de diseño o chat.
Tamaños de pantalla de cada marco
Para un ajuste perfecto, haz la captura o redimensiónala con la misma proporción que la pantalla del dispositivo. Sirve cualquier múltiplo, por ejemplo 1170 × 2532 para el móvil (3× de 390 × 844).
| Marco | Pantalla (tamaño base) | Proporción | Origen típico |
|---|---|---|---|
| Móvil | 390 × 844 | 9 : 19.5 | Captura de un smartphone moderno |
| Tableta | 820 × 1180 | aprox. 2 : 3 | Captura de tableta, vertical |
| Portátil | 1280 × 800 | 16 : 10 | Navegador o ventana de app de escritorio |
| Monitor | 1280 × 720 | 16 : 9 | Captura de escritorio Full HD o 4K |
| Navegador | 1280 × cualquier altura | Se adapta a tu imagen | Captura de página web completa |
Consejos para mockups con buen aspecto
- Recorta las barras del sistema o mantenlas uniformes: una barra de estado limpia queda más profesional en un marco de móvil.
- Usa Rellenar pantalla, alinear arriba para capturas largas de apps o sitios web, así el encabezado sigue visible.
- Tiendas de apps y redes sociales: elige el lienzo Vertical 4:5 o Historia 9:16 con un fondo degradado y luego añade texto en tu herramienta de diseño.
- Páginas de aterrizaje: un PNG transparente con una sombra suave queda natural sobre el fondo de cualquier sección.
- Una ligera inclinación de 4–8° añade profundidad sin dificultar la lectura de la pantalla.
- Nitidez Retina: exporta a 2× o 3× y reduce la imagen en tu diseño.
Preguntas frecuentes
¿Qué tamaño de captura funciona mejor para cada dispositivo?
Usa una captura con la misma forma que la pantalla del dispositivo para que no se recorte nada: unos 390 × 844 (o cualquier proporción 9:19.5) para el móvil, 820 × 1180 para la tableta, 1280 × 800 (16:10) para el portátil y 1280 × 720 (16:9) para el monitor. La ventana del navegador adapta su altura a cualquier captura. El tamaño y la proporción de la pantalla del dispositivo seleccionado se muestran debajo de la vista previa.
¿Qué pasa si mi captura tiene otra forma?
Con Rellenar pantalla, alinear arriba, la captura llena la pantalla y se recorta la parte inferior, lo que va bien para páginas largas con desplazamiento. Rellenar pantalla, centrado recorta por igual por ambos lados, y Mostrar imagen completa encaja toda la captura dentro de la pantalla con barras alrededor.
¿Puedo descargar un mockup con fondo transparente?
Sí. Elige la muestra de fondo Transparente a cuadros y descarga en PNG. El dispositivo y su sombra se conservan con transparencia real, listos para colocar en un sitio web, una diapositiva o un gráfico para la tienda de apps.
¿Qué resolución tienen los mockups?
A 2× (el valor predeterminado) un mockup de móvil mide aproximadamente 900 × 1900 píxeles y uno de portátil unos 3500 × 2400 píxeles, según el margen y el lienzo. Elige 3× para imprimir o 1× para imágenes web pequeñas. La salida está limitada a 6000 píxeles por lado.
¿Son imágenes reales de dispositivos de marca?
No. Los marcos se dibujan desde cero con formas simples para que parezcan dispositivos modernos genéricos. Puedes usarlos libremente en tu marketing, presentaciones, portafolios y capturas para tiendas de apps.
¿Se sube mi captura de pantalla?
No. El mockup se dibuja en tu navegador con la API Canvas. Tu captura nunca sale de tu dispositivo, lo que lo hace seguro para apps sin publicar y paneles privados.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.