Un website mockup es la forma rápida de enseñar una web como si ya estuviera publicada: tu diseño dentro de la pantalla de un portátil, un iMac o un monitor, con su luz y su perspectiva. Para un cliente o para tu portfolio, se entiende mucho mejor que una captura suelta.
Aquí tienes 13 mockups PSD gratis de equipos actuales, nada de MacBook de hace diez años. He revisado la ficha de cada uno en octubre de 2026: licencia, resolución y si te pide registro para descargar.
Respuesta rápida: para MacBook, el de ls.graphics o los de Pixeden. Para iMac, el de Pixeden sobre hormigón. Si quieres un portátil sin marca, los de Unblast. Para webs responsive, el escaparate de Pixeden. Casi todos llevan objeto inteligente: abres, pegas tu diseño y guardas.
Qué mockup elegir para presentar una web
- Portátil: el más versátil. Va bien con landings, tiendas online y webs corporativas.
- iMac o monitor: para webs anchas, dashboards y paneles de administración, donde el diseño necesita pantalla grande.
- Multi-dispositivo: portátil, tablet y móvil en la misma escena. Es la manera de demostrar que la web es responsive.
- Ventana de navegador: si solo quieres el marco de Chrome o Safari, sin aparato, tienes mi selección de mockups de navegador web.
Mockups de portátil en PSD (MacBook y Windows)
1
MacBook Pro 16 pulgadas (ls.graphics)
Vista limpia del MacBook Pro de 16 pulgadas en tres estilos de color, a 6000 × 4500 px. Todo va por capas separadas y con objeto inteligente. Es mi primera opción para presentar una web sin distracciones.
Personal y comercial · PSD, Figma y Sketch · Pide iniciar sesión · Descargar en ls.graphics
2
MacBook Pro sobre sillón bouclé (Pixeden)
Escena de interiorismo: el portátil abierto sobre un sillón de tela bouclé, con luz cálida de estudio. Encaja con portfolios y webs editoriales. Mide 6600 × 5000 px y pesa 198 MB.
Personal y comercial, sin atribución · PSD · Descargar en Pixeden
3
MacBook sobre silla de diseño (Pixeden)
El portátil sobre una silla de madera de estilo Eames, en un interior limpio. Tiene capas de color para cambiar el equipo, la silla, el cojín y el fondo. 6500 × 5100 px a 300 ppp.
Personal y comercial, sin atribución · PSD · Descargar en Pixeden
4
MacBook Neo en un escritorio (Mockup Cloud)
El MacBook Neo de frente, sobre un escritorio de aire retro con lámpara y estantería. Tiene más personalidad que un fondo neutro, ideal para webs de marcas con carácter. 6000 × 4500 px, y se puede editar online.
Licencia extendida: personal y comercial · PSD · Descargar en Mockup Cloud
5
Surface Laptop Studio (ls.graphics)
Uno de los pocos mockups gratis de un portátil Windows con buena calidad, en vista lateral y con versión clay. Llega a 6000 × 4500 px. Úsalo si tu cliente no trabaja con Mac o si la web es de software para Windows.
Personal y comercial · PSD · Pide iniciar sesión · Descargar en ls.graphics
6
Portátil blanco sin marca (Unblast)
Un portátil blanco genérico sobre un fondo abstracto. Si no quieres que la presentación parezca un anuncio de Apple, es la opción. Publicado en octubre de 2026.
Personal y comercial · PSD · Descargar en Unblast
7
Portátil con la web en pantalla (Unblast)
Escena realista con un solo objeto inteligente, así que no hay forma de perderse: abres, pegas la captura y listo. 5000 × 3700 px.
Personal y comercial · PSD · Descargar en Unblast
Mockups de iMac y monitor en PSD
8
iMac 24 pulgadas sobre hormigón (Pixeden)
Foto realista del iMac de 24 pulgadas apoyado en un suelo de hormigón. Trae capas de color para cambiar el acabado del equipo. A 8000 × 5700 px y 300 ppp, también sirve para imprimir.
Personal y comercial, sin atribución · PSD · Descargar en Pixeden
9
iMac 24 pulgadas en vista limpia (ls.graphics)
El iMac de 24 pulgadas de frente, con una pantalla muy nítida. Viene en PSD y también en Figma, así que es buena opción si diseñas la web en Figma y no quieres pasar por Photoshop.
Personal y comercial · PSD, Figma y Sketch · Pide iniciar sesión · Descargar en ls.graphics
10
iMac para webs (Unblast)
Pensado justo para esto: simula cómo se ve un sitio en una pantalla grande de escritorio. PSD por capas, con la pantalla lista para sustituir.
Personal y comercial · PSD · Descargar en Unblast
11
Monitor de ordenador genérico (Pixel Surplus)
Un monitor de escritorio sin manzana a la vista. Es el que buscas si necesitas un «mockup de ordenador» que no sea un iMac. Va bien con webs de empresa y paneles de gestión.
Personal y comercial · PSD · Se descarga desde el carrito, a 0 € · Descargar en Pixel Surplus
Mockups multi-dispositivo para webs responsive
12
Escaparate de pantallas (Pixeden)
MacBook, iPad e iPhone juntos, con plantas de decoración que le dan un aire fresco. Tres objetos inteligentes, uno por pantalla, a 5000 × 3400 px. Es el clásico para enseñar la versión de escritorio y la de móvil a la vez.
Personal y comercial, sin atribución · PSD · Descargar en Pixeden
13
Portátil, tablet y móvil (UI8)
Escena multi-dispositivo con los tres equipos, las sombras y el fondo separados, así que puedes moverlos y crear tu propia composición. 6033 × 4194 px a 300 ppp, y se puede abrir en Photopea.
Revisa la licencia de UI8 · PSD · Pide cuenta gratis · Descargar en UI8
Tip: ¿presentas a un cliente y necesitas más ángulos, o la misma escena en varios colores? En Envato Elements tienes una biblioteca enorme de mockups de portátil y de webs con licencia comercial. Con una suscripción descargas todos los que necesites.
Tabla resumen: los 13 mockups de un vistazo
| N.º | Mockup | Web | Licencia | ¿Pide cuenta? |
|---|---|---|---|---|
| 1 | MacBook Pro 16 | ls.graphics | Personal y comercial | Sí |
| 2 | MacBook Pro en sillón | Pixeden | Personal y comercial | No |
| 3 | MacBook en silla de diseño | Pixeden | Personal y comercial | No |
| 4 | MacBook Neo | Mockup Cloud | Personal y comercial | Revisar |
| 5 | Surface Laptop Studio | ls.graphics | Personal y comercial | Sí |
| 6 | Portátil blanco sin marca | Unblast | Personal y comercial | No |
| 7 | Portátil con web | Unblast | Personal y comercial | No |
| 8 | iMac 24 sobre hormigón | Pixeden | Personal y comercial | No |
| 9 | iMac 24 vista limpia | ls.graphics | Personal y comercial | Sí |
| 10 | iMac para webs | Unblast | Personal y comercial | No |
| 11 | Monitor genérico | Pixel Surplus | Personal y comercial | Carrito a 0 € |
| 12 | Escaparate de pantallas | Pixeden | Personal y comercial | No |
| 13 | Portátil, tablet y móvil | UI8 | Revisar | Sí |
Para un trabajo de cliente, quédate con los que indican uso comercial. En el marcado con «Revisar», la ficha no lo dice claro: compruébalo antes de entregar.
Sin Photoshop: cómo usarlos online
- Photopea: editor gratis en el navegador que abre archivos PSD con objetos inteligentes. Sirve para cualquiera de los 13 de la lista.
- Generador gratis de ls.graphics: pones tu diseño en un mockup sin salir del navegador y lo exportas en PNG o JPG. No hace falta Photoshop.
- Mockup Cloud: el MacBook Neo de la lista (el número 4) se puede editar online desde su propia ficha.
¿Solo quieres meter una captura en una ventana de navegador en dos clics? Shots.so y Screely lo hacen, y los tienes en los mockups de navegador web.
Cómo meter tu web en el mockup paso a paso
- Haz la captura a buen tamaño. En Chrome, abre las herramientas de desarrollo (F12), pulsa Ctrl+Mayús+P y escribe «screenshot». «Capture screenshot» guarda lo que ves en pantalla y «Capture full size screenshot», la página entera.
- Abre el PSD y localiza la capa del objeto inteligente. Suele llamarse «Your Design Here», «Screen» o algo parecido.
- Haz doble clic en su miniatura. Se abre un documento aparte con el tamaño exacto de la pantalla: ese es el tamaño al que debe ir tu captura.
- Pega la captura, ajústala con Ctrl+T (Cmd+T en Mac) y guarda con Ctrl+S.
- Vuelve al archivo principal. Tu web ya aparece en la pantalla, con la perspectiva y los reflejos del mockup. Exporta en JPG para el portfolio o en PNG si el fondo es transparente.
Un consejo: enseña la parte de arriba de la web, la que se ve sin hacer scroll. Es lo que mejor luce dentro de un portátil. Si esa zona todavía no te convence, tienes ideas en estas 20 hero sections de 2026.
¿Todavía no tienes la web que vas a presentar?
Mi kit de Figma gratis trae cinco secciones de landing (hero, beneficios en bento, testimonios, CTA y footer) en escritorio y en móvil. Cambias los colores a los de tu marca, exportas y lo metes en el portátil y el móvil del mockup. Te lo envío al correo.
Preguntas frecuentes sobre mockups web en PSD
¿Qué es un website mockup?
Es un archivo, casi siempre un PSD de Photoshop, que simula un dispositivo real con la pantalla editable. Pegas la captura de tu web y obtienes una imagen realista para presentaciones, portfolios o redes.
¿Puedo usar estos mockups en proyectos de clientes?
En la mayoría, sí. Pixeden permite el uso personal y comercial sin atribución, y ls.graphics y Mockup Cloud también admiten el uso comercial. Unblast y Pixel Surplus lo indican en cada ficha. Solo en el número 13, de UI8, no está claro, así que compruébalo antes.
¿Necesito Photoshop para usarlos?
No es imprescindible. Photopea abre los PSD gratis en el navegador, y ls.graphics y Mockup Cloud tienen editores online. Photoshop sigue siendo lo más cómodo si vas a retocar luces o sombras.
¿Por qué casi todos los mockups gratis son de Apple?
Porque la mayoría de autores los diseña con equipos de Apple. Si quieres algo neutro, tienes el Surface Laptop Studio, el portátil blanco sin marca y el monitor genérico (números 5, 6 y 11).
¿Dónde encuentro mockups de móvil o de otros soportes?
Para móviles, tienes los mockups PSD de iPhone y Galaxy. Para tarjetas, packaging, ropa y demás, mira estas 15 webs para descargar mockups gratis.
Mi recomendación según lo que presentes
Una landing o una web corporativa: el MacBook Pro de ls.graphics o el portátil blanco de Unblast. Fondos limpios, el diseño es el protagonista.
Un portfolio o una marca con personalidad: las escenas de Pixeden (sillón y silla de diseño) o el MacBook Neo de Mockup Cloud.
Una web responsive: el escaparate de Pixeden, con el portátil y el móvil juntos. Si después quieres mostrar el móvil en detalle, súmale un mockup de iPhone.
¿Usas algún mockup gratis de portátil o de monitor que no esté aquí? Déjalo en los comentarios y lo reviso para la próxima actualización.
Este artículo incluye algún enlace de afiliado: si compras a través de él, recibo una pequeña comisión sin coste adicional para ti.
