Keynote como herramienta de diseño: cómo crear mockups y gráficos sin Photoshop

Si tienes un Mac y necesitas montar un mockup rápido, un gráfico para redes o un prototipo de interfaz, lo más probable es que tu primer impulso sea abrir Photoshop o Figma. Pero hay una herramienta ya instalada en tu equipo que hace el 80% de ese trabajo sin coste adicional: Keynote. Sí, la app de presentaciones de Apple.

Llevo años usándola para tareas que en teoría no le tocan: maquetar diapositivas para clientes, exportar gráficos para artículos, montar mockups de apps antes de pasarlos a Figma. Y funciona. No sustituye a Photoshop en retoque fotográfico ni a Figma en prototipado colaborativo, pero para diseño puntual rinde mejor de lo que la mayoría imagina.

Por qué Keynote es más que una app de presentaciones

Apple lleva años metiendo en Keynote 14 (la versión actual a fecha de este artículo, compatible con macOS Sonoma 14 y macOS Sequoia 15) funciones que técnicamente son de diseño gráfico: formas vectoriales editables, máscaras, alineación inteligente, exportación a PDF e imagen en resolución personalizada, animaciones tipo Magic Move y, desde hace unas versiones, edición de curvas Bézier dentro de las propias formas.

El cambio de chip es la otra pata. Con un MacBook Air M3 o cualquier Mac con Apple Silicon, Keynote mueve archivos pesados con cientos de objetos sin pestañear. Y a diferencia de Adobe, no te pide suscripción ni te obliga a iniciar sesión cada dos días.

Ventajas frente a Photoshop para diseño puntual

La comparación honesta: Photoshop sigue siendo el estándar para retoque fotográfico, composiciones complejas con cientos de capas y trabajo profesional con CMYK. Keynote no entra ahí.

Pero si lo que necesitas es:

• Un gráfico para Instagram o LinkedIn.
• Una portada para un blog.
• Un mockup de pantalla de iPhone o iPad.
• Una infografía con iconos y texto.
• Un prototipo visual para enseñar a un cliente.

Keynote lo hace antes y, sobre todo, gratis. Photoshop cuesta 24,19 €/mes en el plan individual (Adobe, octubre 2024). Keynote viene preinstalado en todo Mac vendido desde 2013.

Cómo configurar el lienzo de trabajo

El primer paso es dejar de pensar en "diapositivas" y empezar a pensar en "lienzos". Abre Keynote, crea una presentación en blanco (plantilla Blanco, no las prediseñadas) y ajusta el tamaño del documento.

Cambiar el tamaño del lienzo a un formato personalizado

Ve a Documento (icono del panel derecho) → pestaña Documento → Tamaño de la diapositiva → Tamaño personalizado de diapositiva.

Algunos valores útiles:

• Instagram cuadrado: 1080 × 1080.
• Story / Reel: 1080 × 1920.
• Miniatura YouTube: 1280 × 720.
• Pantalla iPhone 15 Pro: 1179 × 2556.
• Pantalla iPad Pro 13" M4: 2064 × 2752.

Una vez fijado el lienzo, ya tienes un "documento de diseño" en vez de una diapositiva.

Activar guías y reglas

Atajo: ⌘ + R activa las reglas. Keynote → Ajustes → Reglas te deja elegir unidades (píxeles, puntos, centímetros). Para diseño digital, píxeles.

Las guías inteligentes aparecen automáticamente al arrastrar objetos. Si te molestan, Ajustes → Reglas y desactiva las que sobren.

Crear mockups en Keynote paso a paso

Aquí va el caso de uso concreto: vas a montar un mockup de una pantalla de iPhone con tu app dentro. Tiempo estimado: 15 minutos.

Importar el frame del dispositivo

Apple ofrece marcos de productos descargables en su sección oficial de marketing (apple.com/legal/intellectual-property/guidelinesfor3rdparties.html y enlaces relacionados). Descarga el PNG del iPhone que necesites y arrástralo al lienzo de Keynote.

Bloquéalo con ⌘ + L para que no se mueva mientras trabajas encima.

Colocar la captura de tu app dentro del marco

Arrastra la captura sobre el marco. Ajusta tamaño manteniendo Mayúscula mientras escalas desde una esquina para conservar la proporción. Lleva la captura detrás del frame con Disponer → Enviar al fondo (o ⌘ + Mayúscula + B).

Si la pantalla del frame tiene esquinas redondeadas, usa una máscara: selecciona la captura, Formato → Imagen → Editar máscara, y recórtala al área visible.

Añadir sombra y profundidad

Panel derecho → Estilo → Sombra. Activa Sombra paralela. Valores que funcionan bien:

• Desenfoque: 20-30.
• Desplazamiento: 5-10.
• Opacidad: 25-40%.

Evita sombras negras puras. Cambia el color a un gris azulado o al complementario del fondo. Queda más profesional.

Trabajar con formas vectoriales y máscaras

Aquí está el potencial real de Keynote como herramienta de diseño. Las formas no son píxeles: son vectoriales, las puedes editar punto por punto.

Editar puntos de una forma

Inserta una forma (Forma → Básicas → Rectángulo, por ejemplo). Haz doble clic sobre ella y aparecerán los puntos de control. Puedes:

• Añadir puntos haciendo clic en cualquier parte del trazo.
• Convertir esquinas en curvas haciendo doble clic en el punto.
• Mover manejadores Bézier para curvar.

Es esencialmente lo mismo que hace la herramienta Pluma de Photoshop o Figma. Sin tutoriales de YouTube de dos horas.

Operaciones booleanas

Selecciona dos o más formas, panel derecho → Disponer → al final tienes Unir, Restar, Intersección, Excluir. Con esto montas iconos complejos a partir de figuras simples.

Ejemplo práctico: un icono de nube se construye con tres círculos y un rectángulo, los seleccionas todos y das a Unir. Resultado: forma única editable.

Máscaras con cualquier forma

Selecciona una imagen, dibuja una forma encima, selecciona ambas y Formato → Imagen → Enmascarar con forma seleccionada. La imagen queda recortada con la silueta exacta de tu forma.

Diseñar gráficos para redes sociales

Para un gráfico de Instagram, el flujo que uso:

1. Lienzo 1080 × 1080.
2. Fondo: rectángulo a pantalla completa con relleno Degradado (panel derecho → Estilo → Relleno → Gradiente avanzado).
3. Texto: SF Pro Display o New York (las dos están preinstaladas en macOS). Tamaño grande, peso Bold o Black.
4. Elementos decorativos: formas con baja opacidad detrás.
5. Logo o marca de agua en una esquina.

Para mantener consistencia entre piezas, guarda una diapositiva como plantilla: clic derecho en la miniatura izquierda → Duplicar. Luego solo cambias el texto.

Magic Move para crear vídeos cortos animados

Aquí es donde Keynote se separa de Photoshop. Magic Move es una transición que interpola automáticamente entre dos diapositivas con los mismos objetos en posiciones distintas. Lo que en After Effects te lleva configurar keyframes a mano, aquí es un clic.

Pasos:

1. Diseña la diapositiva 1 con los objetos en posición inicial.
2. Duplícala (⌘ + D en el panel de miniaturas).
3. Mueve, escala o rota los objetos en la diapositiva 2.
4. En la diapositiva 1, panel Animar → Añadir efecto → Magic Move.

Resultado: una animación fluida entre ambos estados. Exportable como vídeo (ver siguiente sección).

Lo uso para hacer micro-animaciones de logos o demos rápidas de apps. Para un Reel o un Short, sobra.

Exportar gráficos en alta resolución

Archivo → Exportar a te da varias opciones según lo que necesites:

Para PNG, marca Crear una imagen por diapositiva y elige Mejor en calidad. Si necesitas más resolución, ajusta el tamaño del lienzo al doble desde el principio.

Para exportar una sola diapositiva como imagen: clic derecho en la miniatura → Exportar diapositiva como imagen. Atajo poco conocido pero brutalmente útil.

Cuándo Keynote no es suficiente

Seamos justos. Hay casos en los que tienes que ir a otra herramienta:

• Retoque fotográfico real: niveles, curvas, máscaras de luminosidad. Aquí Photoshop o Pixelmator Pro (49,99 € en la Mac App Store, pago único).
• Prototipado interactivo colaborativo: Figma. Sin discusión.
• Ilustración vectorial compleja: Affinity Designer 2 (74,99 € pago único) o Illustrator.
• Diseño editorial multipágina: InDesign o Affinity Publisher.

Keynote cubre el terreno intermedio: gráficos rápidos, mockups, animaciones cortas, presentaciones-que-no-parecen-presentaciones. Para el resto, herramienta específica.

Plantillas y recursos para acelerar el flujo

Hay comunidades enteras dedicadas a esto. KeynoteHQ y Apple Templates ofrecen recursos gratuitos y de pago. En GitHub también hay repos con kits de wireframing en Keynote.

Mi recomendación práctica: monta tu propio archivo maestro con paletas de color, tipografías habituales, iconos que uses a menudo y plantillas de redes sociales. Lo abres, duplicas la diapositiva que necesitas y a trabajar. En 2-3 semanas tendrás tu librería personal y no echarás de menos las plantillas premium de Photoshop.

Keynote no va a sustituir a Adobe en un estudio de diseño, pero para el 80% de tareas gráficas del día a día —especialmente si trabajas solo, en remoto o como freelance— hace el trabajo. Y ya está en tu Mac.

DescubreApple Recursos #diseño #herramientas #Keynote #mockups #productividad