Maquetas de dispositivo
Device Mockup
Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.
Pone una captura de pantalla dentro de un marco de teléfono, tableta, portátil o navegador y exporta un PNG hasta a tres veces el tamaño. Los marcos se dibujan en un canvas a partir de rectángulos redondeados y no son fotografías de ningún producto, así que nada aquí es una marca registrada y la salida se mantiene nítida a cualquier escala. La captura nunca sale de la pestaña.
Suelta una captura de pantalla
PNG, JPEG o WebP. Todo ocurre en esta pestaña.
Vista previa
Los marcos son formas, no fotografías
El teléfono, la tableta, el portátil y la ventana del navegador se dibujan en un canvas con unos cuantos rectángulos redondeados. No son fotografías de ningún producto ni llevan ninguna marca registrada, así que puedes usarlos donde quieras, y se mantienen nítidos a cualquier escala de exportación. Las proporciones de pantalla son las de los dispositivos actuales —19,5:9 en un teléfono, 4:3 en una tableta, 16:10 en un portátil—, así que cuando la captura tiene otra proporción «Rellenar» recorta el centro y «Mostrar todo» deja márgenes. La captura de una página larga casi siempre pide «Alinear arriba».
Reduce el PNG exportado con el compresor de PNG, y arma una tarjeta para compartir con el generador de tarjetas para redes.
Cómo se usa
Suelta la captura de pantalla
PNG, JPEG o WebP. La fila de estadísticas de debajo muestra la proporción de la imagen frente a la proporción de la pantalla del marco, que es el número que decide cómo va la siguiente elección.
Elige el marco y luego cómo encaja la imagen
Cubrir recorta el centro para llenar la pantalla, contener muestra la imagen entera con bandas, y alinear arriba es para una captura de página larga: conserva la parte superior de la página y deja que el resto se salga por abajo, que es lo que una captura de una página con desplazamiento suele intentar mostrar.
Fija el margen y el fondo
El margen es lo que hace que la imagen parezca compuesta y no recortada. El fondo transparente es el que hay que elegir cuando la imagen va sobre una diapositiva de color o una página cuyo fondo no controlas.
Exporta a 2× salvo que sepas otra cosa
La línea bajo la vista previa da el tamaño exacto de salida para la escala que elegiste. 2× es lo correcto para una pantalla retina o un README; 3× es para imprenta o una diapositiva grande, y el archivo se hace grande.
Preguntas frecuentes
¿Esto es un iPhone? ¿Un MacBook?
No. Son formas genéricas con las proporciones que usan los dispositivos modernos: 19,5:9 para un teléfono, 4:3 para una tableta, 16:10 para un portátil. No hay ningún logotipo, ninguna fotografía de producto y ningún contorno registrado, y es deliberado: una maqueta con un dispositivo real dentro normalmente no se puede usar en marketing sin permiso.
Mi captura está recortada de una forma que no quería.
La fila de estadísticas muestra tu proporción y la del marco. Cuando difieren, cubrir tiene que recortar algo. Cambia a contener para ver la imagen entera con bandas, o a alinear arriba si la parte importante está arriba, o vuelve a hacer la captura con la proporción del marco.
¿Puedo poner varias pantallas lado a lado?
Aquí no: una imagen, un marco. Componer una escena de tres dispositivos es trabajo de maquetación, y hacerlo mal es peor que no hacerlo. Exporta cada uno sobre fondo transparente y colócalos en lo que ya estés usando para la diapositiva.
¿Mi captura de pantalla se sube?
No. Se descodifica en un ImageBitmap y se dibuja en un canvas de esta pestaña, y el PNG lo produce el propio canvas. Nada pasa por la red, que es lo importante para una captura de un producto sin publicar.
Puede recibir de
Imagen de relleno
Placeholder Image
Genera una imagen de relleno de color plano o degradado en cualquier tamaño, con las dimensiones escritas encima.
Anotar capturas de pantalla
Screenshot Annotator
Dibuja flechas, recuadros, pasos numerados y zonas difuminadas sobre una captura y exporta la imagen ya fundida.
Bordes y márgenes en imágenes
Border & Padding
Añade un borde liso, degradado o redondeado y un margen alrededor de la imagen, o la rellena hasta una proporción concreta.
Captura de código como imagen
Code Screenshot
Convierte un fragmento de código en una imagen con resaltado de sintaxis, marco de ventana y el tema que elijas.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Bordes y márgenes en imágenes
Border & Padding
Añade un borde liso, degradado o redondeado y un margen alrededor de la imagen, o la rellena hasta una proporción concreta.
Generador de tarjetas para redes
Social Card Generator
Compone una imagen de 1200×630 con título, subtítulo, línea de marca y logo opcional sobre la plantilla que elijas, y escribe las etiquetas meta que la acompañan.
Compresor de PNG
PNG Compressor
Reduce la paleta de colores y reescribe el flujo comprimido para bajar el peso de un PNG sin cambiar sus dimensiones.
Anotar capturas de pantalla
Screenshot Annotator
Dibuja flechas, recuadros, pasos numerados y zonas difuminadas sobre una captura y exporta la imagen ya fundida.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Calculadora de proporción
Aspect Ratio Calculator
Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.