Generador de Mockup de Celular
Un generador de mockup de celular coloca cualquier captura de pantalla dentro de un marco de equipo realista, convirtiendo una imagen simple en un visual pulido y listo para presentar en segundos. Es ideal para mostrar una app, un sitio web o un concepto de diseño sin abrir Photoshop ni buscar un plugin de Figma.
Elige entre cinco tipos de equipo — iPhone, Android, iPad, MacBook y un Monitor de escritorio — cada uno dibujado con proporciones exactas y detalles fieles como el Dynamic Island, la cámara perforada, el notch de la cámara web y el soporte del portátil o del monitor. Agrega un fondo sólido, degradado o transparente, ajusta el margen y exporta un PNG nítido.
Cómo usar el Generador de Mockup de Celular
Sube tu captura
Arrastra y suelta una imagen sobre el área de carga, haz clic para explorar o presiona Ctrl+V (Cmd+V en Mac) para pegar desde el portapapeles. Se admiten PNG, JPG y WebP.
Elige un equipo
Selecciona iPhone, Android, iPad, MacBook o Monitor en la barra de herramientas. Tu captura se ajusta automáticamente a la pantalla y luego eliges un color de equipo entre las muestras que cambian según el equipo.
Estiliza el fondo
Cambia entre un color Sólido (selector más ocho ajustes predefinidos), un Degradado (ocho ajustes) o Ninguno para exportar con transparencia. Luego arrastra el control de Margen para definir el espacio alrededor del equipo.
Descarga el PNG
Haz clic en Descargar PNG para guardar un mockup de alta resolución generado a escala 3x, listo para fichas de la App Store, presentaciones, publicaciones en redes o tu portafolio.
Funciones
Cinco tipos de equipo
Enmarca tu captura en un iPhone, celular Android, iPad, MacBook o monitor de escritorio, cada uno con proporciones realistas.
Detalles fieles del equipo
Dynamic Island, cámara perforada de Android, punto de cámara del iPad, notch y bisagra de la cámara web del MacBook, y cuello y base del monitor.
Colores por equipo
Cada equipo ofrece sus propias muestras de color — negro, plateado, azul, dorado, blanco, verde, medianoche y gris espacial — para combinar con tu marca.
Fondos de color sólido
Usa el selector de color para cualquier tono o toca uno de los ocho ajustes predefinidos, del índigo y celeste al esmeralda, ámbar y pizarra.
Fondos degradados
Elige entre ocho degradados predefinidos — índigo-púrpura, atardecer, océano, esmeralda y más — para visuales de marketing que llaman la atención.
Exportación transparente
Elige el fondo Ninguno para exportar un PNG transparente, ideal para superponer en diapositivas o componer con otros diseños.
Margen ajustable
Desliza el control de margen para agregar o quitar espacio alrededor del marco del equipo, desde borde a borde hasta márgenes amplios.
Ajuste inteligente de imagen
Las capturas se escalan y centran con recorte de ajuste, así que cualquier proporción llena la pantalla del equipo de forma limpia.
PNG de alta resolución
Las exportaciones se generan a escala 3x para un resultado nítido apto para pantallas retina, capturas de la App Store e impresión.
Arrastra, haz clic o pega
Agrega una captura como prefieras — arrastra y suelta un archivo, haz clic para explorar o pega directamente desde el portapapeles.
Preguntas frecuentes
¿Cómo pongo una captura en un mockup de celular?
Sube tu captura arrastrándola sobre el área de carga, haciendo clic para explorar o pegando con Ctrl+V. Luego elige iPhone o Android, y la imagen se ajusta automáticamente dentro del marco del equipo. Elige un color y un fondo, y descarga el PNG.
¿Qué equipos admite?
Cinco tipos de equipo: iPhone (con Dynamic Island), celular Android (cámara perforada), iPad, MacBook y un monitor de escritorio. Cada marco se dibuja de forma programática con proporciones exactas y detalles propios de cada equipo.
¿Qué formatos de imagen puedo subir?
Funcionan imágenes PNG, JPG y WebP. Cualquier captura o archivo de imagen estándar de tu equipo o del portapapeles puede colocarse dentro de un mockup.
¿Puedo exportar un mockup en PNG transparente?
Sí. Selecciona la opción de fondo Ninguno para exportar un PNG con transparencia total. Es útil cuando quieres colocar el mockup sobre diapositivas, otros diseños o un fondo personalizado.
¿Qué resolución tiene la imagen exportada?
El PNG se genera a 3x la resolución de la vista previa, produciendo imágenes nítidas aptas para pantallas retina, capturas de la App Store e impresión de alta calidad. El tamaño exacto en píxeles depende del equipo que elijas y del margen que definas.
¿Por qué se ve recortada mi captura en el equipo?
La herramienta usa un escalado de ajuste para llenar por completo la pantalla del equipo, así que si tu captura tiene una proporción distinta a la del equipo, algunos bordes se recortan para mantener un encaje limpio. Para mejores resultados, usa una captura cuya proporción coincida aproximadamente con la del equipo elegido.
¿Mis imágenes se suben a un servidor?
No. Todo se ejecuta localmente en tu navegador con la API HTML Canvas. Tus imágenes nunca salen de tu equipo y no se almacenan ni se transmiten a ningún lado.
¿Puedo usar los mockups con fines comerciales?
Sí. Los marcos de los equipos son formas estilizadas dibujadas con código — no fotografías ni recursos con marca registrada — así que puedes usar los mockups generados con total libertad en proyectos personales y comerciales.
Aún no hay comentarios. ¡Sé el primero en comentar!