Generador de Mockups de Dispositivos

Generador de Mockups de Dispositivos

El Generador de Mockups de Dispositivos coloca una captura de pantalla en un marco de dispositivo real: un iPhone con Dynamic Island, un teléfono Android, un iPad, un MacBook Pro, una ventana de navegador con su barra de pestañas y barra de direcciones, o un monitor de escritorio sobre un soporte. Cada marco se dibuja con las proporciones reales de pantalla de ese dispositivo, de modo que lo que exportas es lo que se vería realmente la captura en el hardware. El marco se pinta en un canvas dentro de la pestaña de tu propio navegador, lo que significa que una captura de una app aún no publicada o de un panel interno nunca sale de tu máquina.

Los tres marcos que más se usan

Un marco es un atajo para quien lee: le dice de un vistazo si está mirando una app de teléfono, una página web o una herramienta de escritorio, antes de haber leído una sola palabra dentro de la captura.

El medidor de recorte: la parte que la mayoría de herramientas de mockup omiten

Una pantalla de dispositivo tiene una forma fija. La pantalla de un iPhone es 1179 por 2556, más o menos 9:19.5, y casi nada de lo que capturas es exactamente eso. La mayoría de generadores de mockups escala tu imagen en silencio hasta que cubre la pantalla y tira lo que sobresale del borde, así que te enteras de que falta la parte inferior de tu tabla de precios solo después de haberla publicado.

Esta herramienta lo mide. En el modo Llenar pantalla el medidor bajo los botones de ajuste indica el porcentaje exacto de tu captura que el marco está ocultando, y la barra pasa de verde a rojo a medida que ese número sube. Si es más alto de lo que te gusta, tienes dos salidas:

• Desplazar. El deslizador mueve la ventana visible a lo largo del eje que se desborda, de modo que puedes conservar la cabecera, el centro o el pie en lugar de aceptar un recorte centrado.
• Encajar todo. La captura se escala hasta que cada píxel cabe dentro de la pantalla, y las franjas sobrantes se rellenan con un color que eliges. No se recorta nada, a costa de bandas visibles arriba y abajo, o a izquierda y derecha.

Una buena regla: por debajo de un 8% recortado resulta invisible para quien lee, del 8% al 25% está bien si has desplazado para conservar el sujeto, y por encima del 25% deberías volver a hacer la captura con la relación de aspecto del dispositivo o pasar a Encajar todo.

Qué marco, y a qué resolución

Las capturas de esos tamaños en píxeles o mayores se mantienen nítidas en cualquier tamaño de exportación. Las más pequeñas se amplían, y lo primero que se pierde es el suavizado del texto pequeño dentro de la captura.

Cómo usar el Generador de Mockups de Dispositivos: paso a paso

1. Añade tu captura: suelta un PNG o JPG en el panel de carga, haz clic para explorar o pulsa Ctrl+V para pegar una directamente desde el portapapeles.
2. Elige un marco de dispositivo: iPhone, Android, iPad, MacBook, Navegador o Monitor. Los marcos de teléfono y tableta también cambian entre vertical y horizontal.
3. Revisa el medidor de recorte: si se oculta demasiado, arrastra el deslizador de desplazamiento o pasa a Encajar todo para no perder nada.
4. Estiliza el marco: ajusta el color del marco, el fondo, el relleno, la sombra y el reflejo. En el marco de navegador, escribe tu propio título de pestaña y dirección.
5. Exporta: elige un tamaño de exportación y luego Descargar PNG para guardar el mockup o Copiar imagen para pegarlo en una publicación.

Consejos prácticos

• Haz la captura con la relación de aspecto del dispositivo cuando puedas. Una ventana de navegador redimensionada a 1179 por 2556 antes de capturar hace que el medidor de recorte marque 0% y el mockup quede píxel a píxel.
• Usa el marco de navegador cuando la URL importe. Escribir tu propio dominio en la barra de direcciones pone tu marca en la imagen sin añadir un pie de foto.
• Mantén el relleno entre el 6% y el 12%. Menos y el dispositivo toca el borde de la publicación; más y la pantalla se vuelve ilegible en un feed.
• Haz coincidir el color del marco con la captura. Negro espacial bajo una captura en modo oscuro, Plata o Titanio bajo una clara; la interfaz del navegador sigue la misma elección automáticamente.
• Baja el reflejo en pantallas con mucho texto. Un brillo sutil se lee como cristal; uno fuerte se lee como foto de stock y oculta tu copy.
• Exporta transparente para diapositivas. El fondo NADA te da un dispositivo flotante con su sombra, listo para soltarlo en cualquier presentación o sección hero.

Privacidad

Todo ocurre en la pestaña del navegador a través de la API de canvas HTML5. Tu captura se lee desde una URL de objeto local, se dibuja en el marco y el propio navegador la codifica a PNG. No se sube, almacena ni transmite ninguna imagen, y una vez cargada la página la herramienta sigue funcionando sin conexión de red.

Preguntas frecuentes

¿Se sube mi captura a un servidor?

No. Los marcos de dispositivo se dibujan con la API de canvas HTML5 dentro de la pestaña de tu propio navegador, y tu captura se lee desde una URL de objeto local. No se envía nada a ningún sitio, así que los mockups de apps aún no publicadas, paneles internos o trabajo de clientes se quedan en tu máquina. Después de cargar la página, la herramienta sigue funcionando sin ninguna conexión de red.

¿Qué marcos de dispositivo hay disponibles?

Seis: un iPhone con Dynamic Island, un teléfono Android con cámara perforada, un iPad Pro, un MacBook Pro con muesca y base, una ventana de navegador con barra de pestañas y barra de direcciones, y un monitor de escritorio sobre un soporte. Cada marco usa las proporciones reales de pantalla de ese dispositivo, de modo que un mockup hecho aquí coincide con lo que se vería la captura en el hardware.

Mi captura no tiene la misma forma que la pantalla del dispositivo. ¿Qué ocurre?

Para eso está el medidor de recorte. Llenar pantalla escala la captura hasta que cubre toda la pantalla, lo que recorta lo que sobresale del borde, y el medidor te dice el porcentaje exacto que queda oculto. El deslizador de desplazamiento mueve entonces la ventana visible a lo largo del eje recortado para que puedas conservar la parte importante. Encajar todo escala la captura hasta que cabe entera en la pantalla y rellena las franjas restantes con un color que eliges, de modo que no se pierde nada.

¿Qué resolución debería tener mi captura?

Hazla coincidir con el dispositivo que estás enmarcando: 1179 por 2556 para el iPhone, 1080 por 2400 para el teléfono Android, 1668 por 2388 para el iPad, 3024 por 1964 para el MacBook, 1440 por 900 para la ventana del navegador y 2560 por 1440 para el monitor. Cualquier captura de ese tamaño o mayor se mantiene nítida. Las más pequeñas también funcionan, pero se amplían y los bordes suaves se hacen visibles alrededor del texto.

¿Puedo exportar el dispositivo sobre un fondo transparente?

Sí. Elige la muestra de fondo NADA y el relleno alrededor del dispositivo se exporta como alfa en lugar de color, mientras que el marco, la pantalla y la sombra proyectada se siguen dibujando. Descargar PNG conserva esa transparencia, que es lo que quieres cuando el mockup va a una diapositiva, una sección hero o una página cuyo propio fondo debe verse a través.

¿Por qué el marco del navegador se pone oscuro?

La interfaz del navegador sigue el color de marco que eliges. Elige Negro espacial y la barra de pestañas, la barra de herramientas y la barra de direcciones pasan a un tema oscuro para que el mockup coincida con una captura en modo oscuro; cualquiera de los colores de marco más claros te da el tema claro. El título de pestaña y la dirección son campos de texto simples, así que puedes poner el nombre de tu producto y tu dominio en la imagen.

Herramientas de imagen:

• Añadir Línea a Imagen
• Añadir texto a imagen
• ⬛ Calculadora de Relación de Aspecto Nuevo
• Recortar imagen en círculo Nuevo
• Creador de Collages
• Generador de Unir los Puntos
• Visor y Eliminador de Datos EXIF Nuevo
• Voltear GIF
• Voltear imagen
• Creador de GIF
• Herramienta de Pixelado de Imágenes
• Compresor de Imágenes
• Recortador de imágenes
• Mejorador de imágenes Popular
• Redimensionador de Imágenes
• Rotador de imágenes
• Divisor de imágenes Popular
• Convertidor de Imagen a Arte ASCII Nuevo
• Trazador de Imagen a SVG Nuevo
• Generador de Imágenes Placeholder Lorem Picsum Nuevo
• OCR / Imagen a Texto Nuevo
• Calculadora de Tamaño de Impresión y Resolución (DPI/PPI)
• Generador de imágenes con esquinas redondeadas Nuevo
• Embellecedor de capturas de pantalla Nuevo
• Generador de Mockups de Dispositivos Nuevo
• Añadir sombra a la imagen Nuevo
• Añadir borde a imagen Nuevo