Cómo crear un mockup de dispositivo
- Suelta la captura de tu app o tu web en el recuadro de arriba, puedes añadir un lote entero de capturas a la vez.
- Elige un Marco del dispositivo: Móvil, Tablet, Portátil o Ventana de navegador.
- Elige un Fondo (un degradado, un color sólido o transparente) y activa o desactiva la sombra, y luego ajusta el Margen alrededor del dispositivo si lo quieres más ceñido o más holgado.
- Pulsa Generador de Mockups de Dispositivos, cada captura se enmarca al instante, dentro de tu propio navegador.
- Descarga el PNG de alta resolución de cada captura; el nombre del dispositivo se añade al nombre del archivo, así que un lote nunca se mezcla.
Por qué enmarcar una captura en un mockup de dispositivo
Una captura en crudo (un rectángulo plano de píxeles con la barra de estado y el cromo del navegador incrustados, o sin nada de eso) se lee como “una foto de mi app”, no como un producto terminado. Envolverla en un marco de móvil, tablet, portátil o navegador transmite contexto al instante: así es como se ve la app en un móvil de verdad, así es la web en una pestaña real. Esa única señal visual es lo que separa una captura de la App Store, una imagen principal de una landing, una diapositiva de un pitch deck o un caso de estudio de portafolio de un simple recorte de la vista previa de tu editor.
Hacerlo a mano en una herramienta de diseño significa encontrar (o comprar) un recurso gráfico del dispositivo, importar tu captura, recortarla a la forma exacta de la pantalla, alinearla al píxel dentro del bisel y añadir tú mismo el fondo y la sombra, y repetirlo para cada captura del conjunto. Esta herramienta hace todo eso de una sola vez: eliges dispositivo, fondo y sombra, y cada captura subida se recorta desde el centro al área de pantalla y se compone con el marco automáticamente, con una resolución alta y constante en todo el lote.
Los propios marcos se dibujan como formas vectoriales incluidas en la página, así que el bisel se mantiene nítido a la resolución de exportación en lugar de ser un mapa de bits ampliado, y no hay que descargar nada de ningún sitio mientras trabajas.
Sin subidas, tu captura nunca sale de tu dispositivo
Las capturas de una app se toman muchas veces bastante antes del lanzamiento, desde una compilación interna, o de los datos reales de un cliente en un panel, exactamente el tipo de imagen que no quieres que acabe en el servidor de un tercero cualquiera, ni siquiera un momento. Esta herramienta decodifica tu captura, la recorta y dibuja el marco, el fondo y la sombra enteramente con el motor canvas de tu propio navegador. El PNG final se genera y se descarga igual, sin cuenta de usuario, sin ida y vuelta a ningún servidor y sin que ningún tercero vea un solo píxel.
Eso también significa que no hay ninguna cuota de subida que agotar: cuántas capturas puedes enmarcar de una vez lo limita la memoria de tu propio equipo, no un plan de pago.
Usos habituales
- Conjuntos de capturas para la App Store y Google Play que necesitan un marco de móvil coherente en todas las pantallas.
- Imágenes principales de una landing que muestran el producto dentro de un portátil o una ventana de navegador.
- Pitch decks y actualizaciones para inversores que piden una imagen cuidada del producto en un dispositivo y no una captura pelada.
- Piezas de portafolio y casos de estudio que presentan un diseño de interfaz dentro de un marco de dispositivo.
- Publicaciones en redes anunciando una función nueva, enmarcadas en un mockup de móvil o de navegador para darles más acabado.
- Marcar después el resultado enmarcado con la herramienta de Anotar una Captura de Pantalla, o redimensionarlo al tamaño exacto en píxeles que exija una plataforma.
