¿Este generador de mockups de dispositivos es gratis?

Sí. Todos los dispositivos, colores, ángulos y tamaños de exportación son gratis, sin registro y sin marca de agua.

¿Puedo hacer un mockup de iPhone o iPad?

Puedes hacer un mockup de un móvil o una tablet modernos que se parecen a los modelos populares de hoy, que es lo que la mayoría necesita para la vista previa de una app o un sitio web. Los modelos son genéricos y están dibujados en código; no son imágenes oficiales de productos de Apple, y esta herramienta no está afiliada a Apple.

¿Puedo hacer un mockup de sitio web o de navegador?

Sí. Elige Navegador para colocar una captura de tu sitio en una ventana de navegador de escritorio con barra de direcciones (escribe tu propio dominio y elige una barra clara u oscura), o elige Escritorio para mostrarlo en una pantalla grande sobre un soporte.

¿Cómo consigo un mockup en PNG transparente?

Pon el fondo en Transparente y el formato en PNG (o WebP), y descarga. La sombra se conserva como píxeles suaves y semitransparentes, así que se funde con lo que haya debajo del mockup.

¿Cómo giro el dispositivo?

Usa los controles X, Y y Z o escribe un ángulo exacto de −180° a 180°. También puedes arrastrar el dispositivo en la vista previa (mantén Shift para hacerlo girar) o hacer clic en la vista previa y usar las teclas de flecha. Los ajustes rápidos saltan a vistas comunes, y Restablecer vuelve al ángulo predeterminado.

¿Qué resolución puedo exportar?

1080, 2048 o 4096 píxeles en el lado largo, o un tamaño personalizado de hasta 8192 píxeles, en 1:1, 4:5, 16:9, 9:16 o 4:3. El mockup se renderiza de nuevo a ese tamaño, así que queda nítido en lugar de ampliado.

Mi captura se corta en la pantalla. ¿Cómo la muestro entera?

Cambia el Ajuste de pantalla de Rellenar a Ajustar, que muestra la imagen completa con barras del color que elijas. Con Rellenar, los botones de alineación deciden si se conserva la parte superior, central o inferior de una captura alta.

¿Se sube mi captura?

No. La escena 3D se ejecuta en tu navegador con WebGL, y la imagen nunca sale de tu dispositivo.

Dice que WebGL no está disponible. ¿Qué puedo hacer?

La vista 3D necesita WebGL. Activa la aceleración por hardware en la configuración del navegador, actualiza los controladores gráficos o prueba otro navegador; cualquier versión actual de Chrome, Edge, Firefox o Safari lo admite.

Generador de Mockups 3D: Móvil y Portátil

Tu captura en un dispositivo 3D realista, desde cualquier ángulo

Suelta una captura de pantalla o un diseño y aparecerá en la pantalla de un móvil, tablet, portátil, monitor de escritorio o ventana de navegador en 3D. Gira el dispositivo en los ejes X, Y y Z con controles deslizantes, ángulos escritos, las teclas de flecha o arrastrándolo; elige un color de dispositivo, un fondo y una sombra suave; y exporta un PNG, JPEG o WebP nítido de hasta 8192 píxeles, con fondo transparente si quieres colocarlo en tu propia diapositiva o landing page. Los dispositivos están modelados en código y se renderizan con WebGL en tu navegador, así que no se sube nada y no hay marca de agua.

Cómo hacer un mockup de dispositivo

1Suelta una captura en la página, elige un archivo o pégala con Ctrl/⌘ + V. Mientras tanto, se muestra una pantalla de app de ejemplo.
2Elige Móvil, Tablet, Portátil, Escritorio o Navegador. Elige un color o, para la ventana del navegador, una barra clara u oscura y la dirección que muestra. Los móviles y tablets se pueden poner en horizontal; la tapa del portátil se abre en cualquier ángulo.
3Elige una vista en la barra sobre la vista previa — Hero ¾, Frontal, Inclinado izq./der., Isométrica o Plano cenital — y ajústala en la pestaña Vista, o arrastra el dispositivo en la vista previa.
4Configura el fondo (transparente, sólido, degradado o un desenfoque de tu propia captura), la sombra y la dirección de la luz.
5Elige la relación de aspecto, el tamaño y el formato, y descarga la imagen o cópiala al portapapeles.

Mockups 3D de móvil, tablet, portátil, escritorio y navegador

Las plantillas de mockup planas te dan un único ángulo fijo. Aquí el dispositivo es un modelo 3D real, así que puedes mostrarlo de frente para una captura al estilo App Store, en un dramático ángulo de tres cuartos para una imagen hero o tumbado para una publicación en redes, a partir de la misma imagen y en segundos.

El mockup de móvil tiene una pantalla moderna de borde a borde con un recorte de cámara en forma de píldora, un marco de metal pulido y una cámara de triple lente en la parte trasera. El mockup de tablet tiene biseles finos y uniformes al estilo de las tablets actuales tipo iPad, y el mockup de portátil tiene teclado completo, trackpad y una tapa que se abre desde cerrada hasta totalmente reclinada. Son diseños genéricos que se parecen a los dispositivos populares de hoy, útiles donde la gente busca un mockup de iPhone, de iPad o de MacBook, pero no son imágenes oficiales de producto y esta herramienta no está afiliada a Apple ni a ningún otro fabricante.

Mockups de sitios web en una ventana de navegador

Para un sitio o una aplicación web, elige Navegador: tu captura ocupa el área de la página de una ventana de navegador de escritorio limpia, con botones de ventana y una barra de direcciones que muestra el dominio que escribas. La barra viene en claro y oscuro para combinar con tu diseño, y la ventana puede flotar en cualquier ángulo como los dispositivos, o mirar de frente para un mockup web plano y nítido.

¿Prefieres hardware real? Escritorio coloca la página en una pantalla grande con biseles finos sobre un soporte de aluminio, como se ve un sitio en un monitor de estudio. Con Rellenar y Arriba, una captura larga de página completa muestra su primera pantalla, tal como la ve un visitante.

Controles

Rotación X, Y y Z: X inclina el dispositivo hacia ti o lejos de ti, Y lo gira a izquierda y derecha, Z lo hace girar en el plano de la imagen. Cada eje va de −180° a 180° y acepta valores escritos. En la vista previa, arrastra para girar en X e Y, mantén <kbd>Shift</kbd> mientras arrastras para girar en Z, o enfoca la vista previa y usa las teclas de flecha (<kbd>Shift</kbd> para pasos de 15°), <kbd>Q</kbd>/<kbd>E</kbd> para Z y <kbd>R</kbd> para restablecer.
Zoom y campo de visión: El zoom cambia cuánto del encuadre ocupa el dispositivo. El campo de visión define la perspectiva: un gran angular exagera la profundidad como la cámara de un móvil sostenido cerca, mientras que uno muy estrecho parece casi ortográfico, como un render de producto o una ilustración isométrica.
Ajuste de pantalla: Rellenar cubre toda la pantalla y recorta lo que sobra; ánclalo arriba para mostrar el inicio de una captura larga de página completa. Ajustar muestra la imagen entera con barras del color que elijas, y Estirar la deforma a la forma de la pantalla.
Reflejo del cristal: Un reflejo sutil de la iluminación de estudio en el cristal, que hace que la pantalla se perciba como vidrio y no como una pegatina. Desactívalo para colores de pantalla perfectamente planos.
Fondo y sombra: Exporta sobre un fondo transparente, un color sólido, un degradado de dos colores o un desenfoque suave de tu propia captura. La sombra puede caer en el suelo bajo el dispositivo, ideal para un portátil sobre una mesa, o en la pared de detrás, lo que da a un móvil una sombra flotante.
Iluminación: El dispositivo está iluminado por un entorno de estudio suave, así que el metal y el cristal captan reflejos realistas. El ángulo de la luz mueve las luces y los reflejos alrededor del dispositivo; la intensidad hace toda la escena más clara o más oscura.

Tamaños y formatos de exportación

La imagen se renderiza de nuevo al tamaño que exportas: 1080, 2048 o 4096 píxeles en el lado largo, o cualquier tamaño personalizado de 256 a 8192, en cuadrado 1:1, vertical 4:5, horizontal 16:9, historia 9:16 o 4:3. Como es un render nuevo y no una vista previa ampliada, los bordes se mantienen nítidos en cualquier tamaño, sea cual sea el tamaño de tu pantalla.

PNG no tiene pérdida y conserva la transparencia, la opción correcta para un mockup que vas a colocar en un sitio web, una diapositiva o un archivo de diseño. WebP también conserva la transparencia y pesa mucho menos. JPEG no tiene transparencia, así que un fondo transparente se rellena de blanco. Copiar pone un PNG en el portapapeles, listo para pegar en Figma, Keynote, Slack o un documento.

Consejos para mejores mockups

Exporta la captura a la resolución propia del dispositivo, como una captura de móvil de unos 1179 × 2556 o una de escritorio de 2560 × 1600, para que la pantalla se vea nítida incluso en un mockup 4K.
Un ángulo de tres cuartos con la luz del mismo lado del giro es lo más natural; una vista frontal funciona mejor para fichas de tiendas de apps.
Para el hero de una landing page, usa un PNG transparente y deja que se vea el fondo de tu propia página.
¿Necesitas recortar o redimensionar la captura primero? Usa el recortador de imágenes o el redimensionador de imágenes, y el redimensionador de imágenes para redes sociales para adaptar el mockup terminado a cada plataforma.

Un generador de mockups gratis que mantiene tus diseños en privado

Las pantallas de apps sin lanzar y los trabajos de clientes no deberían subirse al servidor de otro. Aquí tu captura se lee, se dibuja y se renderiza por completo en tu dispositivo con WebGL; nunca se envía a ninguna parte. No hay cuenta, ni marca de agua, ni límite de mockups. Tus ajustes (dispositivo, ángulo, fondo y opciones de exportación) se recuerdan en este navegador; la imagen no.

Preguntas frecuentes

¿Este generador de mockups de dispositivos es gratis?: Sí. Todos los dispositivos, colores, ángulos y tamaños de exportación son gratis, sin registro y sin marca de agua.
¿Puedo hacer un mockup de iPhone o iPad?: Puedes hacer un mockup de un móvil o una tablet modernos que se parecen a los modelos populares de hoy, que es lo que la mayoría necesita para la vista previa de una app o un sitio web. Los modelos son genéricos y están dibujados en código; no son imágenes oficiales de productos de Apple, y esta herramienta no está afiliada a Apple.
¿Puedo hacer un mockup de sitio web o de navegador?: Sí. Elige Navegador para colocar una captura de tu sitio en una ventana de navegador de escritorio con barra de direcciones (escribe tu propio dominio y elige una barra clara u oscura), o elige Escritorio para mostrarlo en una pantalla grande sobre un soporte.
¿Cómo consigo un mockup en PNG transparente?: Pon el fondo en Transparente y el formato en PNG (o WebP), y descarga. La sombra se conserva como píxeles suaves y semitransparentes, así que se funde con lo que haya debajo del mockup.
¿Cómo giro el dispositivo?: Usa los controles X, Y y Z o escribe un ángulo exacto de −180° a 180°. También puedes arrastrar el dispositivo en la vista previa (mantén Shift para hacerlo girar) o hacer clic en la vista previa y usar las teclas de flecha. Los ajustes rápidos saltan a vistas comunes, y Restablecer vuelve al ángulo predeterminado.
¿Qué resolución puedo exportar?: 1080, 2048 o 4096 píxeles en el lado largo, o un tamaño personalizado de hasta 8192 píxeles, en 1:1, 4:5, 16:9, 9:16 o 4:3. El mockup se renderiza de nuevo a ese tamaño, así que queda nítido en lugar de ampliado.
Mi captura se corta en la pantalla. ¿Cómo la muestro entera?: Cambia el Ajuste de pantalla de Rellenar a Ajustar, que muestra la imagen completa con barras del color que elijas. Con Rellenar, los botones de alineación deciden si se conserva la parte superior, central o inferior de una captura alta.
¿Se sube mi captura?: No. La escena 3D se ejecuta en tu navegador con WebGL, y la imagen nunca sale de tu dispositivo.
Dice que WebGL no está disponible. ¿Qué puedo hacer?: La vista 3D necesita WebGL. Activa la aceleración por hardware en la configuración del navegador, actualiza los controladores gráficos o prueba otro navegador; cualquier versión actual de Chrome, Edge, Firefox o Safari lo admite.

Generador de mockups de dispositivos 3D