Mockup gratis online

Cómo se calcula

En resumen: un mockup es una imagen realista que muestra cómo queda un logo o diseño sobre un producto real. Esta herramienta coloca tu imagen con la perspectiva correcta sobre ocho fotos: camiseta, sudadera, taza, letrero de tienda, tarjeta de presentación, portátil, móvil y póster enmarcado, y respeta los pliegues, las sombras y los brillos. Funciona entera en el navegador: sin cuenta, sin marca de agua y sin subir archivos.

Cómo se usa

1. Arrastra tu logo, elige un archivo o pégalo con Ctrl + V. Sin imagen, se dibuja un logo de ejemplo con el texto que escribas.
2. Toca un producto: la vista previa aparece al instante.
3. Ajusta tamaño y posición. Deja activado «Quitar el fondo blanco» para logos sobre blanco y activa «Llenar toda la superficie» para fotos o capturas de pantalla.
4. «Guardar mockup» descarga un PNG o JPG; «Los 8 en ZIP» genera todos los productos de una vez, ideal para presupuestos, tiendas online y presentaciones.

Cómo se calcula

El letrero, el póster o una pantalla aparecen inclinados en la foto. A partir de sus cuatro esquinas se calcula una transformación proyectiva (homografía), el método que Paul Heckbert describió en 1989 para el mapeado de texturas. Para cada píxel de la foto se busca el punto correspondiente de tu diseño y se mezclan los cuatro píxeles vecinos (interpolación bilineal): sin dientes de sierra ni costuras. La taza es curva, así que el diseño se enrolla en un cilindro, se estrecha hacia los lados y sigue un arco de elipse arriba y abajo.

Para que parezca impreso y no pegado, el diseño se multiplica por la luminosidad de la foto (modo de fusión «multiplicar» del W3C). Así los pliegues de la tela y la sombra de la taza se ven a través de la impresión, y los brillos de la cerámica siguen visibles. Las pantallas emiten luz y no se oscurecen.

Límites

Las fotos de producto miden entre 1024 y 1216 píxeles de lado: de sobra para web, tienda y redes, pero no son un archivo para imprenta. Se generaron en local para este sitio con un modelo de imagen y no muestran marcas. Un mockup es una vista previa: el color real depende del sistema de impresión y del material.

Privacidad

Tu logo se procesa solo en el navegador y nunca se sube. Solo se recuerdan los ajustes (producto, tamaño, texto), no la imagen.

También te puede servir: quitar el fondo de un logo y crear tarjetas de presentación listas para imprimir.

Preguntas frecuentes

Fuentes y base legal

• Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
• W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
• ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
• MDN – CanvasRenderingContext2D.getImageData() / putImageData()
• W3C – Web Share API
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

Última actualización: 1 de octubre de 2026 · Principios editoriales